@extends('layouts.app')
@section('title', 'Kenaikan Kelas')
@section('content')
<div x-data="{
    firstConfirmOpen: false,
    secondConfirmOpen: false,
    confirmText: '',
    clientError: '',
    processing: false,
    validateTargetClassrooms() {
        const rows = this.$refs.executePromotionForm?.querySelectorAll('[data-promotion-row]') ?? [];

        for (const row of rows) {
            const decision = row.querySelector('[data-decision]');
            const targetClassroom = row.querySelector('[data-target-classroom]');

            if (decision && targetClassroom && decision.value === 'naik' && targetClassroom.value === '') {
                return false;
            }
        }

        return true;
    },
    openFirstConfirm() {
        if (!this.validateTargetClassrooms()) {
            this.clientError = 'Masih ada siswa berstatus naik tanpa kelas tujuan. Silakan lengkapi dulu sebelum lanjut.';

            return;
        }

        this.clientError = '';
        this.firstConfirmOpen = true;
    },
    continueToSecondConfirm() {
        this.firstConfirmOpen = false;
        this.secondConfirmOpen = true;
    },
    closeAllConfirm() {
        this.firstConfirmOpen = false;
        this.secondConfirmOpen = false;
        this.confirmText = '';
    },
    submitPromotion() {
        if (this.confirmText !== 'PROSES KENAIKAN KELAS') {
            return;
        }

        this.processing = true;
        this.$refs.executePromotionForm.submit();
    }
}">
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Kenaikan Kelas</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Proses massal akhir tahun ajaran dengan status naik,
            tinggal, atau lulus per siswa.</p>
    </div>

    @if(session('success'))
    <x-alert type="success">{{ session('success') }}</x-alert>
    @endif

    @if(session('error'))
    <x-alert type="danger">{{ session('error') }}</x-alert>
    @endif

    @if($errors->any())
    <x-alert type="danger" :dismissible="false">
        <ul class="space-y-1 list-disc list-inside">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </x-alert>
    @endif

    <template x-if="clientError !== ''">
        <div class="p-4 mb-4 text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg dark:bg-gray-800 dark:text-red-300 dark:border-red-900"
            x-text="clientError"></div>
    </template>

    <div
        class="p-4 mb-4 text-sm text-gray-700 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700">
        <span class="font-semibold">Semester aktif saat ini:</span>
        @if($activeSemester)
        {{ $activeSemester->name }} - {{ $activeSemester->academicYear?->name }}
        @else
        Tidak ada semester aktif
        @endif
    </div>

    <x-alert type="warning" :dismissible="false">
        <strong>Perhatian:</strong> Proses bersifat irreversible. Jika satu siswa gagal diproses, seluruh perubahan akan
        dibatalkan otomatis.
    </x-alert>

    <x-filter-bar>
        <x-slot:fields>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Cari Nama/NIS</label>
                <input type="text" name="search" value="{{ $filters['search'] }}" placeholder="Nama atau NIS..."
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Tingkat</label>
                <select name="grade_level"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Tingkat</option>
                    <option value="X" {{ (string) $filters['grade_level']==='X' ? 'selected' : '' }}>Kelas X</option>
                    <option value="XI" {{ (string) $filters['grade_level']==='XI' ? 'selected' : '' }}>Kelas XI</option>
                    <option value="XII" {{ (string) $filters['grade_level']==='XII' ? 'selected' : '' }}>Kelas XII
                    </option>
                </select>
            </div>
            <div>
                <label class="block mb-1 text-xs font-medium text-gray-700 dark:text-gray-300">Kelas</label>
                <select name="classroom_id"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">Semua Kelas</option>
                    @foreach($classrooms as $classroom)
                    <option value="{{ $classroom->id }}" {{ (string) $filters['classroom_id']===(string) $classroom->id
                        ? 'selected' : '' }}>
                        {{ $classroom->grade_level->value }} - {{ $classroom->name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </x-slot:fields>
    </x-filter-bar>

    <form x-ref="executePromotionForm" method="POST" action="{{ route('admin.promotions.execute') }}" class="mt-6">
        @csrf
        <input type="hidden" name="confirm_irreversible" value="1">
        <input type="hidden" name="apply_suggestions_for_unsubmitted" value="1">
        <input type="hidden" name="filters[search]" value="{{ $filters['search'] }}">
        <input type="hidden" name="filters[grade_level]" value="{{ $filters['grade_level'] }}">
        <input type="hidden" name="filters[classroom_id]" value="{{ $filters['classroom_id'] }}">

        <div class="bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <x-data-table>
                <x-slot:heading>
                    <th class="px-4 py-3">NIS</th>
                    <th class="px-4 py-3">Nama</th>
                    <th class="px-4 py-3">Kelas Saat Ini</th>
                    <th class="px-4 py-3">Keputusan</th>
                    <th class="px-4 py-3">Mutasi Ke Kelas</th>
                </x-slot:heading>
                <x-slot:body>
                    @forelse($students as $index => $student)
                    @php
                    $defaultDecision = (string) ($student->suggested_decision ?? 'tinggal');
                    $defaultTargetClassroomId = (string) ($student->suggested_target_classroom_id ?? '');
                    $oldDecision = old("promotions.$index.decision", $defaultDecision);
                    $oldTargetClassroomId = old("promotions.$index.target_classroom_id");
                    @endphp
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700" data-promotion-row
                        x-data="{ decision: '{{ $oldDecision }}' }">
                        <td class="px-4 py-3 font-mono text-xs text-gray-500">{{ $student->student_number }}</td>
                        <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ $student->full_name }}</td>
                        <td class="px-4 py-3 text-gray-700 dark:text-gray-200">
                            {{ $student->classroom?->grade_level?->value ?? '-' }} - {{ $student->classroom?->name ??
                            'Belum punya kelas' }}
                        </td>
                        <td class="px-4 py-3">
                            <input type="hidden" name="promotions[{{ $index }}][student_id]" value="{{ $student->id }}">
                            <select name="promotions[{{ $index }}][decision]" x-model="decision" data-decision
                                class="block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                <option value="naik">Naik</option>
                                <option value="tinggal">Tinggal</option>
                                <option value="lulus">Lulus</option>
                            </select>
                        </td>
                        <td class="px-4 py-3">
                            <select name="promotions[{{ $index }}][target_classroom_id]" data-target-classroom
                                class="block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                x-bind:required="decision === 'naik'">
                                <option value="">Tidak dipindah</option>
                                @foreach($classrooms as $classroom)
                                <option value="{{ $classroom->id }}" @selected(($oldTargetClassroomId !==null ? (string)
                                    $oldTargetClassroomId : $defaultTargetClassroomId)===(string) $classroom->id)>
                                    {{ $classroom->grade_level->value }} - {{ $classroom->name }}
                                </option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-amber-600 dark:text-amber-400" x-show="decision === 'naik'">Saat
                                status naik, kelas tujuan wajib dipilih.</p>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-show="decision === 'lulus'">Saat
                                lulus, kelas tujuan diabaikan.</p>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-400">Tidak ada siswa aktif yang bisa
                            diproses.</td>
                    </tr>
                    @endforelse
                </x-slot:body>
                @if($students->hasPages())
                <x-slot:pagination>{{ $students->withQueryString()->links() }}</x-slot:pagination>
                @endif
            </x-data-table>
        </div>

        <div class="flex justify-end mt-4">
            <button type="button" @click="openFirstConfirm()"
                class="px-5 py-2.5 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800"
                @disabled($students->isEmpty())
                >
                Proses Kenaikan Kelas
            </button>
        </div>
    </form>

    <div x-show="firstConfirmOpen" x-cloak class="fixed inset-0 z-40 flex items-center justify-center px-4 bg-black/50">
        <div
            class="w-full max-w-lg p-6 bg-white border border-red-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-red-900">
            <h3 class="text-lg font-semibold text-red-700 dark:text-red-400">Konfirmasi Tahap 1</h3>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-200">Semua perubahan akan diproses massal dan tidak bisa
                di-undo. Lanjut ke tahap konfirmasi akhir?</p>
            <div class="flex justify-end gap-2 mt-6">
                <button type="button" @click="closeAllConfirm()"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="button" @click="continueToSecondConfirm()"
                    class="px-4 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800">Lanjut</button>
            </div>
        </div>
    </div>

    <div x-show="secondConfirmOpen" x-cloak
        class="fixed inset-0 z-50 flex items-center justify-center px-4 bg-black/60">
        <div
            class="w-full max-w-lg p-6 bg-white border border-red-300 rounded-lg shadow-xl dark:bg-gray-800 dark:border-red-900">
            <h3 class="text-lg font-semibold text-red-700 dark:text-red-400">Konfirmasi Tahap 2 (Final)</h3>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-200">Ketik <span class="font-semibold">PROSES KENAIKAN
                    KELAS</span> untuk melanjutkan.</p>
            <input type="text" x-model="confirmText"
                class="block w-full p-2.5 mt-4 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                placeholder="PROSES KENAIKAN KELAS">
            <div class="flex justify-end gap-2 mt-6">
                <button type="button" @click="closeAllConfirm()"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600">Batal</button>
                <button type="button" @click="submitPromotion()"
                    :disabled="processing || confirmText !== 'PROSES KENAIKAN KELAS'"
                    :class="processing || confirmText !== 'PROSES KENAIKAN KELAS' ? 'opacity-60 cursor-not-allowed' : ''"
                    class="px-4 py-2 text-sm font-medium text-white bg-red-700 rounded-lg hover:bg-red-800">
                    <span x-show="!processing">Eksekusi Sekarang</span>
                    <span x-show="processing">Memproses...</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection