@extends('layouts.store')
@section('hide_footer')
@endsection

@section('title', 'حساب کاربری — کتاب۲')

@section('content')
    <main class="container relative">
        <div class="flex flex-col lg:flex-row gap-x-8 mt-10">
            <div class="lg:sticky mb-8 top-1 h-fit lg:w-1/4 hidden lg:flex flex-col gap-y-4 items-center shadow rounded-lg p-4 dark:bg-gray-800 bg-white">
                <div class="w-full flex items-center justify-between border-b border-gray-200 dark:border-white/20 py-3">
                    <div class="flex items-center gap-x-3">
                        <span class="size-10 ring-2 ring-gray-400/20 rounded-full bg-blue-100 dark:bg-gray-700 flex-center text-blue-600 font-DanaMedium">
                            {{ mb_substr($user->name, 0, 1) }}
                        </span>
                        <span class="flex flex-col gap-y-1">
                            <p class="font-DanaMedium text-lg">{{ $user->name }}</p>
                            <p class="text-gray-400 text-sm">{{ $user->email }}</p>
                        </span>
                    </div>
                </div>
                @include('partials.dashboard-sidebar')
            </div>

            <div class="lg:hidden mb-4">
                <button class="open-user-menu bg-blue-500 flex items-center gap-x-1 font-DanaMedium text-white p-2 rounded-lg text-sm">
                    <svg class="size-5"><use href="#bars-3"></use></svg>
                    منوی کاربری
                </button>
                <div class="user-menu">
                    <button class="close-user-menu"><svg class="size-6"><use href="#x-mark"></use></svg></button>
                    <div class="w-full py-3 border-b border-gray-200 dark:border-white/20 mb-4">
                        <p class="font-DanaMedium">{{ $user->name }}</p>
                        <p class="text-gray-400 text-sm">{{ $user->email }}</p>
                    </div>
                    @include('partials.dashboard-sidebar')
                </div>
            </div>

            <div class="lg:w-3/4 px-3 md:px-0">
                <div class="grid grid-cols-12 child:col-span-12 gap-4 child:rounded-lg child:bg-white child:dark:bg-gray-800 child:shadow child:p-4">
                    <div class="flex items-center gap-x-4">
                        <svg class="size-9 text-blue-500"><use href="#wallet"></use></svg>
                        <div class="flex flex-col gap-y-1">
                            <h2 class="font-DanaDemiBold">کیف‌پول اعتبار</h2>
                            <p class="text-gray-500">موجودی: <span>۰ اعتبار</span> <span class="text-xs">(فاز ۱)</span></p>
                        </div>
                    </div>
                    <div class="flex items-center gap-x-4">
                        <svg class="size-9 text-blue-500"><use href="#shopping-bag"></use></svg>
                        <div class="flex flex-col gap-y-1">
                            <h2 class="font-DanaDemiBold">سفارش‌ها</h2>
                            <p class="text-gray-500">{{ $orderCount }} سفارش</p>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col shadow rounded-lg p-4 dark:bg-gray-800 bg-white mt-5 mb-8">
                    <span class="flex items-center gap-x-2 mb-5">
                        <img src="{{ asset('images/svg/status-delivered.svg') }}" class="w-10" alt="">
                        <h2 class="font-DanaMedium text-lg">سفارش‌های اخیر</h2>
                    </span>
                    <div class="relative overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
                        <table class="w-full text-sm text-right text-gray-500 dark:text-gray-400">
                            <thead class="text-xs text-gray-700 bg-gray-100 dark:bg-gray-900 dark:text-gray-200">
                                <tr>
                                    <th class="px-6 py-3.5">شماره سفارش</th>
                                    <th class="px-6 py-3.5">تاریخ</th>
                                    <th class="px-6 py-3.5">اعتبار</th>
                                    <th class="px-6 py-3.5">وضعیت</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($orders as $order)
                                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
                                        <td class="px-6 py-5 font-medium text-gray-900 dark:text-white">{{ $order->order_number }}</td>
                                        <td class="px-6 py-5">{{ $order->created_at->format('Y/m/d') }}</td>
                                        <td class="px-6 py-5">{{ \App\Support\CreditFormatter::format($order->credit_total) }}</td>
                                        <td class="px-6 py-5 font-DanaDemiBold">{{ $order->status }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="px-6 py-10 text-center text-gray-400">هنوز سفارشی ثبت نشده است.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if ($orders->hasPages())
                        <div class="mt-4">{{ $orders->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="{{ asset('js/dashboard.js') }}"></script>
@endpush