@extends('layouts.admin')

@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>

{{-- 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 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">
                        @if($catalog->image_path && file_exists(public_path('storage/' . $catalog->image_path)))
                            <img src="{{ asset('storage/' . $catalog->image_path) }}" class="w-12 h-12 rounded-lg object-cover">
                        @else
                            <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-500 rounded-lg">N/A</div>
                        @endif
                    </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="6" class="px-6 py-12 text-center text-gray-500 dark:text-gray-300">
                        Tidak ada katalog ditemukan.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<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();
        }
    });
}
</script>
@endpush