@extends('layouts.store', ['title' => 'السلة | RaseedNow'])

@section('content')
    <section class="lc-page-shell">
        <div class="section-heading">
            <div>
                <span>Cart</span>
                <h1>سلة المشتريات</h1>
            </div>
            <a class="secondary-button" href="{{ route('home') }}">متابعة التسوق</a>
        </div>

        @if(session('status'))
            <div class="mt-4 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700">{{ session('status') }}</div>
        @endif
        @if($errors->any())
            <div class="mt-4 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">{{ $errors->first() }}</div>
        @endif

        <div class="lc-checkout-layout mt-6">
            <div class="surface lc-cart-list">
                @forelse($items as $item)
                    @php($product = $item['product'])
                    @php($productImage = 108 + (($product->id - 1) % 36))
                    <div class="lc-cart-row">
                        <div class="lc-cart-thumb" style="--tone: {{ $product->game->cover_color }}">
                            <img src="{{ asset('images/kroti/product-'.$productImage.'.webp') }}" alt="">
                        </div>
                        <div>
                            <span class="text-xs font-black text-[#ff8417]">{{ $product->game->name_ar }} / {{ $product->sku }}</span>
                            <h2 class="mt-1 text-lg font-black text-[#17264d]">{{ $product->name_ar }}</h2>
                            <p class="mt-1 text-sm text-[#6e7488]">المخزون المتاح: {{ $product->stock_available }}</p>
                        </div>
                        <form method="POST" action="{{ route('cart.update', $product) }}" class="flex items-end gap-2">
                            @csrf
                            @method('PATCH')
                            <label class="form-field flex-1">
                                <span>الكمية</span>
                                <input name="quantity" value="{{ $item['quantity'] }}" min="0" max="{{ $product->stock_available }}" type="number">
                            </label>
                            <button class="secondary-button" type="submit">تحديث</button>
                        </form>
                        <strong class="text-xl text-[#17264d]">{{ number_format($item['line_total_minor'] / 100, 2) }} {{ $product->currency_code }}</strong>
                        <form method="POST" action="{{ route('cart.remove', $product) }}">
                            @csrf
                            @method('DELETE')
                            <button class="secondary-button" type="submit">حذف</button>
                        </form>
                    </div>
                @empty
                    <div class="lc-empty-state">
                        <h3>السلة فارغة</h3>
                        <p>اختار منتج أو باقة وارجع هنا لإكمال الطلب.</p>
                    </div>
                @endforelse
            </div>

            <aside class="surface lc-buy-box">
                <h2>ملخص السلة</h2>
                <div class="mt-5 space-y-3">
                    <div class="summary-row"><span>عدد العناصر</span><strong>{{ $items->sum('quantity') }}</strong></div>
                    <div class="summary-row"><span>الإجمالي قبل الخصم</span><strong>{{ number_format($totalMinor / 100, 2) }} EGP</strong></div>
                    @if($discountMinor > 0)
                        <div class="summary-row"><span>خصم الكوبون {{ $couponCode }}</span><strong>-{{ number_format($discountMinor / 100, 2) }} EGP</strong></div>
                    @endif
                    <div class="summary-row total"><span>الإجمالي</span><strong>{{ number_format($payableMinor / 100, 2) }} EGP</strong></div>
                </div>
                @if($items->isNotEmpty())
                    <div class="mt-5 rounded-2xl border border-[#e0e8e3] bg-[#f7f8fb] p-4">
                        @if($couponCode)
                            <form method="POST" action="{{ route('cart.coupon.remove') }}" class="flex items-center justify-between gap-3">
                                @csrf
                                @method('DELETE')
                                <strong class="text-sm text-[#17264d]">كوبون مطبق: {{ $couponCode }}</strong>
                                <button class="secondary-button" type="submit">حذف</button>
                            </form>
                        @else
                            <form method="POST" action="{{ route('cart.coupon.apply') }}" class="grid gap-3">
                                @csrf
                                <label class="form-field">
                                    <span>كود الخصم</span>
                                    <input name="coupon_code" placeholder="مثال: WELCOME10">
                                </label>
                                <button class="secondary-button" type="submit">تطبيق الكوبون</button>
                            </form>
                        @endif
                    </div>
                @endif
                @if($items->isNotEmpty())
                    <a href="{{ route('cart.checkout') }}" class="primary-button mt-6 w-full">إكمال الدفع</a>
                @endif
            </aside>
        </div>
    </section>
@endsection