<style>
body {
    margin-top:40px;
}
.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}
</style>

<form class="master-form" action="{{ site_url('adm/deposit/save') }}" method="POST">

	<div class="modal-header">
		<h5 class="modal-title">{{ content_title }}</h5>
		<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>

	<div class="modal-body">
	
	<div class="stepwizard col-md-offset-3">
		<div class="stepwizard-row setup-panel">
			<div class="stepwizard-step">
				<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
				<p>Identitas Tamu</p>
			</div>
			<div class="stepwizard-step">
				<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
				<p>Detail Deposit</p>
			</div>
			{# <div class="stepwizard-step">
				<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
				<p>Biaya</p>
			</div> #}
		</div>
  	</div>

    <div class="row setup-content" id="step-1">
		<div class="col-md-12">
			<input class="form-control" name="id" id="id" value="{{ id }}" type="hidden">
			<input class="form-control" name="payment_id" id="payment_id" value="{{ check_array_key(get_data, 'payment_id') }}" type="hidden">
			<input class="form-control" name="interval" id="interval" value="{{ check_array_key(get_data, 'interval_stay') }}" type="hidden">
			<input class="form-control" name="guest_group_discount" id="guest_group_discount" value="{{ check_array_key(get_data, 'guest_group_discount') }}" type="hidden">
			<input class="form-control" name="room-id" id="room-id" value="{{ check_array_key(get_data, 'room_id') }}" type="hidden">

			<div class="form-group">
				<label class="control-label">Nomor Identitas</label>
				<select class="form-control select2" id="identity_number" name="identity_number" tabindex="1" required="required">
					<option value="register">- Registrasi Baru -</option>
					{% if guest_data %}
					{% for guest_row in guest_data %}
					<option value="{{ guest_row.guest_id }}"
						{% if same(guest_row.guest_id, check_array_key(get_data, 'guest_id')) %}
						selected="selected" {% endif %}>{{ guest_row.guest_identity_number }} | {{ guest_row.guest_name }} ({{ guest_row.guest_phone }})</option>
					{% endfor %}
					{% endif %}
				</select>

				<input type="text" class="form-control mt-1" name="identity_number_new" id="identity_number_new" tabindex="1" placeholder="3200000089091234"
					value="{{ check_array_key(get_data, 'guest_identity_number') }}" required="required">
			</div>

			<div class="form-group">
				<label class="control-label">Nama Tamu</label>
				<input type="text" class="form-control" name="guest_name" id="guest_name" tabindex="2" placeholder="Mr. Aleen Smitham"
					value="{{ check_array_key(get_data, 'guest_name') }}" required="required">
			</div>

			<div class="form-group">
				<label class="control-label" >Telepon</label>
				<input type="text" class="form-control" name="guest_phone" id="guest_phone" tabindex="3" placeholder="0811 0000 2345"
					value="{{ check_array_key(get_data, 'guest_phone') }}" required="required">
			</div>

			<div class="form-group">
				<label class="control-label">Alamat</label>
				<textarea class="form-control" name="guest_address" id="guest_address" tabindex="4" placeholder="Weber Vista Gulgowskiburgh, DE 48529">{{ check_array_key(get_data, 'guest_address') }}</textarea>
			</div>

			<button class="btn btn-primary nextBtn float-right" type="button">Selanjutnya</button>
		</div>
    </div>

	<div class="row setup-content" id="step-2">
		<div class="col-md-12">
			
			<div class="form-group">
				<label class="control-label">Tanggal</label>
				<input type="date" class="form-control" name="date" tabindex="1" value="{{ check_array_key(get_data, 'deposit_date') }}" required="required">
			</div>

			{# <div class="form-group"> #}
				
			{# </div> #}

			<div class="form-group">

				{# Line 1 #}
				<div class="row">
					<div class="col-md-6">
						<label class="control-label">Metode</label>
						<select class="form-control select2" name="payment_method_1" tabindex="4" required="required">
							<option value="">- Pilih -</option>
							{% if paymethod_data %}
							{% for paymethod_row in paymethod_data %}
							<option value="{{ paymethod_row.payment_method_id }}"
								{% if same(paymethod_row.payment_method_id, check_array_key(get_data, 'payment_method_1')) %}
								selected="selected" {% endif %}>{{ paymethod_row.payment_method_name }}</option>
							{% endfor %}
							{% endif %}
						</select>
					</div>
					<div class="col-md-6">
						<label class="control-label">Jumlah Bayar</label>
						<input type="text" class="form-control currency-mask text-right" name="amount_1" tabindex="3" placeholder="499,990"
							value="{{ amount_1 }}" required="required">
					</div>
				</div>

				{# Line 2 #}
				<div class="row mt-2">
					<div class="col-md-6">
						<select class="form-control select2" name="payment_method_2" tabindex="4">
							<option value="">- Pilih -</option>
							{% if paymethod_data %}
							{% for paymethod_row in paymethod_data %}
							<option value="{{ paymethod_row.payment_method_id }}"
								{% if same(paymethod_row.payment_method_id, check_array_key(get_data, 'payment_method_2')) %}
								selected="selected" {% endif %}>{{ paymethod_row.payment_method_name }}</option>
							{% endfor %}
							{% endif %}
						</select>
					</div>
					<div class="col-md-6">
						<input type="text" class="form-control currency-mask text-right" name="amount_2" tabindex="3" placeholder="499,990"
							value="{{ amount_2 }}">
					</div>
				</div>

				{# Line 3 #}
				<div class="row mt-2">
					<div class="col-md-6">
						<select class="form-control select2" name="payment_method_3" tabindex="4">
							<option value="">- Pilih -</option>
							{% if paymethod_data %}
							{% for paymethod_row in paymethod_data %}
							<option value="{{ paymethod_row.payment_method_id }}"
								{% if same(paymethod_row.payment_method_id, check_array_key(get_data, 'payment_method_3')) %}
								selected="selected" {% endif %}>{{ paymethod_row.payment_method_name }}</option>
							{% endfor %}
							{% endif %}
						</select>
					</div>
					<div class="col-md-6">
						<input type="text" class="form-control currency-mask text-right" name="amount_3" tabindex="3" placeholder="499,990"
							value="{{ amount_3 }}">
					</div>
				</div>
			</div>

			<div class="form-group">
			<label class="control-label">Keterangan</label>
				<textarea class="form-control" name="description" tabindex="5">{{ check_array_key(get_data, 'deposit_description') }}</textarea>
			</div>

			<div class="form-group">
				<label class="control-label">Shift</label>
				<select class="form-control select2" name="shift" tabindex="14" required="required">
					<option value="">- Pilih -</option>
					{% if shift_data %}
					{% for shift_row in shift_data %}
					<option value="{{ shift_row.shift_id }}"
						{% if same(shift_row.shift_id, check_array_key(get_data, 'shift_id')) %}
						selected="selected" {% endif %}>{{ shift_row.shift_name }} ({{ shift_row.shift_time }})</option>
					{% endfor %}
					{% endif %}
				</select>
			</div>

			<button class="btn btn-default prevBtn float-left" type="button">Sebelumnya</button>

			<div class="btn-group float-right">
				<button type="button" class="btn btn-warning waves-effect master-cancel" data-dismiss="modal">Batal</button>
				<button class="btn btn-success btn-save float-right" name="action" value="save_close" type="submit">
					Simpan
				</button>
			</div>
			
		</div>
	</div>
	
	</div>

</form>

<script type="text/javascript">

$(document).ready(function () {
	var navListItems = $('div.setup-panel div a'),
			allWells = $('.setup-content'),
			allNextBtn = $('.nextBtn'),
			allPrevBtn = $('.prevBtn');

	allWells.hide();

	navListItems.click(function (e) {
		e.preventDefault();
		var $target = $($(this).attr('href')),
				$item = $(this);

		if (!$(this).hasClass('disabled')) {
			
			navListItems.removeClass('btn-primary').addClass('btn-default');
			$item.removeClass('btn-default');
			$item.addClass('btn-primary');

			
			allWells.hide();
			$target.show();
			$target.find('input:eq(0)').focus();
		}
	});
	
	allPrevBtn.click(function(){
		var curStep = $(this).closest(".setup-content"),
			curStepBtn = curStep.attr("id"),
			prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

			prevStepWizard.removeAttr('disabled').trigger('click');
	});

	allNextBtn.click(function(){
		var curStep = $(this).closest(".setup-content"),
			curStepBtn = curStep.attr("id"),
			nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
			curInputs = curStep.find("input[type='text'],input[type='url']"),
			isValid = true;

		{# $(".form-group").removeClass("was-validated");
		for(var i=0; i<curInputs.length; i++){
			if (!curInputs[i].validity.valid){
				isValid = false;
				$(curInputs[i]).closest(".form-group").addClass("was-validated");
			}
		} #}

		if (isValid)
			nextStepWizard.removeAttr('disabled').trigger('click');
	});

	$('div.setup-panel div a.btn-primary').trigger('click');
});

var UrlIdentity   = "{{ site_url('adm/booking/check_identity_number') }}";

var elSelectID = "#identity_number";
var elTextID1 = "#guest_name";
var elTextID2 = "#guest_phone";
var elTextID3 = "#guest_address";
var elTextID4 = "#on_behalf";
var elAddIdentity = "#identity_number_new";
var elTextID1Label = "#guest_name_text";
var elTextID2Label = "#guest_phone_text";

window.FORM.handleCheckFieldIdentityNumber(UrlIdentity, elSelectID, elTextID1, elTextID2, elTextID3, elTextID4, elAddIdentity, elTextID1Label, elTextID2Label);
window.INPUT.handleSelect2();
{# window.INPUT.handleSelect2AddNew(); #}
window.INPUT.handleMaskCurrency();

</script>
