@extends('layouts.admin')

@section('title', 'Tidak Lulus Akhir')

@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-times-circle text-danger mr-2"></i> {{ $judul }}
                {{-- TAMBAHKAN TOTAL DATA --}}
                <span class="badge badge-danger 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="searchGagal" 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 class="btn btn-danger shadow-sm mb-2 mb-md-0 mr-2" style="border-radius: 10px;" data-toggle="modal" data-target="#modalJadwalOtomatis">
                    <i class="fas fa-clock mr-1"></i> Jadwal Pengumuman Otomatis
                </button>
                
                {{-- TOMBOL EXPORT EXCEL --}}
                <!-- <button onclick="exportExcelGagal()" class="btn btn-outline-danger font-weight-bold shadow-sm mb-2 mb-md-0" style="border-radius: 10px;">
                    <i class="fas fa-file-excel mr-1"></i> Download Excel
                </button> -->
            </div>
        </div>

        <div class="card shadow-sm border-0" style="border-radius: 15px;">
            <div class="card-header bg-white py-3 border-bottom">
                <div class="d-flex align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-danger"><i class="fas fa-user-times mr-2"></i> Daftar Peserta Tidak Lulus</h6>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 text-center" id="tableGagal">
                        <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 LENGKAP</th>
                                <th>NISN</th>
                                <th class="text-left">ASAL SEKOLAH</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 class="text-muted small">{{ $key + 1 }}</td>
                                <td>
                                    <span class="badge badge-dark px-3 py-2" style="letter-spacing: 0.5px; border-radius: 6px;">
                                        {{ $nomorPendaftaran }}
                                    </span>
                                </td>
                                <td class="text-left font-weight-bold text-dark">{{ strtoupper($row->nama_lengkap) }}</td>
                                <td><code>{{ $row->nisn }}</code></td>
                                <td class="text-left text-muted small">{{ optional($row->user->dataSekolah)->asal_sekolah ?? '-' }}</td>
                                <td>
                                    <span class="badge badge-danger px-3 py-2" style="border-radius: 8px;">
                                        TIDAK LULUS
                                    </span>
                                </td>
                                <td>
                                    <button onclick="bukaModalPesan('{{ $row->id }}', '{{ $row->nama_lengkap }}')" class="btn btn-sm btn-danger shadow-xs px-3" style="border-radius: 8px;">
                                        <i class="fab fa-whatsapp"></i> Pesan
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="py-5 text-muted font-italic">Belum ada data pendaftar yang tidak lulus seleksi akhir.</td>
                            </tr>
                            @endforelse
                            <tr id="noDataGagal" style="display: none;">
                                <td colspan="7" class="py-5 text-muted font-italic">Pencarian tidak ditemukan...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalPesanIndividual" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 20px; border: none;">
            <div class="modal-header bg-danger text-white" style="border-radius: 20px 20px 0 0;">
                <h5 class="modal-title font-weight-bold"><i class="fas fa-envelope-open-text mr-2"></i> Draft Pengumuman Seleksi</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="small font-weight-bold text-muted text-uppercase">Nama Penerima</label>
                    <input type="text" id="namaModal" class="form-control bg-light border-0" readonly style="border-radius: 10px;">
                </div>
                <div class="form-group">
                    <label class="small font-weight-bold text-muted text-uppercase">Isi Pesan Pengumuman</label>
                    <textarea id="pesanModal" class="form-control" rows="6" style="border-radius: 12px;"></textarea>
                </div>
                <div class="alert alert-warning py-2 small border-0" style="border-radius: 10px;">
                    <i class="fas fa-info-circle mr-1"></i> Pesan ini adalah draf khusus yang akan muncul di dashboard pendaftar saat jadwal pengumuman tiba.
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" onclick="simpanDraftPesan()" class="btn btn-primary btn-block shadow-sm" style="border-radius: 10px;">
                    <i class="fas fa-save mr-1"></i> Simpan Draft Pesan
                </button>
            </div>
        </div>
    </div>
</div>

@include('admin.hasil akhir.partials.modals_jadwal')

@section('js')
<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script>
    // Fitur Pencarian Responsif
    $("#searchGagal").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        var visibleRows = 0;

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

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

    // Membuka modal dan mengisi draf pesan otomatis
    function bukaModalPesan(id, nama) {
        $('#namaModal').val(nama);
        $('#pesanModal').val(`Halo ${nama},\n\nMohon maaf, berdasarkan hasil seleksi akhir PMBM MAN 1 Pekanbaru, Anda dinyatakan belum berhasil/TIDAK LULUS. Tetap semangat dan semoga sukses di tempat lain!`);
        $('#modalPesanIndividual').data('id', id).modal('show');
    }

    // Simpan draf ke database via AJAX
    function simpanDraftPesan() {
        let id = $('#modalPesanIndividual').data('id');
        let pesan = $('#pesanModal').val();
        
        $.post("{{ route('admin.hasil.simpan_pesan', '') }}/" + id, {
            _token: "{{ csrf_token() }}",
            pesan: pesan
        }, function(res) {
            Swal.fire('Berhasil!', 'Draft pesan individual telah disimpan.', 'success');
            $('#modalPesanIndividual').modal('hide');
        });
    }

    // Export ke Excel
    function exportExcelGagal() {
        TableToExcel.convert(document.getElementById("tableGagal"), { 
            name: "Data_Tidak_Lulus_Seleksi_Akhir.xlsx",
            sheet: { name: "Gagal" }
        });
    }
</script>
@endsection
@endsection