@extends('storefront.layout')
@section('title', 'My Addresses')

@push('head')
  <style>[x-cloak]{display:none!important}</style>
@endpush

@section('content')
@php
  $shipping = $addresses->filter(fn ($address) => $address->type->value === 'shipping');
  $billing = $addresses->filter(fn ($address) => $address->type->value === 'billing');
  $defaultCount = $addresses->where('is_default', true)->count();
@endphp
<div class="min-h-[80vh] bg-[#f7f6f2] px-4 py-10"
     x-data="addressManager()"
     x-init="init()">
  <div class="mx-auto max-w-6xl">

    <a href="{{ route('storefront.account') }}"
       class="mb-4 inline-flex items-center gap-2 text-sm font-semibold text-stone-500 transition hover:text-stone-950">
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5"/>
      </svg>
      My account
    </a>

    <section class="mb-6 overflow-hidden rounded-3xl border border-stone-200 bg-white shadow-[0_24px_70px_rgba(28,25,23,0.10)]">
      <div class="grid lg:grid-cols-[1.35fr_0.95fr]">
        <div class="bg-[#007a55] p-6 text-white md:p-8">
          <p class="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-100/80">Shipping profile</p>
          <h1 class="mt-4 text-4xl font-semibold tracking-tight md:text-5xl">Addresses</h1>
          <p class="mt-4 max-w-2xl text-sm leading-6 text-emerald-50/90 md:text-base">
            Keep your retail locations ready for checkout and choose default destinations for faster wholesale ordering.
          </p>
          <div class="mt-7 flex flex-wrap gap-3">
            <button @click="startAdd()"
                    x-show="!showForm"
                    x-transition:enter="transition ease-out duration-200"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    type="button"
                    class="inline-flex items-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-semibold text-[#007a55] shadow-lg shadow-emerald-950/20 transition hover:-translate-y-0.5 hover:bg-emerald-50 focus:outline-none focus:ring-2 focus:ring-white/60">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
              </svg>
              Add address
            </button>
          </div>
        </div>

        <div class="grid divide-y divide-stone-200 bg-stone-50/80 sm:grid-cols-3 sm:divide-x sm:divide-y-0 lg:grid-cols-1 lg:divide-x-0 lg:divide-y">
          <div class="p-5">
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Saved addresses</p>
            <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">{{ $addresses->count() }}</p>
          </div>
          <div class="p-5">
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Shipping</p>
            <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">{{ $shipping->count() }}</p>
          </div>
          <div class="p-5">
            <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Defaults set</p>
            <p class="mt-2 text-3xl font-semibold text-stone-950 tabular-nums">{{ $defaultCount }}</p>
          </div>
        </div>
      </div>
    </section>

    <div class="grid gap-6 lg:grid-cols-[0.9fr_1.35fr]">
      <aside class="space-y-4">
        <div class="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm md:p-6">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Address setup</p>
          <h2 class="mt-1 text-xl font-semibold text-stone-950">Faster checkout starts here.</h2>
          <p class="mt-3 text-sm leading-6 text-stone-500">
            Add store, warehouse, or office destinations once and reuse them when placing wholesale orders.
          </p>
          <button @click="startAdd()"
                  type="button"
                  class="mt-5 inline-flex items-center gap-2 rounded-xl bg-[#007a55] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
            </svg>
            Add address
          </button>
        </div>

        <div class="rounded-2xl border border-stone-200 bg-white p-5 shadow-sm md:p-6">
          <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Defaults</p>
          <div class="mt-4 space-y-3 text-sm">
            <div class="flex items-center justify-between gap-4 rounded-xl bg-stone-50 px-4 py-3">
              <span class="font-semibold text-stone-700">Shipping defaults</span>
              <span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-stone-600 ring-1 ring-stone-200">
                {{ $shipping->where('is_default', true)->count() ? 'Set' : 'Missing' }}
              </span>
            </div>
            <div class="flex items-center justify-between gap-4 rounded-xl bg-stone-50 px-4 py-3">
              <span class="font-semibold text-stone-700">Billing defaults</span>
              <span class="rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-stone-600 ring-1 ring-stone-200">
                {{ $billing->where('is_default', true)->count() ? 'Set' : 'Optional' }}
              </span>
            </div>
          </div>
        </div>
      </aside>

      <main>
        @if (session('status'))
          <div class="mb-6 flex items-center gap-3 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
            <svg class="h-5 w-5 shrink-0 text-emerald-500" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
            </svg>
            {{ session('status') }}
          </div>
        @endif

        @if ($errors->any())
          <div class="mb-6 rounded-xl border border-red-200 bg-red-50 px-4 py-3">
            <ul class="space-y-1 text-sm text-red-700">
              @foreach ($errors->all() as $error)
                <li class="flex items-start gap-2">
                  <svg class="mt-0.5 h-4 w-4 shrink-0 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd"/>
                  </svg>
                  {{ $error }}
                </li>
              @endforeach
            </ul>
          </div>
        @endif

        <div id="address-form-panel"
             x-show="showForm"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="mb-6 overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">

          <div class="flex items-center justify-between border-b border-stone-100 bg-white px-6 py-5">
            <div class="flex items-center gap-3">
              <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-[#007a55] ring-1 ring-emerald-100">
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
                </svg>
              </div>
              <div>
                <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400" x-text="editingId ? 'Update address' : 'New destination'"></p>
                <h2 class="mt-1 text-lg font-semibold text-stone-950" x-text="editingId ? 'Edit saved address' : 'Add a new address'"></h2>
              </div>
            </div>
            <button @click="cancel()" type="button"
                    class="rounded-lg p-2 text-stone-400 transition hover:bg-stone-100 hover:text-stone-600">
              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>

          <form :action="formAction()" method="POST" class="px-6 py-5">
            @csrf
            <input type="hidden" name="_method" :value="editingId ? 'PUT' : 'POST'">
            <input type="hidden" name="edit_id" :value="editingId">

            <div class="mb-5 grid gap-4 sm:grid-cols-2">
              <div>
                <label class="mb-1.5 block text-[11px] font-semibold uppercase tracking-widest text-stone-400">Type</label>
                <select name="type" x-model="form.type"
                        class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
                  <option value="shipping">Shipping</option>
                  <option value="billing">Billing</option>
                </select>
              </div>
              <div class="flex items-end pb-0.5">
                <label class="flex cursor-pointer select-none items-center gap-2.5">
                  <div class="relative">
                    <input type="hidden" name="is_default" value="0">
                    <input type="checkbox" name="is_default" value="1" x-model="form.is_default" class="peer sr-only">
                    <div class="flex h-5 w-5 items-center justify-center rounded border border-stone-300 bg-white transition peer-checked:border-[#007a55] peer-checked:bg-[#007a55]">
                      <svg x-show="form.is_default" class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                      </svg>
                    </div>
                  </div>
                  <span class="text-sm text-stone-600">Set as default</span>
                </label>
              </div>
            </div>

            <p class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-stone-400">Contact</p>
            <div class="mb-5 grid gap-4 sm:grid-cols-2">
              <div>
                <label class="mb-1.5 block text-xs font-medium text-stone-600">Full name</label>
                <input type="text" name="contact_name" x-model="form.contact_name" placeholder="Jane Doe"
                       class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
              </div>
              <div>
                <label class="mb-1.5 block text-xs font-medium text-stone-600">Phone</label>
                <input type="tel" name="phone" x-model="form.phone" placeholder="+1 (555) 000-0000"
                       class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
              </div>
            </div>

            <p class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-stone-400">Address</p>
            <div class="mb-3">
              <label class="mb-1.5 block text-xs font-medium text-stone-600">Address line 1 <span class="text-red-400">*</span></label>
              <input type="text" name="line1" x-model="form.line1" required placeholder="Street address, P.O. box"
                     class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
            </div>
            <div class="mb-4">
              <label class="mb-1.5 block text-xs font-medium text-stone-600">Address line 2</label>
              <input type="text" name="line2" x-model="form.line2" placeholder="Apartment, suite, unit, building (optional)"
                     class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
            </div>
            <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-4">
              <div class="sm:col-span-2">
                <label class="mb-1.5 block text-xs font-medium text-stone-600">City <span class="text-red-400">*</span></label>
                <input type="text" name="city" x-model="form.city" required placeholder="City"
                       class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
              </div>
              <div>
                <label class="mb-1.5 block text-xs font-medium text-stone-600">State</label>
                <input type="text" name="state" x-model="form.state" placeholder="FL"
                       class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
              </div>
              <div>
                <label class="mb-1.5 block text-xs font-medium text-stone-600">ZIP</label>
                <input type="text" name="postal_code" x-model="form.postal_code" placeholder="33101"
                       class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20">
              </div>
            </div>
            <div class="mb-6">
              <label class="mb-1.5 block text-xs font-medium text-stone-600">Country <span class="text-red-400">*</span></label>
              <select name="country_code" x-model="form.country_code"
                      class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 shadow-sm transition focus:border-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500/20 sm:w-1/2">
                <option value="US">United States</option>
              </select>
            </div>

            <div class="flex items-center justify-end gap-3 border-t border-stone-100 pt-5">
              <button type="button" @click="cancel()"
                      class="rounded-lg border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-600 transition hover:bg-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-300/50">
                Cancel
              </button>
              <button type="submit"
                      class="inline-flex items-center gap-2 rounded-lg bg-[#007a55] px-5 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500/50">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/></svg>
                <span x-text="editingId ? 'Save changes' : 'Add address'"></span>
              </button>
            </div>
          </form>
        </div>

        <section class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
          <div class="flex flex-col gap-3 border-b border-stone-100 bg-white px-5 py-5 sm:flex-row sm:items-center sm:justify-between md:px-6">
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Saved destinations</p>
              <h2 class="mt-1 text-xl font-semibold text-stone-950">{{ $addresses->count() }} address{{ $addresses->count() !== 1 ? 'es' : '' }}</h2>
            </div>
            <span class="inline-flex w-fit items-center gap-2 rounded-full bg-stone-100 px-3 py-1.5 text-sm font-semibold text-stone-600">
              <span class="h-2 w-2 rounded-full bg-[#007a55]"></span>
              {{ $defaultCount }} default{{ $defaultCount !== 1 ? 's' : '' }}
            </span>
          </div>

          @if ($addresses->isEmpty())
            <div class="flex flex-col items-center px-6 py-14 text-center">
              <div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-50 text-[#007a55] ring-1 ring-emerald-100">
                <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
                </svg>
              </div>
              <p class="mt-5 text-xl font-semibold text-stone-950">No addresses saved yet</p>
              <p class="mt-2 max-w-sm text-sm leading-6 text-stone-500">Add your first destination to speed up checkout for future wholesale orders.</p>
              <button @click="startAdd()"
                      type="button"
                      class="mt-6 inline-flex items-center gap-2 rounded-xl bg-[#007a55] px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-emerald-800">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.2" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
                </svg>
                Add address
              </button>
            </div>
          @else
            <div class="p-5 md:p-6">
              @if ($shipping->isNotEmpty())
                <div class="mb-8">
                  <p class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-stone-400">
                    Shipping - {{ $shipping->count() }} {{ Str::plural('address', $shipping->count()) }}
                  </p>
                  <div class="space-y-3">
                    @foreach ($shipping as $addr)
                      @include('storefront.account._address-card', ['address' => $addr])
                    @endforeach
                  </div>
                </div>
              @endif

              @if ($billing->isNotEmpty())
                <div>
                  <p class="mb-3 text-[11px] font-semibold uppercase tracking-widest text-stone-400">
                    Billing - {{ $billing->count() }} {{ Str::plural('address', $billing->count()) }}
                  </p>
                  <div class="space-y-3">
                    @foreach ($billing as $addr)
                      @include('storefront.account._address-card', ['address' => $addr])
                    @endforeach
                  </div>
                </div>
              @endif
            </div>
          @endif
        </section>
      </main>
    </div>

    <div x-cloak
         x-show="removeModal"
         x-transition.opacity
         class="fixed inset-0 z-50 flex items-center justify-center bg-stone-950/55 px-4 py-6">
      <div @click.outside="cancelRemove()"
           x-show="removeModal"
           x-transition:enter="transition ease-out duration-200"
           x-transition:enter-start="opacity-0 translate-y-3 scale-95"
           x-transition:enter-end="opacity-100 translate-y-0 scale-100"
           x-transition:leave="transition ease-in duration-150"
           x-transition:leave-start="opacity-100 translate-y-0 scale-100"
           x-transition:leave-end="opacity-0 translate-y-3 scale-95"
           class="max-h-[calc(100dvh-3rem)] w-full max-w-md overflow-y-auto rounded-2xl border border-stone-200 bg-white shadow-2xl">
        <div class="h-2 bg-[#ffd400]"></div>
        <div class="p-6">
          <div class="flex items-start gap-4">
            <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-red-50 text-red-600 ring-1 ring-red-100">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673A2.25 2.25 0 0 1 15.916 21.75H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
              </svg>
            </div>
            <div>
              <p class="text-xs font-semibold uppercase tracking-[0.18em] text-stone-400">Remove address</p>
              <h2 class="mt-1 text-xl font-semibold text-stone-950">Delete this saved address?</h2>
              <p class="mt-2 text-sm leading-6 text-stone-500">
                This will remove <span class="font-semibold text-stone-700" x-text="pendingRemove?.label"></span> from your account.
              </p>
            </div>
          </div>

          <div class="mt-6 flex justify-end gap-3">
            <button type="button"
                    @click="cancelRemove()"
                    class="rounded-lg border border-stone-200 bg-white px-4 py-2 text-sm font-semibold text-stone-600 transition hover:bg-stone-50">
              Cancel
            </button>
            <form method="POST" :action="pendingRemove?.action || '#'">
              @csrf
              @method('DELETE')
              <button type="submit"
                      class="rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-red-700">
                Remove address
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
function addressManager() {
  return {
    showForm: @json($errors->any()),
    editingId: @json(old('edit_id')),
    removeModal: false,
    pendingRemove: null,
    form: {
      type: @json(old('type', 'shipping')),
      contact_name: @json(old('contact_name', '')),
      phone: @json(old('phone', '')),
      line1: @json(old('line1', '')),
      line2: @json(old('line2', '')),
      city: @json(old('city', '')),
      state: @json(old('state', '')),
      postal_code: @json(old('postal_code', '')),
      country_code: @json(old('country_code', 'US')),
      is_default: {{ old('is_default') ? 'true' : 'false' }},
    },
    init() {
      if (this.showForm) {
        this.$nextTick(() => this.scrollToForm());
      }
    },
    formAction() {
      if (this.editingId) {
        return '{{ url('/account/addresses') }}/' + this.editingId;
      }
      return '{{ route('storefront.addresses.store') }}';
    },
    startAdd() {
      this.editingId = null;
      this.form = { type: 'shipping', contact_name: '', phone: '', line1: '', line2: '', city: '', state: '', postal_code: '', country_code: 'US', is_default: false };
      this.showForm = true;
      this.$nextTick(() => {
        this.scrollToForm();
        const el = document.querySelector('#address-form-panel select[name="type"]');
        if (el) el.focus();
      });
    },
    startEdit(id, data) {
      this.editingId = id;
      this.form = { ...data };
      this.showForm = true;
      this.$nextTick(() => this.scrollToForm());
    },
    scrollToForm() {
      const panel = document.getElementById('address-form-panel');
      if (panel) panel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },
    cancel() {
      this.showForm = false;
      this.editingId = null;
    },
    confirmRemove(payload) {
      this.pendingRemove = payload;
      this.removeModal = true;
    },
    confirmRemoveFromButton(button) {
      this.confirmRemove({
        action: button.dataset.removeAction,
        label: button.dataset.removeLabel,
      });
    },
    cancelRemove() {
      this.removeModal = false;
      this.pendingRemove = null;
    }
  };
}
</script>
@endsection