@extends('layouts.blesser.app')

@section('content')
<div class="container pb-28 pt-6 lg:pb-10">
    <!--  Breadcrumb -->
    <div class="mb-2 rounded-lg bg-muted shadow lg:mb-6">
        <ol class="relative grid grid-cols-3 overflow-hidden rounded-lg">
            <li class="z-10 flex flex-col items-center justify-center gap-2 p-4 text-xs text-primary/50 sm:text-sm md:text-base">
                <div class="i-lucide-shopping-cart h-6 w-6 md:h-8 md:w-8"></div>
                <p class="leading-none">سبد خرید</p>
            </li>
            <li class="z-10 flex flex-col items-center justify-center gap-2 p-4 text-xs text-primary/50 sm:text-sm md:text-base">
                <div class="i-lucide-clipboard-pen-line h-6 w-6 md:h-8 md:w-8"></div>

                <p class="leading-none">شیوه ارسال</p>
            </li>
            <li class="z-10 flex flex-col items-center justify-center gap-2 p-4 text-xs text-primary sm:text-sm md:text-base">
                <div class="i-lucide-credit-card h-6 w-6 md:h-8 md:w-8"></div>

                <p class="leading-none">پرداخت</p>
            </li>
            <!--  for position set value 0 , 33.33% , 66.66%  -->
            <div class="absolute bottom-0 z-0 h-full w-1/3 touch-none bg-primary/10 transition-all duration-300" style="inset-inline-start: 66.66%"></div>
        </ol>
    </div>
    <!-- Content -->
    <div class="relative mx-auto max-w-[450px] overflow-hidden rounded-lg bg-muted p-3 shadow md:p-6">
        <div class="relative h-10 w-full">
            <div class="absolute -top-24 h-full w-full">
                <div class="relative flex h-full w-full items-center justify-center [--baseOpacity:1] [--baseSize:80px] [--duration:1.5s] [--opacityStep:0.05] [--scale:1.2] [--sizeStep:64px]">
                    <div class="border- ripple absolute rounded-full bg-primary/30 [--i:0]"></div>
                    <div class="border- ripple absolute rounded-full bg-primary/30 [--i:1]"></div>
                    <div class="border- ripple absolute rounded-full bg-primary/30 [--i:2]"></div>
                    <div class="border- ripple absolute rounded-full bg-primary/30 [--i:3]"></div>
                </div>
            </div>
        </div>
        <div class="relative">
            <h1 class="mb-8 text-center text-lg lg:text-xl">جزئیات سفارش</h1>
            <div class="mb-6">
                <div class="mb-4 w-full">
                    <div class="space-y-2">
                        <form action="" method="get">
                            <div class="flex w-full items-center justify-between rounded-lg border bg-muted transition-all duration-300 focus-within:border-primary">
                                <label class="sr-only" for="coupon"> کد تخفیف </label>
                                <input id="coupon" name="coupon" type="text" autocomplete="off" value="{{ $_GET['coupon'] ?? '' }}" class="peer w-full rounded-lg border-none bg-transparent px-4 py-3 text-right text-text placeholder:text-sm placeholder:duration-300 focus:outline-none focus:ring-offset-0 ltr:focus:placeholder:translate-x-2 rtl:focus:placeholder:-translate-x-2" placeholder="کد تخفیف" />

                                <button type="submit" class="courser-pointer px-3 text-primary duration-300 hover:text-primary/80 disabled:text-primary/50 disabled:hover:text-primary/40">
                                    <span> اعمال </span>
                                </button>
                            </div>
                        </form>
                        <p class="h-5 text-sm text-warning">
                            @session('coupon_error')
                            <x-blesser.ui.alert type="error">
                                {{ session('coupon_error') }}
                            </x-blesser.ui.alert>
                            @endsession
                        </p>
                    </div>
                </div>
                <div class="flex items-center justify-between gap-x-2 py-6">
                    <div class="text-sm text-text/95 lg:text-base">
                        {{ __('Product price') }} ({{ $cart->count() }})
                    </div>
                    <div class="flex items-center gap-1 text-sm text-primary lg:text-base">
                        <div class="font-bold">{{ number_format($cart->subtotal) }}</div>
                        <div class="text-xs lg:text-sm">{{ getCurrency() }}</div>
                    </div>
                </div>

                <div class="flex items-center justify-between gap-x-2 py-6">
                    <div class="text-sm text-text/95 lg:text-base">{{ __('discount') }}</div>
                    <div class="flex items-center gap-1 text-sm font-medium text-warning lg:text-base">
                        <div class="font-bold">{{ number_format($cart->discount_total) }}</div>
                        <div class="text-xs lg:text-sm">{{ getCurrency() }}</div>
                    </div>
                </div>
                @if ($couponDiscount != 0)
                <div class="flex items-center justify-between gap-x-2 py-6">
                    <div class="text-sm text-text/95 lg:text-base">{{ __('coupon discount') }}</div>
                    <div class="flex items-center gap-1 text-sm font-medium text-warning lg:text-base">
                        <div class="font-bold">{{ number_format($couponDiscount) }}</div>
                        <div class="text-xs lg:text-sm">{{ getCurrency() }}</div>
                    </div>
                </div>
                @endif
                @if (false)
                <div class="flex items-center justify-between gap-x-2 py-6">
                    <div class="text-sm text-text/95 lg:text-base">هزینه ارسال</div>
                    <div class="text-sm text-primary lg:text-base">
                        <div class="flex items-center gap-1">
                            <div class="font-bold">20,000</div>
                            <div class="text-xs lg:text-sm">تومان</div>
                        </div>
                    </div>
                </div>
                @endif
                <div class="flex items-center justify-between gap-x-2 py-6">
                    <div class="text-sm text-text/95 lg:text-base">
                        {{ __('total price after discount') }}
                    </div>
                    <div class="flex items-center gap-1 text-sm font-medium text-primary lg:text-base">
                        <div class="font-bold">{{ number_format($cart->grand_total) }}</div>
                        <div class="text-xs lg:text-sm">{{ getCurrency() }}</div>
                    </div>
                </div>
            </div>
            <div class="space-y-4">
                <p class="text-center text-xs text-text/80 sm:text-sm">
                {{ __('It is not possible to edit the shopping cart after confirmation.') }}
            </p>
            <form id="order-submission" action="{{ route('order.submission') }}" method="post">
                @csrf
                <button class="btn-primary w-full py-2.5">
                    {{ __('Confirm and pay') }}
                </button>
            </form>
            </div>
        </div>
    </div>
</div>
@endsection