{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: button.blade.php
------------------------------------------------------
Use: The only button in the project. A button that
     actually performs an action locks itself and shows
     a spinner on first click, so the operation cannot
     be submitted twice.
=====================================================
--}}

@props([
    'variant' => 'primary',
    'type' => 'button',
    'loading' => false,
    // Buttons that merely open a dialog must not lock, otherwise cancelling
    // the dialog would leave them permanently disabled. Submits do lock.
    'lock' => null,
    // An Alpine boolean expression: the button is enabled only while it is
    // true (e.g. "mobileValid"). Evaluated in the surrounding Alpine scope.
    'enabledWhen' => null,
])

@php
    $variants = [
        'primary' => 'bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-600',
        'secondary' => 'bg-secondary-500 text-white hover:bg-secondary-600 focus-visible:ring-secondary-500',
        'outline' => 'border border-zinc-200 bg-white text-zinc-700 hover:bg-zinc-50 focus-visible:ring-zinc-300',
    ];

    $classes = $variants[$variant] ?? $variants['primary'];
    $locksOnClick = $lock ?? ($type === 'submit');
@endphp

<button
    type="{{ $type }}"
    x-data="{ busy: @js((bool) $loading) }"
    x-bind:disabled="busy{{ $enabledWhen !== null ? ' || !('.$enabledWhen.')' : '' }}"
    @if ($type === 'submit')
        {{-- Lock on the form's submit event, never on click: disabling the
             button inside its own click cancels the submission in some
             browsers, and a click that fails HTML5 validation must not lock
             the button forever. A handler that prevents the submission
             (client-side guard) must not lock it either. --}}
        x-init="$el.form && $el.form.addEventListener('submit', (e) => { if (! e.defaultPrevented) busy = true })"
    @elseif ($locksOnClick)
        x-on:click="busy = true"
    @endif
    {{ $attributes->merge([
        'class' => 'inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 ' . $classes,
    ]) }}
>
    <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-current/30 border-t-current"></span>
    {{ $slot }}
</button>