@extends('layouts.app')
@section('title')
    <title>Baboon - Shporta e Porosisë</title>
@endsection

@section('custom-css')
    <style>
        .button-minus-cart, .button-plus-cart, .quantity-field-cart {
            border: 1px solid #eeeeee;
            box-sizing: border-box;
            margin: 0;
            outline: none;
            padding: 10px;
        }

        .button-minus-cart, .button-plus-cart {
            -webkit-appearance: button;
            cursor: pointer;
            color: green;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        .input-group .button-minus-cart, .input-group .button-plus-cart {
            background-color: #eeeeee;
            min-width: 3rem;
            width: auto;
            transition: all 300ms ease;
        }

        .input-group .button-minus-cart,
        .input-group .button-plus-cart {
            font-weight: bold;
            height: 3rem;
            padding: 0;
            width: 3rem;
            position: relative;
        }

        .input-group .quantity-field-cart {
            position: relative;
            height: 3rem;
            left: -6px;
            text-align: center;
            width: 4rem;
            display: inline-block;
            font-size: 13px;
            margin: 0 0 5px;
            resize: vertical;
        }

        .button-plus-cart {
            left: -13px;
        }

        span.cart-item-name {
            font-size: 12px;
        }

        .collapse#restaurant-coupon {
            display: none !important;
        }

        .collapse.in#restaurant-coupon {
            display: flex !important;
        }

        .order-details-text {
            width: 46rem;
            margin: -4rem 0 -7rem -5rem;
        }

        span.select2.select2-container {
            width: unset !important;
            margin-bottom: -6rem;
            z-index: 1;
        }

        #phone-input {
            padding-left: 10rem;
            padding-top: .3rem;
        }

        .select2-selection.select2-selection--single {
            border: none;
            margin-left: 1px;
        }

        .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--single:focus {
            border: none;
        }

        h4 {
            margin-bottom: 5px;
            margin-top: 5px;
        }
        
    </style>
@endsection

@section('content')
<div id="cart-container">
    <div class="container">
        <div class="col-md-4 col-md-offset-4 col-xs-12">
            @include('partials.orderSummary', ['restaurant' => (object)session('order'), 'orders' => session('order'), 'country' => $selectedCountry, 'showMinimumOrder' => true])
        </div>
    </div>
</div>
@endsection
@section('custom-js')
    <script>
        $(document).ready(function () {
            let menuCategoriesNav = $('.menu-categories-nav');
            menuCategoriesNav.on('click', function () {
                menuCategoriesNav.removeClass('activeMenuCategory');
                let selectedMenuCategoryId = $(this).data('menu-category-id')

                let displayedMenuCategory = $('.menu-categories-data.shownMenuCategory');

                if (displayedMenuCategory.attr('id') != selectedMenuCategoryId) {
                    displayedMenuCategory.addClass('hiddenMenuCategories').removeClass('shownMenuCategory')
                }

                let newSelected = $('.menu-categories-data.hiddenMenuCategories#' + selectedMenuCategoryId)

                newSelected.addClass('shownMenuCategory').removeClass('hiddenMenuCategories')

                $(this).addClass('activeMenuCategory')
            });

            var min_order = `{{session('order') && session('order')['minimumOrder'] ? session('order')['minimumOrder'] : 0}}`;
            var total = parseInt($('#cart-total').text());

            $('.cart-tab').on('click', '.button-minus-cart', function () {

                let id = $(this).data('item-id');
                changeItemQuantity(id, 'decrement');

                calculateTotal();
                createSession();

                let cartItems = $('.cart-item-list').length;

                if (!cartItems) {
                    $('#cart-total').text(0 + 'L');
                    clearSession();
                }

                var min_order = parseInt({{session('order')['minimumOrder']}});
                var total = parseInt($('#cart-total').text());
            });

            $('.cart-tab').on('click', '.button-plus-cart', function () {
                let id = $(this).data('item-id');
                changeItemQuantity(id, 'increment');
                createSession();
                calculateTotal();

                var min_order = parseInt({{session('order')['minimumOrder']}});
                var total = parseInt($('#cart-total').text());
            });
        });

        $('#apply-discount-code').click(function () {
            const customer_input_text = $('#coupon-value').val().trim();
            const restaurant_id = $('#restaurant-id').val().trim();

            if (customer_input_text === '') {
                $('#coupon-value').css('border-color', '#F44336');
            } else {
                var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    type: "POST",
                    url: '