@php
    $currentStatus = $invoice->status;
@endphp

<form action="{{ route('invoices.update-status', $invoice) }}"
      method="POST"
      class="inline-block"
      x-data="{
          status: @js($currentStatus),
          saving: false,
          setStatus(value) {
              if (this.saving || this.status === value) return;
              this.status = value;
              this.saving = true;
              this.$nextTick(() => this.$refs.submitBtn?.click());
          }
      }"
      @submit="saving = true">
    @csrf
    @method('PATCH')
    <input type="hidden" name="status" :value="status">

    <div class="inline-flex items-center gap-2">
        <div class="inline-flex items-center gap-0.5 rounded-full border border-slate-200/90 bg-white p-1 shadow-[0_1px_3px_rgba(15,23,42,0.06)]"
             :class="{ 'opacity-70 pointer-events-none': saving }">
            <button type="button"
                    @click="setStatus(@js(\App\Models\Invoice::STATUS_NON_REGLE))"
                    :class="status === @js(\App\Models\Invoice::STATUS_NON_REGLE)
                        ? 'bg-gradient-to-r from-rose-500 to-rose-600 text-white shadow-[0_2px_8px_rgba(244,63,94,0.35)]'
                        : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700'"
                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold tracking-wide transition-all duration-200"
                    title="Marquer comme non réglé">
                <span class="inline-flex h-4 w-4 items-center justify-center rounded-full"
                      :class="status === @js(\App\Models\Invoice::STATUS_NON_REGLE) ? 'bg-white/20' : 'bg-rose-50 text-rose-500'">
                    <svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                        <circle cx="12" cy="12" r="9"/>
                        <path stroke-linecap="round" d="M12 7v5l3 2"/>
                    </svg>
                </span>
                <span>Non réglé</span>
            </button>

            <button type="button"
                    @click="setStatus(@js(\App\Models\Invoice::STATUS_REGLE))"
                    :class="status === @js(\App\Models\Invoice::STATUS_REGLE)
                        ? 'bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-[0_2px_8px_rgba(16,185,129,0.35)]'
                        : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700'"
                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold tracking-wide transition-all duration-200"
                    title="Marquer comme réglé">
                <span class="inline-flex h-4 w-4 items-center justify-center rounded-full"
                      :class="status === @js(\App\Models\Invoice::STATUS_REGLE) ? 'bg-white/20' : 'bg-emerald-50 text-emerald-600'">
                    <svg class="h-2.5 w-2.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                </span>
                <span>Réglé</span>
            </button>
        </div>

        <span x-show="saving"
              x-cloak
              aria-hidden="true">
            <svg class="h-3.5 w-3.5 animate-spin text-slate-400" viewBox="0 0 24 24" fill="none">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
            </svg>
        </span>
    </div>

    <button type="submit" x-ref="submitBtn" class="sr-only" tabindex="-1" aria-hidden="true">Enregistrer</button>
</form>