<x-app-layout>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div
                    class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-violet-500/10 to-indigo-600/10 rounded-full blur-xl">
                </div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-violet-600 to-indigo-600 bg-clip-text text-transparent">
                        Daftar Program Studi
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="book-open" class="w-4 h-4 inline mr-2"></i>
                    Kelola data program studi yang terdaftar dalam sistem
                </p>
            </div>

            <div class="flex items-center gap-4">
                <a href="{{ route('prodi.create') }}"
                    class="px-4 py-2.5 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    <span>Tambah Prodi</span>
                </a>
                <button onclick="window.print()"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="printer" class="w-4 h-4"></i>
                    <span class="hidden sm:inline">Print</span>
                </button>
            </div>
        </div>

        <!-- Flash Messages -->
        @if (session('success'))
            <div
                class="mb-6 p-4 bg-gradient-to-r from-green-500/10 to-emerald-600/10 border border-green-500/20 rounded-2xl flex items-center gap-3 animate-fade-in">
                <div
                    class="w-10 h-10 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center flex-shrink-0">
                    <i data-lucide="check-circle" class="w-5 h-5"></i>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-green-700 dark:text-green-400">{{ session('success') }}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-green-500 hover:text-green-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div
                class="mb-6 p-4 bg-gradient-to-r from-red-500/10 to-rose-600/10 border border-red-500/20 rounded-2xl flex items-center gap-3 animate-fade-in">
                <div
                    class="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center flex-shrink-0">
                    <i data-lucide="alert-circle" class="w-5 h-5"></i>
                </div>
                <div class="flex-1">
                    <p class="font-medium text-red-700 dark:text-red-400">{{ session('error') }}</p>
                </div>
                <button onclick="this.parentElement.remove()" class="text-red-500 hover:text-red-600">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>
        @endif

        <!-- Main Card -->
        <div class="group relative">
            <div
                class="absolute -inset-1 bg-gradient-to-r from-violet-600/10 to-indigo-600/10 rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500">
            </div>
            <div
                class="relative bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">

                <!-- Card Header -->
                <div class="p-6 border-b border-slate-100 dark:border-white/5">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                        <div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white">Data Program Studi</h3>
                            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Daftar semua program studi yang
                                terdaftar</p>
                        </div>
                        <div class="text-sm text-slate-500 dark:text-slate-400">
                            Total: <span
                                class="font-bold text-violet-600 dark:text-violet-400">{{ $prodi->total() }}</span>
                            program studi
                        </div>
                    </div>
                </div>

                <!-- Filter Section -->
                <div class="p-6 border-b border-slate-100 dark:border-white/5 bg-slate-50/50 dark:bg-white/5">
                    <form method="GET" action="{{ route('prodi.index') }}" class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <!-- Search Input -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Cari Program Studi
                                </label>
                                <div class="relative">
                                    <i data-lucide="search"
                                        class="absolute left-4 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                                    <input type="text" name="search" value="{{ request('search') }}"
                                        placeholder="Cari nama prodi, kode, atau kampus..."
                                        class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all"
                                        onkeyup="this.form.dispatchEvent(new Event('input', { bubbles: true }))">
                                </div>
                            </div>

                            <!-- Kampus Filter dengan Select2 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Filter Kampus
                                </label>
                                <div class="relative">

                                    <select name="kampus_id" id="kampus_filter"
                                        class="w-full pl-12 pr-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition-all appearance-none cursor-pointer">
                                        <option value="">Semua Kampus</option>
                                        @foreach ($kampus as $k)
                                            <option value="{{ $k->id }}"
                                                {{ request('kampus_id') == $k->id ? 'selected' : '' }}>
                                                {{ $k->nama }} ({{ $k->singkatan ?? 'No singkatan' }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="flex items-end gap-2">
                                <button type="submit" id="submitBtn"
                                    class="h-[42px] px-4 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all flex items-center gap-2">
                                    <i data-lucide="filter" class="w-4 h-4"></i>
                                    <span>Terapkan Filter</span>
                                </button>

                                @if (request()->hasAny(['search', 'kampus_id']))
                                    <a href="{{ route('prodi.index') }}"
                                        class="h-[42px] px-4 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2">
                                        <i data-lucide="x" class="w-4 h-4"></i>
                                        <span>Reset Filter</span>
                                    </a>
                                @endif
                            </div>
                        </div>

                        <!-- Active Filters -->
                        @if (request()->hasAny(['search', 'kampus_id']))
                            <div class="flex items-center gap-3">
                                <span class="text-sm font-medium text-slate-500 dark:text-slate-400">Filter
                                    Aktif:</span>
                                <div class="flex flex-wrap gap-2">
                                    @if (request('search'))
                                        <span
                                            class="inline-flex items-center gap-1 px-3 py-1 bg-violet-500/10 text-violet-600 dark:text-violet-400 rounded-lg text-xs font-medium">
                                            <i data-lucide="search" class="w-3 h-3"></i>
                                            "{{ request('search') }}"
                                            <a href="{{ route('prodi.index', array_merge(request()->except('search'), ['search' => ''])) }}"
                                                class="text-violet-400 hover:text-violet-500">
                                                <i data-lucide="x" class="w-3 h-3"></i>
                                            </a>
                                        </span>
                                    @endif

                                    @if (request('kampus_id'))
                                        @php
                                            $selectedKampus = $kampus->firstWhere('id', request('kampus_id'));
                                        @endphp
                                        @if ($selectedKampus)
                                            <span
                                                class="inline-flex items-center gap-1 px-3 py-1 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg text-xs font-medium">
                                                <i data-lucide="school" class="w-3 h-3"></i>
                                                {{ $selectedKampus->nama }}
                                                <a href="{{ route('prodi.index', array_merge(request()->except('kampus_id'), ['kampus_id' => ''])) }}"
                                                    class="text-blue-400 hover:text-blue-500">
                                                    <i data-lucide="x" class="w-3 h-3"></i>
                                                </a>
                                            </span>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        @endif

                        <!-- Results Info -->
                        @if (request()->hasAny(['search', 'kampus_id']) && $prodi->total() > 0)
                            <div class="text-sm text-slate-500 dark:text-slate-400">
                                <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
                                Menampilkan {{ $prodi->total() }} hasil
                                @if (request('search'))
                                    untuk pencarian "{{ request('search') }}"
                                @endif
                                @if (request('kampus_id') && isset($selectedKampus))
                                    di kampus {{ $selectedKampus->nama }}
                                @endif
                            </div>
                        @endif
                    </form>
                </div>

                <!-- Table Section -->
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="bg-slate-50/50 dark:bg-white/5 border-b border-slate-100 dark:border-white/5">
                                <th
                                    class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Kampus</th>
                                <th
                                    class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Program Studi</th>
                                <th
                                    class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Kode</th>
                                <th
                                    class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Biaya Formulir</th>
                                <th
                                    class="text-left py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">
                                    Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                            @forelse($prodi as $p)
                                <tr class="hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500/10 to-cyan-600/10 text-blue-500 flex items-center justify-center flex-shrink-0">
                                                <i data-lucide="school" class="w-5 h-5"></i>
                                            </div>
                                            <div>
                                                <div class="font-medium text-gray-900 dark:text-white">
                                                    {{ $p->kampus->nama }}</div>
                                                <div class="text-xs text-slate-500 dark:text-slate-400">
                                                    {{ $p->kampus->singkatan ?? '-' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-3">
                                            <div
                                                class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500/10 to-pink-600/10 text-purple-500 flex items-center justify-center flex-shrink-0">
                                                <i data-lucide="book-open" class="w-5 h-5"></i>
                                            </div>
                                            <div>
                                                <div class="font-medium text-gray-900 dark:text-white">
                                                    @if ($p->jenjang)
                                                        <span
                                                            class="inline-flex items-center px-1.5 py-0.5 mr-1.5 rounded text-xs font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">
                                                            {{ $p->jenjang }}
                                                        </span>
                                                    @endif
                                                    {{ $p->nama }}
                                                </div>
                                                <div class="text-xs text-slate-500 dark:text-slate-400">
                                                    Kode: {{ $p->kode }} | Terakhir diupdate:
                                                    {{ $p->updated_at->diffForHumans() }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-4 px-6">
                                        <span
                                            class="inline-flex items-center justify-center px-3 py-1.5 bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-slate-400 rounded-lg text-sm font-mono font-medium">
                                            {{ $p->kode }}
                                        </span>
                                    </td>
                                    <td class="py-4 px-6">
                                        <div class="font-medium text-gray-900 dark:text-white">
                                            Rp {{ number_format($p->biaya_formulir, 0, ',', '.') }}
                                        </div>
                                        <div class="text-xs text-slate-500 dark:text-slate-400 mt-1">
                                            Biaya pendaftaran formulir
                                        </div>
                                    </td>
                                    <td class="py-4 px-6">
                                        <div class="flex items-center gap-2">
                                            <a href="{{ route('prodi.edit', $p->id) }}"
                                                class="w-9 h-9 flex items-center justify-center bg-slate-100 dark:bg-gray-800 text-slate-600 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                                title="Edit">
                                                <i data-lucide="edit-2" class="w-4 h-4"></i>
                                            </a>
                                            <button
                                                onclick="deleteProdi({{ $p->id }}, '{{ addslashes($p->nama) }}')"
                                                class="w-9 h-9 flex items-center justify-center bg-red-500/10 text-red-600 dark:text-red-400 hover:bg-red-500/20 rounded-lg transition-colors"
                                                title="Hapus">
                                                <i data-lucide="trash-2" class="w-4 h-4"></i>
                                            </button>
                                            <a href="{{ route('biaya-master.index', ['prodi_id' => $p->id]) }}"
                                                class="w-9 h-9 flex items-center justify-center bg-green-500/10 text-green-600 dark:text-green-400 hover:bg-green-500/20 rounded-lg transition-colors"
                                                title="Lihat Biaya">
                                                <i data-lucide="dollar-sign" class="w-4 h-4"></i>
                                            </a>
                                        </div>
                                        <form id="delete-form-{{ $p->id }}"
                                            action="{{ route('prodi.destroy', $p->id) }}" method="POST"
                                            class="hidden">
                                            @csrf
                                            @method('DELETE')
                                        </form>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="py-12 px-6 text-center">
                                        <div
                                            class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
                                            <i data-lucide="inbox"
                                                class="w-8 h-8 text-slate-400 dark:text-slate-500"></i>
                                        </div>
                                        <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
                                            @if (request()->hasAny(['search', 'kampus_id']))
                                                Tidak ada data program studi yang sesuai dengan filter
                                            @else
                                                Belum ada data program studi
                                            @endif
                                        </h4>
                                        <p class="text-slate-500 dark:text-slate-400 mb-4">
                                            @if (request()->hasAny(['search', 'kampus_id']))
                                                Coba gunakan filter lain atau <a href="{{ route('prodi.index') }}"
                                                    class="text-violet-600 dark:text-violet-400 hover:underline">reset
                                                    filter</a>
                                            @else
                                                Mulai dengan menambahkan program studi pertama Anda
                                            @endif
                                        </p>
                                        @if (!request()->hasAny(['search', 'kampus_id']))
                                            <a href="{{ route('prodi.create') }}"
                                                class="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-violet-600 to-indigo-700 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-violet-500/25 transition-all">
                                                <i data-lucide="plus" class="w-4 h-4"></i>
                                                Tambah Program Studi Pertama
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if ($prodi->hasPages())
                    <div class="p-6 border-t border-slate-100 dark:border-white/5">
                        <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                            <div class="text-sm text-slate-500 dark:text-slate-400">
                                Menampilkan {{ $prodi->firstItem() }} - {{ $prodi->lastItem() }} dari
                                {{ $prodi->total() }} data
                            </div>
                            <div class="flex items-center gap-2">
                                {{ $prodi->appends(request()->query())->links('vendor.pagination.tailwind') }}
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- CSS for Select2 Dark Mode -->
    <style>
        /* Base Select2 styling */
        .select2-container--default .select2-selection--single {
            border-radius: 0.75rem;
            height: 48px;
            display: flex;
            align-items: center;
            border-color: #e2e8f0;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 48px;
            padding-left: 48px;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 48px;
            right: 10px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #64748b transparent transparent transparent;
        }

        .select2-dropdown {
            border-radius: 0.75rem;
            border-color: #e2e8f0;
        }

        .select2-search__field {
            border-radius: 0.5rem !important;
            border-color: #e2e8f0 !important;
        }

        /* Dark mode Select2 */
        .dark .select2-container--default .select2-selection--single {
            background-color: #1a1a2e;
            border-color: #374151;
        }

        .dark .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #e5e7eb;
        }

        .dark .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af;
        }

        .dark .select2-dropdown {
            background-color: #1a1a2e;
            border-color: #374151;
        }

        .dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #4c1d95;
        }

        .dark .select2-container--default .select2-results__option {
            color: #e5e7eb;
        }

        .dark .select2-search__field {
            background-color: #2d2d4a !important;
            border-color: #374151 !important;
            color: #e5e7eb !important;
        }

        .dark .select2-search__field::placeholder {
            color: #9ca3af !important;
        }

        /* Icon positioning for Lucide */
        .kampus-filter-wrapper {
            position: relative;
        }

        .kampus-filter-wrapper .lucide {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 40;
            pointer-events: none;
        }
    </style>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();

            // Inisialisasi Select2 untuk filter kampus
            if (typeof $ !== 'undefined' && $.fn.select2) {
                $('#kampus_filter').select2({
                    theme: 'default',
                    width: '100%',
                    placeholder: 'Cari kampus...',
                    allowClear: true,
                    language: {
                        noResults: function() {
                            return 'Tidak ada kampus ditemukan';
                        },
                        searching: function() {
                            return 'Mencari...';
                        }
                    }
                });

                // Submit form saat select2 berubah
                $('#kampus_filter').on('change', function() {
                    $('#submitBtn').click();
                });
            }

            // Search dengan debounce
            let searchTimeout;
            const searchInput = document.querySelector('input[name="search"]');

            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    clearTimeout(searchTimeout);
                    searchTimeout = setTimeout(() => {
                        this.form.submit();
                    }, 500);
                });
            }

            // Inisialisasi semua tombol hapus
            document.querySelectorAll('button[onclick^="deleteProdi"]').forEach(button => {
                button.onclick = function() {
                    const match = this.getAttribute('onclick').match(/deleteProdi\((\d+), '([^']+)'\)/);
                    if (match) {
                        const id = match[1];
                        const nama = match[2];
                        showDeleteConfirmation(id, nama);
                    }
                };
            });
        });

        function showDeleteConfirmation(id, nama) {
            Swal.fire({
                title: 'Hapus Program Studi?',
                html: `<div class="text-left">
                    <div class="mb-4 p-4 bg-red-500/10 border border-red-500/20 rounded-xl">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center flex-shrink-0">
                                <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-red-700 dark:text-red-400">Perhatian!</h4>
                                <p class="text-sm text-red-600 dark:text-red-300 mt-1">
                                    Program studi <strong>"${nama.replace(/\\'/g, "'")}"</strong> dan semua biaya yang terkait akan dihapus secara permanen.
                                </p>
                            </div>
                        </div>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        Tindakan ini tidak dapat dibatalkan. Pastikan Anda telah mem-backup data penting.
                    </p>
                </div>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal',
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }

        function deleteProdi(id, nama) {
            showDeleteConfirmation(id, nama);
        }
    </script>
</x-app-layout>
