@extends('layouts.store')

@section('title', 'سبد تبادل — کتاب۲')

@section('content')
    <main class="container">
        <nav class="flex mt-8 mr-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
                <li><a href="{{ route('home') }}" class="inline-flex items-center text-sm gap-x-1 text-gray-700 hover:text-blue-600 dark:text-gray-400"><svg class="size-4 mb-0.5"><use href="#home"></use></svg>صفحه اصلی</a></li>
                <li aria-current="page"><div class="flex items-center"><svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" fill="none" viewBox="0 0 6 10"><path stroke="currentColor" stroke-width="2" d="m1 9 4-4-4-4"/></svg><span class="ms-1 text-sm text-gray-500 dark:text-gray-400">سبد تبادل</span></div></li>
            </ol>
        </nav>

        <section class="flex flex-col lg:flex-row justify-between items-start gap-4 child:rounded-lg child:bg-white child:dark:bg-gray-800 child:shadow child:p-4 mt-5">
            <div class="w-full lg:w-3/4 flex flex-col gap-y-6">
                <div class="flex items-center justify-between">
                    <span class="flex items-center gap-x-2">
                        <h2 class="font-DanaMedium text-xl">سبد تبادل</h2>
                        <p class="text-gray-400">({{ $count }} کتاب)</p>
                    </span>
                </div>

                @forelse ($lines as $line)
                    <div class="w-full flex flex-col sm:flex-row justify-between gap-4 border-b border-gray-200 dark:border-white/20 pb-4">
                        <div class="flex flex-col sm:flex-row items-center gap-6">
                            <div class="w-28 h-36 bg-gray-50 dark:bg-gray-900 rounded-lg flex-center">
                                <svg class="size-12 text-gray-300"><use href="#squares"></use></svg>
                            </div>
                            <div class="flex flex-col gap-y-2">
                                <a href="{{ route('products.show', $line['product']->slug) }}" class="font-DanaMedium hover:text-blue-600">{{ $line['product']->name }}</a>
                                @if ($line['product']->authorName())
                                    <p class="text-sm text-gray-400">{{ $line['product']->authorName() }}</p>
                                @endif
                                <p class="font-DanaMedium text-blue-600">{{ \App\Support\CreditFormatter::format($line['line_total']) }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <form method="POST" action="{{ route('cart.update', $line['product']) }}" class="flex items-center gap-2">
                                @csrf
                                @method('PATCH')
                                <input type="number" name="quantity" value="{{ $line['quantity'] }}" min="0" max="99"
                                    class="w-16 rounded-lg border border-gray-200 dark:border-gray-600 bg-transparent px-2 py-1 text-center">
                                <button type="submit" class="text-sm text-blue-600 font-DanaMedium">بروزرسانی</button>
                            </form>
                            <form method="POST" action="{{ route('cart.remove', $line['product']) }}">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-500 hover:text-red-600" title="حذف">
                                    <svg class="size-5"><use href="#trash"></use></svg>
                                </button>
                            </form>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-16 text-gray-500">
                        <p class="mb-4">سبد تبادل شما خالی است.</p>
                        <a href="{{ route('shop.index') }}" class="text-blue-600 font-DanaMedium hover:underline">رفتن به فروشگاه کتاب</a>
                    </div>
                @endforelse
            </div>

            <div class="w-full lg:w-1/4 flex flex-col gap-y-4">
                <h3 class="font-DanaMedium text-lg">خلاصه سبد</h3>
                <div class="flex justify-between text-gray-600 dark:text-gray-300">
                    <span>جمع اعتبار</span>
                    <span class="font-DanaMedium">{{ \App\Support\CreditFormatter::format($subtotal) }}</span>
                </div>
                <p class="text-xs text-gray-400 leading-6">اعتبار داخلی قابل برداشت نقدی نیست و فقط برای دریافت کتاب استفاده می‌شود.</p>
                @if ($lines->isNotEmpty())
                    <a href="{{ route('pages.show', 'contact') }}"
                        class="w-full text-center py-3 rounded-xl bg-blue-600 text-white font-DanaMedium hover:bg-blue-700 transition">
                        ادامه درخواست (به‌زودی)
                    </a>
                @endif
            </div>
        </section>
    </main>
@endsection