@extends('layouts.kasir')

@section('title', 'Menu')

@push('style')
    {{-- <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css"> --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css" rel="stylesheet" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
        
    <style>
        #list-order {
            table-layout: fixed;
            width: 100%;
        }
        
        #list-order td,
        #list-order th {
            word-break: break-word;      /* Memaksa kata panjang agar turun ke bawah */
            white-space: normal;         /* Izinkan spasi agar bisa turun ke baris berikutnya */
            vertical-align: top;         /* Supaya teks tetap rapi di atas */
        }
    </style>
@endpush

@section('main')
<div class="container mt-4">
    <div class="row mb-3 align-items-center">
        <div class="col">
            <h4 class="mb-0">Tables</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('kasir/menu') }}"><i class="bx bx-home-alt"></i></a></li>
                <li class="breadcrumb-item active">Kelola Kasir</li>
                <li class="breadcrumb-item active">@yield('title')</li>
            </ol>
        </div>
    </div>

    <div class="row flex-column-reverse flex-lg-row">
        <div class="col-lg-8">
            <div class="row mb-3">
                <div class="col-md-8 mb-2">
                    <input type="text" class="form-control" id="search" name="search" placeholder="Cari menu...">
                </div>
                <div class="col-md-4 mb-2">
                    <select class="form-control" id="category" name="category">
                        <option value="all" selected>Semua</option>
                        @foreach ($category as $row)
                            <option value="{{ $row->name }}">{{ $row->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row" id="menus">
                @include('kasir.menu.data')
            </div>
        </div>

        <div class="col-lg-4">
            <form id="createOrder" autocomplete="off">
                <div class="card">
                    <div class="card-body p-3">
                        <h5 class="card-title text-center py-2">Transaksi</h5>
                        <div class="form-group">
                            <label for="orderer">Pemesan <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="orderer" id="orderer" placeholder="Masukan Nama Pemesan" required>
                        </div>
                        <div class="form-group">
                            <label for="table">No. Meja <span class="text-danger">*</span></label>
                            <select class="form-control" id="table" name="table_id" required>
                                <option value="" selected>Pilih Meja Pelanggan</option>
                                @foreach ($table as $row)
                                    <option value="{{ $row->id }}"> No. Meja : {{ $row->table_number }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="table-responsive mt-1">
                            <table class="table table-bordered" id="list-order">
                                <thead>
                                    <tr>
                                        <th width="45%">Menu</th>
                                        <th width="25%">Qty</th>
                                        <th>Total</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                            <div class="d-flex justify-content-between mb-3">
                                <div class="font-weight-bold">Total</div>
                                <div id="textGrandTotal">Rp. 0</div>
                            </div>
                            <div class="form-group mb-3">
                                <label for="bayar">Nominal Pembayaran</label>
                                <input type="text" class="form-control" name="bayar" id="bayar" placeholder="Masukan Nominal Pembayaran">
                            </div>
                            <div class="d-flex justify-content-between mb-1">
                                <div class="font-weight-bold">Kembalian</div>
                                <div id="textKembalian">Rp. 0</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer p-3">
                        <input type="hidden" name="payment" value="Cash">
                        <input type="hidden" class="form-control" id="grandTotal" name="grandTotal">
                        <button class="btn btn-success btn-sm btn-block d-none" type="submit" id="proses">Proses</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>



@push('script')
    {{-- <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#search, #category').on('input change', function() {
                getMenus(1);
            })
            
            $("#createOrder").submit(function(e) {
                setButtonLoadingState("#createOrder .btn.btn-success", true, "Proses");
                e.preventDefault();
                const url = `{{ route('kasir.orders.store') ?? '' }}`;
                const data = new FormData(this);

                const successCallback = function(response) {
                    clearCart();
                    setButtonLoadingState("#createOrder .btn.btn-success", false, "Proses");
                    handleSuccess("Order Berhasil", null, null, "/kasir/orders");
                };

                const errorCallback = function(error) {
                    setButtonLoadingState("#createOrder .btn.btn-success", false, "Proses");
                    console.log(error);
                };

                ajaxCall(url, "POST", data, successCallback, errorCallback);
            });

            $('#table').select2({
                theme: 'bootstrap4',
                placeholder: 'Pilih Meja Pelanggan',
            });

            $('#bayar').on('input', function() {
                let angka = $(this).val().replace(/[^0-9]/g, '');
                if (angka) {
                    $(this).val(formatRupiah(angka));
                } else {
                    $(this).val('');
                }
                hitungKembalian();
            });
        });

        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            let page = $(this).attr('href').split('page=')[1];
            getMenus(page);
        });
    </script>
    <script>
        $(document).on('click', '.btn-toggle-status', function() {
            let menuId = $(this).data('id');
            let url = `/kasir/menus/${menuId}/toggle-status`;
        
            const successCallback = function(response) {
                handleSuccess(response, null, null, "no");
                getMenus(1).window.location.reload();
            };
        
            const errorCallback = function(err) {
                alert('Gagal memperbarui status menu.');
                // console.log(err);
            };
        
            ajaxCall(url, 'PATCH', null, successCallback, errorCallback);
        });
    </script>

@endpush

@endsection