@props(['checked' => false, 'url', 'label'])

<button type="button"
        x-data="{ on: @js((bool) $checked), loading: false }"
        @click="
            if (loading) return;
            loading = true;
            fetch(@js($url), {
                method: 'PATCH',
                headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content, 'Accept': 'application/json' },
            })
                .then(async (res) => {
                    const data = await res.json().catch(() => ({}));
                    if (!res.ok) {
                        window.adminNotify?.(data.message ?? 'Something went wrong.', 'error');
                        return;
                    }
                    on = data.value;
                    window.adminNotify?.('{{ $label }} '.concat(on ? 'enabled.' : 'disabled.'));
                })
                .catch(() => window.adminNotify?.('Something went wrong.', 'error'))
                .finally(() => { loading = false; });
        "
        :disabled="loading"
        :class="on ? 'bg-emerald-500' : 'bg-slate-300'"
        class="relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-60"
        role="switch" :aria-checked="on.toString()" aria-label="{{ $label }}">
    <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition"
          :class="on ? 'translate-x-6' : 'translate-x-1'"></span>
</button>