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

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

@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 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">Resto POS - </span> Layout Meja</h3>
            <span class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></span>
        </div>
    </div>
</div>
<!-- /page header -->

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

            {{-- Menu --}}
            <div id="containerTableId" class="col-md-12">
                <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-9">
                                <select onchange="selectShopGetTable(this.value)" class="form-control border-1 border-teal form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="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>
                        @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-9">
                                <select onchange="selectShopGetTable(this.value)" class="form-control border-1 border-teal form-control-select2" data-container-css-class="border-teal" data-dropdown-css-class="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>
                        @endif
                    </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 Meja</h4>
                                </div>
                            </div>
                        </div>

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

                        <div class="row" id="table_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
                                hehe
                            @endif

                        </div>

                    </div>

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

<!-- Modal Area -->
    <div id="modalTarget" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success" align="center">
                    <h6 class="modal-title"><i class="fas fa-wallet mr-1"></i>Data Meja</h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <form id="formMeja" action="" method="POST">
                    @csrf

                    <input type="hidden" id="cart_id" name="cart_id">

                    <div class="form-group row">
                        <label class="col-form-label col-sm-3">Nama</label>
                        <div class="col-sm-9">
                            <input id="nama_pelanggan" name="nama_pelanggan" class="form-control border-1 border-teal" type="text">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    <button type="submit" id="submit_pembayaran_checkout" class="btn bg-primary">Order</button>
                </div>

                </form>


            </div>
        </div>
    </div>
<!-- /Modal Area -->

@endsection

@section('js')
<!-- Theme JS files -->
<script src="{{asset('global_assets/js/plugins/notifications/bootbox.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('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 type="text/javascript">

    $( document ).ready(function() {

        // $( "#" ).click(function( event ) {
        //         event.preventDefault();
        //         console.log('test')
        // });


    });

    // $(document).on("click", "#myMeja", function () {
    //         var cart_id = $(this).data('cartid');
    //         var nama = $(this).data('nama');
    //         var url = $(this).data('url');

    //         $("#nama_pelanggan").val(nama);
    //         $("#cart_id").val(cart_id);
    //         $("#formMeja").attr("action", url);
    // });

    function selectShopGetTable(id){

            let index = 1;

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

                    $('#table_list_id').html('')

                        if (data.length > 1) {
                            $.each(data, function(index, value){
                                // {{ url('resto-pos') }}/${value.id}
                                // data-target="#modalTarget" data-cartid="${value.cartresto_id}" data-nama="${value.active_cart.nama_pelanggan ? value.active_cart.nama_pelanggan : '' }"
                                let list_tables = "";
                                if (value.status_meja == 1) {
                                    list_tables =
                                    `
                                        <a id="myMeja" href =" {{ url('resto-pos') }}/${value.id}" class="col-md-3" style="cursor:pointer;" >
                                            <div class="card bg-light" style="min-height: 10em;">
                                                <div class="card-header px-1 py-1">
                                                    <span>&nbsp;</span>
                                                </div>
                                                <div class="card-body text-center">
                                                    <span></span>
                                                    <br>
                                                    <span style="font-size:120%; color:#0d98a7; font-weight:bold;" >
                                                        Meja-${value.nomor_meja}
                                                        <br>
                                                    </span>
                                                    <span style="font-size:120%;">
                                                        ${value.active_cart.nama_pelanggan ? value.active_cart.nama_pelanggan : '(Kosong)' }
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    `
                                }else if (value.status_meja == 2) {
                                    list_tables =
                                    `
                                        <a onclick="console.log('tutup');" class="col-md-3" style="cursor:pointer;" >
                                            <div class="card bg-danger" style="min-height: 10em;">
                                                <div class="card-header px-1 py-1">
                                                    <span>&nbsp;</span>
                                                </div>
                                                <div class="card-body text-center">
                                                    <span></span>
                                                    <br>
                                                    <span style="font-size:120%; color:#ffffff; font-weight:bold;" >
                                                        Meja-${value.nomor_meja}
                                                        <br>
                                                    </span>
                                                    <span style="font-size:120%;">
                                                        (Tutup)
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    `
                                }
                                $('#table_list_id').append(list_tables)
                            })
                        }else{
                            let html = `
                                <div class="col-md-12">
                                    <div class="alert alert-danger text-center mb-2" role="alert">
                                        Tidak Punya Meja
                                    </div>
                                </div>
                            `;
                            $('#table_list_id').html(html)
                        }

                    }
            });
    }

</script>
@endsection