@extends('web.layouts.app')

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

@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>
                {{-- <h3 class="name mb-0">{{ $patient->title." ".$patient->name }} 👋</h3> --}}

            </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">
                <label for="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">Ward 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 }}">
                <!-- TITLE -->
                <!-- <h4 class="title my-4">Expresson & Classic</h4> -->
                <!-- TITLE -->

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

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

    </div>
@endsection

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

@section('menubar')
    <div class="menubar-area">
        <div class="container">
            <div class="row">
                <!-- <div class="col-3">
                            <a href="javascript:void(0);" class="position-relative me-2 notify-cart align-middle" data-bs-toggle="offcanvas"
                                data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M18.1776 17.8443C16.6362 17.8428 15.3854 19.0912 15.3839 20.6326C15.3824 22.1739 16.6308 23.4247 18.1722 23.4262C19.7136 23.4277 20.9643 22.1794 20.9658 20.638C20.9658 20.6371 20.9658 20.6362 20.9658 20.6353C20.9644 19.0955 19.7173 17.8473 18.1776 17.8443Z"
                                        fill="#2C406E" />
                                    <path
                                        d="M23.1278 4.47973C23.061 4.4668 22.9932 4.46023 22.9251 4.46012H5.93181L5.66267 2.65958C5.49499 1.46381 4.47216 0.574129 3.26466 0.573761H1.07655C0.481978 0.573761 0 1.05574 0 1.65031C0 2.24489 0.481978 2.72686 1.07655 2.72686H3.26734C3.40423 2.72586 3.52008 2.82779 3.53648 2.96373L5.19436 14.3267C5.42166 15.7706 6.66363 16.8358 8.12528 16.8405H19.3241C20.7313 16.8423 21.9454 15.8533 22.2281 14.4747L23.9802 5.74121C24.0931 5.15746 23.7115 4.59269 23.1278 4.47973Z"
                                        fill="#2C406E" />
                                    <path
                                        d="M11.3404 20.5158C11.2749 19.0196 10.0401 17.8418 8.54244 17.847C7.0023 17.9092 5.80422 19.2082 5.86645 20.7484C5.92617 22.2262 7.1283 23.4008 8.60704 23.4262H8.67432C10.2142 23.3587 11.4079 22.0557 11.3404 20.5158Z"
                                        fill="#2C406E" />
                                </svg>
                                <span class="badge badge-danger counter" id="cart-count">{{ $cart->total_cart }}</span>
                            </a>
                        </div> -->
                <div class="col">
                    <button type="button" class="btn btn-primary btn-sm float-end" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasBottom2" aria-controls="offcanvasBottom">Checkout</button>
                    <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>
        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') }}',
                method: 'get',
                data: data,
                dataType: 'json',
                beforeSend: function() {
                    $("#item-list").find('ul').empty();
                    itemLoading();
                }
            }).done(function(response) {
                itemRemoveLoading();
                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) {
                itemRemoveLoading();
                console.log(response);
            });
        }

        function loadMore() {
            page++;
            var code = $('#code').val();
            var data = {
                code: code,
                name: search,
                page: page,
                limit: limit,
            }
            $.ajax({
                url: '{{ route('web.fooditem.listwithcart') }}',
                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 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') }}',
                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() {
            console.log('Offcanvas sedang dibuka');
            var code = $('#code').val();
            const CompName = $('#companion_name').val();
            const total = $('.footer-subtotal').text();
            let isValid = true;

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

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

            if (!isValid) {
                event.preventDefault();
                return;
            }

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

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

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

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

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

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

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

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

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

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

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

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

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

            $("#cart-form").submit(function(e) {
                e.preventDefault();
                const CompName = $('#companion_name').val();
                var formdata = new FormData($('#cart-form')[0]);
                formdata.append('companion_name', CompName);
                $.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) {
                    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);
                    // $('.overlay').addClass('d-none');
                    // var response = response.responseJSON;
                    // Swal.fire({ title: "Error!", text: response.message, icon: "error", confirmButtonClass: "btn btn-primary w-xs mt-2", buttonsStyling: !1 })
                });
            });
        });
    </script>
@endsection