@extends('web.themes.shella.layouts.app')

@push('header-css')
<style>
    .rimage__img {
        object-fit: contain;
        position: inherit !important;
    }
    .cart__sidebar .h6 {
        font-size: 18px !important;
    }
    .shipping-method-text {
        color: #041323;
        margin-bottom: 5px;
    }
</style>
@endpush

@push('header-javascript')
<script>
    window.Lara.orderTime = @json($orderTime);
</script>
@endpush

@push('footer-javascript')
<script src="/web/shella/scripts/cs/cart-page-container.js"></script>
@endpush

@section('content')
<main id="MainContent">
    <div class="breadcrumbs mt-15">
        <div class="container">
            <ul class="list-unstyled d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
                <li style="font-size: 1.6em;"><a href="/">{{ __('Home') }}</a></li>
                <li style="font-size: 1.6em;"><span>{{ __('My Cart') }}</span></li>
            </ul>
        </div>
    </div>
    {{-- <h1 class="h3 mt-20 mb-30 text-center">{{ __('Shopping Bag') }}</h1> --}}
    <br><br>
    
    <div class="cart mb-60 mb-lg-70" id="cart-container">
        <div class="container">
            
                <div class="row">
                    <div class="col-lg-8 col-xl-9">
                        <div class="cart__items">
                            <div class="cart__head pb-10 border-bottom">
                                <div class="row">
                                    <div class="d-none d-sm-block col-sm-5 col-lg-4 col-xl-5">
                                        <label class="m-0 text-uppercase">{{ __('Products') }}</label>
                                    </div>
                                    <div class="col-sm-7 col-lg-8 col-xl-7">
                                        <div class="row">
                                            <div class="col col-sm-3 col-lg-4">
                                                <label class="m-0 text-uppercase text-lg-right">{{ __('Price') }}</label>
                                            </div>
                                            <div class="col col-sm-3 col-lg-4 text-center text-lg-left">
                                                <label class="m-0 text-uppercase text-lg-right">{{ __('Quantity') }}</label>
                                            </div>
                                            <div class="col col-sm-3 col-lg-4 text-lg-left">
                                                <label class="m-0">{{ __('Total') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            {{-- Vue products --}}
                            <div class="py-20 border-bottom" v-for="(product, index) in products" :key="product.id">
                                <div class="row d-flex align-items-center flex-column flex-sm-row">
                                    <div class="col-sm-5 col-lg-4 col-xl-5 d-flex align-items-center mb-20 mb-sm-0">
                                        <a href="#" class="mr-20" @click="removeCartItem(product.id)">
                                            @{{ index + 1 }}
                                        </a>
                                        <div class="d-flex align-items-center align-items-sm-start align-items-xl-center flex-sm-column flex-xl-row w-100">
                                            <a :href="routeFor(product.slug)" class="cart__image mb-sm-15 mb-xl-0 mr-20 mr-sm-0 mr-xl-20">
                                                <div class="rimage">
                                                    <img :src="product.image" class="rimage__img"
                                                        {{-- data-aspect-ratio="0.7798440311937612" --}}
                                                        {{-- :data-srcset="imageFor(product.image)" --}}
                                                        :alt="product.slug">
                                                </div>
                                            </a>
                                            <div class="d-flex flex-column">
                                                <a
                                                    v-html="product.name"
                                                    :href="routeFor(product.slug)"
                                                ></a>
                                                {{-- <p class="mb-0">Pink / 34</p> --}}
                                                <p class="mt-10 mb-0">@{{ product.brand?.name }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-7 col-lg-8 col-xl-7">
                                        <div class="row d-flex align-items-center">
                                            <div class="col col-sm-3 text-right">
                                                <span class="price" data-js-product-price>
                                                    <span>
                                                        <span class=money>
                                                            @{{ product.price_amount }}
                                                        </span>
                                                    </span>
                                                </span> TMT
                                            </div>
                                            <div class="col col-sm-3">
                                                <input type="number"
                                                    class="mb-0 text-center text-sm-left" 
                                                    :id="product.id" 
                                                    :value="product.quantity" 
                                                    @input="productQuantityChanged($event, product)" 
                                                    min="1"
                                                >
                                            </div>
                                            <div class="col col-sm-3 text-right">
                                                <span class="price" data-js-product-price>
                                                    <span>
                                                        <span class=money :id="productTotalPriceId(product.id)">
                                                            @{{ priceFor(product) }}
                                                        </span>
                                                    </span>
                                                </span> TMT
                                            </div>
                                            <div class="col col-sm-3 text-right">
                                                <a href="#" class="mr-20" @click="removeCartItem(product.id)">
                                                    <i>
                                                        <svg 
                                                            aria-hidden="true" 
                                                            focusable="false" 
                                                            role="presentation" 
                                                            class="icon icon-theme-165" 
                                                            viewBox="0 0 24 24"
                                                            style="fill: #F44336;"
                                                        >
                                                            <path d="M4.741 21.654a.601.601 0 0 1-.186-.439v-15h-1.25a.598.598 0 0 1-.439-.186.597.597 0 0 1-.186-.439.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186h5v-2.5a.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h6.25c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v2.5h5c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186h-1.25v15a.6.6 0 0 1-.186.439.601.601 0 0 1-.439.186H5.18a.598.598 0 0 1-.439-.186zM18.305 6.215h-12.5V20.59h12.5V6.215zM9.37 9.525a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.594.594 0 0 1 .438-.186c.169 0 .316.062.44.185zm.185-4.56h5V3.09h-5v1.875zm2.94 4.56a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965a.6.6 0 0 1 .186-.439.604.604 0 0 1 .439-.186c.168 0 .315.062.439.185zm2.246 0a.604.604 0 0 1 .439-.186c.169 0 .315.063.439.186a.601.601 0 0 1 .186.439v6.875c0 .17-.062.316-.186.439a.601.601 0 0 1-.439.186.598.598 0 0 1-.439-.186.598.598 0 0 1-.186-.439V9.965c0-.169.062-.316.186-.44z"/>
                                                        </svg>
                                                    </i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        
                        {{-- <div class="pt-20">
                            <div class="free-shipping position-relative px-6 py-3 text-lg-left js-free-shipping" data-value="90000">
                                <div class="free-shipping__progress position-absolute top-0 left-0 h-100" data-js-progress style="width: 100%;"></div>
                                <div class="free-shipping__text position-relative">
                                    <i class="mr-3">
                                        <svg aria-hidden="true" focusable="false" role="presentation"
                                            class="icon icon-theme-127" viewBox="0 0 24 24">
                                            <path d="M21.648 12.672c.104.052.188.13.254.234a.62.62 0 0 1 .098.332v5a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.559a3.043 3.043 0 0 1-1.074 1.787 3.03 3.03 0 0 1-1.992.713c-.756 0-1.42-.238-1.992-.713a3.028 3.028 0 0 1-1.074-1.787h-1.309a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439V4.488H2.625a.597.597 0 0 1-.439-.186A.597.597 0 0 1 2 3.863a.6.6 0 0 1 .186-.439.597.597 0 0 1 .439-.186h8.75a.6.6 0 0 1 .439.186c.123.124.186.27.186.439v2.5h5a.614.614 0 0 1 .586.41l1.797 4.766 2.265 1.133zM9.314 9.674c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-3.75a.597.597 0 0 1-.439-.186.597.597 0 0 1-.186-.439.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h3.75a.6.6 0 0 1 .439.186zm0 3.125c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.5a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186h2.5a.6.6 0 0 1 .439.186zm11.436 4.814v-3.984l-2.148-1.074a.635.635 0 0 1-.195-.146.557.557 0 0 1-.117-.205l-1.719-4.59H12v10h.684a3.033 3.033 0 0 1 1.074-1.787 3.026 3.026 0 0 1 1.992-.713 3.03 3.03 0 0 1 1.992.713 3.041 3.041 0 0 1 1.074 1.787h1.934zm-3.936-6.064c.123.124.186.27.186.439a.602.602 0 0 1-.186.439.601.601 0 0 1-.439.186h-2.5a.597.597 0 0 1-.439-.186.6.6 0 0 1-.186-.439v-2.5a.6.6 0 0 1 .186-.439.598.598 0 0 1 .439-.186.6.6 0 0 1 .439.186c.123.124.186.27.186.439v1.875h1.875a.6.6 0 0 1 .439.186zm.264 8.017a1.81 1.81 0 0 0 .547-1.328 1.81 1.81 0 0 0-.547-1.328 1.812 1.812 0 0 0-1.328-.547 1.81 1.81 0 0 0-1.328.547 1.808 1.808 0 0 0-.547 1.328c0 .521.182.964.547 1.328.364.365.807.547 1.328.547s.963-.182 1.328-.547z"/>
                                        </svg>
                                    </i>
                                    <span data-js-text>Free Shipping</span>
                                </div>
                            </div>
                        </div> --}}

                        <div class="d-flex pt-25">
                            <a href="/" class="btn btn--text">
                                <i class="mb-4 mr-4">
                                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-012" viewBox="0 0 24 24">
                                        <path d="M21.036 12.569a.601.601 0 0 1-.439.186H4.601l4.57 4.551c.117.13.176.28.176.449a.652.652 0 0 1-.176.449.877.877 0 0 1-.215.127.596.596 0 0 1-.468 0 .877.877 0 0 1-.215-.127l-5.625-5.625a2.48 2.48 0 0 1-.068-.107c-.02-.032-.042-.068-.068-.107a.736.736 0 0 1 0-.468 2.48 2.48 0 0 0 .068-.107c.02-.032.042-.068.068-.107l5.625-5.625a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-4.57 4.551h15.996a.6.6 0 0 1 .439.186.601.601 0 0 1 .186.439.599.599 0 0 1-.186.437z"/>
                                    </svg>
                                </i>
                                <span class="text-uppercase">{{ __('Continue shopping') }}</span>
                            </a>
                            <button type="submit" class="btn btn--text ml-auto" @click="getCarts()">
                                <i class="mb-4 mr-4">
                                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-010" viewBox="0 0 24 24">
                                        <path d="M19.769 3.417c.169.026.306.107.41.244s.144.29.117.459l-.645 4.824c-.013.156-.078.283-.195.381s-.254.146-.41.146h-.078l-4.824-.645c-.169-.026-.306-.107-.41-.244s-.144-.29-.117-.459a.547.547 0 0 1 .225-.41.616.616 0 0 1 .479-.117l3.594.469a7.853 7.853 0 0 0-2.705-2.48 7.327 7.327 0 0 0-3.584-.918c-1.028 0-1.999.195-2.91.586s-1.711.927-2.394 1.611S5.101 8.345 4.71 9.257a7.306 7.306 0 0 0-.586 2.91.598.598 0 0 1-.186.439c-.124.124-.271.186-.439.186s-.315-.062-.439-.186a.6.6 0 0 1-.186-.439c0-1.211.231-2.347.693-3.408a8.922 8.922 0 0 1 1.876-2.774A8.909 8.909 0 0 1 8.216 4.11a8.446 8.446 0 0 1 3.408-.693c.703 0 1.387.082 2.051.244a8.912 8.912 0 0 1 1.904.703 8.584 8.584 0 0 1 1.689 1.123c.521.443.983.938 1.387 1.484l.41-3.008a.652.652 0 0 1 .244-.42.57.57 0 0 1 .46-.126zM9.632 16.21a.547.547 0 0 1-.225.41.612.612 0 0 1-.479.117l-3.594-.469a7.818 7.818 0 0 0 2.705 2.48c.54.3 1.113.527 1.719.684s1.228.234 1.865.234c1.028 0 1.999-.195 2.91-.586s1.709-.928 2.393-1.611 1.221-1.481 1.611-2.393a7.3 7.3 0 0 0 .586-2.91.6.6 0 0 1 .186-.439c.124-.124.271-.186.439-.186s.315.062.439.186a.601.601 0 0 1 .186.439 8.443 8.443 0 0 1-.693 3.408 8.886 8.886 0 0 1-1.875 2.773 8.909 8.909 0 0 1-2.773 1.875 8.446 8.446 0 0 1-3.408.693 8.573 8.573 0 0 1-2.051-.244 8.912 8.912 0 0 1-1.904-.703 8.54 8.54 0 0 1-1.689-1.123 8.818 8.818 0 0 1-1.387-1.484l-.41 3.008a.653.653 0 0 1-.215.391.598.598 0 0 1-.41.156H3.48c-.169-.026-.306-.107-.41-.244s-.144-.29-.117-.459l.645-4.824a.547.547 0 0 1 .225-.41.584.584 0 0 1 .459-.117l4.824.645c.169.026.306.107.41.244s.143.29.116.459z"/>
                                    </svg>
                                </i>
                                {{ __('Update bag') }}
                            </button>
                        </div>
                    </div>
                    <div class="col-lg-4 col-xl-3 mt-25 mt-lg-0">
                        <aside class="cart__sidebar p-20 border" v-if="products.length > 0">
                            <div v-if="orderShippingRegion != 'ag'" class="border-bottom border--dashed">
                                <div id="shipping-calculator" v-if="orderShippingRegion != 'ag'">
                                    <h3 class="h6 mb-10">@{{ regionDeliveryMessage }}</h3>
                                    {{-- <p class="mb-10">Enter your destination to get a shipping estimate.</p> --}}
                                    <p class="shipping-calculator-info d-none mb-10"></p>
                                    <div id="wrapper-response"></div>
                                </div>
                            </div>

                            <div :class="{'border-bottom': true, 'border--dashed': true, 'mt-15': orderShippingRegion != 'ag'}">
                                <p class="text-left h6 mb-5">@{{ translations.deliveryType }}</p>
                                <select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" id="order-shipping-method" v-model="orderShippingMethod">
                                    <option value="standart">@{{ translations.delivery.standart }}</option>
                                    <option value="express">@{{ translations.delivery.express }}</option>
                                    <option value="on_own">@{{ translations.delivery.onOwn }}</option>
                                </select>

                                <p class="text-left h6 mb-5">@{{ translations.region }}</p>
                                <select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" id="order-shipping-region" v-model="orderShippingRegion">
                                    <option v-for="(region, index) in translations.regions" :value="index" v-text="region"></option>
                                </select>

                                <div v-if="orderShippingRegion != 'ag'">
                                    <p class="text-left h6 mb-5">@{{ translations.province }}</p>
                                    <select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" v-model="orderShippingProvince">
                                        <option v-for="(region, index) in regionsProvinces" :value="region.id">@{{ region.name.tk }}</option>
                                    </select>
                                </div>

                                <div v-if="orderShippingRegion != 'ag' && orderShippingMethod === 'on_own'">
                                    <p class="text-left h6 mb-5">@{{ translations.branch }}</p>
                                    <select class="swal2-select h6 m-0 rounded w-100 h-100 mb-10" v-model="orderShippingBranch">
                                        <option v-for="(branch, index) in regionsBranches" :value="branch.id">@{{ branch.name.tk }}</option>
                                    </select>
                                </div>
                                <div v-show="orderShippingRegion == 'ag'">
                                    <div v-if="orderShippingMethod == 'standart'">
                                        <p class="text-left h6 mt-1 mb-5">@{{ translations.time }}</p>
                                        <select class="swal2-select h6 m-0 mb-5 rounded w-100 h-100" id="order-client-time">
                                            <optgroup :label="orderTime['dates']['today']">
                                                <template v-for="time in orderTime['hours']['today']">
                                                    <option :value="time.hour + ', ' + time.date">@{{ time.hour }}</option>
                                                </template>
                                            </optgroup>

                                            <optgroup :label="orderTime['dates']['tomorrow']">
                                                <template v-for="time in orderTime['hours']['tomorrow']">
                                                    <option :value="time.hour + ', ' + time.date">@{{ time.hour }}</option>
                                                </template>
                                            </optgroup>
                                        </select>
                                    </div>
                                </div>

                                {{-- <div>
                                    <label class="mb-10" for="CartSpecialInstructions">{{ __('Special Instructions For Seller') }}</label>
                                </div> --}}
                                {{-- <div>
                                    <label class="mb-15" for="CartSpecialInstructions"><span class="mb-0">Add special
                                    instructions for your order...</span></label>
                                </div> --}}
                                {{-- <textarea id="CartSpecialInstructions" rows="4"></textarea> --}}
                            </div>
                            <div class="pt-15">
                                <p class="shipping-method-text">{{ __('Shipping') }}: @{{ shippingTotal }} TMT</p>

                                <h5 class="mb-5">{{ __('Cart total') }}:</h5>
                                <h3 class="mb-5"><span class=money>@{{ totalPayment }} TMT</span></h3>

                                <input type="button" class="btn btn--full btn--secondary" name="checkout" value="{{ __('PROCEED TO CHECKOUT') }}" @click="openOrderModal()">
                            </div>
                        </aside>
                    </div>
                </div>
            
        </div>
    </div>
</main>
@stop