@extends('base', [
    'scripts' => [
        'flexibleInputWidth',
        'multiLineEllipsis'
    ]
])

@section('title', __('Shopping Bag'))

@section('content')
    @include('common.no_cache')

    @php
        use App\Cart;
        use App\Enumerables\Currency;
        
        /**
         * @var array $items
         */

        $version = config('app.version');
        $currency = Currency::GBP;
        $currencySign = '£ ';

        if (isset($_COOKIE['currency']) && $_COOKIE['currency'] != Currency::GBP) {
            $currency = Currency::CNY;
            $currencySign = '¥ ';
        }

        $currentMonth = date('m');
        $currentYear = date('Y');
        $maxYear = $currentYear + 2;
        $language = config('app.locale');
        $itemsCount = count($items);
        $prices = Cart::getCartPrices($items);
        
        $isCheckout = $isCheckout ?? false;
    @endphp

    <div class="ui basic segment">
        <div class="ui grid">
            <div class="three wide column"></div>
            <div class="ten wide column">
                <div class="ui breadcrumb">
                    <a href="{{route('home')}}" class="section">{{__('Home')}}</a>
                    <i class="right angle icon divider"></i>
                    <div class="active section">
                        {{__('my-bag')}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui grid" id="shoppingBag">
        <div class="row flexible-row">
            <div class="sixteen wide column">
                <div class="ui grid no-margin">
                    <div class="row">
                        <div class="sixteen wide column">
                            <div class="segment">
                                <h3 class="ui header font-title">
                                    {{__('my-bag')}}
                                </h3>

                                <span id="input-text"></span>
                            </div>
                        </div>
                    </div>

                    <div class="row count-row">
                        <div class="five wide column mass-delete-column column-vertical">
                            <div class="items">
                                @include('order.components.items_count')
                            </div>
                            <div class="delete-check">
                                @if(!$isCheckout)
                                    <input
                                        type="checkbox"
                                        class="mass-delete-checkbox mass-delete-all"
                                        name="mass-delete-all"
                                        id="mass-delete-all-top"
                                        autocomplete="off"
                                        checked
                                    >

                                    <label for="mass-delete-all-top" class="mass-delete-label relativeContainer">
                                        <i class="ui icon check relativeContainer"></i>
                                    </label>

                                    <label for="mass-delete-all-top" class="mass-delete-label-text">
                                        {{__('Select All')}}
                                    </label>
                                @endif
                            </div>
                        </div>
                        
                        <div class="eleven wide column">
                            @if(!$isCheckout)
                                @include('order.components.bag_total_price', [
                                    'total' => $prices['orderToPay'],
                                    'currency' => $currency
                                ])
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="two wide column">
                            <div class="segment popup-segment header-container">
                                <h5 class="ui header relativeContainer">
                                    {{__('Product')}}
                                </h5>
                            </div>
                        </div>

                        <div class="five wide column"></div>

                        <div class="two wide column">
                            <div class="segment popup-segment header-container">
                                <h5 class="ui header relativeContainer">
                                    {{__('unit-price')}}

                                    <img class="popupTrigger service" src="{{config('locations.systemImage.asset').'question_mark.png'}}" alt="">
                                    <div class="ui popup filter_header_price" id="popup-service-fee">
                                        <div class="text">
                                            {{__('service-fee-popup-cart')}}
                                        </div>

                                        <span class="container">
                                            <span class="triangle"></span>
                                        </span>
                                    </div>
                                </h5>
                            </div>
                        </div>

                        <div class="two wide column">
                            <div class="segment popup-segment header-container">
                                <h5 class="ui header relativeContainer">
                                    {{__('Quantity')}}
                                </h5>
                            </div>
                        </div>
    
                        <div class="two wide column">
                            <div class="segment popup-segment header-container">
                                <h5 class="ui header relativeContainer">
                                    {{__('Subtotal-2')}}
                                </h5>
                            </div>
                        </div>

                        <div class="three wide column">
                            <div class="segment header-container">
                                <h5 class="ui header relativeContainer">
                                    {{__('Start Date')}}
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($itemsCount > 0)
            <div class="row flexible-row">
                <div class="sixteen wide column">
                    <div class="ui grid no-margin itemsContainer" id="orderItems">
                        @include('order.components.cart_items', [
                            'checked' => true
                        ])
                    </div>
                </div>
            </div>
        @endif
    </div>
    
    @if($isCheckout)
        @include('order.components.checkout_summary')
    @else
        @include('order.components.bag_summary', [
            'total' => $prices['orderToPay'],
            'currency' => $currency
        ])

        @include('modals.cart_full_modal', ['reload' => true])
    @endif

    <script src="{{asset('js/simpleCountdown.js')}}?{{$version}}"></script>
    
    <script>
        //Add reverse() to jQuery
        jQuery.fn.reverse = [].reverse;
        
        $(function () {
            $('.ui.checkbox').checkbox();
        
            $('.header.relativeContainer .popupTrigger').popup({
                popup: $('#filter_header_price'),
                lastResort: 'top center'
            });
            
            initItems();
        });
        
        function initItems() {
            $('.itemsContainer .row-filter').reverse().each(function (index) {
                $(this).css('z-index', index + 1);
        
                $('.dropdown', this).dropdown({
                    on: 'click',
                    direction: 'downward'
                });
        
                let countdown = $(this).find('.discount-timer');
        
                if (countdown) {
                    simpleCountdown(
                        countdown,
                        '{{__('countdown-D')}}',
                        '{{__('countdown-H')}}',
                        '{{__('countdown-M')}}',
                        '{{__('countdown-S')}}'
                    );
                }
            });
        }
        
        function reloadContentGeneric() {
            order_items_count(true);
            @if(!$isCheckout)
                fill_orders(false);
            @endif
            updateCartSummary();
        }
    </script>
    
    @if($isCheckout)
        @include('order.scripts.cart_checkout')
    @else
        @include('order.scripts.cart_bag')
    @endif
@endsection