@extends('adminlte::page')

@section('title', 'Proses Kelulusan Siswa')

@section('plugins.Select2', true)
@section('plugins.Sweetalert2', true)

@section('content_header')
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center pt-3 pb-2">
        <div>
            <h1 class="text-dark font-weight-bold mb-1" style="font-family: 'Inter', sans-serif; font-size: 1.5rem;">
                Proses Kelulusan
            </h1>
            <p class="text-muted small mb-0 font-weight-500">
                Modul untuk memproses kelulusan siswa tingkat akhir secara massal.
            </p>
        </div>
        
        <div class="mt-3 mt-md-0">
            <a href="{{ route('alumni.index') }}" class="btn btn-light text-purple font-weight-bold shadow-sm rounded-pill px-4">
                <i class="fas fa-graduation-cap mr-2"></i> Data Alumni
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="container-fluid px-0">
    <div class="row">
        <div class="col-12">
            
            {{-- CARD 1: FILTER KELAS --}}
            <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;">
                <div class="card-body p-4">
                    <form method="GET" action="{{ route('kelulusan.index') }}">
                        <div class="row align-items-end">
                            <div class="col-md-5 mb-3 mb-md-0">
                                <label class="text-muted text-xs font-weight-bold text-uppercase mb-2">Pilih Kelas Akhir</label>
                                <div class="input-group bg-light rounded-pill overflow-hidden">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-transparent border-0 pl-3"><i class="fas fa-chalkboard text-muted"></i></span>
                                    </div>
                                    <select name="kelas_id" class="form-control border-0 bg-transparent shadow-none select2" style="height: 45px;">
                                        <option value="">-- Cari Kelas Tingkat Akhir --</option>
                                        @foreach($kelases as $kelas)
                                            <option value="{{ $kelas->id }}" {{ request('kelas_id') == $kelas->id ? 'selected' : '' }}>
                                                {{ $kelas->nama_kelas }} ({{ $kelas->sekolah->nama_sekolah ?? '' }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-apex-purple rounded-pill btn-block font-weight-bold shadow-sm" style="height: 45px;">
                                    Tampilkan
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            {{-- CARD 2: TABEL SISWA --}}
            @if(request('kelas_id'))
                
                @if(count($siswas) > 0)
                <form action="{{ route('kelulusan.store') }}" method="POST" id="formKelulusan">
                    @csrf
                    <div class="card border-0 shadow-sm" style="border-radius: 20px; overflow: hidden;">
                        
                        <div class="card-header bg-white border-bottom pt-4 px-4 pb-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="font-weight-bold text-dark mb-1">Daftar Calon Lulusan</h5>
                                    <p class="text-muted text-xs mb-0">Silakan centang siswa yang dinyatakan lulus.</p>
                                </div>
                                <span class="badge badge-light-primary text-primary px-3 py-2 rounded-pill font-weight-bold">
                                    Total: {{ count($siswas) }} Siswa
                                </span>
                            </div>
                        </div>

                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="bg-light">
                                        <tr class="text-uppercase text-muted text-xs font-weight-bold" style="letter-spacing: 0.5px;">
                                            <th width="5%" class="pl-4 py-3 text-center">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="checkAll">
                                                    <label class="custom-control-label" for="checkAll"></label>
                                                </div>
                                            </th>
                                            <th width="40%" class="py-3">Nama Siswa</th>
                                            <th width="30%" class="py-3">Identitas (NIS/NISN)</th>
                                            <th width="25%" class="py-3 text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($siswas as $siswa)
                                            <tr>
                                                <td class="pl-4 py-3 text-center">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" name="siswa_ids[]" value="{{ $siswa->id }}" class="custom-control-input check-item" id="chk{{ $siswa->id }}">
                                                        <label class="custom-control-label" for="chk{{ $siswa->id }}"></label>
                                                    </div>
                                                </td>
                                                <td class="py-3">
                                                    <div class="d-flex align-items-center">
                                                        <div class="symbol symbol-40px mr-3">
                                                            <div class="symbol-label bg-light-purple text-purple font-weight-bold rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 1rem;">
                                                                {{ substr($siswa->nama_lengkap, 0, 1) }}
                                                            </div>
                                                        </div>
                                                        <span class="text-dark font-weight-bold">{{ $siswa->nama_lengkap }}</span>
                                                    </div>
                                                </td>
                                                <td class="py-3 text-muted font-weight-500">
                                                    {{ $siswa->nis }} <span class="mx-1">/</span> {{ $siswa->nisn ?? '-' }}
                                                </td>
                                                <td class="py-3 text-center">
                                                    <span class="badge badge-light-teal text-teal px-3 py-2 rounded-pill font-weight-bold text-xs">
                                                        Aktif
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- FOOTER ACTION --}}
                        <div class="card-footer bg-white p-4 border-top">
                            <div class="row align-items-center justify-content-end">
                                <div class="col-md-3 mb-3 mb-md-0">
                                    <label class="font-weight-bold text-dark text-xs text-uppercase mb-1">Tahun Lulus</label>
                                    <input type="number" name="tahun_lulus" class="form-control form-control-solid text-center font-weight-bold text-purple" 
                                           value="{{ date('Y') }}" required style="font-size: 1.1rem;">
                                </div>
                                <div class="col-md-3 pl-md-4 border-left">
                                    <button type="button" class="btn btn-success btn-block rounded-pill font-weight-bold py-2 shadow-sm" onclick="konfirmasiLulus()">
                                        <i class="fas fa-check-circle mr-2"></i> Proses Lulus
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
                @else
                    <div class="alert bg-light-warning text-warning border-0 shadow-sm text-center py-5 rounded-lg" role="alert">
                        <div class="d-flex flex-column align-items-center justify-content-center">
                            <div class="bg-white rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-sm" style="width: 60px; height: 60px;">
                                <i class="fas fa-user-slash fa-2x text-warning"></i>
                            </div>
                            <h5 class="font-weight-bold text-dark">Tidak Ada Siswa</h5>
                            <p class="mb-0 text-muted">Tidak ditemukan siswa aktif di kelas ini yang bisa diluluskan.</p>
                        </div>
                    </div>
                @endif

            @endif

        </div>
    </div>
</div>
@stop

@push('css')
<style>
    /* UTILITIES TEMA APEX */
    .btn-apex-purple {
        background: linear-gradient(90deg, #2E1451 0%, #5B247A 100%);
        color: white; border: none; transition: all 0.3s ease;
    }
    .btn-apex-purple:hover {
        background: linear-gradient(90deg, #5B247A 0%, #2E1451 100%);
        color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(91, 36, 122, 0.3);
    }

    /* Form Controls */
    .form-control-solid {
        background-color: #F5F8FA; border: 1px solid #F5F8FA; color: #5E6278; border-radius: 10px; height: 45px;
    }
    .form-control-solid:focus { background-color: #EEF3F7; border-color: #EEF3F7; }

    /* Colors */
    .text-purple { color: #5B247A !important; }
    .bg-light-purple { background-color: rgba(91, 36, 122, 0.1) !important; }
    .bg-light-primary { background-color: #E1F0FF; }
    .bg-light-teal { background-color: rgba(0, 150, 136, 0.1); color: #009688; }
    .bg-light-warning { background-color: #FFF4DE; }

    /* Custom Checkbox */
    .custom-control-label::before { border-radius: 5px; width: 1.25rem; height: 1.25rem; border: 2px solid #ddd; background-color: white; }
    .custom-control-input:checked ~ .custom-control-label::before { border-color: #5B247A; background-color: #5B247A; }
    .custom-control-label { padding-left: 0.5rem; padding-top: 2px; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        // Init Select2
        $('.select2').select2({ theme: 'bootstrap4', width: '100%' });

        // Logic Check All
        $('#checkAll').click(function() {
            $('.check-item').prop('checked', this.checked);
        });

        // Update Check All status jika item di-uncheck
        $('.check-item').change(function() {
            if ($('.check-item:checked').length == $('.check-item').length) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }
        });
    });

    function konfirmasiLulus() {
        let jumlahDipilih = $('.check-item:checked').length;

        if (jumlahDipilih == 0) {
            Swal.fire({
                icon: 'warning',
                title: 'Belum Memilih Siswa',
                text: 'Silakan centang minimal satu siswa untuk diproses.',
                confirmButtonColor: '#FFA800',
                confirmButtonText: 'OK, Mengerti',
                customClass: { confirmButton: 'rounded-pill px-4 font-weight-bold' }
            });
            return;
        }

        Swal.fire({
            title: 'Konfirmasi Kelulusan',
            html: `Anda akan memproses <b>${jumlahDipilih} siswa</b> menjadi Alumni.<br>Status siswa akan diubah menjadi <b>Lulus</b> dan data akan dipindahkan ke Alumni.`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#50CD89', // Hijau Sukses
            cancelButtonColor: '#F5F8FA',
            confirmButtonText: 'Ya, Proses Sekarang',
            cancelButtonText: '<span style="color:#7E8299">Batal</span>',
            customClass: {
                popup: 'rounded-lg',
                confirmButton: 'rounded-pill px-4 font-weight-bold',
                cancelButton: 'rounded-pill px-4 font-weight-bold'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $('#formKelulusan').submit();
            }
        })
    }
</script>
@endpush