@extends('layouts.superadmin')

@section('content')
<div x-data="{
    addModal: false,
    editModal: false,
    deleteModal: false,
    editForm: {
        id: '',
        name: '',
        start_date: '',
        end_date: '',
        is_active: false,
        description: ''
    },
    deleteData: {
        id: '',
        name: '',
        count: 0
    },
    openEdit(data) {
        this.editForm = { ...data };
        this.editModal = true;
    },
    openDelete(id, name, count) {
        this.deleteData = { id, name, count };
        this.deleteModal = true;
    }
}" @keydown.escape.window="addModal = false; editModal = false; deleteModal = false">

    <!-- Top Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-[#13124E] tracking-tight">Batch Periode Magang</h1>
            <p class="text-xs text-gray-400 mt-1">Kelola gelombang periode magang per semester atau tanggal fleksibel sesuai kebutuhan institusi.</p>
        </div>
        <div class="flex items-center gap-2.5 self-start sm:self-auto">
            <form action="{{ route('superadmin.batches.sync_interns') }}" method="POST" class="m-0">
                @csrf
                <button type="submit" title="Hubungkan seluruh peserta magang yang belum memiliki batch ke periode yang sesuai"
                    class="bg-white hover:bg-gray-50 text-gray-700 border border-gray-200 text-xs font-semibold px-3.5 py-2.5 rounded-xl flex items-center gap-2 transition shadow-xs cursor-pointer">
                    <i class="fa-solid fa-arrows-rotate text-xs text-indigo-600"></i>
                    <span>Sinkronkan Intern</span>
                </button>
            </form>
            <button type="button" @click="addModal = true"
                class="bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold px-4 py-2.5 rounded-xl flex items-center gap-2 transition shadow-xs cursor-pointer">
                <i class="fa-solid fa-plus text-xs"></i>
                <span>Tambah Batch Baru</span>
            </button>
        </div>
    </div>

    <!-- Flash Messages -->
    @if (session('success'))
        <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-xs font-medium text-emerald-800 flex items-center justify-between shadow-xs">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                <span>{{ session('success') }}</span>
            </div>
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-xs font-medium text-red-800 flex items-center justify-between shadow-xs">
            <div class="flex items-center gap-2">
                <i class="fa-solid fa-circle-exclamation text-red-600 text-sm"></i>
                <span>{{ session('error') }}</span>
            </div>
        </div>
    @endif

    @if (isset($errors) && $errors->any())
        <div class="mb-6 p-4 rounded-xl bg-red-50 border border-red-200 text-xs font-medium text-red-800 shadow-xs">
            <div class="flex items-center gap-2 mb-1 font-semibold">
                <i class="fa-solid fa-circle-exclamation text-red-600 text-sm"></i>
                <span>Terjadi kesalahan:</span>
            </div>
            <ul class="list-disc list-inside text-red-700 ml-4 space-y-0.5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- STATS CARDS -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <!-- Total Batch -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Total Periode Batch</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $totalBatches }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-solid fa-layer-group"></i>
            </div>
        </div>

        <!-- Batch Aktif -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Batch Aktif Saat Ini</p>
                <span class="text-4xl font-semibold text-[#13124E] leading-none">{{ $activeBatches }}</span>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-solid fa-circle-check"></i>
            </div>
        </div>

        <!-- Rekomendasi Periode -->
        <div class="bg-white border border-gray-200/80 p-6 rounded-2xl shadow-xs flex justify-between items-start">
            <div>
                <p class="text-xs text-gray-400 font-medium mb-3">Siklus Periode Berjalan</p>
                <div class="text-xl font-bold text-[#13124E] leading-tight">{{ $suggestedBatch['name'] }}</div>
                <p class="text-[11px] text-gray-400 mt-1.5">{{ \Carbon\Carbon::parse($suggestedBatch['start_date'])->translatedFormat('d M Y') }} s/d {{ \Carbon\Carbon::parse($suggestedBatch['end_date'])->translatedFormat('d M Y') }}</p>
            </div>
            <div class="text-[#13124E] text-base">
                <i class="fa-regular fa-calendar-days"></i>
            </div>
        </div>
    </div>

    <!-- MAIN CARD TABLE WITH LIVEWIRE SEARCH & URL STATE -->
    <div class="bg-white rounded-2xl border border-gray-100 p-6 shadow-xs">
        <livewire:superadmin.batch-table />
    </div>

    <!-- MODAL TAMBAH BATCH -->
    <div id="addModal" x-show="addModal" x-cloak :class="{ 'hidden': !addModal }" class="fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-xs flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl w-full max-w-lg shadow-xl border border-gray-100 overflow-hidden transform transition-all">
            <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between">
                <div>
                    <h3 class="text-sm sm:text-base font-bold text-gray-900">Tambah Batch Periode Baru</h3>
                    <p class="text-[11px] text-gray-400 mt-0.5">Atur jendela waktu gelombang magang peserta.</p>
                </div>
                <button type="button" @click="addModal = false" class="text-gray-400 hover:text-gray-600 text-sm cursor-pointer">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <form action="{{ route('superadmin.batches.store') }}" method="POST" class="p-4 sm:p-5 space-y-3">
                @csrf

                <!-- Rekomendasi Info Box -->
                <div class="p-3 rounded-xl bg-blue-50/70 border border-blue-100 text-xs text-blue-900 flex items-start gap-2.5">
                    <i class="fa-solid fa-circle-info text-blue-600 text-sm mt-0.5 shrink-0"></i>
                    <div>
                        <span class="font-bold">Sistem 6 Bulan Otomatis:</span> Kolom di bawah sudah otomatis terisi rekomendasi periode semester berikutnya. Anda tetap bebas mengganti tanggalnya secara manual sesuai kalender sekolah.
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Batch / Periode <span class="text-red-500">*</span></label>
                    <input type="text" name="name" value="{{ old('name', $suggestedBatch['name']) }}" required placeholder="Contoh: Batch 1 - 2026"
                        class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Tanggal Mulai <span class="text-red-500">*</span></label>
                        <input type="date" name="start_date" value="{{ old('start_date', $suggestedBatch['start_date']) }}" required
                            class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Tanggal Selesai <span class="text-red-500">*</span></label>
                        <input type="date" name="end_date" value="{{ old('end_date', $suggestedBatch['end_date']) }}" required
                            class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Keterangan (Opsional)</label>
                    <textarea name="description" rows="2" placeholder="Catatan khusus untuk batch ini..."
                        class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">{{ old('description') }}</textarea>
                </div>

                <div class="flex items-center gap-2 pt-0.5">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" id="add_is_active" name="is_active" value="1" checked
                        class="rounded border-gray-300 text-[#13124E] focus:ring-[#363199]">
                    <label for="add_is_active" class="text-xs text-gray-700 font-medium cursor-pointer">Setel sebagai batch aktif sekarang</label>
                </div>

                <div class="pt-3 border-t border-gray-100 flex items-center justify-end gap-2.5">
                    <button type="button" @click="addModal = false"
                        class="px-4 py-2 text-xs font-semibold text-gray-600 hover:text-gray-800 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold px-4 py-2 rounded-xl transition shadow-xs cursor-pointer">
                        Simpan Batch
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL EDIT BATCH -->
    <div id="editModal" x-show="editModal" x-cloak :class="{ 'hidden': !editModal }" class="fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-xs flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl w-full max-w-lg shadow-xl border border-gray-100 overflow-hidden transform transition-all">
            <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between">
                <div>
                    <h3 class="text-sm sm:text-base font-bold text-gray-900">Edit Periode Batch</h3>
                    <p class="text-[11px] text-gray-400 mt-0.5">Perbarui nama atau sesuaikan tanggal jendela magang.</p>
                </div>
                <button type="button" @click="editModal = false" class="text-gray-400 hover:text-gray-600 text-sm cursor-pointer">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>

            <form id="editBatchForm" :action="'/superadmin/batches/' + editForm.id" method="POST" class="p-4 sm:p-5 space-y-3">
                @csrf
                @method('PUT')

                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Nama Batch / Periode <span class="text-red-500">*</span></label>
                    <input type="text" id="edit_name" name="name" x-model="editForm.name" required
                        class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Tanggal Mulai <span class="text-red-500">*</span></label>
                        <input type="date" id="edit_start_date" name="start_date" x-model="editForm.start_date" required
                            class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1">Tanggal Selesai <span class="text-red-500">*</span></label>
                        <input type="date" id="edit_end_date" name="end_date" x-model="editForm.end_date" required
                            class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition">
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-gray-700 mb-1">Keterangan (Opsional)</label>
                    <textarea id="edit_description" name="description" rows="2" x-model="editForm.description"
                        class="w-full px-3 py-2 text-xs rounded-xl border border-gray-200 focus:outline-none focus:border-[#363199] transition"></textarea>
                </div>

                <div class="flex items-center gap-2 pt-0.5">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" id="edit_is_active" name="is_active" value="1" x-model="editForm.is_active"
                        class="rounded border-gray-300 text-[#13124E] focus:ring-[#363199]">
                    <label for="edit_is_active" class="text-xs text-gray-700 font-medium cursor-pointer">Batch aktif</label>
                </div>

                <div class="pt-3 border-t border-gray-100 flex items-center justify-end gap-2.5">
                    <button type="button" @click="editModal = false"
                        class="px-4 py-2 text-xs font-semibold text-gray-600 hover:text-gray-800 transition cursor-pointer">
                        Batal
                    </button>
                    <button type="submit"
                        class="bg-[#13124E] hover:bg-[#1E1B6B] text-white text-xs font-semibold px-4 py-2 rounded-xl transition shadow-xs cursor-pointer">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL HAPUS BATCH -->
    <div id="deleteModal" x-show="deleteModal" x-cloak :class="{ 'hidden': !deleteModal }" class="fixed inset-0 z-50 overflow-y-auto bg-black/40 backdrop-blur-xs flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl w-full max-w-md shadow-xl border border-gray-100 overflow-hidden transform transition-all p-5 text-center">
            <div class="w-10 h-10 rounded-full bg-red-50 text-red-600 flex items-center justify-center mx-auto mb-3 text-base">
                <i class="fa-solid fa-triangle-exclamation"></i>
            </div>
            <h3 class="text-base font-bold text-gray-900 mb-1">Hapus Batch Ini?</h3>
            <p id="deleteModalText" class="text-xs text-gray-500 mb-4 leading-relaxed"
                x-text="'Apakah Anda yakin ingin menghapus &quot;' + deleteData.name + '&quot;?' + (deleteData.count > 0 ? ' Terdapat ' + deleteData.count + ' intern di dalam batch ini. Data intern tidak akan dihapus, tetapi batch mereka akan di-reset.' : '')">
                Apakah Anda yakin ingin menghapus batch ini? Intern yang terdaftar dalam batch ini tidak akan terhapus, namun status relasi batch-nya akan menjadi kosong.
            </p>

            <form id="deleteBatchForm" :action="'/superadmin/batches/' + deleteData.id" method="POST" class="flex items-center justify-center gap-2.5">
                @csrf
                @method('DELETE')
                <button type="button" @click="deleteModal = false"
                    class="px-4 py-2 rounded-xl border border-gray-200 text-xs font-semibold text-gray-600 hover:bg-gray-50 transition cursor-pointer">
                    Batal
                </button>
                <button type="submit"
                    class="px-5 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold transition shadow-xs cursor-pointer">
                    Hapus Sekarang
                </button>
            </form>
        </div>
    </div>

</div>
@endsection