@extends('layouts.app')

@section('title', 'Manage Address - 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">Manage Delivery Address</h1>
        <p class="text-xs text-emerald-200 mt-1">Configure your default shipping and delivery location</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">
            
            <!-- 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 text-slate-700 hover:bg-slate-50 hover:text-emerald-700 transition-colors">
                            <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 bg-emerald-50 text-emerald-800">
                            <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>

            <!-- Address Form -->
            <div class="lg:col-span-8">
                <div class="bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-6">
                    <div class="border-b border-slate-100 pb-3">
                        <h2 class="font-extrabold text-slate-900 text-base">Primary Shipping Address</h2>
                        <p class="text-xs text-slate-400">Used as your default destination for orders and courier dispatches</p>
                    </div>

                    <form action="{{ route('account.addresses.update') }}" method="POST" class="space-y-4 text-xs">
                        @csrf

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Recipient Name</label>
                                <input type="text" name="sh_name" value="{{ old('sh_name', $user->sh_name ?: ($user->fname . ' ' . $user->lname)) }}" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Contact Phone</label>
                                <input type="text" name="sh_phone" value="{{ old('sh_phone', $user->sh_phone ?: $user->mob_no) }}" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                        </div>

                        <div>
                            <label class="block font-semibold text-slate-700 mb-1">Shipping Street Address *</label>
                            <input type="text" name="shp_addr" value="{{ old('shp_addr', $user->shp_addr ?: $user->addr) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">Landmark</label>
                                <input type="text" name="sh_landmark" value="{{ old('sh_landmark', $user->sh_landmark ?: $user->landmark) }}" class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">PIN Code *</label>
                                <input type="text" name="shp_pincode" value="{{ old('shp_pincode', $user->shp_pincode ?: $user->pincode) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">City / District *</label>
                                <input type="text" name="shp_city" value="{{ old('shp_city', $user->shp_city ?: $user->city) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                            <div>
                                <label class="block font-semibold text-slate-700 mb-1">State *</label>
                                <input type="text" name="shp_state" value="{{ old('shp_state', $user->shp_state ?: $user->state) }}" required class="w-full bg-slate-50 border border-slate-300 rounded-xl p-3 focus:bg-white focus:ring-1 focus:ring-emerald-500">
                            </div>
                        </div>

                        <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 px-6 rounded-2xl text-xs shadow-xs transition-colors">
                            Update Shipping Address
                        </button>
                    </form>
                </div>
            </div>

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