@extends('LandingPage.Layouts.master')
@section('content')
    @php($currency = getCurrency(session('currency_id',1)))
    <div class="breadcrumb-block style-shared">
        <div class="breadcrumb-main bg-linear overflow-hidden">
            <div class="container lg:pt-[134px] pt-24 pb-10 relative">
                <div class="main-content w-full h-full flex flex-col items-center justify-center relative z-[1]">
                    <div class="text-content">
                        <div class="heading2 text-center">{{ translate('Shopping Cart') }}</div>
                        <div class="link flex items-center justify-center gap-1 caption1 mt-3">
                            <a href='index.html'>{{ translate('Homepage') }}</a>
                            <i class="ph ph-caret-right text-sm text-secondary2"></i>
                            <div class='text-secondary2 capitalize'>{{ translate('Shopping Cart') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="cart-block md:py-20 py-10">
        <div class="container">
            <div class="content-main flex justify-between max-xl:flex-col gap-y-8">
                <div class="xl:w-2/3 xl:pr-3 w-full">
                    <div class="time countdown-cart bg-green py-3 px-5 flex items-center rounded-lg">
                        <div class="heding5">🔥</div>
                        <div class="caption1 pl-2">{{ translate('Your cart will expire in') }}
                            <span class="min text-red text-button fw-700"><span class="minute">10</span> : <span class="second">00</span></span>
                            <span>{{ translate('minutes! Please checkout now before your items sell out!') }}</span>
                        </div>
                    </div>
                    <div class="heading banner mt-5">
                        <div class="text">{{ translate('Buy') }}
                            <span class="text-button"> {{$currency->symbol}}<span class="more-price">250</span>.00 </span>
                            <span>{{ translate('more to get') }}</span>
                            <span class="text-button">{{ translate('freeship') }}</span>
                        </div>
                        <div class="tow-bar-block mt-4">
                            <div class="progress-line" style="width: 50%;"></div>
                        </div>
                    </div>
                    <div class="list-product w-full sm:mt-7 mt-5">
                        <div class='w-full'>
                            <div class="heading bg-surface bora-4 pt-4 pb-4">
                                <div class="flex">
                                    <div class="w-1/2">
                                        <div class="text-button text-center">{{ translate('Products') }}</div>
                                    </div>
                                    <div class="w-1/12">
                                        <div class="text-button text-center">{{ translate('Price') }}</div>
                                    </div>
                                    <div class="w-1/6">
                                        <div class="text-button text-center">{{ translate('Quantity') }}</div>
                                    </div>
                                    <div class="w-1/6">
                                        <div class="text-button text-center">{{ translate('Total Price') }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-product-main w-full mt-3">
                                {{-- Products dynamically loaded here --}}
                            </div>
                        </div>
                    </div>
                    @auth
                    <div class="input-block discount-code w-full h-12 sm:mt-7 mt-5">
                        <form class='w-full h-full relative'>
                            <input type="text" placeholder='{{ translate("Add voucher discount") }}' name="coupon"
                                   class='w-full h-full bg-surface pl-4 pr-14 rounded-lg border border-line' required />
                            <button class='button-main absolute top-1 bottom-1 right-1 px-5 rounded-lg flex items-center justify-center'>
                                {{ translate('Apply Code') }}
                            </button>
                        </form>
                    </div>
                    <div class="list-voucher flex items-center gap-5 flex-wrap sm:mt-7 mt-5">
                        @foreach ([['10%', 200], ['15%', 300], ['20%', 400]] as [$percent, $min])
                            <div class='item border border-line rounded-lg py-2'>
                                <div class="top flex gap-10 justify-between px-3 pb-2 border-b border-dashed border-line">
                                    <div class="left">
                                        <div class="caption1">{{ translate('Discount') }}</div>
                                        <div class="caption1 font-bold">{{ $percent }} {{ translate('OFF') }}</div>
                                    </div>
                                    <div class="right">
                                        <div class="caption1">{{ translate('For all orders') }} <br />{{ translate('from') }} ${{ $min }}</div>
                                    </div>
                                </div>
                                <div class="bottom gap-6 items-center flex justify-between px-3 pt-2">
                                    <div class="text-button-uppercase">{{ translate('Code') }}: AN6810</div>
                                    <div class="button-main py-1 px-2.5 capitalize text-xs">
                                        {{ translate('Apply Code') }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @endauth
                </div>
                <div class="xl:w-1/3 xl:pl-12 w-full">
                    <div class="checkout-block bg-surface p-6 rounded-2xl">
                        <div class="heading5">{{ translate('Order Summary') }}</div>
                        <div class="total-block py-5 flex justify-between border-b border-line">
                            <div class="text-title">{{ translate('Subtotal') }}</div>
                            <div class="text-title">{{$currency->symbol}}<span class="total-product">136</span><span>.00</span></div>
                        </div>
                        <div class="discount-block py-5 flex justify-between border-b border-line">
                            <div class="text-title">{{ translate('Discounts') }}</div>
                            <div class="text-title"><span>-{{$currency->symbol}}</span><span class="discount">0</span><span>.00</span></div>
                        </div>
                        @auth
                        <div class="ship-block py-5 flex justify-between border-b border-line">
                            <div class="text-title">{{ translate('Shipping') }}</div>
                            <div class="choose-type flex gap-12">
                                <div class="left">
                                    @foreach($data['shipping'] as $shipping)
                                    <div class="type">
                                        <input id="shipping-{{$shipping->id}}" type="radio" name="ship" value="{{$shipping->price}}" />
                                        <label class="pl-1" for="shipping-{{$shipping->id}}">{{$shipping->name }}</label>
                                    </div>
                                    @endforeach
                                </div>
                                <div class="right">
                                    @foreach($data['shipping'] as $shipping)
                                    <div class="shipping-{{$shipping->id}}">{{$currency->symbol}}{{number_format($shipping->price,2)}}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        @endauth
                        <div class="total-cart-block pt-4 pb-4 flex justify-between">
                            <div class="heading5">{{ translate('Total') }}</div>
                            <div class="">
                                <span class="heading5">{{$currency->symbol}}</span><span class="total-cart heading5">116</span><span class='heading5'>.00</span>
                            </div>
                        </div>
                        <div class="block-button flex flex-col items-center gap-y-4 mt-5">
                            <a href="{{route('landing.checkout')}}" class="checkout-btn button-main text-center w-full">
                                {{ translate('Process To Checkout') }}
                            </a>
                            <a class="text-button hover-underline" href="{{route('landing.products.index')}}">
                                {{ translate('Continue shopping') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection