@extends('web.layouts.app')

@section('title', 'Order General')

@section('stylesheets')
<style>
    .badge.counter {
        width: 20px;
        height: 20px;
        padding: 3px 0px;
        text-align: center;
    }

    .menubar-area {
        padding: 0px;
    }

    .input-name {
        border-radius: 40px;
    }
</style>
@endsection

@section('banner')
<div class="author-notification">
    <div class="container inner-wrapper">
        <div class="dz-info">
            <span class="text-dark">{{ $greeting }}</span>
        </div>
        <a href="javascript:void(0);" class="position-relative me-2 notify-cart" data-bs-toggle="offcanvas"
            data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M18.1776 17.8443C16.6362 17.8428 15.3854 19.0912 15.3839 20.6326C15.3824 22.1739 16.6308 23.4247 18.1722 23.4262C19.7136 23.4277 20.9643 22.1794 20.9658 20.638C20.9658 20.6371 20.9658 20.6362 20.9658 20.6353C20.9644 19.0955 19.7173 17.8473 18.1776 17.8443Z"
                    fill="#2C406E" />
                <path
                    d="M23.1278 4.47973C23.061 4.4668 22.9932 4.46023 22.9251 4.46012H5.93181L5.66267 2.65958C5.49499 1.46381 4.47216 0.574129 3.26466 0.573761H1.07655C0.481978 0.573761 0 1.05574 0 1.65031C0 2.24489 0.481978 2.72686 1.07655 2.72686H3.26734C3.40423 2.72586 3.52008 2.82779 3.53648 2.96373L5.19436 14.3267C5.42166 15.7706 6.66363 16.8358 8.12528 16.8405H19.3241C20.7313 16.8423 21.9454 15.8533 22.2281 14.4747L23.9802 5.74121C24.0931 5.15746 23.7115 4.59269 23.1278 4.47973Z"
                    fill="#2C406E" />
                <path
                    d="M11.3404 20.5158C11.2749 19.0196 10.0401 17.8418 8.54244 17.847C7.0023 17.9092 5.80422 19.2082 5.86645 20.7484C5.92617 22.2262 7.1283 23.4008 8.60704 23.4262H8.67432C10.2142 23.3587 11.4079 22.0557 11.3404 20.5158Z"
                    fill="#2C406E" />
            </svg>
            <span class="badge badge-danger counter" id="cart-count"></span>
        </a>
    </div>
    <div class="container">
        <div class="mb-2">
            <label for="guest_name">Name<b class="text-danger">*</b></label>
            <input type="text" id="guest_name" name="guest_name" class="form-control input-name"
                placeholder="Masukkan Nama" required>
            <div class="invalid-feedback" id="guest_name_feedback">Nama wajib diisi.</div>
        </div>
        <div class="mb-2">
            <label for="guest_location">Location<b class="text-danger">*</b></label>
            <input type="text" id="guest_location" name="guest_location" class="form-control input-name"
                placeholder="Masukkan Lokasi" required>
            <div class="invalid-feedback" id="guest_name_feedback">Lokasi wajib diisi.</div>
        </div>
        @if($site->id == 5 || $site->id == 6)
        <div class="mb-2">
            <label for="order_type">Order Type <b class="text-danger">*</b></label>
            <select id="order_type" name="order_type" class="form-control input-name">
                <option value="dine_in">Dine In </option>
                <option value="take_away">Take Away</option>
            </select>
        </div>
        @endif
        <div class="m-0">
            <label for="email" class="col-form-label">Email <b class="text-danger">*</b></label>
            <input type="text" class="form-control input-name" id="email" name="email" placeholder="Email"
                required>
            <div class="invalid-feedback" id="email_feedback">Emai wajib diisi.</div>
        </div>
        <div class="m-0">
            <label for="phone" class="col-form-label">Phone <b class="text-danger">*</b></label>
            <input type="text" class="form-control input-name" id="phone" name="phone" placeholder="Phone"
                required>
            <div class="invalid-feedback" id="phone_feedback">Phone wajib diisi.</div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="container">
    <div class="serach-area">
        <form>
            <div class="mb-3 input-group input-radius">
                <span class="input-group-text">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                        <path
                            d="M20.5605 18.4395L16.7528 14.6318C17.5395 13.446 18 12.0262 18 10.5C18 6.3645 14.6355 3 10.5 3C6.3645 3 3 6.3645 3 10.5C3 14.6355 6.3645 18 10.5 18C12.0262 18 13.446 17.5395 14.6318 16.7528L18.4395 20.5605C19.0245 21.1462 19.9755 21.1462 20.5605 20.5605C21.1462 19.9748 21.1462 19.0252 20.5605 18.4395ZM5.25 10.5C5.25 7.605 7.605 5.25 10.5 5.25C13.395 5.25 15.75 7.605 15.75 10.5C15.75 13.395 13.395 15.75 10.5 15.75C7.605 15.75 5.25 13.395 5.25 10.5Z"
                            fill="#B9B9B9" />
                    </svg>
                </span>
                <input type="text" placeholder="Search menu" class="form-control main-in ps-0 bs-0 input-search">
            </div>
        </form>

        <div class="item-list recent-jobs-list" id="item-list">

            <input type="hidden" class="code" id="code" name="code">
            <input type="hidden" id="type" name="type" value="general">
            <!-- TITLE -->
            <!-- <h4 class="title my-4">Expresson & Classic</h4> -->
            <!-- TITLE -->

            <div class="invalid-feedback" id="footer-subtotal_feedback">Pilih setidaknya 1 item.</div>
            <ul>
                @foreach ($items as $item)
                <li>
                    <div class="item-content">
                        <div class="item-media media media-90" style="margin-left: 0px;margin-right: 20px;">
                            <img src="{{ $item->image }}" alt="logo">
                        </div>
                        <div class="item-inner">
                            <div class="item-title-row">
                                <h6 class="item-title"><a href="product-detail.html">{{ $item->name }}</a></h6>
                                <div class="item-subtitle">{{ $item->description }}</div>
                            </div>
                            <div class="item-footer">
                                <div class="d-flex align-items-center">
                                    <h6 class="me-3">Rp {{ $item->priceFormated }}</h6>
                                </div>
                                <div class="d-flex align-items-center">
                                    <div class="dz-stepper border-1 btn-add-to-cart"
                                        data-item-id="{{ $item->id }}">
                                        <input class="stepper" type="text" value="{{ $item->qty }}"
                                            name="items[]">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
            <!-- <div class="saprater"></div>    -->
        </div>
        <!-- Job List -->
        <a href="javascript:void();" class="btn btn-outline-primary btn-rounded btn-block btn-load-more">VIEW MORE</a>
    </div>
</div>

<div style="margin-bottom: 100px">

</div>
@endsection

@section('cart')
<div class="offcanvas offcanvas-bottom rounded-0" tabindex="-1" id="offcanvasBottom2">
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close">
        <i class="fa-solid fa-xmark"></i>
    </button>
    <form id="cart-form" action="{{ route('web.order.add', ['site' => $site->slug]) }}" method="post">
        <input type="hidden" class="code" name="code">
        <input type="hidden" id="order-date" name="date" value="{{ date('Y-m-d') }}">
        <input type="hidden" name="type" value="4">
        {{ csrf_field() }}
        <div class="offcanvas-body container fixed">
            <div id="wrapper-cart" style="min-height: 50vh">
                <div class="item-list style-2 mb-5">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media media media-60">
                                    <img src="{{ asset('foodia') }}/assets/images/food/pic6.png" alt="logo">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <h6 class="item-title"><a href="order-list.html">Chicken Briyani Haji
                                                Mahmuds</a></h6>
                                        <div class="item-subtitle">Coffe, Milk</div>
                                    </div>
                                    <div class="item-footer">
                                        <div class="d-flex align-items-center">
                                            <h6 class="me-3">$ 4.0</h6>
                                            <del class="off-text">
                                                <h6>$ 8.9</h6>
                                            </del>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="dz-stepper border-1 ">
                                                <input class="stepper" type="text" value="3" name="demo3">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media media media-60">
                                    <img src="{{ asset('foodia') }}/assets/images/food/food1.png" alt="logo">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <h6 class="item-title"><a href="order-list.html">Deluxe Super Burger Spicy</a>
                                        </h6>
                                        <div class="item-subtitle">Coffe, Milk</div>
                                    </div>
                                    <div class="item-footer">
                                        <div class="d-flex align-items-center">
                                            <h6 class="me-3">$ 7.2</h6>
                                            <del class="off-text">
                                                <h6>$ 8.9</h6>
                                            </del>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="dz-stepper border-1 ">
                                                <input class="stepper" type="text" value="3" name="demo3">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media media media-60">
                                    <img src="{{ asset('foodia') }}/assets/images/food/pic3.png" alt="logo">
                                </div>
                                <div class="item-inner">
                                    <div class="item-title-row">
                                        <h6 class="item-title"><a href="order-list.html">Coffee Mocha / White
                                                Mocha</a></h6>
                                        <div class="item-subtitle">Coffe, Milk</div>
                                    </div>
                                    <div class="item-footer">
                                        <div class="d-flex align-items-center">
                                            <h6 class="me-3">$ 12.0</h6>
                                            <del class="off-text">
                                                <h6>$ 8.9</h6>
                                            </del>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <div class="dz-stepper border-1 ">
                                                <input class="stepper" type="text" value="3" name="demo3">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="view-title">
                <div class="container">
                    <ul>
                        <!-- <li>
                                        <a href="javascript:void(0);" class="promo-bx">
                                            Apply Promotion Code
                                            <span>2 Promos</span>
                                        </a>
                                    </li> -->
                        <!-- <li>
                                        <span>Subtotal</span>
                                        <span id="cart-subtotal">Rp 54.76</span>
                                    </li> -->
                        <!-- <li>
                                        <span>TAX (10%)</span>
                                        <span id="cart-tax">-Rp 1.08</span>
                                    </li> -->
                        <li>
                            <h5>Total</h5>
                            <h5 id="cart-total">Rp 53.68</h5>
                        </li>
                    </ul>
                    <button type="submit" form="cart-form" class="btn btn-primary btn-rounded btn-block flex-1 ms-2"
                        id="btn-confirm">CONFIRM</button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('menubar')
    @php
        $currentHour = (int) now()->timezone('Asia/Jakarta')->format('H');
        $isStoreOpen = $site->id == 6 ? ($currentHour >= 9 && $currentHour < 21) : true;
    @endphp
<div class="menubar-area">
    <div class="container">
        <div class="row">
            <!-- <div class="col-3">
                            <a href="javascript:void(0);" class="position-relative me-2 notify-cart align-middle" data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M18.1776 17.8443C16.6362 17.8428 15.3854 19.0912 15.3839 20.6326C15.3824 22.1739 16.6308 23.4247 18.1722 23.4262C19.7136 23.4277 20.9643 22.1794 20.9658 20.638C20.9658 20.6371 20.9658 20.6362 20.9658 20.6353C20.9644 19.0955 19.7173 17.8473 18.1776 17.8443Z"
                                        fill="#2C406E" />
                                    <path
                                        d="M23.1278 4.47973C23.061 4.4668 22.9932 4.46023 22.9251 4.46012H5.93181L5.66267 2.65958C5.49499 1.46381 4.47216 0.574129 3.26466 0.573761H1.07655C0.481978 0.573761 0 1.05574 0 1.65031C0 2.24489 0.481978 2.72686 1.07655 2.72686H3.26734C3.40423 2.72586 3.52008 2.82779 3.53648 2.96373L5.19436 14.3267C5.42166 15.7706 6.66363 16.8358 8.12528 16.8405H19.3241C20.7313 16.8423 21.9454 15.8533 22.2281 14.4747L23.9802 5.74121C24.0931 5.15746 23.7115 4.59269 23.1278 4.47973Z"
                                        fill="#2C406E" />
                                    <path
                                        d="M11.3404 20.5158C11.2749 19.0196 10.0401 17.8418 8.54244 17.847C7.0023 17.9092 5.80422 19.2082 5.86645 20.7484C5.92617 22.2262 7.1283 23.4008 8.60704 23.4262H8.67432C10.2142 23.3587 11.4079 22.0557 11.3404 20.5158Z"
                                        fill="#2C406E" />
                                </svg>
                            </a>
                        </div> -->
            <div class="col">
                <!-- <button type="button" class="btn btn-primary btn-sm float-end" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom">Checkout</button> -->
                <button type="button" class="btn btn-primary btn-sm float-end"
                    @if($isStoreOpen)
                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom"
                    @else
                    disabled
                    @endif> {{ $isStoreOpen ? 'Checkout' : 'Tutup (09:00 - 21:00)' }}
                </button>
                <div class="footer-subtotal float-end me-2 fs-5 fw-semibold lh-lg text-dark">
                    Rp
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}">
</script>
<script>
    var page = 1;
    var limit = 10;
    var search = "";
    var endLoadMore = false;

    function init() {
        endLoadMore = false;
        $('.btn-load-more').show();
        getItems();
    }

    function getItems() {
        var code = $('#code').val();
        var type = $('#type').val();
        var data = {
            code: code,
            type: 'general',
            name: search,
            page: page,
            limit: limit,
        }
        $.ajax({
            url: "{{ route('web.fooditem.listwithcart', ['site' => $site->slug]) }}",
            method: 'get',
            data: data,
            dataType: 'json',
            beforeSend: function() {
                $("#item-list").find('ul').empty();
                itemLoading();
            }
        }).done(function(response) {
            itemRemoveLoading();
            appendItems(response.rows);
            // Update data
            initUpdateTotal(response);
            initUpdateCartCount(response);
            console.log(response);
            //jika rows kurang dari limit maka hilangkan button load more
            if (response.rows.length < limit) {
                $('.btn-load-more').hide();
                endLoadMore = true;
            }
        }).fail(function(response) {
            itemRemoveLoading();
            console.log(response);
        });
    }

    function loadMore() {
        page++;
        var code = $('#code').val();
        var data = {
            code: code,
            name: search,
            page: page,
            type: 'general',
            limit: limit,
        }
        $.ajax({
            url: `{{ route('web.fooditem.listwithcart', ['site' => $site->slug]) }}`,
            method: 'get',
            data: data,
            dataType: 'json',
            beforeSend: function() {
                //before send
            }
        }).done(function(response) {
            appendItems(response.rows);
            //jika rows kurang dari limit maka hilangkan button load more
            if (response.rows.length < limit) {
                $('.btn-load-more').hide();
                endLoadMore = true;
            }
            console.log(response);
        }).fail(function(response) {
            console.log(response);
        });
    }

    function appendItems(items) {
        var html = "";

        $.each(items, function(index, item) {
            html += `
            <li>
                <div class="item-content">
                    <div class="item-media media media-90" style="margin-left: 0px;margin-right: 20px;">
                        <img src="${item.image}" alt="logo">
                    </div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <h6 class="item-title"><a href="product-detail.html">${item.name}</a></h6>
                            <div class="item-subtitle">${item.description}</div>
                        </div>
                        <div class="item-footer">
                            <div class="d-flex align-items-center">
                                <h6 class="me-3">Rp ${item.priceFormated}</h6>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="dz-stepper border-1 btn-add-to-cart" data-item-id="${item.id}">
                                    <input class="stepper" type="text" value="${item.qty}" name="items[]">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            `;
        });

        $("#item-list ul").append(html);

        //init stepper
        $(".stepper").TouchSpin();
    }

    function itemLoading() {
        $('.btn-load-more').hide();
        addSpiner($("#item-list ul"));
    }

    function itemRemoveLoading() {
        $('.btn-load-more').show();
        $("#item-list").find('ul').empty();
    }

    function addSpiner(el) {
        el.empty();
        el.append(`
        <div class="text-center" style="min-height: 200px;width: 100%;">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        </div>
        `);
    }

    function updateCartCount(total) {
        console.log("Total Cart: " + total);
        $('body #cart-count').empty().append(total);
    }

    function initUpdateCartCount(obj) {
        let total = 0;
        for (const cart of obj.rows) {
            total += cart.qty;
        }
        $('body #cart-count').empty().append(total);
    }

    function addToCart(itemId, qty) {
        var code = $('#code').val();
        var data = {
            food_item_id: itemId,
            code: code,
            type: 4,
            qty: qty,
            _token: "{{ csrf_token() }}",
        }
        $.ajax({
            url: "{{ route('web.cartgeneral.add', ['site' => $site->slug]) }}",
            method: 'post',
            data: data,
            dataType: 'json',
            beforeSend: function() {
                $(".bootstrap-touchspin-up").prop('disabled', true);
                $(".bootstrap-touchspin-down").prop('disabled', true);
            }
        }).done(function(response) {
            $(".bootstrap-touchspin-up").prop('disabled', false);
            $(".bootstrap-touchspin-down").prop('disabled', false);
            updateTotal(response.data);
            updateCartCount(response.data.total_cart);
            console.log(response);
        }).fail(function(response) {
            $(".bootstrap-touchspin-up").prop('disabled', false);
            $(".bootstrap-touchspin-down").prop('disabled', false);
            console.log(response);
        });
    }

    // cart
    const offcanvasEl = document.getElementById('offcanvasBottom2');

    // validasi di awal
    offcanvasEl.addEventListener('show.bs.offcanvas', function(event) {
        var code = $('#code').val();
        const guestName = $('#guest_name').val();
        const guestLocation = $('#guest_location').val();
        const total = $('.footer-subtotal').text();
        let isValid = true;

        $('#guest_name').removeClass('is-invalid');
        $('#guest_location').removeClass('is-invalid');
        $('#guest_name_feedback').hide();
        $('#guest_location_feedback').hide();
        $('.footer-subtotal').removeClass('is-invalid');
        $('#footer-subtotal_feedback').hide();

        if (!guestName) {
            $('#guest_name').addClass('is-invalid');
            $('#guest_name_feedback').show();
            isValid = false;
        }
        if (!guestLocation) {
            $('#guest_location').addClass('is-invalid');
            $('#guest_location_feedback').show();
            isValid = false;
        }

        // Jika total nya 0
        if (total.replace(/\s+/g, ' ').trim().split(" ")[1] == '0') {
            $('.footer-subtotal').addClass('is-invalid');
            $('#footer-subtotal_feedback').show();
            isValid = false;
        }

        if (!isValid) {
            event.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            return;
        };

        $.ajax({
            url: "{{ route('web.cart.list', ['site' => $site->slug]) }}?code=" + code + "&type=4",
            method: 'get',
            beforeSend: function() {
                addSpinnerCart();
            }
        }).done(function(response) {
            renderCart(response.data);
            updateTotal(response.data);
        }).fail(function(response) {
            console.log(response);
        });
    });
    //jika offcanvas close maka jalankan init
    offcanvasEl.addEventListener('hidden.bs.offcanvas', function() {
        console.log('Offcanvas sedang ditutup');
        init();
    });

    function addSpinnerCart() {
        $("#wrapper-cart").empty();
        $("#wrapper-cart").append(`<div class="dz-spinner color-spinner text-center pt-4">
            <div class="spinner-border spinner-lg me-2 mb-2 text-primary" role="status">
                <span class="sr-only">Loading...</span>
            </div>
        </div>`);
    }

    function renderCart(obj) {
        var html = "";

        html += ``;
        html += `<div class="item-list style-2 mb-5">`;
        html += `<ul>`;
        for (const cart of obj.carts) {
            html += `
            <li>
                <input type="hidden" name="food_items[]" value="${cart.food_item.id}">
                <div class="item-content">
                    <input type="hidden" class="cart-item-price" value="${cart.price}">
                    <div class="item-media media media-60">
                        <img src="${cart.image}" alt="logo">
                    </div>
                    <div class="item-inner">
                        <div class="item-title-row">
                            <h6 class="item-title">
                                ${cart.food_item.name}
                            </h6>
                            <div class="item-subtitle">${cart.food_item.description}</div>
                        </div>
                        <div class="item-footer">
                            <div class="d-flex align-items-center">
                                <h6 class="me-3">Rp ${cart.priceFormated}</h6>
                            </div>
                            <div class="d-flex align-items-center">
                                <div class="dz-stepper border-1 btn-add-to-cart" data-item-id="${cart.food_item.id}">
                                    <input class="stepper" type="text" value="${cart.qty}" name="qty[]">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            `;
        }
        html += `</ul>`;
        html += `</div>`;

        html += `<div style="margin-bottom: 200px"></div>`;

        $("#wrapper-cart").empty();
        $("#wrapper-cart").append(html);

        //init stepper
        $(".stepper").TouchSpin();
    }

    function updateTotal(obj) {
        var subtotal = 0;
        for (const cart of obj.carts) {
            subtotal += cart.price * cart.qty;
        }
        //tax 10%
        var tax = subtotal * 0.1;
        var total = subtotal + tax;
        //format money tanpa decimal
        subtotal = subtotal.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });
        tax = tax.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });
        total = total.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

        $(".footer-subtotal").text(`Rp ${subtotal}`);
        $("#cart-subtotal").text(`Rp ${subtotal}`);
        // $("#cart-tax").text(`Rp ${tax}`);
        $("#cart-total").text(`Rp ${subtotal}`);
    }

    function initUpdateTotal(obj) {
        let subtotal = 0;
        for (const cart of obj.rows) {
            subtotal += cart.price * cart.qty;
        }

        var tax = subtotal * 0.1;
        var total = subtotal + tax;

        subtotal = subtotal.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });
        tax = tax.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });
        total = total.toLocaleString('id-ID', {
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        });

        $(".footer-subtotal").text(`Rp ${subtotal}`);
        $("#cart-subtotal").text(`Rp ${subtotal}`);
        // $("#cart-tax").text(`Rp ${tax}`);
        $("#cart-total").text(`Rp ${subtotal}`);
    }

    function initLocalStorage() {
        // Apakah sudah ada id guest di storage
        let guestId = localStorage.getItem('guest_id');
        const urlParams = new URLSearchParams(window.location.search);
        const roomParam = urlParams.get('room');
        if (roomParam) {
            $('#guest_location').val(roomParam);
            $('#guest_location').attr('readonly', true);
            $('#guest_location').css('background-color', '#e9ecef');
        }
        if (!guestId) {
            const prefixGuestId = "GRL";

            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const currentDate = `${year}${month}${day}`;

            const randomNumber = Math.floor(Math.random() * 90000) + 10000;
            guestId = `${prefixGuestId}.${currentDate}.${randomNumber}`;

            localStorage.setItem('guest_id', guestId);
        }

        // Jika sudah ada
        $(".code").each((idx, elem) => {
            $(elem).val(guestId);
        });
    }

    $(function() {
        initLocalStorage();
        init();

        // Add to cart
        // $(document).on('click touchstart', '.btn-add-to-cart button.bootstrap-touchspin-up', function(e){
        //     var itemId = $(this).parents('.btn-add-to-cart').attr('data-item-id');
        //     var qty = $(this).parents('.btn-add-to-cart').find('.stepper').val();
        //     addToCart(itemId, qty);
        //     console.log("Add to Cart : "+itemId);
        // });
        // // Remove from cart
        // $(document).on('click touchstart', '.btn-add-to-cart button.bootstrap-touchspin-down', function(e){
        //     var itemId = $(this).parents('.btn-add-to-cart').attr('data-item-id');
        //     var qty = $(this).parents('.btn-add-to-cart').find('.stepper').val();
        //     addToCart(itemId, qty);
        //     console.log("Remove from Cart :"+itemId);
        // });

        //update qty
        $(document).on('change', '.stepper', function() {
            var itemId = $(this).parents('.btn-add-to-cart').attr('data-item-id');
            var qty = $(this).parents('.btn-add-to-cart').find('.stepper').val();
            addToCart(itemId, qty);
            console.log("Add to Cart : " + itemId);
        })

        //on search
        $(document).on('keyup', '.input-search', function(e) {
            search = $(this).val();
            page = 1;
            init();
        });

        //load more
        $(document).on('click', '.btn-load-more', function(e) {
            if (!endLoadMore) {
                loadMore();
            }
        });

        $("#cart-form").submit(function(e) {
            e.preventDefault();
            const guestName = $('#guest_name').val();
            const guestLocation = $('#guest_location').val();
            const guestEmail = $('#email').val();
            const guestPhone = $('#phone').val();
            const orderType = $('#order_type').val();

            let isValid = true;
            $('#guest_name').removeClass('is-invalid');
            $('#guest_location').removeClass('is-invalid');
            $('#guest_name_feedback').hide();
            $('#guest_location_feedback').hide();
            if (!guestName) {
                $('#guest_name').addClass('is-invalid');
                $('#guest_name_feedback').show();
                isValid = false;
            }
            if (!guestLocation) {
                $('#guest_location').addClass('is-invalid');
                $('#guest_location_feedback').show();
                isValid = false;
            }
            if (!isValid) return;

            var formdata = new FormData($('#cart-form')[0]);
            formdata.append('guest_name', guestName);
            formdata.append('guest_location', guestLocation);
            formdata.append('email', guestEmail);
            formdata.append('phone', guestPhone);
            if ($('#order_type').length > 0) {
                formdata.append('order_type', orderType);
            }
            $.ajax({
                url: $(this).attr('action'),
                method: 'post',
                data: formdata,
                processData: false,
                contentType: false,
                dataType: 'json',
                beforeSend: function() {
                    // $('.overlay').removeClass('d-none');
                    $("#btn-confirm").addClass('disabled');
                }
            }).done(function(response) {
                if (response.status) {
                    if (response.snap_token) {
                        snap.pay(response.snap_token, {
                            onSuccess: function(result) {
                                const $canvas = $('#offcanvasBottom2');
                                const offcanvas = bootstrap.Offcanvas.getInstance(
                                    $canvas) || new bootstrap.Offcanvas($canvas);
                                offcanvas.hide();

                                document.location = response.results;
                            },
                            onPending: function(result) {
                                const $canvas = $('#offcanvasBottom2');
                                const offcanvas = bootstrap.Offcanvas.getInstance(
                                    $canvas) || new bootstrap.Offcanvas($canvas);
                                offcanvas.hide();

                                // I don't know what should i do
                            },
                            onError: function(result) {
                                const $canvas = $('#offcanvasBottom2');
                                const offcanvas = bootstrap.Offcanvas.getInstance(
                                    $canvas) || new bootstrap.Offcanvas($canvas);
                                offcanvas.hide();

                                alert("Gagal pembayaran");
                                location.reload();
                            },
                            onClose: function(result) {
                                location.reload();
                            }
                        });
                    } else {
                        // Dari patient (buat jaga")
                        document.location = response.results;
                    }

                }
                $("#btn-confirm").removeClass('disabled');
                return;
            }).fail(function(response) {
                $("#btn-confirm").removeClass('disabled');
            });
        });
    });
</script>
@endsection