@extends('layouts.apoteker')

@section('title', 'Manajemen Katalog')

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">📦 Manajemen Katalog</h1>
    <a href="{{ route('apoteker.catalog.create') }}"
       class="px-6 py-2 bg-[color:var(--primary-color)] text-white rounded-lg hover:brightness-110 shadow transition">
        ➕ Tambah Katalog
    </a>
</div>

{{-- Filter Form --}}
<form method="GET" class="flex flex-wrap gap-4 mb-6">
    <input type="text" name="search" placeholder="Cari nama atau deskripsi..."
           value="{{ request('search') }}"
           class="border p-2 rounded w-full md:w-1/3 dark:bg-gray-700 dark:text-white" />

    <select name="category" class="border p-2 rounded w-full md:w-1/4 dark:bg-gray-700 dark:text-white">
        <option value="">-- Semua Kategori --</option>
        @foreach($categories as $cat)
            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>
                {{ $cat->name }}
            </option>
        @endforeach
    </select>

    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">🔍 Filter</button>
    <a href="{{ route('apoteker.catalog.index') }}"
       class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">🔁 Reset</a>
</form>

{{-- Bulk Form --}}
<form id="bulkDeleteForm" method="POST" action="{{ route('apoteker.catalog.bulk-action') }}">
    @csrf
    <input type="hidden" name="action" id="bulkActionInput">

    <div class="flex flex-wrap gap-2 mb-4">
        <button type="button" class="bulk-action-btn bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded" data-action="delete">🗑️ Hapus yang dipilih</button>
        <button type="button" class="bulk-action-btn bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded" data-action="deactivate">🚫 Nonaktifkan</button>
        <button type="button" class="bulk-action-btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded" data-action="activate">✅ Aktifkan</button>
    </div>

    <div class="overflow-x-auto bg-white dark:bg-gray-800 rounded-xl shadow">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-3"><input type="checkbox" id="selectAll"></th>
                    <th class="px-4 py-3 text-left">Gambar</th>
                    <th class="px-4 py-3 text-left">Nama</th>
                    <th class="px-4 py-3 text-left">Harga</th>
                    <th class="px-4 py-3 text-left">Aktif</th>
                    <th class="px-4 py-3 text-left">Kategori</th>
                    <th class="px-4 py-3 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y dark:divide-gray-700">
                @forelse ($catalogs as $catalog)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                        <td class="px-4 py-3">
                            <input type="checkbox" name="ids[]" value="{{ $catalog->id }}" class="form-checkbox item-checkbox">
                        </td>
                        <td class="px-4 py-3">
                            <img src="{{ catalogImage($catalog->image_path) }}" class="w-12 h-12 rounded object-cover">
                        </td>
                        <td class="px-4 py-3">{{ $catalog->name }}</td>
                        <td class="px-4 py-3 font-bold text-[color:var(--primary-color)]">Rp {{ number_format($catalog->price, 0, ',', '.') }}</td>
                        <td class="px-4 py-3">
                            <form action="{{ route('apoteker.catalog.toggle', $catalog->id) }}" method="POST" onsubmit="event.stopPropagation();">
                                @csrf

                                <button type="submit" class="text-xs px-2 py-1 rounded-full {{ $catalog->is_active ? 'bg-green-200 text-green-800 dark:bg-green-900' : 'bg-red-200 text-red-800 dark:bg-red-900' }}">
                                    {{ $catalog->is_active ? 'Aktif' : 'Nonaktif' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-4 py-3">{{ $catalog->category?->name ?? '-' }}</td>
                        <td class="px-4 py-3 flex gap-2">
                            <a href="{{ route('apoteker.catalog.edit', $catalog) }}" class="text-blue-600 hover:underline">Edit</a>
                            <button type="button" onclick="confirmDelete('{{ route('apoteker.catalog.destroy', $catalog) }}')" class="text-red-600 hover:underline">Hapus</button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="text-center text-gray-500 dark:text-gray-300 py-10">Tidak ada katalog ditemukan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</form>

<div class="mt-6">
    {{ $catalogs->links('vendor.pagination.tailwind') }}
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.querySelectorAll('.bulk-action-btn').forEach(button => {
        button.addEventListener('click', function () {
            const selected = document.querySelectorAll('.item-checkbox:checked');
            if (selected.length === 0) {
                Swal.fire('⚠️ Oops!', 'Pilih minimal satu katalog terlebih dahulu.', 'warning');
                return;
            }
            document.getElementById('bulkActionInput').value = this.dataset.action;
            document.getElementById('bulkDeleteForm').submit();
        });
    });

    document.getElementById('selectAll')?.addEventListener('change', function () {
        document.querySelectorAll('.item-checkbox').forEach(cb => cb.checked = this.checked);
    });

    function confirmDelete(url) {
        Swal.fire({
            title: 'Yakin ingin menghapus?',
            text: 'Data katalog ini akan dihapus secara permanen.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#aaa',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = url;

                const csrf = document.createElement('input');
                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = '{{ csrf_token() }}';

                const method = document.createElement('input');
                method.type = 'hidden';
                method.name = '_method';
                method.value = 'DELETE';

                form.appendChild(csrf);
                form.appendChild(method);
                document.body.appendChild(form);
                form.submit();
            }
        });
    }
</script>
@endpush