@extends('layouts.app')

@section('title', 'My Orders - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">My Orders</h1>
        <p class="text-xs text-emerald-200 mt-1">Track and review all your past Unani medicine orders</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- Account Navigation Sidebar -->
            <div class="lg:col-span-4">
                <div class="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm space-y-4">
                    <div class="flex items-center gap-3 border-b border-slate-100 pb-4">
                        <div class="w-12 h-12 rounded-full bg-emerald-100 text-emerald-700 flex items-center justify-center font-bold text-lg">
                            {{ substr($user->fname, 0, 1) }}
                        </div>
                        <div>
                            <h3 class="font-bold text-slate-900 text-sm">{{ $user->fname }} {{ $user->lname }}</h3>
                            <p class="text-[11px] text-slate-400">{{ $user->email }}</p>
                        </div>
                    </div>

                    <nav class="space-y-1 text-xs font-semibold">
                        <a href="{{ route('account.profile') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 transition-colors">
                            <i class="fa-solid fa-user w-4"></i> My Profile
                        </a>
                        <a href="{{ route('account.orders') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl bg-emerald-50 text-emerald-800">
                            <i class="fa-solid fa-box w-4"></i> My Orders
                        </a>
                        <a href="{{ route('account.addresses') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 transition-colors">
                            <i class="fa-solid fa-location-dot w-4"></i> Manage Address
                        </a>
                        <a href="{{ route('account.referral') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 transition-colors">
                            <i class="fa-solid fa-share-nodes w-4"></i> Referral Code
                        </a>
                        <a href="{{ route('account.password') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-700 hover:bg-slate-50 hover:text-emerald-700 transition-colors">
                            <i class="fa-solid fa-key w-4"></i> Change Password
                        </a>
                        <div class="border-t border-slate-100 my-2"></div>
                        <a href="{{ route('auth.logout') }}" class="flex items-center gap-3 px-4 py-3 rounded-xl text-red-600 hover:bg-red-50 transition-colors">
                            <i class="fa-solid fa-right-from-bracket w-4"></i> Logout
                        </a>
                    </nav>
                </div>
            </div>

            <!-- Orders Table -->
            <div class="lg:col-span-8">
                <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
                    <div class="p-6 border-b border-slate-100">
                        <h2 class="font-extrabold text-slate-900 text-base">Order History</h2>
                    </div>

                    @if($orders->count() > 0)
                        <div class="overflow-x-auto">
                            <table class="w-full text-left border-collapse text-xs">
                                <thead>
                                    <tr class="bg-slate-100 text-slate-700 font-bold uppercase tracking-wider text-[11px] border-b border-slate-200">
                                        <th class="py-3.5 px-4">Order ID</th>
                                        <th class="py-3.5 px-4">Date</th>
                                        <th class="py-3.5 px-4">Total</th>
                                        <th class="py-3.5 px-4">Payment</th>
                                        <th class="py-3.5 px-4">Status</th>
                                        <th class="py-3.5 px-4 text-center">Invoice</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 font-medium text-slate-800">
                                    @foreach($orders as $ord)
                                        <tr class="hover:bg-slate-50 transition-colors">
                                            <td class="py-4 px-4 font-bold text-slate-900">
                                                {{ $ord->order_id }}
                                            </td>
                                            <td class="py-4 px-4 text-slate-500 text-[11px]">
                                                {{ date('d M Y', strtotime($ord->created_date)) }}
                                            </td>
                                            <td class="py-4 px-4 font-extrabold text-emerald-700">
                                                ₹{{ $ord->total_price }}
                                            </td>
                                            <td class="py-4 px-4">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ ($ord->payment_status === 'Completed' || $ord->payment_status === 'Success') ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800' }}">
                                                    {{ $ord->payment_status ?: 'Pending' }}
                                                </span>
                                            </td>
                                            <td class="py-4 px-4">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ ($ord->order_status === 'Delivered' || $ord->order_status === 'Success') ? 'bg-blue-100 text-blue-800' : 'bg-slate-100 text-slate-800' }}">
                                                    {{ $ord->order_status ?: 'Processing' }}
                                                </span>
                                            </td>
                                            <td class="py-4 px-4 text-center">
                                                <a href="{{ route('payment.invoice', ['order_id' => $ord->order_id]) }}" class="inline-flex items-center gap-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold px-3 py-1.5 rounded-lg text-xs transition-colors" title="View Invoice">
                                                    <i class="fa-solid fa-file-invoice"></i> View
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="p-4 border-t border-slate-100">
                            {{ $orders->links() }}
                        </div>
                    @else
                        <div class="p-12 text-center text-slate-500">
                            <i class="fa-solid fa-box-open text-4xl text-slate-300 mb-3 block"></i>
                            <h3 class="font-bold text-slate-800 text-sm">No orders found</h3>
                            <p class="text-xs text-slate-400 mt-1">You haven't placed any orders yet.</p>
                            <a href="{{ route('products.classic') }}" class="inline-block mt-4 bg-emerald-600 text-white font-bold text-xs px-5 py-2.5 rounded-xl">Browse Medicines</a>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>
</section>
@endsection