@extends('web.layouts.app')

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

@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">{{ $cart->total_cart }}</span>
        </a>
    </div>

    <div class="container">
        <div class="m-0 mb-2">
            <label for="companion_name" class="col-form-label">Companion Name <b class="text-danger">*</b></label>
            <input type="text" class="form-control input-name" id="companion_name" name="name" placeholder="Companion Name" required>
            <div class="invalid-feedback" id="companion_feedback">Nama companion wajib diisi.</div>
        </div>
        <div class="m-0 mb-2">
            <label for="email" class="col-form-label">Email <b class="text-danger">*</b></label>
            <input type="email" class="form-control input-name" id="email" name="email" placeholder="Email" required>
            <div class="invalid-feedback" id="email_feedback">Email wajib diisi.</div>
        </div>
        <div class="m-0">
            <label for="phone" class="col-form-label">Phone <b class="text-danger">*</b></label>
            <input type="tel" 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" id="code" name="code" value="{{ $code }}">
            <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="javascript:void(0);">{{ $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>

        <a href="javascript:void(0);" 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">
        @csrf
        <input type="hidden" name="code" value="{{ $code }}">
        <input type="hidden" id="order-date" name="date" value="{{ date('Y-m-d') }}">
        <input type="hidden" name="type" value="2">

        <div class="offcanvas-body p-0 d-flex flex-column" style="height: 100vh;">

            <div class="container flex-grow-1 overflow-auto p-3">
                <div id="wrapper-cart" class="item-list">
                </div>

                <hr class="my-4 text-muted">

                <div class="mb-3">
                    <label for="note" class="form-label fw-bold text-dark mb-1">Catatan Pesanan</label>
                    <textarea name="note" class="form-control bg-light border-0"
                        placeholder="Contoh: Telur setengah matang, jangan pedas..."
                        rows="2" style="resize: none; border-radius: 10px;"></textarea>
                </div>
            </div>

            <div class="p-3 bg-white border-top" style="box-shadow: 0 -4px 10px rgba(0,0,0,0.05);">
                <div class="container">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span class="fs-5 fw-bold text-dark">Total Tagihan</span>
                        <span class="fs-3 fw-bolder text-dark" id="cart-total">Rp 28.600</span>
                    </div>

                    <button type="submit" form="cart-form" id="btn-confirm"
                        class="btn btn-primary w-100 py-3 fs-5 fw-bold text-uppercase"
                        style="border-radius: 12px; letter-spacing: 1px;">
                        Confirm Order
                    </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 align-items-center">
            <div class="col">
                <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 {{ $cart->formated_total_price }}
                </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 data = {
                code: code,
                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 ul").empty();
                    itemLoading();
                }
            }).done(function(response) {
                itemRemoveLoading();
                appendItems(response.rows);

                if (response.rows.length < limit) {
                    $('.btn-load-more').hide();
                    endLoadMore = true;
                }
            }).fail(function(response) {
                itemRemoveLoading();
                console.error(response);
            });
        }

        function loadMore() {
            page++;
            var code = $('#code').val();
            var data = {
                code: code,
                name: search,
                page: page,
                limit: limit,
            };

            $.ajax({
                url: "{{ route('web.fooditem.listwithcart', ['site' => $site->slug]) }}",
                method: 'get',
                data: data,
                dataType: 'json'
            }).done(function(response) {
                appendItems(response.rows);

                if (response.rows.length < limit) {
                    $('.btn-load-more').hide();
                    endLoadMore = true;
                }
            }).fail(function(response) {
                console.error(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="javascript:void(0);">${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);
            $(".stepper").TouchSpin();
        }

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

        function itemRemoveLoading() {
            $('.btn-load-more').show();
            $("#item-list 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 text-primary" role="status" aria-hidden="true"></span>
        </div>`);
        }

        function updateCartCount(total) {
            $('body #cart-count').empty().append(total);
        }

        function addToCart(itemId, qty) {
            var code = $('#code').val();
            var data = {
                food_item_id: itemId,
                code: code,
                type: 2,
                qty: qty,
                _token: "{{ csrf_token() }}",
            };

            $.ajax({
                url: "{{ route('web.cartcompanion.add', ['site' => $site->slug]) }}",
                method: 'post',
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    $(".bootstrap-touchspin-up, .bootstrap-touchspin-down").prop('disabled', true);
                }
            }).done(function(response) {
                $(".bootstrap-touchspin-up, .bootstrap-touchspin-down").prop('disabled', false);
                updateTotal(response.data);
                updateCartCount(response.data.total_cart);
            }).fail(function(response) {
                $(".bootstrap-touchspin-up, .bootstrap-touchspin-down").prop('disabled', false);
                console.error(response);
            });
        }

        // --- Cart Offcanvas Handling ---
        const offcanvasEl = document.getElementById('offcanvasBottom2');

        // Perbaikan Penting: Menambahkan parameter 'event' di function()
        offcanvasEl.addEventListener('show.bs.offcanvas', function(event) {
            var code = $('#code').val();
            const CompName = $('#companion_name').val();
            const totalText = $('.footer-subtotal').text();
            let isValid = true;

            // Reset Validasi
            $('#companion_name').removeClass('is-invalid');
            $('#companion_feedback').hide();
            $('.footer-subtotal').removeClass('is-invalid');
            $('#footer-subtotal_feedback').hide();

            if (!CompName) {
                $('#companion_name').addClass('is-invalid');
                $('#companion_feedback').show();
                isValid = false;
            }

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

            if (!isValid) {
                event.preventDefault(); // Mencegah offcanvas terbuka jika tidak valid
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                return;
            }

            // Fetch Data Cart
            $.ajax({
                url: "{{ route('web.cart.list', ['site' => $site->slug]) }}?code=" + code + "&type=2",
                method: 'get',
                beforeSend: function() {
                    addSpinnerCart();
                }
            }).done(function(response) {
                renderCart(response.data);
                updateTotal(response.data);
            }).fail(function(response) {
                console.error(response);
            });
        });

        offcanvasEl.addEventListener('hidden.bs.offcanvas', function() {
            init();
        });

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

        function renderCart(obj) {
            var html = `<div class="item-list style-2 mb-5"><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></div><div style="margin-bottom: 200px"></div>`;
            $("#wrapper-cart").html(html);
            $(".stepper").TouchSpin();
        }

        function updateTotal(obj) {
            var subtotal = 0;
            for (const cart of obj.carts) {
                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-total").text(`Rp ${subtotal}`);
        }

        $(function() {
            init();

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

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

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

            $("#cart-form").submit(function(e) {
                e.preventDefault();
                const email = $("#email").val();
                const phone = $("#phone").val();
                const CompName = $('#companion_name').val();
                const paymentEl = $('#payment');
                const payment = paymentEl.length ? paymentEl.val() : null;

                var formdata = new FormData(this);
                formdata.append('companion_name', CompName);
                formdata.append('email', email);
                formdata.append('phone', phone);

                if (payment !== null && payment !== '') {
                    formdata.append('payment', payment);
                }

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'post',
                    data: formdata,
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function() {
                        $("#btn-confirm").addClass('disabled').html('<span class="spinner-border spinner-border-sm"></span> Processing...');
                    }
                }).done(function(response) {
                    if (response.status) {
                        if (response.snap_token) {
                            snap.pay(response.snap_token, {
                                onSuccess: function(result) {
                                    bootstrap.Offcanvas.getInstance('#offcanvasBottom2').hide();
                                    document.location = response.results;
                                },
                                onPending: function(result) {
                                    bootstrap.Offcanvas.getInstance('#offcanvasBottom2').hide();
                                },
                                onError: function(result) {
                                    bootstrap.Offcanvas.getInstance('#offcanvasBottom2').hide();
                                    alert("Gagal pembayaran");
                                    location.reload();
                                },
                                onClose: function() {
                                    location.reload();
                                }
                            });
                        } else {
                            document.location = response.results;
                        }
                    }
                    $("#btn-confirm").removeClass('disabled').text('CONFIRM');
                }).fail(function(response) {
                    $("#btn-confirm").removeClass('disabled').text('CONFIRM');
                    alert("Terjadi kesalahan sistem, silakan coba lagi.");
                });
            });
        });
    </script>
    @endsection