{{-- Jika sedang search --}}
<div class="container mt-4">
    <div class="row flex-column-reverse flex-lg-row">
        <div class="col-lg-12">
            <div class="row" id="searchMenu" style="display: none;"></div>
        </div>
    </div>
</div>

<div id="defaultPage" class="container">
    <div class="col-lg-4">
            <form id="createOrder" autocomplete="off">
                <div class="card">
                    <div class="card-body p-3">
                        <input type="hidden" name="table_number" id="table_number" value="{{ session('table_number') ?? '' }}">
                        <h5 class="card-title text-center py-2">Transaksi <span id="table_update" class="font-weight-bold">Meja {{ session('table_number') ?? '-' }}</span></h5>
                        <input type="hidden" name="orderer" id="orderer" value="{{ auth()->user()->name }}">
                        <div class="table-responsive mt-3">
                            <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">
                                <div class="text-muted">Biaya Online 2% Per transaksi</div>
                                <div class="text-muted" id="textFee">Rp. 0</div>
                            </div>
                            <div class="d-flex justify-content-between">
                                <div class="font-weight-bold">Total</div>
                                <div id="textGrandTotal">Rp. 0</div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer p-2">
                        <input type="hidden" name="payment" value="Transfer">
                        <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>

<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 src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.clientKey') }}"></script> --}}
<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.clientKey') }}"></script>
<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('#search').on('input change', function() {
            let keyword = $(this).val().trim();
            if (keyword.length > 0) {
                $('#defaultPage').hide();
                $('#floating-cart-button').fadeIn();
                $('#searchMenu').show().html('<div class="col-12 text-center text-muted">Loading...</div>');
                getMenus(1, keyword);
            } else {
                $('#searchMenu').hide().empty();
                $('#floating-cart-button').fadeOut();
                $('#defaultPage').show();
            }
        });

        let profileTriggered = false;
        function goToProfile(delay = 1500) {
            if (!profileTriggered) {
                profileTriggered = true;
                setTimeout(() => {
                    $('.nav-footer[data-page="profile"]').trigger('click');
                }, delay);
            }
        }

        $("#createOrder").submit(function(e) {
            setButtonLoadingState("#createOrder .btn.btn-success", true, "Proses");
            e.preventDefault();
            const url = `{{ route('orders.store') ?? '' }}`;
            const data = new FormData(this);

            const successCallback = function(response) {
                console.log(response);
                setButtonLoadingState("#createOrder .btn.btn-success", false, "Proses");
                // Hapus cart setelah sukses
                clearCart();
                if (!response.data.payment) {
                    console.log(response.data);
                    let storedData = JSON.parse(localStorage.getItem('transactions')) || [];

                    // Tambahkan transaksi baru ke dalam array
                    storedData.push({
                        snapToken: response.data.snapToken
                        , kode: response.data.kode
                    });
                    // Simpan kembali array ke localStorage
                    localStorage.setItem('transactions', JSON.stringify(storedData));
                    
                    snap.pay(response.data.snapToken, {
                        onSuccess: function(result) {
                            const kode = response.data.kode;
                            // Mengecek status transaksi midtrans 
                            fetch(`/cek-status/${kode}`)
                                .then(res => res.json())
                                .then(statusResponse => {
                                    // console.log(statusResponse);
                                    handleSuccess("Transaksi Berhasil", null, null, "no");
                                    goToProfile(); 
                                })
                                .catch(err => {
                                    // Tetap redirect meskipun gagal mengecek status
                                    handleSuccess("Transaksi Berhasil", null, null, "no");
                                    goToProfile(); 
                                });
                        }
                        , onPending: function(result) {
                            handleSuccess("Transaksi Berlangsung"
                                , null, null
                                , "no");
                                goToProfile(); 
                        }
                        , onError: function(result) {
                            console.log(result)
                        }
                    });
                } else {
                    handleSuccess(response, null, null, "no");
                    goToProfile(); 
                }
            };

            errorCallback = function(error) {
                // console.log(error);
                confirmScanMeja(error.responseJSON.data, error.responseJSON.message);
            }

            ajaxCall(url, "POST", data, successCallback, errorCallback);
        });
    });
</script>