@extends(!in_array(\Auth::user()->role, [10, 15]) ? 'layout' : 'layoutfrontdesk')

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

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

@section('content')

	<!-- Page header -->
        <div class="page-header {{in_array(\Auth::user()->role, [1,2]) ? 'page-header-light' : ''}}">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4>  <span class="font-weight-semibold">Master Table</span></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">

                    <div class="form-group row">
                        <label class="col-form-label col-sm-1">Resto</label>
                        <div class="col-sm-3">
                            <select id="shop_select" name="shop_select" class="form-control form-control-select2 border-1 border-teal" >
                                <option value="">-- Select Resto/Shop --</option>
                                @foreach( $shops as $key => $val)
                                    <option value="{{$val->id}}" {{\Request::get('s') ? (\Request::get('s') == $val->id ? 'selected' : '') : ''}}>{{$val->nama}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div id="tambah_table" class="col-sm-8" style="{{\Request::get('s') ? '' : 'display:none;'}}">
                            <a  data-toggle="modal"
                                data-target="#tambah_kamar_modal">
                                <button type="button" class="btn btn-success rounded-round">
                                    <i class="icon-add mr-2"></i> Add
                                </button>
                            </a>
                        </div>
                    </div>

                </div>

                <table class="table datatable-basic table-hover">
                    <thead>
                        <tr>
                            <th class="d-none">no</th>
                            <th>#</th>
                            <th>Shop</th>
                            <th>Table Number</th>
                            {{-- <th>Status Bayar</th> --}}
                            <th>Table Status</th>
                            {{-- <th>Total Pendapatan</th> --}}
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

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

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

    <!-- Danger modal -->
        <div id="modal_theme_danger" class="modal fade" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger" align="center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form action="" method="post" id="delform">
                        @csrf
                        @method('DELETE')

                        {{-- input hidden shop id --}}
                        <input id="hidden_shop_id_delete"  type="hidden" name="shop_id" value="">

                        <div class="modal-body" align="center">
                            <h2> Delete Data? </h2>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-link" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn bg-danger">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
	<!-- /default modal -->

    <!--MODAL-->
        <div id="tambah_kamar_modal" class="container_modal modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-success" align="center">
                        <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Add Master Table</h6>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form id="tambahmeja" action="{{ route('tableshop.store') }}" method="post">
                        @method('post')
                        @csrf
                        <input id="hidden_shop_id"  type="hidden" name="shop_id" value="">
                        <div class="modal-body">
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3">Table Qty</label>
                                <div class="col-sm-9">
                                    <input id="jumlah_meja" name="jumlah_meja" value="" class="form-control border-1 border-teal" type="text" autocomplete="off">
                                    <span class="warning-nomormeja text-danger"></span>
                                </div>
                            </div>
                            {{-- <div class="form-group row">
                                <label class="col-form-label col-sm-3">Shop/Toko</label>
                                <div class="col-lg-9">
                                    <select name="shop_id" id="shop_id" class="form-control form-control-select2 border-1 border-teal" required>
                                        <option value="">-- Pilih Shop/Toko --</option>
                                        @foreach($shops as $key => $val)
                                            <option value="{{$val->id}}" {{}}>{{$val->nama}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}
                            {{-- <div class="form-group row">
                                <label class="col-form-label col-sm-3">Status Bayar</label>
                                <div class="col-lg-9">
                                    <select name="status_bayar" id="status_bayar" class="form-control form-control-select2 border-1 border-teal" required>
                                        <option value="">-- Pilih Status Bayar --</option>
                                        @foreach(config('custom.status_bayar_pos') as $key => $val)
                                            <option value="{{$key}}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3">Table Status</label>
                                <div class="col-lg-9">
                                    <select name="status_meja" id="status_meja" class="form-control form-control-select2 border-1 border-teal" required>
                                        <option value="">-- Select Table Status --</option>
                                        @foreach(config('custom.status_meja_pos') as $key => $val)
                                            <option value="{{$key}}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="submitModal btn btn-success">Submit</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    <!--/MODAL-->

    <!--MODAL-->
        <div id="edit_kamar_modal" class="container_modal modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-primary" align="center">
                        <h6 class="modal-title"><i class="fas fa-user mr-1"></i>Edit Table</h6>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <form id="edtmeja" action="" method="post">
                        @method('post')
                        @csrf
                        <input id="hidden_shop_id_edit"  type="hidden" name="shop_id" value="">
                        <div class="modal-body">
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3">Number</label>
                                <div class="col-sm-9">
                                    <input id="edt_nomor_meja" name="nomor_meja" value="" class="nomor_meja_value form-control border-1 border-teal" type="text" autocomplete="off">
                                    <span class="warning-nomormeja text-danger"></span>
                                </div>
                            </div>
                            {{-- <div class="form-group row">
                                <label class="col-form-label col-sm-3">Status Bayar</label>
                                <div class="col-lg-9">
                                    <select name="status_bayar" id="edt_status_bayar" class="form-control form-control-select2 border-1 border-teal" required>
                                        <option value="">-- Pilih Status Bayar --</option>
                                        @foreach(config('custom.status_bayar_pos') as $key => $val)
                                            <option value="{{$key}}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}
                            <div class="form-group row">
                                <label class="col-form-label col-sm-3">Table Status</label>
                                <div class="col-lg-9">
                                    <select name="status_meja" id="edt_status_meja" class="form-control form-control-select2 border-1 border-teal" required>
                                        <option value="">-- Select Table Status --</option>
                                        @foreach(config('custom.status_meja_pos') as $key => $val)
                                            <option value="{{$key}}">{{$val}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" class="submitModal btn btn-primary">Submit</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    <!--/MODAL-->

@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/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/media/fancybox.min.js')}}"></script>
	<script src="{{asset('global_assets/js/plugins/forms/styling/uniform.min.js')}}"></script>

	<!-- JS Date Picker -->
	<script src="{{asset('/')}}/global_assets/js/plugins/notifications/jgrowl.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/gallery_library.js')}}"></script>
	<script>

        //static constant from custom.php
        let status_bayar_pos = {!! json_encode(config('custom.status_bayar_pos')) !!};
        let status_meja_status = {!! json_encode(config('custom.status_meja_pos')) !!};
        let session_shop_id = {!! json_encode(\Request::get('s')) !!};
        let shop_select_id = session_shop_id ? session_shop_id : $('#shop_select').val();

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

            // get shop id
            $('#hidden_shop_id_delete').val(shop_select_id);
		});

        var DatatableBasicNull = 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: [ 2 ]
                    }],
                    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(
                    {
            			processing: true,
            			serverSide: true,
            			ajax: {
                                url: "{{route('tableshop-datatable')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                },
                            },
                        "order": [[ 0, "ASC" ]],
            			columns:[
            				{ data: null, name:'nomor_meja_sort', 'visible': false, 'targets': [0], render: function ( data, type, sort ) {
                                return data.nomor_meja
                            }},
            				{data:'DT_RowIndex', name:'no'},

                            { data: null, render: function ( data, type, row ) {
                                return data.shop.nama
                            }},

            				{ data: null, render: function ( data, type ) {
                                return data.nomor_meja
                            }},

            				// {data:null, render:function(data,type,row){
                            //     return status_bayar_pos[data.status_bayar]
                            // }},

                            {data:null, render:function(data, type, row){
                                return status_meja_status[data.status_meja]
                            }},

                            // {data:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, render:function(data, type){
            					let html = `<div style="width: 100%; text-align:center">
                                                <a class="edtbutton"
                                                    data-toggle="modal"
                                                    data-target="#edit_kamar_modal"
                                                    data-url="{{ url('tableshop-update')}}/${data.id}"
                                                    data-nama="${data.nomor_meja}"
                                                    data-status_bayar ="${data.status_bayar}"
                                                    data-status_meja ="${data.status_meja}"
                                                    >
                                                        <button type="button" class="btn btn-primary btn-icon">
                                                            <i class="icon-pencil5" title="Edit"></i>
                                                        </button>
                                                </a>
            									<a class="delbutton"
            									   data-toggle="modal"
            									   data-target="#modal_theme_danger"
                                                   data-url="{{ url('tableshop-delete')}}/${data.id}"
            									>
            										<button type="button" class="btn btn-danger btn-icon">
            											<i class="icon-x" title="Hapus"></i>
            										</button>
            									</a>
            								</div>`
            					return html;
            				}},
            			]
            		}
                 );

                // 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 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: [ 2 ]
                        }],
                        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(
                        {
            			processing: true,
            			serverSide: true,
            			ajax: {
                                url: "{{route('tableshop-datatable')}}",
                                type: "POST",
                                data:{
                                    _token: '{{csrf_token()}}',
                                    shop_id: shop_select_id,
                                },
                            },
                        "order": [[ 0, "ASC" ]],
            			columns:[
                            { data: null, name:'nomor_meja_sort', 'visible': false, 'targets': [0], render: function ( data, type, sort ) {
                                return data.nomor_meja
                            }},

            				{data:'DT_RowIndex', name:'no'},

                            { data: null, render: function ( data, type, row ) {
                                return data.shop.nama
                            }},

            				{ data: null, render: function ( data, type ) {
                                return data.nomor_meja
                            }},

            				// {data:null, render:function(data,type,row){
                            //     return status_bayar_pos[data.status_bayar]
                            // }},

                            {data:null, render:function(data, type, row){
                                return status_meja_status[data.status_meja]
                            }},

                            // {data:'total_pendapatan', name:'total_pendapatan'},

            				{data:null, render:function(data, type){
            					let html = `<div style="width: 100%; text-align:center">
                                                <a class="edtbutton"
                                                    data-toggle="modal"
                                                    data-target="#edit_kamar_modal"
                                                    data-url="{{ url('tableshop-update')}}/${data.id}"
                                                    data-nama="${data.nomor_meja}"
                                                    data-status_bayar ="${data.status_bayar}"
                                                    data-status_meja ="${data.status_meja}"
                                                    >
                                                        <button type="button" class="btn btn-primary btn-icon">
                                                            <i class="icon-pencil5" title="Edit"></i>
                                                        </button>
                                                </a>
            									<a class="delbutton"
            									   data-toggle="modal"
            									   data-target="#modal_theme_danger"
                                                   data-url="{{ url('tableshop-delete')}}/${data.id}"
            									>
            										<button type="button" class="btn btn-danger btn-icon">
            											<i class="icon-x" title="Hapus"></i>
            										</button>
            									</a>
            								</div>`
            					return html;
            				}},
            			]
            		}
                    );

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


		}();

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

		document.addEventListener('DOMContentLoaded', function() {
            DatatableBasicNull.init();
		});

        $('.container_modal').on('hidden.bs.modal', function () {
            console.log('reset');
            $(this).find('form').trigger('reset');
        })

        //On Click Section
        $(document).on("click", ".edtbutton", function () {

            var nomor_meja = $(this).data('nama');
            var status_bayar = $(this).data('status_bayar');
            var status_meja = $(this).data('status_meja');
            var url = $(this).data('url');

            $("#edtmeja").attr("action", url);
            $('#edt_nomor_meja').val(nomor_meja);
            $('#edt_status_bayar').val(status_bayar).trigger('change');
            $('#edt_status_meja').val(status_meja).trigger('change');
            $('#hidden_shop_id_edit').val(shop_select_id);

        });

        $(document).on("change", "#shop_select", function () {

            shop_select_id = $('#shop_select').val();

            if (shop_select_id != '') {
                $('.datatable-basic').DataTable().clear().destroy();
                $('#tambah_table').attr('style', '');
                $('#hidden_shop_id').val(shop_select_id);
                // $('#hidden_shop_id_edit').val(shop_select_id);
                DatatableBasicNull.init();
            }else{
                $('.datatable-basic').DataTable().clear().destroy();
                $('#tambah_table').attr('style', 'display: none;');
                $('#hidden_shop_id').val(shop_select_id);
                // $('#hidden_shop_id_edit').val(shop_select_id);
                DatatableBasic.init();
            }

        });

        //Cek No Kamar
        $('.nomor_meja_value').on('change', function(){

            let nomor = $(this).val();
            $.ajax({
                type: 'POST',
                url: "{{ url('/cek-nomor-meja/')}}",
                data:{
                    _token: '{{csrf_token()}}',
                    nomor : nomor,
                    shop : shop_select_id,
                },
                success: function (data) {
                    $('.warning-nomormeja').html(data.text);
                    if(data.count > 0){
                        $('.submitModal').attr('disabled', 'disabled');
                    }
                    else{
                        $('.submitModal').removeAttr('disabled');
                    }
                }
            });

        });


	</script>

	<script type="text/javascript">
		$( document ).ready(function() {
	        // 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

		});
	</script>
@endsection