@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">My Addresses</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        {{-- Sidebar --}}
        <div class="bg-white rounded-xl shadow-sm p-5">
            <nav class="space-y-1">
                <a href="{{ route('profile.index') }}" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm text-gray-700">Profile</a>
                <a href="{{ route('shop.orders.index') }}" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm text-gray-700">My Orders</a>
                <a href="{{ route('wishlist.index') }}" class="block px-3 py-2 rounded-lg hover:bg-gray-50 text-sm text-gray-700">Wishlist</a>
                <a href="{{ route('profile.addresses') }}" class="block px-3 py-2 rounded-lg bg-red-50 text-red-600 text-sm font-medium">Addresses</a>
            </nav>
        </div>

        {{-- Addresses --}}
        <div class="md:col-span-2">
            <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
                <h2 class="font-bold text-gray-800 mb-4">Add New Address</h2>
                <form action="{{ route('profile.addresses.store') }}" method="POST">
                    @csrf
                    <div class="grid grid-cols-2 gap-4">
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                            <input type="text" name="name" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                            <input type="text" name="phone" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                            <textarea name="address" required rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"></textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
                            <input type="text" name="city" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">State</label>
                            <input type="text" name="state" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">ZIP Code</label>
                            <input type="text" name="zip_code" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
                            <input type="text" name="country" value="United States" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        </div>
                        <div class="col-span-2">
                            <label class="flex items-center gap-2">
                                <input type="checkbox" name="is_default" value="1" class="rounded border-gray-300">
                                <span class="text-sm text-gray-700">Set as default address</span>
                            </label>
                        </div>
                    </div>
                    <button type="submit" class="mt-4 bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 text-sm">Save Address</button>
                </form>
            </div>

            @foreach($addresses as $address)
            <div class="bg-white rounded-xl shadow-sm p-5 mb-3 flex justify-between items-start">
                <div>
                    <p class="font-medium">{{ $address->name }}</p>
                    @if($address->phone)
                        <p class="text-sm text-gray-500">{{ $address->phone }}</p>
                    @endif
                    <p class="text-sm text-gray-500">{{ $address->address }}</p>
                    <p class="text-sm text-gray-500">{{ $address->city }}, {{ $address->state }} {{ $address->zip_code }}, {{ $address->country }}</p>
                    @if($address->is_default)
                    <span class="text-xs text-green-600 font-medium">Default Address</span>
                    @endif
                </div>
                <form action="{{ route('profile.addresses.delete', $address->id) }}" method="POST" onsubmit="return confirm('Delete?')">
                    @csrf @method('DELETE')
                    <button class="text-xs text-red-600 hover:text-red-800">Remove</button>
                </form>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endsection
