@extends('layouts.admin-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('admin.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 dan Pencarian --}}
<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('admin.catalog.index') }}"
       class="px-4 py-2 bg-gray-400 text-white rounded hover:bg-gray-500">🔁 Reset</a>
</form>


{{-- 🗑️ Bulk Delete Form --}}
<form id="bulkDeleteForm" method="POST" action="{{ route('admin.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 yang dipilih</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 yang dipilih</button>
    </div>

</form>
 {{-- 🔄 Tombol Import/Export Excel --}}
<div class="flex flex-wrap gap-2 mb-6">

    {{-- Export Excel --}}
    <a href="{{ route('admin.catalog.export-excel') }}"
       class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded">
       📊 Export Excel
    </a>

    {{-- Import Excel --}}
    <form action="{{ route('admin.catalog.import-excel') }}" method="POST" enctype="multipart/form-data"
          class="flex items-center gap-2">
        @csrf
        <input type="file" name="file" accept=".xlsx,.xls"
               class="border px-3 py-1 rounded dark:bg-gray-700 dark:text-white" required>
        <button type="submit"
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">
            📥 Import Excel
        </button>
    </form>

    {{-- Link Template --}}
    <a href="{{ asset('storage/template/template_katalog.xlsx') }}"
       class="text-blue-600 hover:underline">📄 Unduh Template Excel</a>
</div>


    {{-- 📋 Tabel Katalog --}}
    <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 text-left">
                        <input type="checkbox" id="selectAll" class="form-checkbox">
                    </th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Gambar</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Nama</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Harga</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Aktif</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Kategori</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase">Aksi</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                @forelse ($catalogs as $catalog)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <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-lg object-cover">
                        </td>
                        <td class="px-4 py-3 text-gray-800 dark:text-gray-200 font-semibold">{{ $catalog->name }}</td>
                        <td class="px-4 py-3 text-[color:var(--primary-color)] font-bold">
                            Rp {{ number_format($catalog->price, 0, ',', '.') }}
                        </td>
                        <td class="px-4 py-3">
                            <form action="{{ route('admin.catalog.toggle', $catalog->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <button type="submit" class="px-2 py-1 text-xs rounded-full
                                    {{ $catalog->is_active ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200' : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' }}">
                                    {{ $catalog->is_active ? 'Aktif' : 'Nonaktif' }}
                                </button>
                            </form>
                        </td>
                        <td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300">
                            {{ $catalog->category?->name ?? '-' }}
                        </td>
                        <td class="px-4 py-3 flex gap-3 text-sm">
                            <a href="{{ route('admin.catalog.edit', $catalog) }}" class="text-blue-600 hover:underline">Edit</a>
                            <button type="button"
                                class="text-red-600 hover:underline"
                                onclick="confirmDelete('{{ route('admin.catalog.destroy', $catalog) }}')">
                                Hapus
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-500 dark:text-gray-300">
                            Tidak ada katalog ditemukan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</form>

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

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function confirmDelete(url) {
    Swal.fire({
        title: 'Yakin ingin menghapus?',
        text: 'Data katalog ini akan dihapus secara permanen.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        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();
        }
    });
}

// ✅ Select All Checkbox
document.getElementById('selectAll').addEventListener('change', function () {
    document.querySelectorAll('.item-checkbox').forEach(checkbox => {
        checkbox.checked = this.checked;
    });
});

// ✅ Bulk Action Buttons Handler
document.querySelectorAll('.bulk-action-btn').forEach(button => {
    button.addEventListener('click', function () {
        const action = this.dataset.action;
        const selected = Array.from(document.querySelectorAll('.item-checkbox:checked')).map(cb => cb.value);

        if (selected.length === 0) {
            Swal.fire('⚠️ Tidak ada data dipilih', 'Silakan pilih minimal satu katalog.', 'warning');
            return;
        }

        let title = 'Yakin ingin melanjutkan?';
        let text = '';
        let icon = 'warning';

        switch (action) {
            case 'delete':
                title = 'Hapus Data Terpilih?';
                text = 'Data yang dihapus tidak dapat dikembalikan.';
                icon = 'error';
                break;
            case 'deactivate':
                title = 'Nonaktifkan Data Terpilih?';
                text = 'Semua katalog yang dipilih akan dinonaktifkan.';
                icon = 'warning';
                break;
            case 'activate':
                title = 'Aktifkan Data Terpilih?';
                text = 'Semua katalog yang dipilih akan diaktifkan.';
                icon = 'question';
                break;
        }

        Swal.fire({
            title: title,
            text: text,
            icon: icon,
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#aaa',
            confirmButtonText: 'Ya, lanjutkan!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                const form = document.getElementById('bulkDeleteForm');
                document.getElementById('bulkActionInput').value = action;

                // Hapus input ids[] sebelumnya untuk mencegah dobel
                document.querySelectorAll('input[name="ids[]"]').forEach(e => e.remove());

                // Tambahkan kembali ids[] yang dipilih
                selected.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'ids[]';
                    input.value = id;
                    form.appendChild(input);
                });

                // Pastikan _method tidak ikut terbawa ke POST ini
                document.querySelectorAll('input[name="_method"]').forEach(e => e.remove());

                form.submit();
            }
        });
    });
});
</script>

{{-- ✅ SweetAlert untuk hasil Import / aksi --}}
@if (session('success') || session('error'))
<script>
Swal.fire({
    title: '{{ session('success') ? 'Berhasil' : 'Gagal' }}',
    text: '{{ session('success') ?? session('error') }}',
    icon: '{{ session('success') ? 'success' : 'error' }}',
    confirmButtonText: 'OK'
});
</script>
@endif
@endpush