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

@section('title', 'Shop POS')

@section('css')
<style type="text/css">
	.datatable-column-width{
		overflow: hidden; text-overflow: ellipsis; max-width: 200px;
	}

    .col-form-label{
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
</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">
            <h3 class="font-weight-bold"><span class="font-weight-light">Shops POS-</span> Data</h3>
            <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">

        <div class="row">

            {{-- Menu --}}
            <div class="col-md-9">
                <div class="card p-0">
                    <div class="card-header header-elements-inline p-2 " style="border-bottom: 1px solid #F5F5F5;">

                        @if (in_array(\Auth::user()->role, [1,2]))
                            <span class="pl-3" style="font-size:16px; font-weight:bold;"><i class="fas fa-shopping-bag"></i> Shop</span>
                            <div class=" col-sm-4">
                                {{-- <div class="col-sm-9"> --}}
                                    <select onchange="selectShopId(this.value)" class="form-control form-control-select2 border-1 border-teal" id="shop_id" style="cursor:pointer;">
                                        <option value="">--Pilih Shop--</option>
                                        @foreach ($shops as $shop)
                                            <option value="{{$shop->id}}">{{$shop->nama}}</option>
                                        @endforeach
                                    </select>
                                {{-- </div> --}}
                            </div>
                        @else
                            <span class="pl-3" style="font-size:16px; font-weight:bold;"><i class="fas fa-shopping-bag"></i> Shop</span>
                            <div class=" col-sm-4">
                                {{-- <div class="col-sm-9"> --}}
                                    <select onchange="selectShopId(this.value)" class="form-control form-control-select2 border-1 border-teal" id="shop_id" style="cursor:pointer;">
                                        @foreach ($shops as $shop)
                                            <option value="{{$shop->id}}" {{$shop->id == \Auth::user()->shop_id ? 'selected' : ''}} disabled='true' readonly>{{$shop->nama}}</option>
                                        @endforeach
                                    </select>
                                {{-- </div> --}}
                            </div>
                        @endif

                        <span class="pl-3" style="font-size:16px; font-weight:bold;"><i class="fas fa-th-list"></i> Tipe Menu</span>
                        <div class=" col-sm-4">
                            {{-- <div class="col-sm-9"> --}}
                                <select onchange="selectTipeMenuId(this.value)" class="form-control form-control-select2 border-1 border-teal" id="tipe_menu_id" style="cursor:pointer;">
                                    <option value="">--Pilih Tipe Menu--</option>
                                    @foreach ($tipe_menus as $tipe)
                                        <option value="{{$tipe->id}}">{{$tipe->nama_tipe}}</option>
                                    @endforeach
                                </select>
                            {{-- </div> --}}
                        </div>
                    </div>

                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-secondary text-center mb-2 p-1" role="alert">
                                    <h4 class="font-weight-bold m-0">Daftar Menu</h4>
                                </div>
                            </div>
                        </div>

                        @if (in_array(\Auth::user()->role, [1,2]))
                            <div id="searchcontainer" class="form-group form-group-feedback form-group-feedback-left" style="display: none;">
                                <input type="text" placeholder="search something here..." id="search" class="form-control ui-autocomplete-input"  autocomplete="off">
                                <div class="form-control-feedback">
                                    <i class="icon-search4 font-size-base"></i>
                                </div>
                            </div>
                        @else
                            <div class="form-group">
                                <input type="text" placeholder="search something here..." id="search" class="form-control">
                            </div>
                        @endif

                        <div class="row" id="menu_list_id" style="max-height: 650px; overflow: auto;">
                            @if (in_array(\Auth::user()->role, [1,2]))
                                <div class="col-md-12">
                                    <div class="alert alert-danger text-center mb-2" role="alert">
                                        Silahkan pilih toko/shop terlebih dahulu.
                                    </div>
                                </div>
                            @else
                                <div class="col-md-12">
                                    <div class="alert alert-danger text-center mb-2" role="alert">
                                        Silahkan pilih tipe menu terlebih dahulu.
                                    </div>
                                </div>
                            @endif

                        </div>

                    </div>
                </div>
            </div>

            {{-- Cart --}}
            <div id="cart_list" class="card list-group-bordered col-md-3">
                <form id="submitCart" class="form-validate-jquery" method="post" enctype="multipart/form-data" disabled>
                    @csrf
                    <div class="bg-secondary text-center p-1"><h5 class="m-0"> Detail </h5></div>
                    <div class="pl-2">
                        <div class="form-group row p-2" style="margin-bottom: 0%;">
                            <div class="col-lg-12">
                                <label class="pl-0 col-lg-8" style="font-size: 13px; font-weight:bold; padding-left:0;">Complimentary
                                    <input class="form-check-input ml-3" type="checkbox" name="complimentary_checkbox" value="1" id="complimentary_checkbox">
                                </label>
                            </div>
                            <div class="col-lg-12" style="padding-left:35%;">
                                <div class="pl-2 col-lg-12">
                                    <select name="nama" id="complimentary"
                                            class="form-control select-icons"
                                            style="width: 50%;"
                                            data-container-css-class="border-teal"
                                            data-dropdown-css-class="border-teal"
                                            disabled
                                            required
                                    >
                                        <option value="">-- Pilih Nama Complimentary --</option>
                                        @foreach($complimentaries as $complimentary)
                                            <option value="{{$complimentary->name}}">{{$complimentary->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row p-2" style="margin-bottom: 0%;">
                            <label class="col-form-label col-lg-4" style="font-size: 13px; font-weight:bold;">Kamar</label>
                            <div class="col-lg-8">
                                <div class="col-lg-12">
                                    <input class="form-check-input" type="checkbox" name="in_house" value="1" id="in_house"><span class="text-danger">*centang untuk masukkan ke tagihan kamar</span>
                                </div>
                                <div class="col-lg-12">
                                    <select name="kamar_id" id="kamar_id"
                                                    class="form-control select-icons"
                                                    style="width: 50%;"
                                                    data-container-css-class="border-teal"
                                                    data-dropdown-css-class="border-teal"
                                                    disabled required
                                            >
                                                <option value="">-- Pilih No Kamar --</option>
                                                @foreach($kamars as $kamar)
                                                    <option value="{{$kamar->id}}" data-nomor_kamar="{{ $kamar->no_kamar }}" data-status_lock="{{$kamar->status_lock}}" {{ $kamar->status_lock == 1 ? 'data-icon=fa-lock data-color=text-danger' : 'data-icon=fa-lock-open data-color=text-success' }}>{{$kamar->no_kamar}}</option>
                                                @endforeach
                                            </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row p-2" style="margin-bottom: 0%;" id="field_pelanggan">
                            <label class="col-form-label col-lg-4" style="font-size: 13px; font-weight:bold;">Pelanggan</label>
                            <div class="col-lg-8">
                                <div class="col-lg-12">
                                    <input type="text" id="pelanggan" name="nama" class="form-control border-teal border-1" placeholder="Pelanggan" value="" required>
                                </div>
                            </div>
                        </div>
                        {{-- create this->don't forget to hide if inhouse OK ^_^ --}}
                        <div class="form-group row p-2" style="margin-bottom: 0%;" id="field_kartu_debit">
                                <span class="col-form-label col-lg-4" style="font-size: 13px; font-weight:bold;" id="id_label_card">Kartu Debit</span>
                                <div class="col-lg-8">
                                    <div class="col-lg-12">
                                        <input class="form-check-input" type="checkbox" value="" id="card_number" onclick="">
                                    </div>

                                    <div class="col-lg-12">
                                        <input type="text" id="bank" name="bank" class="form-control border-teal border-1" placeholder="Masukkan Bank" required disabled>
                                    </div>
                                </div>
                        </div>

                        <div class="form-group row col-md-12">
                            <div id="tambahOrder" style="display: none; width:100%;">
                                <a  data-toggle="modal"
                                    data-target="#modal_tambah_menu">
                                    <button type="button" class="btn btn-success rounded-round" style="width: 100%">
                                        <i class="icon-add mr-2 "></i> Tambah/Edit
                                    </button>
                                </a>
                            </div>
                        </div>

                    </div>

                    <div class="bg-info text-center p-1"><h5 class="m-0"> Keranjang </h5></div>
                    @if (in_array(\Auth::user()->role, [1,2]))
                        <input name="shop_id" id="hidden_shop_id" type="hidden" value="">
                    @else
                        <input name="shop_id" id="hidden_shop_id" type="hidden" value="{{\Auth::user()->shop_id}}">
                    @endif
                        <input name="tipe_menu_id" id="hidden_tipe_menu_id" type="hidden" value="">

                    <div class="container mb-1 mt-1 border-bottom p-1" style="font-weight:bold;">
                        <div class="row">
                            <div class="col-sm-4 " style="text-align: center;">
                                Item
                            </div>
                            <div class="col-sm-4" style="text-align: center;">
                                Qty
                            </div>
                            <div class="col-sm-4" style="text-align: center;">
                                Price
                            </div>
                        </div>
                    </div>

                    <fieldset id="fieldset_cart" style="height: 250px; overflow:auto;">

                    </fieldset>

                    {{-- Input Hidden If Complimentary Checked --}}

                     <input type="hidden" name="total_payment_pos" id="total_payment_pos_complimentary" value="0" disabled>
                     <input type="hidden" name="jumlah_biaya_pos" id="grand_total_pos_complimentary" value="0" disabled>
                     <input type="hidden" name="sub_total" id="sub_total_pos_complimentary" value="0" disabled>

                    {{-- /Input Hidden If Complimentary Checked --}}

                    <input type="hidden" id="total_hidden_id" name="jumlah_biaya_pos" value="">
                    <input type="hidden" id="sub_total_hidden_id" name="sub_total" value="">


                    {{-- <div class="card-footer bg-primary">Jumlah</div> --}}

                    {{-- <div class="d-flex b-highlight p-2" style="display: none;">
                        Pembayaran : 10000 <br>
                        Total : 9000<br>
                        Kembalian : 1000
                    </div> --}}

                    <div id="table_adds_price" class="ml-1 pt-1 border-top border-bottom">
                        <div class="container">

                            <div class="row">
                                <div class="col">
                                    Sub Total
                                </div>
                                <div class="col">
                                        :
                                </div>
                                <div class="html_sub_total col" style="text-align: right" >
                                    Rp. 0
                                </div>
                            </div>

                            <div class="row">
                                <div class="col">
                                     PPN
                                </div>
                                <div class="col">
                                        :
                                </div>
                                <div class="html_ppn_charge col" style="text-align: right" >
                                    Rp. 0
                                 </div>
                             </div>

                             <div class="row">
                                <div class="col">
                                     Services
                                </div>
                                <div class="col">
                                        :
                                </div>
                                <div class="html_service_charge col" style="text-align: right" >
                                    Rp. 0
                                 </div>
                             </div>

                             <div class="row">
                                <div class="col">
                                     Grand Total
                                </div>
                                <div class="col">
                                        :
                                </div>
                                <div class="html_grand_total col" style="text-align: right" >
                                    Rp. 0
                                 </div>
                             </div>

                        </div>
                    </div>

                    <div id="container_payment" class="d-flex b-highlight bg-info p-2" >
                        <label id="label_bayar" class="col-form-label col-lg-3">Bayar :</label>
                        <input id="total_payment" type="number" class="form-control border-teal border-1" style="max-width:65%;" name="total_payment_pos" min="1" value="" placeholder="masukkan total pembayaran" oninput="checkPayment(this.value)" required>
                        <label id="label_card" class="col-form-label col-lg-3" style="display:none">No.Kartu :</label>
                        <input id="card_number_input" type="tel" class="form-control border-teal border-1" style="max-width:65%; display:none"  name="card_number" minlength="16" maxlength="16" placeholder="Masukkan No Kartu" required disabled>
                    </div>

                    <div id="alert-payment" class="text-center bg-danger" style="display:none;">Pembayaran belum mencukupi!</div>

                    <div class="d-flex bd-highlight">
                        <button type="submit" onclick="return confirm('Are you sure you want to do that?');" style="border-radius: 0 !important;"  class="btn btn-success p-2 flex-fill bd-highlight " id="bayar_id" disabled>Total - Rp. 0</a>
                        <button type="submit" onclick="return confirm('Are you sure you want to do that?');" style="border-radius: 0 !important; display: none;" class="btn btn-primary p-2 flex-fill bd-highlight " id="chek_in_id" disabled>Masukkan Ke Tagihan Kamar - Rp. 0</button>
                    </div>
                </form>
            </div>

        </div>

</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/notifications/bootbox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/tables/datatables/datatables.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/extensions/jquery_ui/interactions.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/editors/summernote/summernote.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/buttons/ladda.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/media/fancybox.min.js')}}"></script>
<script src="{{asset('global_assets/js/plugins/notifications/sweet_alert.min.js')}}"></script>

<script src="{{asset('assets/js/app.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/components_modals.js')}}"></script>

<script src="{{asset('global_assets/js/demo_pages/form_inputs.js')}}"></script>
<script src="{{asset('global_assets/js/demo_pages/extra_sweetalert.js')}}"></script>
{{-- <script src="{{asset('global_assets/js/demo_pages/form_select2.js')}}"></script> --}}

<script>
    var SweetAlert = function () {
        var _componentSweetAlert = function() {
            if (typeof swal == 'undefined') {
            console.warn('Warning - sweet_alert.min.js is not loaded.');
            return;
        }

        // Defaults
        var swalInit = swal.mixin({
                buttonsStyling: false,
                confirmButtonClass: 'btn btn-primary',
                cancelButtonClass: 'btn btn-light'
            });

            $('#kamar_id').on('change', function() {
                let no = $(this).find(':selected').data('nomor_kamar')
                let value = $(this).find(':selected').data('status_lock')
                console.log(value)
                if (value == 1) {
                    swalInit({
                        title: 'Tidak dapat memilih kamar ini!',
                        text: `Kamar ${no} dalam status Lock!`,
                        type: 'error'
                    });
                    $('#chek_in_id').attr('disabled', true)
                }else{
                    $('#chek_in_id').attr('disabled', false)
                    let pilihNomorKamar = $(this).find(':selected').val()

                    // if (carts.length < 1) {
                    //     $('#chek_in_id').attr('disabled', true)
                    // }else{
                    //     $('#chek_in_id').attr('disabled', false)
                    // }
                }
            })
        };

        return {
            initComponents: function() {
                _componentSweetAlert();
            }
        }
    }();


    function iconFormat(icon, color) {
        var originalOption = icon.element;
        if (!icon.id) { return icon.text; }
        var $icon = icon.text + ' &nbsp;<i class="fas ' + $(icon.element).data('icon') + ' ' +  $(icon.element).data('color') + '"></i>';;

        return $icon;
    }

    // Initialize with options
    $('.select-icons').select2({
        templateResult: iconFormat,
        minimumResultsForSearch: Infinity,
        templateSelection: iconFormat,
        escapeMarkup: function(m) { return m; }
    });

	//Popup
	$('[data-popup="lightbox"]').fancybox({
		padding: 3
	});

    //Preview Gambar
    function preview() {
        frame.src=URL.createObjectURL(event.target.files[0]);
    }

	//modal delete
		$(document).on("click", ".delbutton", function () {
		     var url = $(this).data('uri');
		     $("#delform").attr("action", url);
		});

		var DatatableBasic = function() {

		    // Basic Datatable examples
		    var _componentDatatableBasic = function() {
		        if (!$().DataTable) {
		            console.warn('Warning - datatables.min.js is not loaded.');
		            return;
		        }

		        // Setting datatable defaults
		        $.extend( $.fn.dataTable.defaults, {
		            autoWidth: false,
		            columnDefs: [{
		                orderable: false,
		                width: 150,
		                targets: [ 3 ]
		            }],
		            dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
		            language: {
		                search: '<span>Filter:</span> _INPUT_',
		                searchPlaceholder: 'Type to filter...',
		                lengthMenu: '<span>Show:</span> _MENU_',
		                paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
		            }
		        });

		        // Basic datatable
		        $('.datatable-basic').DataTable();

		        // Alternative pagination
		        $('.datatable-pagination').DataTable({
		            pagingType: "simple",
		            language: {
		                paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
		            }
		        });

		        // Datatable with saving state
		        $('.datatable-save-state').DataTable({
		            stateSave: true
		        });

		        // Scrollable datatable
		        var table = $('.datatable-scroll-y').DataTable({
		            autoWidth: true,
		            scrollY: 300
		        });

		        // Resize scrollable table when sidebar width changes
		        $('.sidebar-control').on('click', function() {
		            table.columns.adjust().draw();
		        });
		    };

		    // Select2 for length menu styling
		    var _componentSelect2 = function() {
		        if (!$().select2) {
		            console.warn('Warning - select2.min.js is not loaded.');
		            return;
		        }

		        // Initialize
		        $('.dataTables_length select').select2({
		            minimumResultsForSearch: Infinity,
		            dropdownAutoWidth: true,
		            width: 'auto'
		        });
		    };


		    //
		    // Return objects assigned to module
		    //

		    return {
		        init: function() {
		            _componentDatatableBasic();
		            _componentSelect2();
		        }
		    }
		}();

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

		        });

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

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

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

		document.addEventListener('DOMContentLoaded', function() {
		    DatatableBasic.init();
		    FormValidation.init();
            SweetAlert.initComponents();
		});
</script>
<script type="text/javascript">
	$( document ).ready(function() {

            var queryString = window.location.search;
            var urlParams = new URLSearchParams(queryString);
            var s = urlParams.get('s');

            if (s) {
                $("#shop_id").val(s).trigger('change');
            }

			$('.form-control-select2').select2();

			//$('.summernote').summernote({
			//	height: 200,
			//	toolbar: []
			//});

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

			$('.editbutton').on('click', function(){
				var nama = $(this).data('nama');
				var gambar = $(this).data('gambar');
				var keterangan = $(this).data('keterangan');
				var uri = $(this).data('uri');

				$('#myform').attr("action", uri);
				$('#method').val("put");
				$('#nama').val(nama);
				$('#frame').attr('src', gambar);
				$('#keterangan').val(keterangan);
				$('#formtitle').html('Ubah Shop');

                {{--
				@if(Auth::user()->role == 1)
					var hotel = $(this).data('hotel');
					$("#hotel_id").val(hotel).trigger('change');
				@endif
                --}}
			});

			$('.resetbutton').on('click', function(){

				$('#myform').attr("action", "{{route( 'shops.store' )}}");
				$('#method').val("post");
				$('#nama').val('');
				$('#frame').attr('src', '');
				$('#keterangan').val('');
				$('#formtitle').html('Tambah Shop');

				@if(Auth::user()->role == 1)
					$("#hotel_id").val('').trigger('change');
				@endif
			});

            $('#in_house').on('click', function(){
                let ischecked = $(this).is(":checked");
                let complimentary_checked = $('#complimentary_checkbox').is(':checked')

                if(ischecked){
                    $('#kamar_id').removeAttr('disabled');
                    $('#total_payment').attr('disabled', 'disabled');
                    $('#container_payment').attr('style','visibility: hidden;');
                    $('#chek_in_id').attr('style', 'border-radius: 0 !important;');
                    $('#bayar_id').attr('style', 'border-radius: 0 !important; display: none;');
                    $('#total_payment').val('');

                    $('#bank').attr('disabled')
                    $('#label_card').attr('style','display:none;')
                    $('#card_number_input').attr('style','display:none;')
                    $('#bank').attr('style','display:none;')
                    $('#card_number').attr('style', 'display:none;')
                    $('#id_label_card').attr('style', 'display:none;')
                    $('#card_number_input').attr('disabled', 'disabled')
                    $('#bank').attr('disabled', 'disabled')
                    if (new_idx < 1) {
                        $('#chek_in_id').attr('disabled', true)
                    } else {
                        $('#chek_in_id').attr('disabled', false)
                    }

                }
                else{
                    $('#kamar_id').attr('disabled', 'disabled')
                    $('#chek_in_id').attr('style', 'border-radius: 0 !important; display: none;');
                    $('#bayar_id').attr('style', 'border-radius: 0 !important;');
                    // $('#total_payment').removeAttr('disabled');
                    // $('#container_payment').attr('style','');

                    $('#label_card').attr('style','display:none;')
                    $('#card_number_input').attr('disabled', 'disabled')
                    $('#card_number_input').attr('style','display:none;')
                    $('#bank').attr('style','')
                    $('#card_number').attr('style', '')
                    $('#card_number').prop("cheked", false);
                    $('#id_label_card').attr('style', 'font-size: 13px; font-weight:bold;')
                    // $('#card_number_input').removeAttr('disabled')
                    $('#label_bayar').attr('style','')
                    $('#total_payment').attr('style', 'max-width:65%;')

                    if (complimentary_checked) {
                        $('#container_payment').attr('style','display: none !important;');
                        $('#card_number_input').attr('disabled', true)
                        $('#total_payment').attr('disabled', true)
                    }else{
                        $('#container_payment').attr('style','');
                        $('#card_number_input').removeAttr('disabled')
                        $('#total_payment').removeAttr('disabled');
                    }

                }
            });

            $('#bayar_id').on('click', function(e){
                e.preventDefault(); // avoid to execute the actual submit of the form.
                var form = $('#submitCart');

                $.ajax({
                    type: "POST",
                    url: "{{ url('submit-form-pos-shop')}}",
                    data: form.serialize(), // serializes the form's elements.
                    success: function(res)
                    {
                        // console.log(res);
                        window.open("{{url('quick-print-invoice-pos').'/'}}"+res.order_flag, "_blank");
                        setTimeout(function() {
                                window.location.href = "{{url('shop-pos')}}/?s="+res.shop;
                        }, 1000);
                    }
                });

                // $('#submitCart').attr('target', '_blank');
                // $('#submitCart').attr('action', 'quick-print-invoice-pos');
            });

            $('#chek_in_id').on('click', function(){
                $('#submitCart').attr('action', 'shop-order');
            });

            $('#card_number').on('click', function(){
                let ischecked = $(this).is(":checked");

                if(ischecked){
                    $('#total_payment').attr('disabled','disabled')
                    $('#total_payment').attr('style', 'display:none;')
                    $('#label_bayar').attr('style','display:none;')
                    $('#bayar_id').removeAttr('disabled')
                    $('#bank').removeAttr('disabled')

                    $('#label_card').attr('style','')
                    $('#card_number_input').attr('style','max-width:65%;')
                    $('#card_number_input').removeAttr('disabled')
                }
                else{
                    $('#total_payment').removeAttr('disabled')
                    $('#label_bayar').attr('style','')
                    $('#total_payment').attr('style', 'max-width:65%;')
                    $('#card_number_input').attr('disabled', 'disabled')

                    $('#bank').val('')
                    $('#bank').attr('disabled','disabled')
                    $('#bayar_id').attr('disabled', 'disabled')
                    $('#label_card').attr('style','display:none;')
                    $('#card_number_input').attr('style','display:none;')
                }
            });

            fetch_product();

            addtocartviaenter();

            function fetch_product(query = ''){
               var id_shop = $('#hidden_shop_id').val();
                $.ajax({
                    url : "{{ url('/search-product-pos/') }}",
                    method : 'GET',
                    data: {
                        query:query,
                        id_shop:id_shop,
                    },
                    dataType: 'json',
                    success:function(data){
                        $('#menu_list_id').html('');
                            if(data.length == 0 ){
                                let list = `<div class="col-md-12">
                                                <div class="alert alert-danger text-center mb-2" role="alert">
                                                    Menu tidak ditemukan.
                                                </div>
                                            </div>`;

                                $('#menu_list_id').html(list);
                            }else{
                                $.each(data, function(index, value) {
                                console.log(data)
                                        let list_menus =
                                        `
                                            <div class="card m-2" style="width: 150px; cursor:pointer;" onclick='insertToCart(${value.id},`+JSON.stringify(value)+`, ${value.tipe_menu.shop.ppn}, ${value.tipe_menu.shop.services})'>
                                                <img src="${value.gambar ? value.gambar : ''}"
                                                    class="mr-2 card-img-top img-thumbnail" style="height:10rem; object-fit:cover;">
                                                    <h5 class="card-title pl-2">${value.nama ? value.nama: ''}</h5>
                                                    <p class="card-text pl-2 mb-2">${value.harga ? 'Rp.'+value.harga.toLocaleString('ID') :'Rp. 0'}</p>
                                            </div>
                                        `;
                                        $('#menu_list_id').append(list_menus);
                                });
                            }
                    }

                })
            }

            function addtocartviaenter(query = ''){
                var id_shop = $('#hidden_shop_id').val();
                $.ajax({
                    url : "{{ url('/search-product-pos/') }}",
                    method : 'GET',
                    data: {
                        query:query,
                        id_shop:id_shop,
                        },
                    dataType: 'json',
                    success:function(data){
                            if(data.length != 0 ){
                                insertToCart(data[0].id, data[0], data[0].tipe_menu.shop.ppn, data[0].tipe_menu.shop.services);
                            }
                    }

                })
            }

            //Get Search
            $(document).on('keyup', '#search', function(){
                var query = $(this).val();
                fetch_product(query);
            });

            // Get the input field
            var input = document.getElementById("search");
            input.addEventListener("keyup", function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    addtocartviaenter(input.value);
                }
            });

	});

    // Below JS for POS Cashiers
    // JS Order Flag
    let new_idx = 1;
    let new_qty = 1;
    let sub_total = 0;
    let ppn_charge = 0;
    let service_charge = 0;
    let grand_total = 0;
    let row_number = 1;
    let complimentary = 0;
    const array_id = ["1"];

    let ppn_ajax ='';
    let services_ajax ='';


    let kosong =    `<div class="col-md-12">
                        <div class="alert alert-danger text-center mb-2" role="alert">
                            Silahkan pilih shop atau tipe menu dahulu.
                        </div>
                    </div>`;

    //OnClick Insert to Cart
    function insertToCart(id, menu, ppn, service){
        if(document.getElementById('order_id_'+id)){

            //Defining item
            var jmlharga = document.getElementById('jml_harga'+id);
            var text = document.getElementById('text_jml_harga'+id);

            if (document.getElementById('qty'+id)){

                var jumlahnya = document.getElementById('qty'+id);
                jumlahnya.value ++;

                $('#qty'+id).val(jumlahnya.value);

                // delete previous value
                    sub_total -= parseInt(jmlharga.value);
                    jmlharga.value -= parseInt(jmlharga.value);

                //hitungan harga
                    jmlharga.value = parseInt(menu.harga) * parseInt(jumlahnya.value);

                    //subtotal
                    sub_total +=  parseInt(jmlharga.value);

                    //ppn_charge
                    ppn_charge = parseInt(sub_total*ppn/100);

                    //service charge
                    service_charge = parseInt(sub_total*service/100);

                    //grand total
                    grand_total = parseInt( sub_total + ppn_charge + service_charge );


                var tPay = document.getElementById('total_payment').value;
                checkPayment(tPay);

                $(text).html('Rp. '+Number(jmlharga.value).toLocaleString('ID'));

                priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);

                // //showing value
                // $('#chek_in_id').html('Masukkan Ke Tagihan Kamar - Rp. '+grand_total.toLocaleString('ID'));
                // $('#bayar_id').html('Total - Rp. '+grand_total.toLocaleString('ID'));
                // $('#html_sub_total').html('Rp.'+sub_total.toLocaleString('ID'));
                // $('#html_ppn_charge').html('Rp.'+ppn_charge.toLocaleString('ID'));
                // $('#html_service_charge').html('Rp.'+service_charge.toLocaleString('ID'));

                // //hidden input
                // $('#total_hidden_id').val(grand_total);
                // $('#sub_total_hidden_id').val(sub_total);

                $('#alert-payment').attr('style', 'display:none;')
            }

        }else{
            //hitungan harga

            //sub total
            sub_total +=  parseInt(menu.harga * new_qty);

            //ppn_charge
            ppn_charge = parseInt(sub_total*ppn/100);

            //service charge
            service_charge = parseInt(sub_total*service/100);


            //grand total
            grand_total = parseInt( sub_total + ppn_charge + service_charge );

            hidden_jmlh_harga = (menu.harga) * new_qty;
            let jenis_kamar_options = $('#order_id').html();
            let html = `<div data-idx="${id}" id ="order_id_${id}" class="list-group-item list-group-item-action d-flex bd-highlight" >

                                    <input name="menu_id[]" id="id${id}" data-idx="${id}" type="hidden" value="${menu.id}" readonly>
                                    <input name="total_biaya[]" id="jml_harga${id}" data-idx="${id}" class="form-control" type="hidden" value="${hidden_jmlh_harga}" readonly>


                                    <span class="flex-fill col-sm-4 ml-1">${(menu.nama).substr(0,8)}.</span>
                                    <input name="jumlah[]" id="qty${id}" data-idx="${id}" class="form-control flex-fill col-sm-2 ml-1" type="number" min="1" value="${new_qty}" onchange="changeQty(${id}, '${menu.nama}', ${menu.harga}, ${ppn}, ${service})">
                                    <span class="flex-fill col-sm-4 ml-1" id ="text_jml_harga${id}" style="font-size:12px; text-align:right;">Rp. ${(hidden_jmlh_harga).toLocaleString('ID')}</span>

                                <button type="button" onclick="removeOrder(${id}, ${menu.harga * new_qty}, ${ppn}, ${service})" class="btn btn-danger btn-sm rounded-sm ml-1">
                                    <i class="fas fa-times-circle"></i>
                                </button>
                            </div>`;
            new_idx++;
            row_number++;

            var tPay = document.getElementById('total_payment').value;
            checkPayment(tPay);

            $('#fieldset_cart').append(html);

            priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);

            // $('#chek_in_id').html('Masukkan Ke Tagihan Kamar - Rp.'+grand_total.toLocaleString('ID'));
            // $('#bayar_id').html('Total - Rp.'+grand_total.toLocaleString('ID'));

            // // showing value
            // $('#html_sub_total').html('Rp.'+sub_total.toLocaleString('ID'));
            // $('#html_ppn_charge').html('Rp.'+ppn_charge.toLocaleString('ID'));
            // $('#html_service_charge').html('Rp.'+service_charge.toLocaleString('ID'));

            // //hidden input
            // $('#total_hidden_id').val(grand_total);
            // $('#sub_total_hidden_id').val(sub_total);

            // Status Lock
            let status = $('#kamar_id').find(':selected').data('status_lock')

            if (new_idx > 1 && status != 1) {
                $('#chek_in_id').removeAttr('disabled');

            }else{
                $('#chek_in_id').attr('disabled', 'disabled');
            }
        }

    }

    //onchange qty
    function changeQty(idx, nama, harga, ppn, service){

        //Defining item
        var valueqty = document.getElementById('qty'+idx).value;
        var jmlharga = document.getElementById('jml_harga'+idx);
        var text = document.getElementById('text_jml_harga'+idx);

        //delete previous value
        sub_total -= parseInt(jmlharga.value);
        jmlharga.value -= parseInt(jmlharga.value);

        // console.log(grand_total, jmlharga.value);
        // // jmlharga.value = parseInt(((menu.harga)+(menu.harga*10/100))) * parseInt(jumlahnya.value);

        //hitungan harga
        jmlharga.value = (harga * valueqty);

        //sub total
        sub_total += parseInt(jmlharga.value);

        //ppn_charge
        ppn_charge = parseInt(sub_total*ppn/100);

        //service charge
        service_charge = parseInt(sub_total*service/100);

        //grand total
        grand_total = parseInt(sub_total + ppn_charge + service_charge);

        // console.log(
        //     'idx:'+idx,
        //     'Harga:'+harga,
        //     'TotalHtml:'+grand_total,
        //     'Qty:'+valueqty,
        //     'JmlHarga:'+jmlharga.value)

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        $(text).html('Rp. '+jmlharga.value.toLocaleString('ID'));

        priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);

        // //showing value i html
        // $('#chek_in_id').html('Masukkan Ke Tagihan Kamar - Rp. '+grand_total.toLocaleString('ID'));
        // $('#bayar_id').html('Total - Rp. '+grand_total.toLocaleString('ID'));
        // $('#html_sub_total').html('Rp.'+sub_total.toLocaleString('ID'));
        // $('#html_ppn_charge').html('Rp.'+ppn_charge.toLocaleString('ID'));
        // $('#html_service_charge').html('Rp.'+service_charge.toLocaleString('ID'));

        // //hidden input
        // $('#total_hidden_id').val(grand_total);
        // $('#sub_total_hidden_id').val(sub_total);

        $('#alert-payment').attr('style', 'display:none;')


    }

    //Cek Pembayaran/Payment value
    function checkPayment(payment){
        var check = document.getElementById('card_number');
        if (grand_total > 1 && payment > 1){
            if (payment >= grand_total) {
                $('#bayar_id').removeAttr('disabled');
                $('#alert-payment').attr('style', 'display:none;')
            }else{
                $('#bayar_id').attr('disabled', 'disabled');
                $('#alert-payment').attr('style', '')
            }
        }else if(check.checked){
            $('#bayar_id').removeAttr('disabled');
            $('#alert-payment').attr('style', 'display:none;')
        }else{
            $('#bayar_id').attr('disabled', 'disabled');
            $('#alert-payment').attr('style', 'display:none;')
        }
    }

    //Delete order in cart
    function removeOrder(idx, harga, ppn, service){

        //Defining item
        var jmlharga = document.getElementById('jml_harga'+idx);

        //sub total
        sub_total -= parseInt(jmlharga.value);

        //ppn_charge
        ppn_charge = parseInt(sub_total*ppn/100);

        //service charge
        service_charge = parseInt(sub_total*service/100);

        //grand total
        grand_total = parseInt( sub_total + ppn_charge + service_charge);

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);

        // //show value
        // $('#bayar_id').html('Total - Rp. '+grand_total.toLocaleString('ID'));
        // $('#chek_in_id').html('Masukkan Ke Tagihan Kamar - Rp. '+grand_total.toLocaleString('ID'));
        // $('#html_sub_total').html('Rp.'+sub_total.toLocaleString('ID'));
        // $('#html_ppn_charge').html('Rp.'+ppn_charge.toLocaleString('ID'));
        // $('#html_service_charge').html('Rp.'+service_charge.toLocaleString('ID'));


        // //hidden input
        // $('#total_hidden_id').val(grand_total);
        // $('#sub_total_hidden_id').val(sub_total);

        // status lock
        let status = $('#kamar_id').find(':selected').data('status_lock')

		$('#order_id_'+idx).remove();

        new_idx--;
        row_number--;

            if (new_idx == 1) {
                $('#chek_in_id').attr('disabled', 'disabled')
            }else{
                if (status != 1) {
                    $('#chek_in_id').removeAttr('disabled');
                }else{
                    $('#chek_in_id').attr('disabled', 'disabled')
                }
            }
	}

    // function get detail shop
    function getDetailShop(id){
        $.ajax({
            type: 'GET',
                url: "{{ url('/get-detail-shopresto')}}/"+id,
                success: function (data) {
                    ppn_ajax = data.ppn;
                    services_ajax = data.services;
                }
        })
    }

    //function for selected items
    function selectShopId(id){

        let rincian = `<div class="col-md-12">
                    <div class="alert alert-danger text-center mb-2" role="alert">
                        Silahkan pilih tipe menu terlebih dahulu.
                    </div>
                </div>`;

        getDetailShop(id);

        //get tipe menu and insert selected shop
        $('#hidden_shop_id').val(id);
        $('#menu_list_id').html(rincian);
        $('#fieldset_cart').html('');
        $('#total_payment').val('');
        $('#chek_in_id').html('Masukkan ke Tagihan Kamar - Rp. 0');
        $('#bayar_id').html('Total - Rp. 0');

        $('#total_hidden_id').val('');
        $('#sub_total_hidden_id').val('');

        grand_total = 0;
        sub_total = 0;
        ppn_charge = 0;
        service_charge = 0;

        $('#chek_in_id').attr('disabled', 'disabled');
        $('#bayar_id').attr('disabled', 'disabled');
        $('#searchcontainer').attr('style', '');
        $('#html_sub_total').html('Rp. 0');
        $('#html_ppn_charge').html('Rp. 0');
        $('#html_service_charge').html('Rp. 0');

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        $.ajax({
				type: 'GET',
				url: "{{ url('/gettipemenuspos/')}}/"+id,
				success: function (data) {
					$('#tipe_menu_id').html(data);
				}
		});
    }

    function selectTipeMenuId(id){
        //get menu and insert selected tipe menu

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        $('#hidden_tipe_menu_id').val(id);
        $('#menu_list_id').html('');

        //show menu list
        $.ajax({
            type: 'GET',
            url: "{{ url('/getmenulistpos/')}}/"+id,
            success: function (data) {

                if(data.length == 0 ){

                    let list = `<div class="col-md-12">
                                    <div class="alert alert-danger text-center mb-2" role="alert">
                                        Menu tidak ditemukan.
                                    </div>
                                </div>`;

                    $('#menu_list_id').html(list);

                }else{
                            let custom_menus =
                            `
                                <div class="card m-2 bg-warning" style="width: 150px; cursor:pointer;"
                                    onclick="customMenu()"
                                    >
                                    <div class="card-body text-center font-weight-bolder">
                                        <div class="card-title p-3 mt-4">
                                            <i class="fas fa-cogs fa-lg"></i>
                                        <h5 style="font-weight:bold;"> Custom Menu </h5>
                                        </div>
                                    </div>
                                </div>
                            `;
                            $('#menu_list_id').append(custom_menus);

                    $.each(data, function(index, value) {
                            var assets = "{{ URL::asset('global_assets/images/placeholders/placeholder.jpg') }}";
                            let list_menus =
                            `
                                <div class="card m-2" style="width: 150px; cursor:pointer;" onclick='insertToCart(${value.id},`+JSON.stringify(value)+`, ${value.tipe_menu.shop.ppn}, ${value.tipe_menu.shop.services})'>
                                    <img src="${value.gambar ? value.gambar : assets}"
                                        class="mr-2 card-img-top img-thumbnail" style="height:10rem; object-fit:cover;">
                                        <h5 class="card-title pl-2">${value.nama ? value.nama: ''}</h5>
                                        <p class="card-text pl-2 mb-2">${value.harga ? 'Rp.'+value.harga.toLocaleString('ID') :'Rp. 0'}</p>
                                </div>
                            `;
                            $('#menu_list_id').append(list_menus);
                    });
                }
            }
        });


    }

    $('#complimentary_checkbox').click(function() {
        let complimentary_checked = $(this).is(':checked')
        let kamar_checked = $('#in_house').is(':checked')
        if (complimentary_checked) {
            $('#complimentary').attr('disabled', false)
            $('#container_payment').attr('style','display: none !important;')
            $('#field_pelanggan').hide()
            $('#pelanggan').attr('disabled', true)
            $('#field_kartu_debit').hide()
            // $('#bayar_id').attr('disabled', false)
            // Input
            $('#total_hidden_id').attr('disabled', true)
            $('#sub_total_hidden_id').attr('disabled', true)
            $('#total_payment').attr('disabled', true)
            $('#total_payment_pos_complimentary').attr('disabled', false)
            $('#grand_total_pos_complimentary').attr('disabled', false)
            $('#sub_total_pos_complimentary').attr('disabled', false)
                if (new_idx < 1) {
                    $('#bayar_id').attr('disabled', true)
                } else {
                    $('#bayar_id').attr('disabled', false)
                }
            $('#sub_total_text').text('Rp. '+complimentary.toLocaleString('ID'))
            $('#ppn_text').text('Rp. '+complimentary.toLocaleString('ID'))
            $('#services_text').text('Rp. '+complimentary.toLocaleString('ID'))
            $('#bayar_id').text('Total - Rp. 0')
            $('#chek_in_id').text('Masukkan Ke Tagihan Kamar - Rp. 0')
        }else{
            $('#complimentary').attr('disabled', true)
            if (!kamar_checked) {
                $('#container_payment').attr('style','')
            }
            $('#field_pelanggan').show()
            $('#pelanggan').attr('disabled', false)
            $('#field_kartu_debit').show()
            $('#bayar_id').attr('disabled', true)
            // Input
            $('#total_payment').attr('disabled', false)
            $('#total_hidden_id').attr('disabled', false)
            $('#sub_total_hidden_id').attr('disabled', false)
            $('#total_payment_pos_complimentary').attr('disabled', true)
            $('#grand_total_pos_complimentary').attr('disabled', true)
            $('#sub_total_pos_complimentary').attr('disabled', true)
            $('#sub_total_text').text('Rp. '+sub_total.toLocaleString('ID'))
            $('#ppn_text').text('Rp. '+ppn.toLocaleString('ID'))
            $('#services_text').text('Rp. '+services.toLocaleString('ID'))
            $('#bayar_id').text('Total - Rp. '+grand_total)
            $('#chek_in_id').text('Masukkan Ke Tagihan Kamar - Rp. '+grand_total)
        }
    })

    // function custom menu
    let custommenu_id = 1;
    function customMenu(){
        let html = `<div id="order_draft_custom_id_${custommenu_id}" class="list-group-item list-group-item-action d-flex bd-highlight" >

                                <input id="menu_id${custommenu_id}" name="keterangan_custom[]" class="form-control flex-fill col-sm-4 ml-0" type="text" placeholder="input here..." required>
                                <input id="qty_custom${custommenu_id}" name="jumlah_custom[]" class="form-control flex-fill col-sm-2 ml-1" type="number" min="1" value="1" placeholder="input here..." required>
                                <input id="total_biaya_custom${custommenu_id}" name="total_biaya_custom[]" class="form-control flex-fill col-sm-4 ml-1" style="font-size:12px; text-align:right;" value="0" type="number" onchange="inputCustomMenuPrice(${custommenu_id}, this.value )" placeholder="input here..." required>
                                <input id="cache_total_biaya_custom${custommenu_id}" type="hidden" value="0" disabled>

                            <button type="button" onclick="removeCustomOrder(${custommenu_id}, '')" class="btn btn-danger btn-sm rounded-sm ml-1">
                                <i class="fas fa-times-circle"></i>
                            </button>
                        </div>`;

        custommenu_id++;

        $('#fieldset_cart').append(html);

    }

    function inputCustomMenuPrice(custom_id, harga){

        var cache = document.getElementById('cache_total_biaya_custom'+custom_id);

        //delete previous value
        sub_total -= parseInt(cache.value);

        //sub total
        sub_total +=  parseInt(harga * new_qty);

        //ppn_charge
        ppn_charge = parseInt(sub_total*ppn_ajax/100);

        //service charge
        service_charge = parseInt(sub_total*services_ajax/100);

        //grand total
        grand_total = parseInt( sub_total + ppn_charge + service_charge );

        $('#cache_total_biaya_custom'+custom_id).val(harga);

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);

    }

    function removeCustomOrder(custom_id, harga){

        var cache = document.getElementById('cache_total_biaya_custom'+custom_id);

        //delete previous value
        sub_total -= parseInt(cache.value);

        //ppn_charge
        ppn_charge = parseInt(sub_total*ppn_ajax/100);

        //service charge
        service_charge = parseInt(sub_total*services_ajax/100);

        //grand total
        grand_total = parseInt( sub_total + ppn_charge + service_charge );

        $('#order_draft_custom_id_'+custom_id).remove();

        custommenu_id--;

        var tPay = document.getElementById('total_payment').value;
        checkPayment(tPay);

        priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total);
    }

    //all in one additional price
    function priceHtmlOperator(sub_total, ppn_charge, service_charge, grand_total){

        //showing value
        $('#chek_in_id').html('Masukkan Ke Tagihan Kamar - Rp.'+grand_total.toLocaleString('ID'));
        $('#bayar_id').html('Total - Rp. '+grand_total.toLocaleString('ID'));
        $('.html_sub_total').html('Rp.'+sub_total.toLocaleString('ID'));
        $('.html_ppn_charge').html('Rp.'+ppn_charge.toLocaleString('ID'));
        $('.html_service_charge').html('Rp.'+service_charge.toLocaleString('ID'));
        $('.html_grand_total').html('Rp.'+grand_total.toLocaleString('ID'));

        //hidden input
        $('#total_hidden_id').val(grand_total);
        $('#sub_total_hidden_id').val(sub_total);

        // console.log(
        //     'sub total = '+ sub_total,
        //     'ppn_charge = '+ ppn_charge,
        //     'service = '+ service_charge,
        //     'grand_total = '+ grand_total,
        // );


    }
</script>
@endsection