@extends('layouts.app')

@section('title', 'Customer Dashboard — Divine Drops')

@section('content')

    <x-breadcrumb :items="[['label' => 'Customer Account Portal']]" />

    <style>
        .account-grid-layout {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 32px;
            align-items: start;
        }
        @media (max-width: 991px) {
            .account-grid-layout {
                grid-template-columns: 1fr;
            }
            .account-sidebar-sticky {
                position: static !important;
            }
        }
        .nav-tab-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            font-size: 14px;
            font-weight: 600;
            color: #334155;
            text-decoration: none;
            border-radius: 10px;
            transition: all 0.2s ease;
        }
        .nav-tab-item:hover, .nav-tab-item.active {
            background-color: #e0eff9;
            color: #186297;
        }
    </style>

    <section class="py-10 lg:py-14 bg-cream-50 min-h-[70vh]">
        <div class="container-shop">
            
            {{-- Account Welcome Header --}}
            <div class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs mb-8">
                <div class="flex flex-wrap items-center justify-between gap-6">
                    <div style="display: flex; align-items: center; gap: 16px;">
                        <div style="width: 56px; height: 56px; border-radius: 50%; background: #186297; color: white; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; text-transform: uppercase; flex-shrink: 0;">
                            {{ substr($user->name, 0, 1) }}
                        </div>
                        <div>
                            <h1 class="font-serif text-2xl sm:text-3xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">Welcome, {{ $user->name }}</h1>
                            <div class="flex flex-wrap items-center gap-3 mt-1.5 text-xs text-ink-500">
                                <span>{{ $user->email }}</span>
                                <span>&middot;</span>
                                <span>Member since {{ $user->created_at ? $user->created_at->format('M Y') : '2026' }}</span>
                                <span style="background: #e0eff9; color: #186297; border: 1px solid #b9dff3; font-weight: 700; padding: 2px 8px; border-radius: 4px; font-size: 10px; text-transform: uppercase;">Verified Customer</span>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('logout') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn-outline !py-2 !px-4 text-xs font-semibold text-terra-600 hover:border-terra-600 hover:bg-terra-50 cursor-pointer">
                            Sign Out Account
                        </button>
                    </form>
                </div>
            </div>

            {{-- Main Layout Grid --}}
            <div class="account-grid-layout">
                
                {{-- Left Navigation Sidebar --}}
                <aside class="account-sidebar-sticky" style="position: sticky; top: 100px; z-index: 10;">
                    <div class="bg-white border border-cream-200 rounded-xl p-3 shadow-xs" style="display: flex; flex-direction: column; gap: 4px;">
                        <a href="#orders" class="nav-tab-item active">
                            <x-icon name="bag" class="h-4 w-4 text-moss-700" />
                            <span>My Orders History</span>
                        </a>
                        <a href="#profile" class="nav-tab-item">
                            <x-icon name="user" class="h-4 w-4 text-moss-700" />
                            <span>Personal Profile</span>
                        </a>
                        <a href="#address" class="nav-tab-item">
                            <x-icon name="truck" class="h-4 w-4 text-moss-700" />
                            <span>Manage Address</span>
                        </a>
                        <a href="#password" class="nav-tab-item">
                            <x-icon name="lock" class="h-4 w-4 text-moss-700" />
                            <span>Change Password</span>
                        </a>
                    </div>
                </aside>

                {{-- Right Content Cards --}}
                <div style="display: flex; flex-direction: column; gap: 32px;">
                    
                    {{-- 1. My Orders Section --}}
                    <div id="orders" class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs scroll-mt-28">
                        <div class="flex items-center justify-between border-b border-cream-200 pb-4 mb-6">
                            <div>
                                <h2 class="font-serif text-xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">My Orders History</h2>
                                <p class="text-xs text-ink-500 mt-1">Track status and view tax invoices for past purchases.</p>
                            </div>
                            <span style="background: #f1f5f9; color: #334155; font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid #cbd5e1;">
                                {{ $orders->count() }} {{ Str::plural('Order', $orders->count()) }}
                            </span>
                        </div>

                        @if($orders->isEmpty())
                            <div class="text-center py-10">
                                <x-icon name="bag" class="h-12 w-12 text-ink-300 mx-auto" />
                                <h3 class="font-serif text-lg font-medium text-ink-900 mt-3">No orders placed yet</h3>
                                <p class="text-xs text-ink-500 mt-1">Explore our luxury Indian botanical skincare formulations.</p>
                                <a href="{{ route('shop') }}" class="btn-primary mt-4 !py-2 !px-5 text-xs">Explore Catalog</a>
                            </div>
                        @else
                            <div style="display: flex; flex-direction: column; gap: 20px;">
                                @foreach($orders as $ord)
                                    <div class="border border-cream-200 rounded-xl overflow-hidden shadow-xs hover:border-moss-300 transition-colors">
                                        {{-- Order Card Header --}}
                                        <div class="bg-cream-50 px-6 py-4 border-b border-cream-200 flex flex-wrap justify-between items-center gap-3">
                                            <div>
                                                <span style="font-family: monospace; font-size: 14px; font-weight: 700; color: #186297;">Order #{{ $ord->order_number }}</span>
                                                <span class="text-xs text-ink-500 ml-3">Placed on {{ $ord->created_at ? $ord->created_at->format('M d, Y') : 'Recent' }}</span>
                                            </div>
                                            <div class="flex items-center gap-3">
                                                <span class="px-3 py-1 text-[11px] font-bold rounded-full uppercase tracking-wider
                                                    @if($ord->order_status === 'delivered') bg-green-100 text-green-800 border border-green-300
                                                    @elseif($ord->order_status === 'shipped') bg-purple-100 text-purple-800 border border-purple-300
                                                    @elseif($ord->order_status === 'processing') bg-blue-100 text-blue-800 border border-blue-300
                                                    @elseif($ord->order_status === 'cancelled') bg-red-100 text-red-800 border border-red-300
                                                    @else bg-amber-100 text-amber-800 border border-amber-300 @endif">
                                                    {{ $ord->order_status }}
                                                </span>
                                            </div>
                                        </div>

                                        {{-- Items Breakdown --}}
                                        <div class="p-6 divide-y divide-cream-100">
                                            @foreach($ord->items as $item)
                                                <div class="py-3.5 flex items-center justify-between text-sm first:pt-0 last:pb-0">
                                                    <div>
                                                        <span class="font-medium text-ink-900">{{ $item->product_name }}</span>
                                                        <div class="text-xs text-ink-500 mt-0.5">Size: <span class="font-semibold text-ink-700">{{ $item->size ?? 'Standard' }}</span> &middot; Qty: {{ $item->quantity }}</div>
                                                    </div>
                                                    <span class="font-semibold text-ink-900">₹{{ number_format($item->subtotal, 2) }}</span>
                                                </div>
                                            @endforeach
                                        </div>

                                        {{-- Order Card Footer --}}
                                        <div class="bg-white px-6 py-4 border-t border-cream-200 flex flex-wrap items-center justify-between gap-4">
                                            <div class="text-xs text-ink-500">
                                                Payment: <strong class="text-ink-900 uppercase">{{ $ord->payment_method }}</strong> 
                                                ({{ ucfirst($ord->payment_status) }})
                                            </div>
                                            <div class="flex items-center gap-4">
                                                <a href="{{ route('order.track', ['order_number' => $ord->order_number]) }}" style="display: inline-flex; align-items: center; gap: 6px; background-color: #186297; color: #ffffff; padding: 8px 16px; font-size: 12px; font-weight: 700; border-radius: 8px; text-decoration: none; transition: background 0.15s ease;" onmouseover="this.style.backgroundColor='#145380';" onmouseout="this.style.backgroundColor='#186297';">
                                                    <x-icon name="truck" style="width: 14px; height: 14px; color: #ffffff;" />
                                                    <span>Track Package</span>
                                                </a>
                                                <div class="text-right">
                                                    <span class="text-[11px] text-ink-400 block uppercase font-bold tracking-wider">Total Paid</span>
                                                    <strong class="font-serif text-lg text-moss-900">₹{{ number_format($ord->total_amount, 2) }}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                    {{-- 2. Personal Profile Section --}}
                    <div id="profile" class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs scroll-mt-28">
                        <div class="border-b border-cream-200 pb-4 mb-6">
                            <h2 class="font-serif text-xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">Personal Profile</h2>
                            <p class="text-xs text-ink-500 mt-1">Update your basic account credentials and phone number.</p>
                        </div>

                        <form action="{{ route('account.profile.update') }}" method="POST" class="space-y-5 max-w-xl">
                            @csrf
                            <div>
                                <label for="name" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Full Name *</label>
                                <input id="name" type="text" name="name" value="{{ old('name', $user->name) }}" required class="field-input w-full">
                            </div>

                            <div>
                                <label for="email" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Email Address *</label>
                                <input id="email" type="email" name="email" value="{{ old('email', $user->email) }}" required class="field-input w-full">
                            </div>

                            <div>
                                <label for="phone" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Mobile Phone Number</label>
                                <input id="phone" type="text" name="phone" value="{{ old('phone', $user->phone) }}" placeholder="+91 98765 43210" class="field-input w-full">
                            </div>

                            <button type="submit" class="btn-primary !py-2.5 !px-6 cursor-pointer">Save Profile Details</button>
                        </form>
                    </div>

                    {{-- 3. Manage Address Section --}}
                    <div id="address" class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs scroll-mt-28">
                        <div class="border-b border-cream-200 pb-4 mb-6">
                            <h2 class="font-serif text-xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">Manage Shipping Address</h2>
                            <p class="text-xs text-ink-500 mt-1">Default address used for 1-click checkout delivery.</p>
                        </div>

                        <form action="{{ route('account.address.update') }}" method="POST" class="space-y-5 max-w-xl">
                            @csrf
                            <div>
                                <label for="address_input" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Street Address *</label>
                                <textarea id="address_input" name="address" rows="3" required placeholder="House/Flat No., Building Name, Street Name" class="field-input w-full">{{ old('address', $user->address) }}</textarea>
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                                <div>
                                    <label for="city" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">City *</label>
                                    <input id="city" type="text" name="city" value="{{ old('city', $user->city) }}" required class="field-input w-full">
                                </div>
                                <div>
                                    <label for="state" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">State *</label>
                                    <input id="state" type="text" name="state" value="{{ old('state', $user->state) }}" required class="field-input w-full">
                                </div>
                                <div>
                                    <label for="pincode" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Pincode *</label>
                                    <input id="pincode" type="text" name="pincode" value="{{ old('pincode', $user->pincode) }}" required class="field-input w-full">
                                </div>
                            </div>

                            <button type="submit" class="btn-primary !py-2.5 !px-6 cursor-pointer">Save Shipping Address</button>
                        </form>
                    </div>

                    {{-- 4. Change Password Section --}}
                    <div id="password" class="bg-white border border-cream-200 rounded-2xl p-6 sm:p-8 shadow-xs scroll-mt-28">
                        <div class="border-b border-cream-200 pb-4 mb-6">
                            <h2 class="font-serif text-xl font-medium text-ink-900" style="margin: 0; color: #0f172a;">Security & Change Password</h2>
                            <p class="text-xs text-ink-500 mt-1">Ensure your account uses a strong, unique password.</p>
                        </div>

                        <form action="{{ route('account.password.update') }}" method="POST" class="space-y-5 max-w-xl">
                            @csrf
                            <div>
                                <label for="current_password" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Current Password *</label>
                                <input id="current_password" type="password" name="current_password" required class="field-input w-full">
                            </div>

                            <div>
                                <label for="new_password" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">New Password (Min 8 characters) *</label>
                                <input id="new_password" type="password" name="password" required class="field-input w-full">
                            </div>

                            <div>
                                <label for="password_confirmation" class="block text-xs font-semibold uppercase tracking-wider text-ink-700 mb-1">Confirm New Password *</label>
                                <input id="password_confirmation" type="password" name="password_confirmation" required class="field-input w-full">
                            </div>

                            <button type="submit" class="btn-primary !py-2.5 !px-6 cursor-pointer">Update Password</button>
                        </form>
                    </div>

                </div>

            </div>

        </div>
    </section>

@endsection