{{-- resources/views/admin/kesiswaan/ppdb/bulk/index.blade.php --}}
@extends('layouts.admin')

@section('title', 'Bulk Convert PPDB → Siswa')

@section('content')
<div class="page-inner">
    <div class="d-flex align-items-center justify-content-between mb-4">
        <h3 class="fw-bold mb-0">
            Bulk Convert PPDB → Siswa
        </h3>
        <a href="{{ route('admin.ppdb.index') }}" class="btn btn-secondary btn-sm">
            <i class="fa fa-arrow-left me-1"></i> Kembali
        </a>
    </div>

    <div class="nav-align-top mb-4">
        <ul class="nav nav-pills nav-fill mb-3" role="tablist">
            <li class="nav-item">
                <button type="button" 
                        class="nav-link active fw-bold py-3" 
                        role="tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#tab-putra" 
                        aria-controls="tab-putra" 
                        aria-selected="true">
                    <i class="fa fa-male me-2 fa-lg"></i> DATA PUTRA
                    <span class="badge bg-white text-primary ms-2">{{ $ppdbs->where('jenkel', 'L')->count() }}</span>
                </button>
            </li>
            <li class="nav-item">
                <button type="button" 
                        class="nav-link fw-bold py-3" 
                        role="tab" 
                        data-bs-toggle="tab" 
                        data-bs-target="#tab-putri" 
                        aria-controls="tab-putri" 
                        aria-selected="false">
                    <i class="fa fa-female me-2 fa-lg"></i> DATA PUTRI
                    <span class="badge bg-white text-primary ms-2">{{ $ppdbs->where('jenkel', 'P')->count() }}</span>
                </button>
            </li>
        </ul>

        <form id="filter-form" action="{{ route('admin.ppdb.bulk.index') }}" method="GET" class="d-none">
            <input type="hidden" name="tahun_ajaran_id" id="hidden_tahun_id">
        </form>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-putra" role="tabpanel">
                <form method="POST" action="{{ route('admin.ppdb.bulk.execute') }}" id="form-putra">
                    @csrf
                    <input type="hidden" name="process_gender" value="L"> 
                    <input type="hidden" name="angkatan_id" value="{{ $angkatan->id ?? '' }}">
                    <input type="hidden" name="tahun_ajaran_id" value="{{ request('tahun_ajaran_id', $tahunAjarans->first()->id ?? '') }}">
                    
                    @include('admin.kesiswaan.ppdb.bulk._filter', ['context' => 'putra'])
                    @include('admin.kesiswaan.ppdb.bulk._table', ['gender' => 'L'])
                    @include('admin.kesiswaan.ppdb.bulk._mapping', ['gender' => 'L'])
                    @include('admin.kesiswaan.ppdb.bulk._preview', ['gender' => 'L'])
                </form>
            </div>

            <div class="tab-pane fade" id="tab-putri" role="tabpanel">
                <form method="POST" action="{{ route('admin.ppdb.bulk.execute') }}" id="form-putri">
                    @csrf
                    <input type="hidden" name="process_gender" value="P"> {{-- Penanda Gender --}}
                    <input type="hidden" name="angkatan_id" value="{{ $angkatan->id ?? '' }}">
                    <input type="hidden" name="tahun_ajaran_id" value="{{ request('tahun_ajaran_id', $tahunAjarans->first()->id ?? '') }}">

                    @include('admin.kesiswaan.ppdb.bulk._filter', ['context' => 'putri'])
                    @include('admin.kesiswaan.ppdb.bulk._table', ['gender' => 'P'])
                    @include('admin.kesiswaan.ppdb.bulk._mapping', ['gender' => 'P'])
                    @include('admin.kesiswaan.ppdb.bulk._preview', ['gender' => 'P'])
                </form>
            </div>

        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $('.select-tahun-ajaran').change(function() {
            let val = $(this).val();
            let url = new URL(window.location.href);
            url.searchParams.set('tahun_ajaran_id', val);
            window.location.href = url.toString();
        });

        $(document).on('change', '.check-all-btn', function() {
            let gender = $(this).data('gender'); 
            $(`.check-item-${gender}`).prop('checked', this.checked);
        });

        $('.btn-preview-action').click(function() {
            let gender = $(this).data('gender'); 
            
            $(`#preview-placeholder-${gender}`).addClass('d-none');
            $(`#preview-content-${gender}`).removeClass('d-none');
            $(`#list-result-${gender}`).html('');
            $(`#total-count-${gender}`).text('0');
            $(`#btn-execute-${gender}`).prop('disabled', true);

            let siswaCount = $(`.check-item-${gender}:checked`).length;

            let rombels = [];
            $(`.rombel-check-${gender}:checked`).each(function() {
                let nama = $(this).data('nama');
                if(nama) rombels.push(nama);
            });

            renderDistribution(gender, siswaCount, rombels);

            if (siswaCount > 0 && rombels.length > 0) {
                $(`#btn-execute-${gender}`).prop('disabled', false);
            } else {
                if(siswaCount === 0) swal("Info", "Pilih minimal 1 calon siswa.", "warning");
                else if(rombels.length === 0) swal("Info", "Pilih minimal 1 kelas tujuan.", "warning");
            }
        });

        function renderDistribution(gender, totalSiswa, rombels) {
            let listId = `#list-result-${gender}`;
            let totalId = `#total-count-${gender}`;
            let badgeClass = gender === 'L' ? 'bg-primary' : 'bg-warning text-dark';

            $(totalId).text(totalSiswa);

            if (totalSiswa === 0 || rombels.length === 0) {
                $(listId).html('<li class="list-group-item text-muted text-center small">Data belum lengkap.</li>');
                return;
            }

            let jumlahRombel = rombels.length;
            let baseCount = Math.floor(totalSiswa / jumlahRombel);
            let remainder = totalSiswa % jumlahRombel;
            let html = '';

            rombels.forEach((namaRombel, index) => {
                let count = baseCount + (index < remainder ? 1 : 0);
                html += `<li class="list-group-item d-flex justify-content-between align-items-center py-2">
                            <span>${namaRombel}</span>
                            <span class="badge ${badgeClass} rounded-pill">${count} Siswa</span>
                         </li>`;
            });
            $(listId).html(html);
        }

        $('form').on('submit', function(e) {
            if ($(this).attr('method') === 'GET') return; 

            if (!window.__bulkConfirmed) {
                e.preventDefault();
                let form = this;
                
                swal({
                    title: "Eksekusi Konversi?",
                    text: "Sistem akan memasukkan siswa ke kelas yang dipilih. Lanjutkan?",
                    icon: "warning",
                    buttons: ["Batal", "Ya, Proses!"],
                    dangerMode: false,
                })
                .then((willProccess) => {
                    if (willProccess) {
                        let btn = $(form).find('button[type="submit"]');
                        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-2"></i> Memproses...');
                        
                        window.__bulkConfirmed = true;
                        form.submit();
                    }
                });
            }
        });

    });
</script>
@endpush