@extends('layouts.app')

@section('title', 'My Account')

@section('content')
<div class="py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="bg-white shadow-lg rounded-lg overflow-hidden">
            <div class="flex flex-col md:flex-row">
                <!-- Left Menu -->
                <div class="w-full md:w-80 bg-gray-50 p-8">
                    <nav class="space-y-4">
                        <a href="{{ route('account.profile') }}" class="flex items-center px-6 py-2 text-base font-medium rounded-lg {{ request()->routeIs('account.profile') ? 'menu-item-active border-2 border-[#F4C430]' : 'text-gray-700 hover:bg-yellow-100' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                              </svg>
                            Profile
                        </a>
                        <a href="{{ route('account.address') }}" class="flex items-center px-6 py-2 text-base font-medium rounded-lg {{ request()->routeIs('account.address') ? 'menu-item-active border-2 border-[#F4C430]' : 'text-gray-700 hover:bg-yellow-100' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z" />
                              </svg>
                            Address Book
                        </a>
                        <a href="{{ route('account.password') }}" class="flex items-center px-6 py-2 text-base font-medium rounded-lg {{ request()->routeIs('account.password') ? 'menu-item-active border-2 border-[#F4C430]' : 'text-gray-700 hover:bg-yellow-100' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z" />
                            </svg>
                            Change Password
                        </a>
                        <a href="{{ route('account.orders') }}" class="flex items-center px-6 py-2 text-base font-medium rounded-lg {{ request()->routeIs('account.orders') ? 'menu-item-active border-2 border-[#F4C430]' : 'text-gray-700 hover:bg-yellow-100' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 mr-2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
                              </svg>
                            Booking History
                        </a>

                        <a href="{{ route('logout') }}" class="flex items-center pt-4 px-6 py-2 font-medium text-maroon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 mr-2 text-maroon hover:text-gray-500">
                                <path d="M16.5 3.75a1.5 1.5 0 0 1 1.5 1.5v13.5a1.5 1.5 0 0 1-1.5 1.5h-6a1.5 1.5 0 0 1-1.5-1.5V15a.75.75 0 0 0-1.5 0v3.75a3 3 0 0 0 3 3h6a3 3 0 0 0 3-3V5.25a3 3 0 0 0-3-3h-6a3 3 0 0 0-3 3V9A.75.75 0 1 0 9 9V5.25a1.5 1.5 0 0 1 1.5-1.5h6ZM5.78 8.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06l3 3a.75.75 0 0 0 1.06-1.06l-1.72-1.72H15a.75.75 0 0 0 0-1.5H4.06l1.72-1.72a.75.75 0 0 0 0-1.06Z" clip-rule="evenodd" />
                              </svg>
                              Logout
                        </a>

                    </nav>
                </div>

                <!-- Right Content -->
                <div class="flex-1 p-8">
                    @if (session('success'))
                        <div class="mb-6 bg-green-50 text-green-700 p-4 rounded-lg">
                            {{ session('success') }}
                        </div>
                    @endif

                    @yield('account_content')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection