@extends(\Auth::user()->role != 10 ? 'layout' : 'layoutfrontdesk')

@section('title', 'Rate Code | Add Rate Code')

@section('content')

	<!-- Page header -->
	<div class="page-header page-header-light">
		<div class="page-header-content header-elements-md-inline">
			<div class="page-title d-flex">
				<h4> Add Rate Code</h4>
				<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
			</div>
		</div>
	</div>
	<!-- /page header -->

	<!-- Content area -->
	<div class="content">

		<!-- Hover rows -->
		<div class="card">
			<div class="card-header header-elements-inline">
			</div>
			<div class="card-body">
				<div class="row">
					<div class="col-md-7">
						<form id="submitjenis_kamar" class="form-validate-jquery" action="{{ route('ratecode.store')}}" method="post">
							@csrf
							<fieldset class="mb-3">
								<legend class="text-uppercase font-size-sm font-weight-bold">Data Rate Code</legend>

                                @if(in_array(\Auth::user()->role, [1,2,5]))
                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Hotel</label>
                                    <div class="col-lg-10">
                                        <div class="form-control-plaintext">
                                            {{\Session::get('hotel_name')}}
											<input type="hidden" name="hotel_id" id="hotel_id" value="{{\Session::get('hotel_id')}}">
                                        </div>
                                    </div>
                                </div>
								@else
								<input type="hidden" name="hotel_id" id="hotel_id" value="{{\Auth::user()->hotel_id}}">
                                @endif

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Segment <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
                                        <select name="segment_ratecode" id="segment_ratecode" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
											<option value="">-- Select Segment Ratecode --</option>
											@foreach(config('custom.segment_ratecodes') as $key => $val)
												<option value="{{$key}}">{{$val}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Room Type <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
                                        <select name="jenis_kamar_id" id="jenis_kamar_id" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
											<option value="">-- Select Room Type --</option>
											@foreach($jenis_kamars as $jenis_kamar)
												<option value="{{$jenis_kamar->id}}">{{$jenis_kamar->nama}}</option>
											@endforeach
										</select>
									</div>
								</div>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Rate Code <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
                                        <input type="text" name="rate_code" id="rate_code" class="form-control" required />
										<span class="text-danger" id="warning-ratecode"></span>
									</div>
								</div>

                                <div class="form-group row">
									<label class="col-form-label col-lg-2">Room Rate <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
                                        <input type="text" name="harga" id="harga" class="harga_class input_comma_custom form-control" min="0" value="0" required />
									</div>
								</div>

                                {{-- @if (in_array(propertiTipe(), [3])) --}}
                                <div class="form-group row">
									<label class="col-form-label col-lg-2">Charge type<span class="text-danger">*</span> </label>
									<div class="col-lg-10">
                                        <select name="tipe_rate_code" id="tipe_rate_code" class="form-control form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="border-teal" required>
											<option value="">-- Select Charge Type --</option>
											@foreach(config('custom.tipe_rate_code') as $idx=>$type)
												<option value="{{$idx}}">{{$type}}</option>
											@endforeach
										</select>
									</div>
								</div>
                                {{-- @endif --}}

                                @if (in_array(propertiTipe(), [1,2,3]))
                                <div class="form-group row">
									<label class="col-form-label col-lg-2">Include Arrangement</label>
									<div class="col-lg-10 form-inline">
										<input type="checkbox" id="include_breakfast" name="include_breakfast" value="1">
										{{-- &nbsp; --}}
										{{-- <input type="text" name="harga_breakfast" id="harga_breakfast" class="harga_class form-control" min="1" value="0" disabled /> --}}
									</div>
								</div>

                                <div class="form-group row">
                                    <label class="col-form-label col-lg-2">Arrangement</label>
                                    <div class="col-lg-10 form-inline">
                                        <select name="arrangement_id" id="arrangement_id" class="form-control form-control-select2" autocomplete="off" disabled>
                                            <option value="">-- Select Arrangement Code --</option>
                                            @foreach ($arrangement_codes as $arrangement_code)
                                                <option value="{{$arrangement_code->id}}">{{$arrangement_code->arrangement_code}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @endif

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Period of Validity <span class="text-danger">*</span> </label>
									<div class="col-lg-10">
										<input type="text" name="tanggal_berlaku" id="tanggal_berlaku" class="form-control daterange-single" autocomplete="off" required>
									</div>
								</div>

                                @if (in_array(propertiTipe(), [1]))
								<div class="form-group row">
                                    <label class="col-form-label col-lg-2">Chart of Accounts</label>
                                    <div class="col-lg-10 form-inline">
                                        <select name="coa_id" id="coa_id" class="form-control form-control-select2" autocomplete="off">
                                            <option value="">-- Select COA --</option>
                                            @foreach ($coas as $coa)
                                                <option value="{{$coa->id}}">({{ $coa->account_no }}) {{$coa->description}}</option>
                                            @endforeach
                                        </select>
                                        <span class="text-danger">If null will be fill with default value COA: {{@$ratecode_def->coaRateCode->account_no}} - {{@$ratecode_def->coaRateCode->description}}</span>
                                    </div>
                                </div>
                                @endif

								{{--
									<div class="form-group row">
										<label class="col-form-label col-lg-2">Detail Harga (Optional)</label>
										<div class="col-lg-10" id="form-detail-harga">
											<div class="row">
												<div class="col-lg-4">
													Shop:
												</div>
												<div class="col-lg-4">
													Produk:
												</div>
												<div class="col-lg-3">
													Harga:
												</div>
											</div>
											<div class="row mb-2" data-idx="0" id="row_0">
												<div class="col-lg-4">
	                                                <select name="shop[]"
	                                                        id="shop0"
	                                                        data-idx="0"
															onchange="getProduk(0, this.value)"
	                                                        class="form-control form-control-select2"
	                                                        data-container-css-class="border-teal"
	                                                        data-dropdown-css-class="border-teal"
	                                                >
	        											<option value="">-- Pilih Shops --</option>
	        											@foreach($shops as $shop)
	        												<option value="{{$shop->id}}">{{$shop->nama}}</option>
	        											@endforeach
	        										</select>
												</div>
												<div class="col-lg-4">
	                                                <select name="produk[]"
	                                                        id="produk0"
	                                                        data-idx="0"
															onchange="assignHarga(0, this.value)"
	                                                        class="form-control form-control-select2"
	                                                        data-container-css-class="border-teal"
	                                                        data-dropdown-css-class="border-teal"
	                                                >
	        											<option value="" data-harga="0">-- Pilih Produk --</option>
	        										</select>
												</div>
												<div class="col-lg-3">
													<input type="number"
														   class="form-control"
														   name="harga_detail[]"
														   id="harga_detail0"
														   data-idx="0"
	                                                       min="0"
													>
												</div>
												<div class="col-lg-1">
													<button type="button" onclick="tambahDetailHarga()" class="btn btn-success">
														<i class="fas fa-plus-circle"></i>
													</button>
												</div>
											</div>
										</div>
									</div>
								--}}

                                <div class="header-elements-inline">
                                    <legend>
                                        Setting Booking Engine &nbsp;&nbsp;&nbsp;
                                    </legend>
                                    <div class="header-elements">
                                        <div class="list-icons">
                                            <a class="list-icons-item" href="#setting_bnl" data-toggle="collapse" onclick="changeIcon(this)"><i class="icon-circle-right2"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div id="setting_bnl" class="collapse">
                                    <div class="form-group row">
                                        <label class="col-form-label col-lg-2">Rate plan name</label>
                                        <div class="col-lg-10">
                                            <input type="text" name="be_rate_name" class="form-control border-teal border-1 @error('be_rate_name') is-invalid @enderror" placeholder="BnL user (if null default using rate code name)..."  autofocus autocomplete="off" value="{{ old('be_rate_name') ? old('be_rate_name') : null }}">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="col-lg-4">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="checkbox" name="be_non_refundable" value="1" class="form-check-input-styled-info" data-fouc>
                                                    Status Non-refundable
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="checkbox" name="be_non_reschedulable" value="1" class="form-check-input-styled-info" data-fouc>
                                                    Status Non-reschedulable
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="form-check">
                                                <label class="form-check-label">
                                                    <input type="checkbox" name="be_breakfast" value="1" class="form-check-input-styled-info" data-fouc>
                                                    Status Breakfast
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

							</fieldset>
							<div class="text-right">
								<a href="{{ url('/ratecode')}}" class="btn btn-light">Back <i class="icon-undo"></i></a>
								<button type="submit" id="submit" class="btn btn-primary submitBtn">Save <i class="icon-paperplane ml-2"></i></button>
							</div>
						</form>
					</div>
				</div>
			</div>

		</div>
		<!-- /hover rows -->

	</div>
	<!-- /content area -->
@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/pnotify.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/validation/validate.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/selects/select2.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/spin.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>

<!-- <script src="{{asset('global_assets/js/plugins/ui/moment/moment.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/daterangepicker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/anytime.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/picker.time.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/pickers/pickadate/legacy.js')}}"></script> -->

<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/inputs/jquery.mask.js')}}"></script>

<!-- Helpers JS -->
<script src="{{asset('assets/js/custom.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/form_checkboxes_radios.js')}}"></script>
<script type="text/javascript">
// Basic initialization
$('.daterange-single').daterangepicker({
	applyClass: 'btn-primary',
	cancelClass: 'btn-light',
    startDate: "{{date( 'd-m-Y', strtotime(getSystemDate()) )}}",
    endDate: "{{date('d-m-Y', strtotime(getSystemDate()) )}}",
	locale: {
	  format: 'DD-MM-YYYY'
	}
});

//Enable Disabled Harga Breakfast
$('#include_breakfast').on('click', function(){
	let is_checked = $('#include_breakfast').is(':checked');
	if(is_checked){
		// $('#harga_breakfast').removeAttr('disabled');
		$('#arrangement_id').removeAttr('disabled').attr('required', true);
	}
	else{
		// $('#harga_breakfast').attr('disabled', 'disabled');
		$('#arrangement_id').attr('disabled', 'disabled').removeAttr('required');
	}
});

{{--
	// JS Multiple Jenis Kamar
	// let new_idx = 1;
	//
	// function tambahDetailHarga(){
	// 	let html = `<div class="row mb-2" data-idx="${new_idx}" id="row_${new_idx}">
	//                     <div class="col-lg-4">
	//                         <select name="shop[]"
	//                                 id="shop${new_idx}"
	//                                 data-idx="${new_idx}"
	// 								onchange="getProduk(${new_idx}, this.value)"
	//                                 class="form-control form-control-select2"
	//                                 data-container-css-class="border-teal"
	//                                 data-dropdown-css-class="border-teal"
	//                                 required
	//                         >
	//                             <option value="">-- Pilih Shops --</option>
	//                             @foreach($shops as $shop)
	//                                 <option value="{{$shop->id}}">{{$shop->nama}}</option>
	//                             @endforeach
	//                         </select>
	//                     </div>
	//                     <div class="col-lg-4">
	//                         <select name="produk[]"
	//                                 id="produk${new_idx}"
	//                                 data-idx="${new_idx}"
	// 								onchange="assignHarga(${new_idx}, this.value)"
	//                                 class="form-control form-control-select2"
	//                                 data-container-css-class="border-teal"
	//                                 data-dropdown-css-class="border-teal"
	//                                 required
	//                         >
	//                             <option value="" data-harga="0">-- Pilih Produk --</option>
	//                         </select>
	//                     </div>
	//                     <div class="col-lg-3">
	//                         <input type="number"
	//                                class="form-control"
	//                                name="harga_detail[]"
	//                                id="harga_detail${new_idx}"
	//                                data-idx="${new_idx}"
	//                                min="0"
	//                         >
	//                     </div>
	//                     <div class="col-lg-1">
	//                         <button type="button" onclick="removeDetail(${new_idx})" class="btn btn-danger">
	//                             <i class="fas fa-times-circle"></i>
	//                         </button>
	//                     </div>
	//                 </div>`;
	// 				new_idx++;
	// 	$('#form-detail-harga').append(html);
	//     $('.form-control-select2').select2();
	// }
--}}

function removeDetail(id){
	$('#row_'+id).remove();
}

//Get Option Produk
function getProduk(idx, val){
	// console.log('idx: '+idx);
	// console.log('value: '+val)
	$.ajax({
		type: 'GET',
		url: "{{ url('/get-produk-options/')}}/"+val,
		success: function (data) {
			$('#produk'+idx).html(data);
		}
	});
}

//assign harga
function assignHarga(idx, value){
	let harga = $('#produk'+idx).find('option[value="'+value+'"]').attr('data-harga');
	$('#harga_detail'+idx).val(parseInt(harga).toLocaleString('ID'));
}

//Cek Ratecode
$('#rate_code').on('change', function(){
	let nama = $(this).val();
	$.ajax({
		type: 'GET',
		url: "{{ url('/cek-nama-ratecode/')}}/"+nama,
		success: function (data) {
			$('#warning-ratecode').html(data.text);

			if(data.count > 0){
				$('#submit').attr('disabled', 'disabled');
			}
			else{
				$('#submit').removeAttr('disabled');
			}
		}
	});
});

// $('#harga').on('input', function(){
//     $('#harga').mask("#.##0", {reverse: true});//set separator number
// })

$('#harga_breakfast').on('input', function(){
    $('#harga_breakfast').mask("#.##0", {reverse: true});//set separator number
})

// Accessibility labels
$('.pickadate-accessibility').pickadate({
    labelMonthNext: 'Go to the next month',
    labelMonthPrev: 'Go to the previous month',
    labelMonthSelect: 'Pick a month from the dropdown',
    labelYearSelect: 'Pick a year from the dropdown',
    selectMonths: true,
    selectYears: true,
    format: 'yyyy-mm-dd',
});

var FormValidation = function() {

    // Validation config
    var _componentValidation = function() {
        if (!$().validate) {
            console.warn('Warning - validate.min.js is not loaded.');
            return;
        }

        // Initialize
        var validator = $('.form-validate-jquery').validate({
            ignore: 'input[type=hidden], .select2-search__field, .harga_class', // ignore hidden fields
            errorClass: 'validation-invalid-label',
            //successClass: 'validation-valid-label',
            validClass: 'validation-valid-label',
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            // success: function(label) {
            //    label.addClass('validation-valid-label').text('Success.'); // remove to hide Success message
            //},

            // Different components require proper error label placement
            errorPlacement: function(error, element) {

                // Unstyled checkboxes, radios
                if (element.parents().hasClass('form-check')) {
                    error.appendTo( element.parents('.form-check').parent() );
                }

                // Input with icons and Select2
                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo( element.parent() );
                }

                // Input group, styled file input
                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                    error.appendTo( element.parent().parent() );
                }

                // Other elements
                else {
                    error.insertAfter(element);
                }
            },
            messages: {
                nama: {
                    required: 'Please fill this input.'
                },
                email: {
                    required: 'Please fill this input.'
                },
                no_telp: {
                    required: 'Please fill this input.'
                },
                jenis_kamarname: {
                    required: 'Please fill this input.'
                },
                password: {
                    required: 'Please fill this input.'
                },
                role: {
                    required: 'Please fill this input.'
                },
                cabang_id: {
                    required: 'Please fill this input.'
                },
				harga: {
					min: "Input must not 0"
				},
				harga_breakfast: {
					min: "Input must not 0"
				}
            },
        });

        // Reset form
        $('#reset').on('click', function() {
            validator.resetForm();
        });
    };

    // Return objects assigned to module
    return {
        init: function() {
            _componentValidation();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    FormValidation.init();
});
</script>
<script type="text/javascript">
function preview() {
	frame.src=URL.createObjectURL(event.target.files[0]);
}

$( document ).ready(function() {

	var $select = $('.form-control-select2').select2();

	// Default style
    @if(session('error'))
        new PNotify({
            title: 'Error',
            text: '{{ session('error') }}.',
            icon: 'icon-blocked',
            type: 'error'
        });
    @endif
    @if ( session('success'))
        new PNotify({
            title: 'Success',
            text: '{{ session('success') }}.',
            icon: 'icon-checkmark3',
            type: 'success'
        });
    @endif
	@if ($errors->any())
		@foreach ($errors->all() as $error)
			new PNotify({
				title: 'Error',
				text: '{{ $error }}.',
				icon: 'icon-blocked',
				type: 'error'
			});
		@endforeach
	@endif

});

function changeIcon(anchor) {
    var icon = anchor.querySelector("i");
    icon.classList.toggle('icon-circle-right2');
    icon.classList.toggle('icon-circle-down2');
}
</script>
@endsection