@extends('layouts.app')
@section('title', 'My Dashboard - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">My Dashboard</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Dashboard</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row gap-8">
            {{-- Sidebar --}}
            <div class="lg:w-1/4">
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden sticky top-24">
                    <div class="p-6 border-b border-gray-100 bg-gray-50 flex items-center space-x-4">
                        <div class="w-12 h-12 rounded-full bg-brand-red text-white flex items-center justify-center font-bold text-lg">
                            {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) }}
                        </div>
                        <div>
                            <h3 class="font-bold text-gray-800">{{ auth()->user()->name ?? 'User' }}</h3>
                            <p class="text-sm text-gray-500">{{ auth()->user()->email ?? '' }}</p>
                        </div>
                    </div>
                    <ul class="divide-y divide-gray-100">
                        @php $tab = request('tab', 'dashboard'); @endphp
                        @foreach([['dashboard','layout-dashboard','Dashboard'],['orders','package','Orders'],['addresses','map-pin','Addresses'],['account','user','Account Details']] as $item)
                        <li>
                            <a href="{{ url('/dashboard?tab=' . $item[0]) }}" class="w-full flex items-center space-x-3 px-6 py-4 text-left font-bold transition-colors {{ $tab === $item[0] ? 'text-brand-red border-l-4 border-brand-red bg-red-50/50' : 'text-gray-600 hover:bg-gray-50 border-l-4 border-transparent hover:text-brand-red' }}">
                                <i data-lucide="{{ $item[1] }}" class="w-5 h-5"></i>
                                <span>{{ $item[2] }}</span>
                            </a>
                        </li>
                        @endforeach
                        <li>
                            <form method="POST" action="{{ url('/logout') }}">
                                @csrf
                                <button type="submit" class="w-full flex items-center space-x-3 px-6 py-4 text-left font-bold text-gray-600 hover:bg-gray-50 border-l-4 border-transparent hover:text-brand-red transition-colors">
                                    <i data-lucide="log-out" class="w-5 h-5"></i>
                                    <span>Logout</span>
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>

            {{-- Main Content --}}
            <div class="lg:w-3/4">
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 lg:p-10 min-h-[500px]">
                    @if($tab === 'dashboard')
                    <h2 class="text-2xl font-bold uppercase tracking-wide mb-6">Hello, {{ auth()->user()->name ?? 'User' }}!</h2>
                    <p class="text-gray-600 leading-relaxed mb-8">
                        From your account dashboard you can view your recent orders, manage your shipping and billing addresses, and edit your password and account details.
                    </p>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        @foreach([['orders','package','Orders','Check your order status'],['addresses','map-pin','Addresses','Manage shipping addresses'],['account','user','Account','Update personal info']] as $card)
                        <a href="{{ url('/dashboard?tab=' . $card[0]) }}" class="bg-gray-50 p-6 rounded border border-gray-100 text-center hover:shadow-md transition-shadow block">
                            <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4 text-brand-red shadow-sm"><i data-lucide="{{ $card[1] }}" class="w-7 h-7"></i></div>
                            <h3 class="font-bold text-lg mb-1">{{ $card[2] }}</h3>
                            <p class="text-sm text-gray-500">{{ $card[3] }}</p>
                        </a>
                        @endforeach
                    </div>

                    @elseif($tab === 'orders')
                    <h2 class="text-2xl font-bold uppercase tracking-wide mb-6">Order History</h2>
                    <div class="overflow-x-auto">
                        <table class="w-full text-left border-collapse">
                            <thead><tr class="bg-gray-50 border-b border-gray-200">
                                <th class="py-4 px-4 font-bold text-gray-800 uppercase text-xs tracking-wider">Order</th>
                                <th class="py-4 px-4 font-bold text-gray-800 uppercase text-xs tracking-wider">Date</th>
                                <th class="py-4 px-4 font-bold text-gray-800 uppercase text-xs tracking-wider">Status</th>
                                <th class="py-4 px-4 font-bold text-gray-800 uppercase text-xs tracking-wider">Total</th>
                            </tr></thead>
                            <tbody>
                                <tr class="border-b border-gray-100 hover:bg-gray-50"><td class="py-4 px-4 text-brand-red font-bold">#3456_220</td><td class="py-4 px-4 text-gray-600 text-sm">October 12, 2023</td><td class="py-4 px-4"><span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded">Completed</span></td><td class="py-4 px-4 text-gray-800 font-bold">$185.50</td></tr>
                                <tr class="border-b border-gray-100 hover:bg-gray-50"><td class="py-4 px-4 text-brand-red font-bold">#3455_180</td><td class="py-4 px-4 text-gray-600 text-sm">Sept 05, 2023</td><td class="py-4 px-4"><span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded">Completed</span></td><td class="py-4 px-4 text-gray-800 font-bold">$42.00</td></tr>
                            </tbody>
                        </table>
                    </div>

                    @elseif($tab === 'addresses')
                    <h2 class="text-2xl font-bold uppercase tracking-wide mb-6">Managing Addresses</h2>
                    <p class="text-gray-600 mb-8">The following addresses will be used on the checkout page by default.</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                        @foreach(['Billing Address', 'Shipping Address'] as $type)
                        <div class="border border-gray-200 rounded p-6 shadow-sm">
                            <div class="flex justify-between items-center mb-4 border-b border-gray-100 pb-3"><h3 class="text-lg font-bold">{{ $type }}</h3><button class="text-brand-red font-bold text-sm hover:underline">Edit</button></div>
                            <address class="not-italic text-gray-600 space-y-1">
                                <p class="font-bold text-gray-800">{{ auth()->user()->name ?? 'User' }}</p>
                                <p>1234 Gear Street</p><p>Auto City, AC 98765</p><p>United States</p>
                            </address>
                        </div>
                        @endforeach
                    </div>

                    @elseif($tab === 'account')
                    <h2 class="text-2xl font-bold uppercase tracking-wide mb-6">Account Details</h2>
                    <form class="space-y-6 max-w-2xl">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div><label class="block text-sm font-bold text-gray-700 mb-2">First Name *</label><input type="text" value="{{ explode(' ', auth()->user()->name ?? '')[0] ?? '' }}" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                            <div><label class="block text-sm font-bold text-gray-700 mb-2">Last Name *</label><input type="text" value="{{ explode(' ', auth()->user()->name ?? '', 2)[1] ?? '' }}" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                        </div>
                        <div><label class="block text-sm font-bold text-gray-700 mb-2">Email Address *</label><input type="email" value="{{ auth()->user()->email ?? '' }}" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                        <fieldset class="border border-gray-200 rounded p-6 mt-8"><legend class="text-lg font-bold px-2 text-gray-800">Password Change</legend>
                            <div class="space-y-4 pt-2">
                                <div><label class="block text-sm font-bold text-gray-700 mb-2">Current Password</label><input type="password" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                                <div><label class="block text-sm font-bold text-gray-700 mb-2">New Password</label><input type="password" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                                <div><label class="block text-sm font-bold text-gray-700 mb-2">Confirm New Password</label><input type="password" class="w-full border border-gray-200 rounded px-4 py-3 outline-none focus:border-brand-red"></div>
                            </div>
                        </fieldset>
                        <button type="button" class="bg-brand-dark text-white px-8 py-3 rounded font-bold uppercase tracking-widest hover:bg-brand-red transition-colors">Save Changes</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection