@extends('web.layouts.app')

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

@section('stylesheets')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .recomended-list {
            /* height: 266px; */
            height: 346px;
            width: 260px;
        }

        recomended-list .image-box img{
            height: 140px !important;
        }

        .badge.counter {
            width: 20px;
            height: 20px;
            padding: 3px 0px;
            text-align: center;
        }

        .menubar-area {
            padding: 0px;
        }

        .spinner-border-sm {
            width: 0.8rem;
            height: 0.8rem;
        }

        #input-date {
            background: #fff;
            color: #000;
        }

        input.flatpickr-mobile {
            color: #000 !important;
        }

        .replacement-items {
            position: relative;
            display: flex;
            flex-wrap: wrap;
        }

        .replacement-item {
            position: relative;
            padding: 5px 5px 5px 5px;
            box-shadow: 0px 0px 10px -6px #00000080;
            margin-right: 10px;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .replacement-item img {
            position: relative;
            width: 70px;
            border-radius: 5px;
            margin-right: 10px;
        }

        .replacement-item span {
            margin-right: 10px;
        }

        .title h6 {
            font-size: 0.8rem;
        }


    </style>
@endsection

@section('banner')
    <div class="author-notification">
        <div class="container inner-wrapper">
            <div class="dz-info">
                <span class="text-dark">{{ $greeting }}</span>
                <h3 class="name mb-0">{{ $patient->title . ' ' . $patient->name }} 👋</h3>
            </div>
            <a href="javascript:void();" 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>
@endsection

@section('content')
    <input type="hidden" name="code" id="code" value="{{ $code }}">
    <div class="content-inner pt-0">
        <div class="container fb">
            <!-- Search -->
            <form>
                <div class="mb-3 input-group input-radius">
                    <span class="input-group-text">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-calendar-fill" viewBox="0 0 16 16">
                            <path
                                d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5"
                                fill="#B9B9B9" />
                        </svg>
                    </span>
                    <input id="input-date" type="text" placeholder="Order Date" class="form-control main-in ps-0 bs-0"
                        data-provider="flatpickr" data-date-format="d/m/Y">
                </div>
            </form>

            <!-- Dashboard Area -->
            <div class="dashboard-area">

                @foreach ($schedules as $key => $schedule)
                    <!-- Recomended Start -->
                    <div class="title-bar">
                        <h5 class="title">{{ $schedule->cycle->name }}</h5>
                        <!-- <a class="btn-link" href="#">View more</a> -->
                    </div>
                    <div class="swiper-btn-center-lr">
                        <div class="swiper-container tag-group mt-2 recomanded-swiper">
                            <div class="swiper-wrapper">
                            @foreach ($schedule->menus as $key2 => $menu)
                            <div class="swiper-slide">
                                <div class="recomended-list">
                                    <div class="image-box">
                                        <img src="{{ $menu->image }}" alt="image">
                                        <!-- <div class="form-check bookmark">
                                            <input @if ($menu->addedToCart) checked @endif class="form-check-input" type="checkbox" id="flexCheckDefault{{ $key.$key2 }}">
                                            <label class="form-check-label" for="flexCheckDefault{{ $key.$key2 }}"
                                                onclick="addCart($(this))"
                                                data-menu-id="{{ $menu->id }}"
                                                data-schedule-id="{{ $schedule->id }}"
                                                id="menu{{ $key.$key2 }}">
                                                <svg width="20" height="20" 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="#fff" />
                                                    <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="#fff" />
                                                    <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="#fff" />
                                                </svg>
                                            </label>
                                        </div> -->
                                    </div>
                                    <div class="text-content">
                                        <h6 class="title">{{ $menu->name }}</h6>
                                        <p class="subtitle" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">@foreach ($menu->items as $item) {{ $item->name }}@if (!$loop->last), @endif @endforeach @if (count($menu->items) <= 0) - @endif</p>
                                        <button class="btn @if ($menu->addedToCart) btn-light @else btn-primary @endif btn-rounded btn-block flex-1 btn-sm btn-add-to-cart"
                                            onclick="addCart($(this))"
                                            data-menu-id="{{ $menu->id }}"
                                            data-schedule-id="{{ $schedule->id }}"
                                            id="menu{{ $key.$key2 }}">
                                            @if ($menu->addedToCart) Batal @else Pilih @endif
                                        </button>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        </div>
                    </div>
                    <!-- End Recomended Start -->
                @endforeach

            </div>
        </div>
    </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') }}" method="post">
            <input type="hidden" name="code" value="{{ $code }}">
            <input type="hidden" id="order-date" name="date" value="01/01/2025">
            <input type="hidden" name="type" value="1">
            {{ csrf_field() }}
            <div class="offcanvas-body container fixed">
                <div id="wrapper-cart" style="min-height: 50vh">
                    <div class="title-bar">
                        <h5 class="title">Cycle 1</h5>
                    </div>
                    <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')
    <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">Submit</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('adminlte/component/moment/moment.min.js') }}"></script>
    <script src="{{ asset('creative/libs/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const from = urlParams.get('from');

        var process_add_to_cart = false;
        var date = "{{ date('d/m/Y') }}";
        var page = 1;
        var limit = 10;
        var search = "";
        var endLoadMore = false;

        function getItems() {
            var code = $('#code').val();
            var date = $("#input-date").val();
            var data = {
                code: code,
                name: search,
                page: page,
                limit: limit,
                date: date,
                from: from,
            }
            $.ajax({
                url: '{{ route('web.foodmenu.listwithcart') }}',
                method: 'get',
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    $(".dashboard-area").empty();
                    menuLoading();
                }
            }).done(function(response) {
                $(".dashboard-area").empty();
                generateMenu(response.rows);
                console.log(response);
            }).fail(function(response) {
                // itemRemoveLoading();
                console.log(response);
            });
        }

        function menuLoading() {
            addSpiner2($(".dashboard-area"));
        }

        function addSpiner2(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 generateMenu(items) {
            var code = $("#code").val();
            var selectedDate = $("#input-date").val();
            var html = "";

            $.each(items, function(index, item) {
                if (item.menus.length > 0) {
                    html += `<div class="title-bar">
                    <h5 class="title">${item.cycle.name}</h5>
                    <!-- <a class="btn-link" href="#">View more</a> -->
                </div>`;

                    html += `<div class="swiper-btn-center-lr">
                    <div class="swiper-container tag-group mt-4 recomanded-swiper">
                        <div class="swiper-wrapper">`;

                    $.each(item.menus, function(index2, menu) {
                        var subtitle = "";
                        $.each(menu.items, function(index2, menuItem) {
                            subtitle += menuItem.name + ",";
                        });
                        if (subtitle.length > 0) {
                            subtitle = subtitle.substring(0, 20) + '...';
                        }
                        var buttonAddToCart = "";
                        if (menu.addedToCart) {
                            buttonAddToCart = `<button class="btn btn-light btn-rounded btn-block flex-1 btn-sm btn-add-to-cart"

                                            data-menu-id="${menu.id}"
                                            data-schedule-id="${item.id}"
                                            id="menu${index+""+index2}">
                                            Batal
                                        </button>`;
                        } else {
                            buttonAddToCart = `<button class="btn btn-primary btn-rounded btn-block flex-1 btn-sm btn-add-to-cart"

                                            data-menu-id="${menu.id}"
                                            data-schedule-id="${item.id}"
                                            id="menu${index+""+index2}">
                                            Pilih
                                        </button>`;
                        }
                        html += `<div class="swiper-slide">
                        <div class="recomended-list">
                            <div class="image-box"
                                onclick="window.location.href = '{{ url('/foodmenu/detail/') }}/${menu.slug}?date=${selectedDate}&cyc=${item.cycle.id}&reg=${code}'"
                                style="cursor: pointer;">
                                <img src="${menu.image}" alt="image">
                                <div class="form-check bookmark">
                                    <label class="form-check-label" for="flexCheckDefault1">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16" style="position: relative;top: -1px;">
                                            <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
                                        </svg>
                                    </label>
                                </div>
                            </div>
                            <div class="text-content">
                                <h6 class="title"
                                    onclick="window.location.href = '{{ url('/foodmenu/detail/') }}/${menu.slug}?date=${selectedDate}&cyc=${item.cycle.id}&reg=${code}'"
                                    style="cursor: pointer;">
                                    ${menu.name}
                                </h6>
                                <p class="subtitle" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                    ${subtitle}
                                </p>
                                ${buttonAddToCart}
                            </div>
                        </div>
                    </div>`;
                    });

                    html += '</div></div></div>';
                }
            });

            $(".dashboard-area").append(html);

            if ($('.recomanded-swiper').length > 0) {
                var swiperGetStarted = new Swiper('.recomanded-swiper', {
                    speed: 500,
                    parallax: true,
                    slidesPerView: 'auto',
                    spaceBetween: 20,
                    loop: false,
                    navigation: {
                        nextEl: '.swiper-btn-next',
                        prevEl: '.swiper-btn-prev',
                    },
                    pagination: {
                        el: ".swiper-pagination",
                        clickable: true,
                    },
                });
            }
        }

        function addSpiner(el) {
            el.empty();
            el.append(`
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        `);
        }

        function addCartText(el) {
            el.empty();
            var notActive = el.hasClass('btn-primary');
            if (notActive) {
                el.removeClass('btn-primary');
                el.addClass('btn-light');
                el.append(`Batal`);
            } else {
                el.removeClass('btn-light');
                el.addClass('btn-primary');
                el.append(`Pilih`);
            }
        }

        function addCartIcon(el) {
            el.empty();
            el.append(`<svg width="20" height="20" 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="#fff" />
            <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="#fff" />
            <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="#fff" />
        </svg>`);
        }

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

        function addCart(el) {
            if (process_add_to_cart) {
                return;
            }
            //uncheck menu dengan schedule sama
            var parents = el.parents('.swiper-wrapper');
            // parents.find('input:checked').not(el.parent().children('input')).prop('checked', false);
            //reset other button add to cart
            parents.find('.btn-add-to-cart').not(el).empty().append('Pilih');
            parents.find('.btn-add-to-cart').not(el).removeClass('btn-light');
            parents.find('.btn-add-to-cart').not(el).addClass('btn-primary');

            process_add_to_cart = true;
            var food_menu_id = el.data('menu-id');
            var food_schedule_id = el.data('schedule-id');
            var code = $('#code').val();
            var data = {
                food_menu_id: food_menu_id,
                food_schedule_id: food_schedule_id,
                code: code,
                type: 1,
                qty: 1,
                _token: "{{ csrf_token() }}",
            }
            $.ajax({
                url: '{{ route('web.cart.add') }}',
                method: 'post',
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    addSpiner(el);
                }
            }).done(function(response) {
                process_add_to_cart = false;
                // addCartIcon(el);
                addCartText(el);
                if (response.status) {

                } else {

                }
                // ubah cart count
                updateCartCount(response.data.total_cart);
                return;
            }).fail(function(response) {
                process_add_to_cart = false;
                // addCartIcon(el);
                addCartText(el);
                // ubah cart count
                updateCartCount(response.data.total_cart);
                var response = response.responseJSON;
                // Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
            });
        }

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

        offcanvasEl.addEventListener('show.bs.offcanvas', function() {
            console.log('Offcanvas sedang dibuka');
            var code = $('#code').val();
            $.ajax({
                url: '{{ route('web.cart.list') }}?code=' + code + '&type=1',
                method: 'get',
                beforeSend: function() {
                    addSpinnerCart()
                }
            }).done(function(response) {
                console.log(response);
                renderCart(response.data);
                // updateTotal(response.data);
            }).fail(function(response) {
                console.log(response);
            });
        });

        offcanvasEl.addEventListener('shown.bs.offcanvas', function() {
            console.log('Offcanvas sudah terbuka sepenuhnya');
        });

        offcanvasEl.addEventListener('hide.bs.offcanvas', function() {
            console.log('Offcanvas sedang ditutup');
        });

        offcanvasEl.addEventListener('hidden.bs.offcanvas', function() {
            console.log('Offcanvas sudah tertutup sepenuhnya');
        });

        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 = "";
            var selectedDate = $("#input-date").val();
            var code = $('#code').val();

            for (const sch of obj.schedules) {
                html += `<div class="title-bar">
                <h5 class="title">${sch.cycle.name}</h5>
            </div>`;
                html += `<div class="item-list style-2 mb-5">`;
                html += `<ul>`;
                for (const cart of obj.carts) {
                    if (cart.food_schedule_id == sch.id) {
                        var food_item_replacement_html = "";
                        if (cart.food_item_replacements.length > 0) {
                            food_item_replacement_html += `<p class="mt-2 mb-2">Item Pengganti : </p>`;
                            food_item_replacement_html += `<div class="replacement-items">`;
                            for (const food_item_replacement of cart.food_item_replacements) {
                                food_item_replacement_html += `<div class="replacement-item">
                                            <img src="${food_item_replacement.image}" />
                                            <span>${food_item_replacement.name}</span>
                                        </div>`;
                            }
                            food_item_replacement_html += `</div>`;
                        }
                        html += `
                    <li>
                        <div class="item-content">
                            <input type="hidden" class="cart-item-price" value="${cart.price}">
                            <div style="cursor: pointer;" class="item-media media media-60" onclick="window.location.href = '{{ url('/foodmenu/detail/') }}/${cart.food_menu.slug}?date=${selectedDate}&cyc=${sch.cycle.id}&reg=${code}'">
                                <img src="${cart.image}" alt="logo">
                            </div>
                            <div class="item-inner">
                                <div style="cursor: pointer;" class="item-title-row" onclick="window.location.href = '{{ url('/foodmenu/detail/') }}/${cart.food_menu.slug}?date=${selectedDate}&cyc=${sch.cycle.id}&reg=${code}'">
                                    <h6 class="item-title">
                                        ${cart.food_menu.name}
                                    </h6>
                                    <div class="item-subtitle">${cart.food_menu.description}</div>
                                    ${food_item_replacement_html}
                                </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">
                                        ${cart.qty}x
                                    </div>
                                </div>-->
                                <div class="row mb-3">
                                    <input type="hidden" name="cart_id[]" value="${cart.id}">
                                    <!--<div class="col-md-6">
                                        <div class="input-group mb-3 input-radius">
                                            <textarea name="food_texture[]" class="form-control" placeholder="Texture" rows="1"></textarea>
                                        </div>
                                    </div>-->
                                    <div class="col-md-12">
                                        <div class="input-group mb-3 input-radius">
                                            <textarea name="note[]" class="form-control" placeholder="Note" rows="1"></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    `;
                    }
                }
                html += `</ul>`;
                html += `</div>`;
            }

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

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

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

        $(function() {
            flatpickrConfig = {
                minDate: "today",
                altInput: true,
                dateFormat: "YYYY-MM-DD",
                altFormat: "DD/MM/YYYY",
                allowInput: true,
                disableMobile: false, // Force the native datepicker to use our format
                parseDate: (datestr, format) => {
                    return moment(datestr, format, true).toDate();
                },
                formatDate: (date, format, locale) => {
                    // locale can also be used
                    return moment(date).format(format);
                }
            };
            $(".flatpickr").flatpickr(flatpickrConfig);

            const myDatePicker = flatpickr("#input-date", {
                onChange: function(selectedDates, dateStr, instance) {
                    console.log("Tanggal dipilih:", selectedDates, dateStr);
                    getItems();
                }
            });

            if (date !== '') {
                myDatePicker.setDate(date, true, 'd/m/Y');
            }

            $(document).on('click', '.btn-add-to-cart', function() {
                addCart($(this));
            });

            $("#cart-form").submit(function(e) {
                e.preventDefault();
                var date = $("#input-date").val();
                $("#order-date").val(date);
                var formdata = new FormData($('#cart-form')[0]);
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'post',
                    data: new FormData($('#cart-form')[0]),
                    processData: false,
                    contentType: false,
                    dataType: 'json',
                    beforeSend: function() {
                        // $('.overlay').removeClass('d-none');
                        $("#btn-confirm").addClass('disabled');
                    }
                }).done(function(response) {
                    console.log(response);
                    // $('.overlay').addClass('d-none');
                    if (response.status) {
                        document.location = response.results;
                    } else {
                        // Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                    }
                    $("#btn-confirm").removeClass('disabled');
                    return;
                }).fail(function(response) {
                    $("#btn-confirm").removeClass('disabled');
                    console.log(response.responseJSON.message);
                    // $('.overlay').addClass('d-none');
                    // var response = response.responseJSON;
                    Swal.fire({
                        title: "Gagal!",
                        text: response.responseJSON.message,
                        icon: "warning",
                        confirmButtonClass: "btn btn-primary w-xs mt-2",
                        buttonsStyling: !1
                    });
                });
            });
        });
    </script>
@endsection