@extends('b2bportal::storefront.layouts.app')

@section('title', 'My Addresses — ' . ($business->name ?? 'B2B Portal'))

@section('content')
<div class="flex flex-col md:flex-row gap-6">
    @include('b2bportal::storefront.components.account-nav')

    <div class="grow space-y-6" x-data="{ editing: null, blank: {id:'',name:'',phone:'',line1:'',line2:'',city:'',state:'',pincode:'',is_default:false} }">
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-ink-900">Saved addresses</h1>
            <button type="button" class="b2b-btn" x-on:click="editing = {...blank}">+ Add address</button>
        </div>

        @if(session('status')) <div class="rounded bg-green-50 border border-green-200 text-green-800 p-3 text-sm">{{ session('status') }}</div> @endif
        @if($errors->any()) <div class="rounded bg-red-50 border border-red-200 text-red-800 p-3 text-sm"><ul>@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div> @endif

        @if(empty($addresses))
            <div class="border border-dashed border-ink-200 rounded p-8 text-center text-ink-500">
                No addresses yet. Add one to check out faster next time.
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach($addresses as $a)
                    <div class="border border-ink-100 rounded p-4">
                        <div class="flex items-baseline justify-between">
                            <div class="font-semibold text-ink-800">{{ $a['name'] }}</div>
                            @if(!empty($a['is_default']))
                                <span class="text-xs bg-brand-100 text-brand-800 px-2 py-0.5 rounded-full uppercase tracking-wide">Default</span>
                            @endif
                        </div>
                        <div class="text-sm text-ink-600 mt-1">
                            {{ $a['line1'] }}@if(!empty($a['line2'])), {{ $a['line2'] }}@endif<br>
                            {{ $a['city'] }}, {{ $a['state'] }} {{ $a['pincode'] }}<br>
                            <span class="text-ink-500">📞 {{ $a['phone'] }}</span>
                        </div>
                        <div class="mt-3 flex gap-2">
                            <button type="button" class="b2b-btn-outline text-xs"
                                    x-on:click="editing = @js($a)">Edit</button>
                            <form method="POST" action="{{ url('/b2bportal/shop/'.$apiToken.'/account/addresses/'.$a['id']) }}"
                                  onsubmit="return confirm('Remove this address?');">
                                @csrf @method('DELETE')
                                <button class="b2b-btn-outline text-xs text-red-700 border-red-200 hover:bg-red-50">Delete</button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        {{-- Edit / create modal --}}
        <template x-if="editing">
            <div class="fixed inset-0 z-40 bg-black/40 flex items-start justify-center p-4 overflow-y-auto"
                 x-on:click.self="editing = null">
                <form method="POST" action="{{ url('/b2bportal/shop/'.$apiToken.'/account/addresses') }}"
                      class="bg-white rounded-lg shadow-xl w-full max-w-lg p-6 mt-16">
                    @csrf
                    <h2 class="text-lg font-semibold mb-4" x-text="editing.id ? 'Edit address' : 'New address'"></h2>
                    <input type="hidden" name="id" x-model="editing.id">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <label class="block"><span class="text-xs uppercase text-ink-500">Contact name</span>
                            <input required name="name" x-model="editing.name" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block"><span class="text-xs uppercase text-ink-500">Phone</span>
                            <input required name="phone" x-model="editing.phone" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block md:col-span-2"><span class="text-xs uppercase text-ink-500">Address line 1</span>
                            <input required name="line1" x-model="editing.line1" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block md:col-span-2"><span class="text-xs uppercase text-ink-500">Address line 2</span>
                            <input name="line2" x-model="editing.line2" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block"><span class="text-xs uppercase text-ink-500">City</span>
                            <input required name="city" x-model="editing.city" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block"><span class="text-xs uppercase text-ink-500">State</span>
                            <input required name="state" x-model="editing.state" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="block"><span class="text-xs uppercase text-ink-500">Pincode</span>
                            <input required name="pincode" x-model="editing.pincode" maxlength="6" class="w-full mt-1 rounded border-ink-200"></label>
                        <label class="flex items-center gap-2 mt-6">
                            <input type="checkbox" name="is_default" value="1" x-model="editing.is_default">
                            <span class="text-sm">Set as default</span>
                        </label>
                    </div>
                    <div class="mt-6 flex justify-end gap-2">
                        <button type="button" class="b2b-btn-outline" x-on:click="editing = null">Cancel</button>
                        <button type="submit" class="b2b-btn">Save address</button>
                    </div>
                </form>
            </div>
        </template>
    </div>
</div>
@endsection