@extends('layouts.index')

@push('metatags')
 <title> {{ __('lang.carts') }}</title>
@endpush

@section('content')
<div class="container-fluid cart-page">
    <div class="  pt-3">

        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.carts') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)

        <div class="container mb-5">
            @include('includes.errors')

            <div id="cart-global-loader" class="d-none"
                 style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999; display: none; align-items: center; justify-content: center;">
                <div class="loader-icon"></div>
            </div>

            <div class="cart-content pb-5" id="cart-content">
                @if($setting && $setting->stop_order == 0)
                    @include('cart.components.orderStopped')
                @else
                    @if($cart && $cart->carts_products_total_count && $cart->carts_products_total_count > 0)
                        @include('cart.cart-content',['cart'=>$cart])
                    @else
                        @include('cart.components.empty-cart')
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('css')
    <link href="{{asset('vendors/lightpick/css/lightpick.css')}}" rel="stylesheet">
    <style>
        @media only screen and (max-width: 576px) {
            .footer{
                display: none !important;
            }
            .cart-page{
                padding-bottom: 5rem;
            }
        }
    </style>
@endpush

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
    <script src="{{ asset('vendors/lightpick/lightpick.js') }}"  crossorigin="anonymous"></script>
    <script>
        window.addEventListener('pageshow', function (event) {
            // If the page was restored from the bfcache (back-forward cache)
            if (event.persisted) {
                window.location.reload();
            }
        });
        (function () {
            if (performance && performance.getEntriesByType) {
                const nav = performance.getEntriesByType("navigation")[0];
                if (nav && nav.type === "back_forward") {
                    location.reload();
                }
            }
            try {
                var params = new URLSearchParams(window.location.search);
                var fromQuery = params.get('sessionExpired') === '1';
                var fromStorage = localStorage.getItem('sessionExpired') === '1';
                if (fromQuery || fromStorage) {
                    var msg = "{{ __('lang.sessionExpiredDueToInactivity') }}";
                    try { showErrorToastify(msg); } catch(e) { alert(msg); }
                    localStorage.removeItem('sessionExpired');
                }
            } catch(e) {}
        })();

    </script>
@endpush