@extends('layouts.admin')

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap">
            <h1 class="m-0 font-weight-bold text-dark d-flex align-items-center mb-2 mb-md-0">
                <i class="fas fa-trophy text-warning mr-2"></i> {{ $judul }}
                {{-- TAMBAHKAN TOTAL DATA --}}
                <span class="badge badge-warning ml-3 px-2 py-1 shadow-sm" style="border-radius: 8px; font-size: 0.9rem;">
                    Total: {{ $pendaftar->count() }} Siswa
                </span>
            </h1>
            
            <div class="d-flex flex-wrap align-items-center">
                {{-- FORM PENCARIAN --}}
                <div class="input-group input-group-sm shadow-sm mr-3 mb-2 mb-md-0" style="width: 250px; border-radius: 8px; overflow: hidden;">
                    <input type="text" id="searchLulus" class="form-control border-secondary" placeholder="Cari Nama / No Daftar...">
                    <div class="input-group-append">
                        <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                    </div>
                </div>

                <button type="button" class="btn btn-success shadow-sm mb-2 mb-md-0" style="border-radius: 10px;" data-toggle="modal" data-target="#modalJadwalOtomatis">
                    <i class="fas fa-clock mr-1"></i> Jadwal Pengumuman Otomatis
                </button>
            </div>
        </div>

        <div class="card shadow-sm border-0" style="border-radius: 15px;">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-center" id="tableLulus">
                        <thead class="bg-light text-muted small font-weight-bold">
                            <tr>
                                <th class="py-3" width="50">NO</th>
                                <th>NO. PENDAFTARAN</th>
                                <th class="text-left">NAMA SISWA</th>
                                <th>STATUS</th>
                                <th>AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pendaftar as $key => $row)
                            @php
                                $nomorPendaftaran = $row->nomor_pendaftaran ?? optional($row->user->pendaftaranBerkas)->nomor_pendaftaran ?? "MTsN2-" . substr($row->nisn ?? '0000', -4) . str_pad($row->user_id, 3, '0', STR_PAD_LEFT);
                            @endphp
                            <tr class="searchable">
                                <td>{{ $key + 1 }}</td>
                                <td><span class="badge badge-dark px-3 py-2" style="letter-spacing: 1px;">{{ $nomorPendaftaran }}</span></td>
                                <td class="text-left font-weight-bold text-dark">{{ strtoupper($row->nama_lengkap) }}</td>
                                <td><span class="badge badge-success px-3 py-2" style="border-radius: 8px;">LULUS</span></td>
                                <td>
                                    <button type="button" onclick="bukaModalPesan('{{ $row->berkas_id }}', '{{ $row->nama_lengkap }}')" class="btn btn-sm btn-success shadow-xs px-3" style="border-radius: 8px;">
                                        <i class="fab fa-whatsapp"></i> Pesan
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="py-5 text-muted font-italic">Belum ada data pendaftar yang lulus seleksi akhir.</td>
                            </tr>
                            @endforelse
                            <tr id="noDataLulus" style="display: none;">
                                <td colspan="5" class="py-5 text-muted font-italic">Pencarian tidak ditemukan...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Pemanggilan Modal --}}
@include('admin.hasil akhir.partials.modal_pesan')
@include('admin.hasil akhir.partials.modals_jadwal')

@endsection

@section('js')
<script>
    // Fitur Search Responsif (Lulus)
    $(document).ready(function(){
        $("#searchLulus").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            var visibleRows = 0;

            $("#tableLulus tbody tr.searchable").filter(function() {
                var match = $(this).text().toLowerCase().indexOf(value) > -1;
                $(this).toggle(match);
                if(match) visibleRows++;
            });

            if(visibleRows === 0 && value !== "") {
                $("#noDataLulus").show();
            } else {
                $("#noDataLulus").hide();
            }
        });
    });

    // 1. Fungsi Membuka Modal Pesan Individual
    window.bukaModalPesan = function(id, nama) {
        $('#namaModal').val(nama);
        let linkChannelWA = "https://chat.whatsapp.com/GCYCMH2Ikmr4tgaLN8ZNP4?mode=gi_t";
        let draf = `Halo ${nama},\n\nSelamat! Anda dinyatakan LULUS seleksi akhir PMBM MAN 1 Pekanbaru.\n\nSilakan lakukan daftar ulang sesuai jadwal yang ditentukan di dashboard Anda.\n\nUntuk informasi terbaru terkait proses pendaftaran, silakan bergabung di grup WhatsApp resmi kami.\n\nTerima Kasih.`;
        
        $('#pesanModal').val(draf);
        
        // Simpan ID pendaftaran ke data modal untuk keperluan AJAX
        $('#modalPesanIndividual').data('id', id);
        
        // Munculkan Popup
        $('#modalPesanIndividual').modal('show');
    };

    // 2. Fungsi Simpan Draft Pesan Individual
    window.simpanDraftPesan = function() {
        let id = $('#modalPesanIndividual').data('id');
        let pesan = $('#pesanModal').val();
        let btn = $('#btnSimpanDraft');

        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Menyimpan...');

        $.ajax({
            url: "{{ route('admin.hasil.simpan_pesan', '') }}/" + id,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                pesan: pesan
            },
            success: function(res) {
                Swal.fire({ 
                    icon: 'success', 
                    title: 'Berhasil!', 
                    text: 'Draft pesan disimpan.', 
                    timer: 1500, 
                    showConfirmButton: false 
                });
                $('#modalPesanIndividual').modal('hide');
            },
            error: function() {
                Swal.fire('Error!', 'Gagal menyimpan draf. Pastikan Route benar.', 'error');
            },
            complete: function() {
                btn.prop('disabled', false).html('<i class="fas fa-save mr-1"></i> Simpan Draft Pesan');
            }
        });
    };

    // 3. Fungsi Simpan Jadwal Otomatis dengan Popup Success
    window.simpanJadwalOtomatis = function() {
        let jadwal = $('input[name="jadwal_buka"]').val();
        let btn = $('#modalJadwalOtomatis button[type="submit"]');

        if(!jadwal) {
            return Swal.fire('Peringatan', 'Silakan tentukan waktu pengumuman!', 'warning');
        }

        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Memproses...');

        $.ajax({
            url: "{{ route('admin.simpan-setting-jadwal') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                jadwal_buka: jadwal 
            },
            success: function(res) {
                Swal.fire({
                    icon: 'success',
                    title: 'Berhasil!',
                    text: 'Jadwal pengumuman otomatis telah ditetapkan.',
                    timer: 2000,
                    showConfirmButton: false
                }).then(() => {
                    location.reload(); 
                });
                $('#modalJadwalOtomatis').modal('hide');
            },
            error: function() {
                Swal.fire('Error!', 'Gagal menyimpan jadwal.', 'error');
                btn.prop('disabled', false).html('Simpan Jadwal');
            }
        });
    };

    $(document).ready(function() {
        $('#modalJadwalOtomatis form').on('submit', function(e) {
            e.preventDefault();
            window.simpanJadwalOtomatis();
        });
    });
</script>
@endsection