@php
    $prefix = ($type ?? 'shop') === 'shop' ? 'shops' : 'menus';
@endphp

{{-- Добавить категорию --}}
<form method="POST" action="{{ route($prefix . '.categories.store', [$profileUser, $owner]) }}" class="cat-add-form flex flex-col sm:flex-row gap-2 mb-4" style="@if(!$errors->any()) display:none; @endif">
    @csrf
    <input type="text" name="name" class="input flex-1" placeholder="{{ __('Yeni kateqoriya') }}" required>
    <button type="submit" class="btn btn-primary shrink-0"><x-icon name="plus" class="w-4 h-4" /> {{ __('Əlavə et') }}</button>
</form>

@forelse($owner->categories as $cat)
<div class="flex items-center gap-2 py-2.5 border-b last:border-0" id="cat-row-{{ $cat->id }}">
    <span id="cat-display-{{ $cat->id }}" class="flex-1 min-w-0 truncate text-sm">{{ $cat->name }}</span>

    <form method="POST" action="{{ route($prefix . '.categories.update', [$profileUser, $owner, $cat]) }}" id="cat-edit-{{ $cat->id }}" style="display:none;" class="flex flex-1 items-center gap-2">
        @csrf @method('PUT')
        <input type="text" name="name" value="{{ $cat->name }}" class="input text-sm flex-1" style="padding:8px 10px;" required>
        <button type="submit" class="btn btn-primary btn-icon" title="{{ __('Saxla') }}"><x-icon name="check" class="w-4 h-4" /></button>
        <button type="button" onclick="toggleCatEdit({{ $cat->id }})" class="btn btn-secondary btn-icon" title="{{ __('Bağla') }}"><x-icon name="x" class="w-4 h-4" /></button>
    </form>

    <div class="flex items-center gap-1.5 shrink-0" id="cat-actions-{{ $cat->id }}">
        <button type="button" onclick="toggleCatEdit({{ $cat->id }})" class="btn btn-secondary btn-icon" title="{{ __('Redaktə et') }}"><x-icon name="pencil" class="w-4 h-4" /></button>
        <button type="button" class="btn cat-toggle {{ $cat->is_active ? 'badge-green' : 'badge-yellow' }}" style="cursor:pointer;" data-url="{{ route($prefix . '.categories.toggle', [$profileUser, $owner, $cat]) }}" data-active="{{ $cat->is_active ? 1 : 0 }}" title="{{ $cat->is_active ? __('Deaktiv et') : __('Aktiv et') }}">{{ $cat->is_active ? __('Aktiv') : __('Deaktiv') }}</button>
        <form method="POST" action="{{ route($prefix . '.categories.destroy', [$profileUser, $owner, $cat]) }}" onsubmit="return confirm('{{ __('Silinsin?') }}')" class="inline">@csrf @method('DELETE')<button class="btn btn-danger btn-icon" title="{{ __('Sil') }}"><x-icon name="trash-2" class="w-4 h-4" /></button></form>
    </div>
</div>
@empty
<p class="text-xs text-muted py-3">{{ __('Kateqoriya yoxdur') }}.</p>
@endforelse

<script>
(function () {
    if (window.__catToggleBound) return;
    window.__catToggleBound = true;
    var LABEL_ACTIVE = @json(__('Aktiv'));
    var LABEL_INACTIVE = @json(__('Deaktiv'));
    var TITLE_ACTIVE = @json(__('Deaktiv et'));
    var TITLE_INACTIVE = @json(__('Aktiv et'));

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('.cat-toggle');
        if (!btn) return;
        e.preventDefault();

        var url = btn.getAttribute('data-url');
        var token = document.querySelector('meta[name="csrf-token"]');
        token = token ? token.getAttribute('content') : '';

        fetch(url, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': token,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            if (!data || data.success !== true) return;
            var active = !!data.is_active;
            btn.setAttribute('data-active', active ? 1 : 0);
            btn.classList.toggle('badge-green', active);
            btn.classList.toggle('badge-yellow', !active);
            btn.textContent = active ? LABEL_ACTIVE : LABEL_INACTIVE;
            btn.title = active ? TITLE_ACTIVE : TITLE_INACTIVE;
        })
        .catch(function () { /* сеть/ошибка — оставляем кнопку как есть */ });
    });
})();
</script>