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

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

@section('css')
    <style>
        .listtable {
            border-collapse: collapse;
            width: 100%;
            font-size: 14px;
        }

        .listtable td, .listtable th {
            border: 1px solid #ddd;
            padding: 20px 10px;
            text-align: center;
        }

        .listtable th {
            background-color: #f2f2f2;
        }

        .scroll-horizontal{
            display: block;
            overflow-x: scroll;
        }
    </style>
@endsection

@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> Create Arrangement 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-11">
						<form id="submit_arrange_code" class="form-validate-jquery" action="{{ route('arrangement-code.store')}}" method="post">
							@csrf
							<fieldset class="mb-3">
								<legend class="text-uppercase font-size-sm font-weight-bold">Data Arrangement Code</legend>

                                <input type="hidden" name="hotel_id" id="hotel_id" value="{{ \Session::get('hotel_id') ?? \Auth::user()->hotel_id }}">

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

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Period of validity</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>

								<div class="form-group row">
									<label class="col-form-label col-lg-2">Price Detail (Optional)</label>
									{{-- <div class="col-lg-10" id="form-detail-harga">
										<div class="row">
											<div class="col-lg-3">
												Shop:
											</div>
											<div class="col-lg-3">
												Produk:
											</div>
											<div class="col-lg-3">
												Harga:
											</div>
                                            <div class="col-lg-2">
												Group:
											</div>
										</div>
										<div class="row mb-2" data-idx="0" id="row_0">
											<div class="col-lg-3">
												<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}} {{ $shop->shop_category_id ? ' - '.config('custom.jenis_shop')[$shop->shop_category_id] : '' }}</option>
													@endforeach
												</select>
											</div>
											<div class="col-lg-3">
												<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="text"
													   class="harga_detail form-control"
													   name="harga_detail[]"
													   id="harga_detail0"
													   data-idx="0" --}}
													   {{-- min="0" --}}
												{{-- >
											</div>
                                            <div class="col-lg-2">
												<select name="revenue_group_id[]"
														id="revenue_group_id0"
														data-idx="0"
														class="form-control form-control-select2"
														data-container-css-class="border-teal"
														data-dropdown-css-class="border-teal"
                                                        required
												>
													<option value="">-- Pilih Revenue Group --</option>
                                                    @foreach(config('custom.revenue_groups') as $key => $revenue_group)
													<option value="{{ $key }}">{{ $revenue_group }}</option>
													@endforeach
												</select>
											</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 class="col-lg-10 scroll-horizontal" style="width: 100%">
                                        <div style="width: 120%">
                                            <table class="listtable" id="form-detail-harga">
                                                <tr>
                                                    <th style="width: 10px">#</th>
                                                    <th style="width: 100px;">Shop</th>
                                                    <th style="width: 150px">Product</th>
                                                    <th style="width: 100px">Price</th>
                                                    <th style="width: 100px">Group</th>
                                                    @if (in_array(propertiTipe(), [1]))
                                                    <th style="width: 150px">COA
                                                        <br>
                                                        <small> <span class="text-danger">If null will be fill with default value COA: {{@$arrCode_def->coaArrCode->account_no}} - {{@$arrCode_def->coaArrCode->description}}</span> </small>
                                                    </th>
                                                    @endif
                                                    <th style="width: 100px">Always 1 <small class="text-danger">(*The total quantity of items according to pax room)</small></th>
                                                </tr>

                                                <tr data-idx="0" id="row_0">
                                                    <!-- # -->
                                                    <td colspan="7" class="text-center">
                                                        <button type="button" onclick="tambahDetailHarga()" class="btn btn-success">
                                                            <i class="fas fa-plus-circle"></i> Add Detail Item Arrangement Code
                                                        </button>
                                                    </td>

                                                    <!-- Shop -->
                                                    {{-- <td class="text-center">
                                                        <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="">-- Select Shops --</option>
                                                            @foreach($shops as $shop)
                                                                <option value="{{$shop->id}}">{{$shop->nama}} {{ $shop->shop_category_id ? ' - '.config('custom.jenis_shop')[$shop->shop_category_id] : '' }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td> --}}

                                                    <!-- Product -->
                                                    {{-- <td class="text-center">
                                                        <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">-- Select Produk --</option>
                                                        </select>
                                                    </td> --}}

                                                    <!-- Price -->
                                                    {{-- <td class="text-center">
                                                        <input type="text"
                                                            class="harga_detail form-control"
                                                            style="min-width:150px; text-align:right;"
                                                            name="harga_detail[]"
                                                            id="harga_detail0"
                                                            data-idx="0"
                                                        >
                                                    </td> --}}

                                                    <!-- Group -->
                                                    {{-- <td class="text-center">
                                                        <select name="revenue_group_id[]"
                                                                id="revenue_group_id0"
                                                                data-idx="0"
                                                                class="form-control form-control-select2"
                                                                data-container-css-class="border-teal"
                                                                data-dropdown-css-class="border-teal"
                                                                required
                                                        >
                                                            <option value="">-- Select Revenue Group --</option>
                                                            @foreach(config('custom.revenue_groups') as $key => $revenue_group)
                                                            <option value="{{ $key }}">{{ $revenue_group }}</option>
                                                            @endforeach
                                                        </select>
                                                    </td> --}}

                                                    <!-- Coa -->
                                                    {{-- <td class="text-center">
                                                        <select name="coa_id[0]" id="coa_id0" 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>
                                                    </td> --}}

                                                    <!-- Always 1. -->
                                                    {{-- <td class="text-center">
                                                        <input class="always_one" style="width: 20px;height: 20px;" type="checkbox" name="always_one[0]" value="1" id="always_one0">
                                                    </td> --}}
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
								</div>

								{{-- <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="">-- Pilih COA --</option>
                                            @foreach ($coas as $coa)
                                                <option value="{{$coa->id}}">({{ $coa->account_no }}) {{$coa->description}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> --}}

							</fieldset>
							<div class="text-right">
								<a href="{{url('/arrangement-code')}}" 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>

<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'
	}
});

// 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-3">
    //                     <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}} {{ $shop->shop_category_id ? ' - '.config('custom.jenis_shop')[$shop->shop_category_id] : '' }}</option>
    //                         @endforeach
    //                     </select>
    //                 </div>
    //                 <div class="col-lg-3">
    //                     <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="text"
    //                            class="harga_detail form-control"
    //                            name="harga_detail[]"
    //                            id="harga_detail${new_idx}"
    //                            data-idx="${new_idx}"

    //                     >
    //                 </div>
    //                 <div class="col-lg-2">
    //                     <select name="revenue_group_id[]"
    //                             id="revenue_group_id${new_idx}"
    //                             data-idx="${new_idx}"
    //                             class="form-control form-control-select2"
    //                             data-container-css-class="border-teal"
    //                             data-dropdown-css-class="border-teal"
    //                             required
    //                     >
    //                         <option value="">-- Pilih Revenue Group --</option>
    //                         @foreach(config('custom.revenue_groups') as $key => $revenue_group)
    //                         <option value="{{$key}}">{{$revenue_group}}</option>
    //                         @endforeach
    //                     </select>
    //                 </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>`;

    // if(new_idx == 0){
    //     $('#row_'+new_idx).remove();
    // }

    let html = `
                    <tr data-idx="${new_idx}" id="row_${new_idx}">
                        <!-- # -->
                        <td class="text-center">
                            <button type="button" onclick=
                          "removeDetail(${new_idx})" class="btn btn-danger">      <i class="fas fa-times-circle"></i>
                            </button>
                        </td>

                        <!-- Shop -->
                        <td class="text-center">
                            <select name="shop[${new_idx}]"
                                    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="">-- Select Shops --</option>
                                @foreach($shops as $shop)
                                    <option value="{{$shop->id}}">{{$shop->nama}} {{ $shop->shop_category_id ? ' - '.config('custom.jenis_shop')[$shop->shop_category_id] : '' }}</option>
                                @endforeach
                            </select>
                        </td>

                        <!-- Product -->
                        <td class="text-center">
                            <select name="produk[${new_idx}]"
                                    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">-- Select Produk --</option>
                            </select>
                        </td>

                        <!-- Price -->
                        <td class="text-center">
                            <input type="text"
                                class="harga_detail form-control"
                                style="min-width:150px; text-align:right;"
                                name="harga_detail[${new_idx}]"
                                id="harga_detail${new_idx}"
                                data-idx="${new_idx}"

                            >
                        </td>

                        <!-- Group -->
                        <td class="text-center">
                            <select name="revenue_group_id[${new_idx}]"
                                    id="revenue_group_id${new_idx}"
                                    data-idx="${new_idx}"
                                    class="form-control form-control-select2"
                                    data-container-css-class="border-teal"
                                    data-dropdown-css-class="border-teal"
                                    required
                            >
                                <option value="">-- Select Revenue Group --</option>
                                @foreach(config('custom.revenue_groups') as $key => $revenue_group)
                                <option value="{{$key}}">{{$revenue_group}}</option>
                                @endforeach
                            </select>
                        </td>

                        @if (in_array(propertiTipe(), [1]))
                        <!-- Coa -->
                        <td class="text-center">
                            <select name="coa_id[${new_idx}]" id="coa_id${new_idx}" 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>
                        </td>
                        @endif

                        <!-- Always 1. -->
                        <td class="text-center">
                            <input class="always_one" style="width: 20px;height: 20px;" type="checkbox" name="always_one[${new_idx}]" value="1" id="always_one${new_idx}">
                        </td>
                    </tr>
                `

				new_idx++;
	$('#form-detail-harga').append(html);
    $('.form-control-select2').select2();
}

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

//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 Arrangement Code
$('#arrangement_code').on('change', function(){
	let nama = $(this).val();
	$.ajax({
		type: 'GET',
		url: "{{ url('/cek-nama-arrangementcode/')}}/"+nama,
		success: function (data) {
			$('#warning-ratecode').html(data.text);

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

$('.harga_detail').on('input', function(){
    $('.harga_detail').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: 'dd-mm-yyyy',
});

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', // 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);
                }

                setTimeout(() => {
                    $('body').unblock()
                }, 1000);
            },
            messages: {
                nama: {
                    required: 'Mohon diisi.'
                },
                email: {
                    required: 'Mohon diisi.'
                },
                no_telp: {
                    required: 'Mohon diisi.'
                },
                jenis_kamarname: {
                    required: 'Mohon diisi.'
                },
                password: {
                    required: 'Mohon diisi.'
                },
                role: {
                    required: 'Mohon diisi.'
                },
                cabang_id: {
                    required: 'Mohon diisi.'
                },
            },
        });

        // 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

});
</script>
@endsection