@extends('web.layouts.app')

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

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

        .menubar-area {
            padding: 0px;
        }

        /* Wrapper dan elemen utama */
        .select2-container .select2-selection--single {
            width: 100% !important;
            padding: 0 !important;
            margin: 8px 0 !important;
            border: 1px solid #d9e0f3 !important;
            border-radius: 40px !important;
            box-sizing: border-box !important;
            height: 45px !important;
            display: flex !important;
            align-items: center;
            background-color: #fff;
        }

        /* Hapus padding pada teks di dalam pilihan */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            padding-left: 20px !important;
            line-height: 45px !important;
            color: #333;
        }

        /* Style untuk panah dropdown */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 45px !important;
            right: 15px !important;
            top: 0 !important;
            width: 30px;
        }

        /* Dropdown list */
        .select2-container--default .select2-results__option {
            padding: 10px;
            border-radius: 8px;
        }

        /* Hover dan highlight */
        .select2-container--default .select2-results__option--highlighted {
            background-color: #e0e7ff;
            color: #1a237e;
        }

        /* Dropdown container */
        .select2-container .select2-dropdown {
            border: 1px solid #d9e0f3 !important;
            border-radius: 20px !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden !important;
        }

        /* Dropdown item list */
        .select2-container--default .select2-results__option {
            padding: 10px 15px;
            font-size: 14px;
            color: #333;
            border-radius: 0 !important;
            transition: background-color 0.2s ease;
        }

        /* Hover effect untuk item */
        .select2-container--default .select2-results__option--highlighted {
            background-color: #f0f4ff !important;
            color: #1a237e !important;
        }

        /* Aktif/terpilih */
        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: #e8f0fe !important;
            color: #1a237e !important;
        }

        /* Input pencarian dalam dropdown select2 */
        .select2-container .select2-search--dropdown .select2-search__field {
            border: 1px solid #d9e0f3 !important;
            border-radius: 18px !important;
            padding: 8px 15px !important;
            box-sizing: border-box !important;
            font-size: 14px;
            outline: none;
            width: 100% !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            position: absolute !important;
            height: 100% !important;
            top: 0;
            right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }

        /* Jika SVG atau panahnya terlalu kecil/besar */
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #999 transparent transparent transparent;
            border-style: solid;
            border-width: 5px 4px 0 4px;
        }

        /* text yang terseleksi */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #333 !important;
            line-height: 45px !important;
            padding: 20px !important;
            margin: 0 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* tombol untuk hapus hasil seleksi */
        .select2-container--default .select2-selection--single .select2-selection__clear {
            position: absolute;
            right: 18px;
            /* space before arrow */
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 16px;
            cursor: pointer;
            z-index: 2;
        }

        .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="publish">Select Doctor<b class="text-danger">*</b></label>
                <select name="doctor_id" id="doctor_id" class="form-control select" data-placeholder="Select Doctor"
                    required>
                </select>
            </div>
            <div class="mb-2">
                <label for="publish">Select Ward<b class="text-danger">*</b></label>
                <select name="ward" id="ward_id" class="form-control select" data-placeholder="Select Ward" required>
                </select>
                <div class="invalid-feedback" id="ward_id_feedback">Ward wajib diisi.</div>
            </div>
            <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="doctor">

                <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="d-none 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="3">
            {{ 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>
                                <h5>Total</h5>
                                <h5 id="cart-total">Rp 00000</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 = $currentHour >= 9 && $currentHour < 21;
    @endphp
    <div class="menubar-area">
        <div class="container">
            <div class="row">
                <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>
        $(document).ready(function() {
            $('#doctor_id').select2({
                ajax: {
                    url: "{{ route('web.order.selectdoctor', ['site'=> $site->slug]) }}",
                    type: 'GET',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 30,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                                // email: `${item.email}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
            });
            $('#ward_id').select2({
                ajax: {
                    url: "{{ route('web.order.selectward', ['site'=> $site->slug]) }}",
                    type: 'GET',
                    dataType: 'json',
                    data: function(params) {
                        return {
                            name: params.term,
                            page: params.page,
                            limit: 30,
                        };
                    },
                    processResults: function(data, params) {
                        params.page = params.page || 1;
                        var option = [];
                        $.each(data.rows, function(index, item) {
                            option.push({
                                id: item.id,
                                text: `${item.name}`,
                                // email: `${item.email}`,
                            });
                        });
                        return {
                            results: option,
                            pagination: {
                                more: (params.page * 30) < data.total
                            },
                        };
                    },
                },
                allowClear: true,
            });
            $('#doctor_id').on('change', function(e) {
                const selectedDoctorId = $(this).val();

                if (selectedDoctorId) {
                    $(".code").each((idx, elem) => {
                        $(elem).val(selectedDoctorId);
                    });
                    $('.btn-load-more').removeClass('d-none').addClass('d-block');
                    getItems();
                } else {
                    console.log('Dokter dikosongkan');
                }
            });
        });
    </script>
    <script>
        var page = 1;
        var limit = 10;
        var search = "";
        var endLoadMore = false;

        // $('.btn-load-more').hide();

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

        function getItems() {
            var code = $('#doctor_id').val();
            var type = $('#type').val();
            var data = {
                code: code,
                type: 'doctor',
                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 = $('#doctor_id').val();
            var data = {
                code: code,
                name: search,
                page: page,
                type: 'doctor',
                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: 3,
                qty: qty,
                _token: "{{ csrf_token() }}",
            }
            $.ajax({
                url: "{{ route('web.doctor.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');
        offcanvasEl.addEventListener('show.bs.offcanvas', function(event) {
            var code = $('#code').val();
            const wardId = $('#ward_id').val();
            const total = $('.footer-subtotal').text();
            let isValid = true;

            $('#ward_id').removeClass('is-invalid');
            $('#ward_id_feedback').hide();
            $('.footer-subtotal').removeClass('is-invalid');
            $('#footer-subtotal_feedback').hide();

            if (!wardId) {
                $('#ward_id').addClass('is-invalid');
                $('#ward_id_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=3",
                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-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-total").text(`Rp ${subtotal}`);
        }



        $(function() {

            init();

            //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 wardId = $('#ward_id').val();
                const email = $('#email').val();
                const phone = $('#phone').val();
                let isValid = true;

                $('#ward_id').removeClass('is-invalid');
                $('#ward_id_feedback').hide();

                if (!wardId) {
                    $('#ward_id').addClass('is-invalid');
                    $('#ward_id_feedback').show();
                    isValid = false;
                }

                if (!isValid) return;
                var formdata = new FormData($('#cart-form')[0]);
                formdata.append('ward', wardId);
                formdata.append('email', email);
                formdata.append('phone', phone);
                

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