@extends('layouts.app')

@section('title', 'Persyaratan Pendaftaran')

@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<style>
    /* Tema Warna Eksklusif */
    :root {
        --primary: #001f3f;   /* Deep Navy */
        --secondary: #d4af37; /* Gold */
        --accent: #003366;    /* Soft Navy */
    }

    /* Background Modal */
    .modal-backdrop { background-color: rgba(0, 31, 63, 0.8) !important; }
    
    /* Desain Kartu Bukti */
    .id-card-wrapper { 
        width: 100%; 
        max-width: 500px; 
        background: white; 
        border-radius: 0; 
        border: 8px double var(--primary); 
        padding: 5px;
        position: relative; 
    }

    .card-header-modern { 
        background: var(--primary); 
        padding: 20px 10px; 
        text-align: center; 
        border-bottom: 3px solid var(--secondary);
    }

    .card-body-modern { 
        background: #fff;
        background-image: radial-gradient(var(--secondary) 0.5px, transparent 0.5px);
        background-size: 15px 15px;
        opacity: 0.9;
        padding: 20px;
    }

    .photo-frame-modern { 
        width: 120px; 
        height: 150px; 
        border: 2px solid var(--primary); 
        background: #eee;
        margin: 0 auto;
        box-shadow: 5px 5px 0px var(--secondary);
    }

    .nav-pills .nav-link.active {
        background-color: var(--primary) !important;
        color: var(--secondary) !important;
        border-bottom: 3px solid var(--secondary);
    }

    .section-title-modern { 
        border-left: 5px solid var(--primary) !important; 
        color: var(--primary);
        background: #f8f9fa;
        padding: 5px 10px;
        font-weight: bold;
    }

    .btn-primary { background-color: var(--primary); border-color: var(--primary); }
    .btn-primary:hover { background-color: var(--accent); }
    
    .file-upload-wrapper {
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 8px;
        background: #fdfdfd;
        height: 100%;
    }

    @media print {
        body * { visibility: hidden; }
        #area-kartu, #area-kartu * { visibility: visible; }
        #area-kartu { position: absolute; left: 0; top: 0; width: 100%; border: 4px solid #000 !important; }
        .no-print { display: none !important; }
    }
</style>
@endsection

@section('content')
@php
    // LOGIKA PENJADWALAN AMAN
    $setup = \DB::table('settings')->whereIn('key', ['tgl_mulai_ujian', 'jam_sesi_1', 'jam_sesi_2', 'jam_sesi_3', 'jam_sesi_4'])->pluck('value', 'key');
    $tglMulai = $setup['tgl_mulai_ujian'] ?? date('Y-m-d');
    
    $currentId = auth()->id() ?? 1;
    $sesiGlobal = ceil($currentId / 70);
    $hariKe = ceil($sesiGlobal / 4);
    $sesiHarian = $sesiGlobal % 4 ?: 4;
    $jamUjian = $setup["jam_sesi_{$sesiHarian}"] ?? '08:00';

    try {
        $dateObj = new \DateTime($tglMulai);
        if($hariKe > 1) { $dateObj->modify('+' . ($hariKe - 1) . ' days'); }
        $daftarHari = ['Sunday' => 'Minggu', 'Monday' => 'Senin', 'Tuesday' => 'Selasa', 'Wednesday' => 'Rabu', 'Thursday' => 'Kamis', 'Friday' => 'Jumat', 'Saturday' => 'Sabtu'];
        $namaHari = $daftarHari[$dateObj->format('l')] ?? 'Senin';
    } catch (\Exception $e) {
        $namaHari = "Senin";
        $dateObj = new \DateTime();
    }

    // CEK STATUS UPLOAD BERKAS SAAT INI AGAR INPUT TIDAK REQUIRED JIKA SUDAH ADA FILE
    $uploaded = [
        'file_kk' => !empty($data_pendaftaran->file_kk),
        'file_akte' => !empty($data_pendaftaran->file_akte),
        'file_foto' => !empty($data_pendaftaran->file_foto),
        'file_rapor_1' => !empty($data_pendaftaran->file_rapor_1),
        'file_rapor_2' => !empty($data_pendaftaran->file_rapor_2),
        'file_rapor_3' => !empty($data_pendaftaran->file_rapor_3),
        'file_rapor_4' => !empty($data_pendaftaran->file_rapor_4),
        'file_rapor_5' => !empty($data_pendaftaran->file_rapor_5),
        'file_ket_kelas6' => !empty($data_pendaftaran->file_ket_kelas6),
        'file_ket_ujian' => !empty($data_pendaftaran->file_ket_ujian),
        'file_prestasi' => !empty($data_pendaftaran->file_prestasi),
    ];
@endphp

<div class="content-header">
    <div class="container-fluid">
        <h1 class="m-0 text-bold text-dark">Persyaratan & Dokumen Pendaftaran</h1>
    </div>
</div>

<section class="content" @if(isset($list_error) && $list_error !='' ) style="filter: blur(4px); pointer-events: none;" @endif>
    <div class="container-fluid">
        <div class="card card-outline shadow-sm" style="border-radius: 15px; border-top: 3px solid var(--primary);">
            <div class="card-header p-2">
                <ul class="nav nav-pills nav-justified" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="link-tab-berkas" data-toggle="pill" href="#tab-berkas" role="tab"><i class="fas fa-file-upload mr-1"></i> 1. UNGGAH BERKAS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ !($data_pendaftaran->file_kk ?? false) ? 'disabled-tab' : '' }}" id="link-tab-final" data-toggle="pill" href="#tab-final" role="tab"><i class="fas fa-check-double mr-1"></i> 2. SIMPAN PERMANEN</a>
                    </li>
                </ul>
            </div>

            <div class="card-body p-4">
                <div class="tab-content">
                    {{-- TAB 1: UNGGAH BERKAS --}}
                    <div class="tab-pane fade show active" id="tab-berkas">
                        @if(!($data_pendaftaran->is_final ?? 0))
                        <div id="section-upload" class="mt-2">
                            <div class="text-center mb-5">
                                <h3 class="font-weight-bold">Upload Dokumen Persyaratan</h3>
                                <p class="text-muted small">Format: <b>PDF/JPG/PNG</b> (Maks. 10MB per file)</p>
                            </div>
                            <form id="form-unggah-berkas" enctype="multipart/form-data">
                                @csrf
                                <div id="container-inputs" class="row">
                                    {{-- Generated via JS --}}
                                </div>
                                <div class="text-center mt-5">
                                    <button type="button" class="btn btn-primary btn-lg px-5 rounded-pill shadow" onclick="prosesSimpanBerkas()">
                                        <i class="fas fa-cloud-upload-alt mr-2"></i> SIMPAN SELURUH BERKAS
                                    </button>
                                </div>
                            </form>
                        </div>
                        @else
                        <div class="alert alert-info text-center">Berkas telah terkunci karena Anda sudah melakukan Simpan Permanen.</div>
                        @endif
                    </div>

                    {{-- TAB 2: SIMPAN PERMANEN --}}
                    <div class="tab-pane fade" id="tab-final">
                        @if($data_pendaftaran)
                        <div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
                            <div class="text-center mb-4">
                                <h3 class="font-weight-bold">Review Berkas Pendaftaran</h3>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover table-bordered bg-white">
                                    <thead class="bg-light">
                                        <tr>
                                            <th width="50" class="text-center">No</th>
                                            <th>Nama Dokumen</th>
                                            <th class="text-center">Status</th>
                                            <th width="150" class="text-center">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php 
                                            $no = 1; 
                                            $dokumen_wajib = [
                                                'file_kk' => 'Scan Asli Kartu Keluarga',
                                                'file_akte' => 'Scan Asli Akte Kelahiran',
                                                'file_foto' => 'Pas Foto 3x4 (Latar Merah)',
                                                'file_rapor_1' => 'Rapor Kelas 4 Ganjil',
                                                'file_rapor_2' => 'Rapor Kelas 4 Genap',
                                                'file_rapor_3' => 'Rapor Kelas 5 Ganjil',
                                                'file_rapor_4' => 'Rapor Kelas 5 Genap',
                                                'file_rapor_5' => 'Rapor Kelas 6 Ganjil',
                                                'file_ket_kelas6' => 'Surat Keterangan Kelas 6',
                                                'file_ket_ujian' => 'Surat Ket. Peserta Ujian Akhir',
                                                'file_prestasi' => 'Sertifikat Prestasi',
                                            ];
                                        @endphp
                                        @foreach($dokumen_wajib as $field => $label)
                                            @if($data_pendaftaran->$field ?? null)
                                            <tr>
                                                <td class="text-center">{{ $no++ }}</td>
                                                <td>{{ $label }}</td>
                                                <td class="text-center"><span class="badge badge-success">Terunggah</span></td>
                                                <td class="text-center">
                                                    <button class="btn btn-sm btn-info" onclick="previewFile('{{ asset('storage/'.$data_pendaftaran->$field) }}', '{{ $label }}')">Lihat</button>
                                                </td>
                                            </tr>
                                            @endif
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            @if(($data_pendaftaran->is_final ?? 0) == 1)
                            <div class="alert alert-success text-center mt-5 p-4" style="border-radius: 15px;">
                                <i class="fas fa-check-double fa-3x mb-3"></i>
                                <h5>PENDAFTARAN BERHASIL DIKUNCI</h5>
                                <div class="d-flex justify-content-center mt-4">
                                    <a href="{{ route('user.cetak-formulir') }}" target="_blank" class="btn btn-primary px-4 shadow rounded-pill mx-2"><i class="fas fa-download mr-1"></i> Formulir</a>
                                    <button type="button" class="btn btn-success px-4 shadow rounded-pill mx-2" data-toggle="modal" data-target="#modalKartu"><i class="fas fa-id-card mr-1"></i> Kartu Ujian</button>
                                </div>
                            </div>
                            @else
                            <div class="alert alert-warning mt-4">
                                <i class="fas fa-exclamation-triangle mr-2"></i> <strong>PENTING:</strong> Setelah klik simpan permanen, data <strong>TIDAK DAPAT DIUBAH</strong>.
                            </div>
                            <button type="button" class="btn btn-danger btn-lg btn-block mt-3 shadow rounded-pill font-weight-bold" onclick="simpanPermanen()">
                                <i class="fas fa-lock mr-2"></i> SIMPAN PERMANEN & KUNCI DATA
                            </button>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- MODAL KARTU BUKTI --}}
<div class="modal fade" id="modalKartu" tabindex="-1" role="dialog" aria-hidden="true" style="background-color: rgba(0, 0, 0, 0.5);">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 bg-transparent" style="backdrop-filter: none; -webkit-backdrop-filter: none;">
            <div class="id-card-wrapper mx-auto shadow-lg" id="area-kartu">
                <div class="card-header-modern">
                    <h5 class="mb-0 font-weight-bold text-white" style="letter-spacing: 2px;">BUKTI PENDAFTARAN MTsN 2 PEKANBARU</h5>
                    <p class="mb-0 text-white-50 small">PENERIMAAN MURID BARU T.P 2026/2027</p>
                </div>
                <div class="card-body-modern">
                    <div class="mb-3 border-bottom pb-2">
                        <small class="text-muted d-block" style="font-size: 10px; line-height: 1;">NO. PENDAFTARAN</small>
                        <h4 class="font-weight-bold mb-0" style="color: var(--primary); letter-spacing: 1px;">
                            {{ $data_pendaftaran->nomor_pendaftaran ?? '-' }}
                        </h4>
                    </div>

                    <div class="row align-items-center">
                        <div class="col-5 text-center">
                            <div class="photo-frame-modern">
                                <img src="{{ asset('storage/' . ($data_siswa->foto ?? 'default.jpg')) }}" style="width:100%; height:100%; object-fit:cover;">
                            </div>
                        </div>
                        <div class="col-7">
                            <table class="table table-sm table-borderless mb-0" style="font-size: 11px;">
                                <tr>
                                    <td width="30%" class="pl-0">NAMA</td>
                                    <td class="pr-0">: <b>{{ strtoupper($data_siswa->nama_lengkap ?? '-') }}</b></td>
                                </tr>
                                <tr>
                                    <td class="pl-0">NISN</td>
                                    <td class="pr-0">: {{ $data_siswa->nisn ?? '-' }}</td>
                                </tr>
                                <tr>
                                    <td class="pl-0">ASAL SEKOLAH</td>
                                    <td class="pr-0">: {{ strtoupper($data_sekolah->asal_sekolah ?? '-') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="card-footer-modern bg-white p-2 border-top">
                    <div class="d-flex justify-content-between align-items-center px-2">
                        <small class="text-muted" style="font-size: 10px;"><i>PMBM MTsN 2 PEKANBARU</i></small>
                        <small class="text-muted" style="font-size: 10px;">
                            @php 
                                date_default_timezone_set('Asia/Jakarta'); 
                            @endphp
                            {{ date('d/m/Y H:i') }} WIB
                        </small>
                    </div>
                </div>
            </div>
            <div class="text-center mt-4 no-print">
                <button onclick="window.print()" class="btn btn-primary btn-lg rounded-0 px-5 shadow">
                    <i class="fas fa-print mr-2"></i> CETAK SEKARANG
                </button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL PRATINJAU --}}
<div class="modal fade" id="modalPreview" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-navy text-white">
                <h5 class="modal-title" id="previewTitle">Pratinjau Berkas</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body p-0" style="height: 80vh;">
                <iframe id="previewFrame" src="" frameborder="0" style="width: 100%; height: 100%;"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    const isFinal = @json($data_pendaftaran->is_final ?? 0);
    const berkasTerisi = @json($data_pendaftaran->file_kk ?? '');
    
    // Tarik data status upload file dari PHP
    const uploadedFiles = @json($uploaded);

    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.hash) {
            $(`.nav-pills a[href="${window.location.hash}"]`).tab('show');
        } else if (isFinal == 1 || berkasTerisi !== '') {
            $('#link-tab-final').tab('show');
        }
        generateUploadForm();
    });

    function generateUploadForm() {
        const container = $('#container-inputs');
        container.empty();

        let html = `<div class="col-12"><h6 class="section-title-modern">Dokumen Utama</h6></div>`;
        html += renderCard('file_kk', 'Kartu Keluarga', 'fa-id-card');
        html += renderCard('file_akte', 'Akte Kelahiran', 'fa-file-signature');
        html += renderCard('file_foto', 'Pas Foto 3x4', 'fa-camera-retro');
        
        html += `<div class="col-12 mt-4"><h6 class="section-title-modern">Dokumen Rapor</h6></div>`;
        html += renderCard('file_rapor_1', 'Rapor Kls 4 Ganjil', 'fa-file-lines');
        html += renderCard('file_rapor_2', 'Rapor Kls 4 Genap', 'fa-file-lines');
        html += renderCard('file_rapor_3', 'Rapor Kls 5 Ganjil', 'fa-file-lines');
        html += renderCard('file_rapor_4', 'Rapor Kls 5 Genap', 'fa-file-lines');
        html += renderCard('file_rapor_5', 'Rapor Kls 6 Ganjil', 'fa-file-lines');

        html += `<div class="col-12 mt-4"><h6 class="section-title-modern">Dokumen Pendukung</h6></div>`;
        html += renderCard('file_ket_kelas6', 'Surat Keterangan Kelas 6', 'fa-envelope-open-text');
        html += renderCard('file_ket_ujian', 'Surat Ket. Peserta Ujian', 'fa-award', true);
        html += renderCard('file_prestasi', 'Sertifikat Prestasi', 'fa-award', true); // Bersifat opsional

        container.append(html);
    }

    function renderCard(name, label, icon, isOptional = false) {
        // Tentukan apakah file sudah diupload
        let isUploaded = uploadedFiles[name];
        
        // Teks badge: merah (*) wajib, orange (opsional)
        let optionalBadge = isOptional ? '<span class="text-warning small ml-1">(Opsional)</span>' : '<span class="text-danger ml-1" title="Wajib Diisi">*</span>';
        
        // Status badge di sudut kanan jika sudah diupload
        let statusText = isUploaded ? '<span class="badge badge-success float-right"><i class="fas fa-check"></i> Tersimpan</span>' : '';
        
        // Aturan HTML "required": hanya wajib jika bukan opsional DAN belum pernah diupload
        let requiredAttr = (!isOptional && !isUploaded) ? 'required' : '';

        return `
            <div class="col-md-4 mb-3">
                <div class="file-upload-wrapper">
                    <label class="small font-weight-bold d-block mb-2">
                        <i class="fas ${icon} mr-1"></i> ${label} ${optionalBadge} ${statusText}
                    </label>
                    <input type="file" name="${name}" class="form-control-file border p-1 mb-1" accept=".pdf,.jpg,.jpeg,.png" ${requiredAttr}>
                    <small class="text-danger font-italic" style="font-size: 11px;">* Maksimal file 10 MB</small>
                </div>
            </div>`;
    }

    function prosesSimpanBerkas() {
        const form = document.getElementById('form-unggah-berkas');
        
        // Validasi HTML5 wajib isi untuk file yang required
        if (!form.checkValidity()) {
            form.reportValidity();
            return; // Berhenti eksekusi AJAX jika ada yang kosong
        }

        let formData = new FormData(form);
        $.ajax({
            url: "{{ route('user.store-persyaratan') }}",
            type: "POST",
            data: formData,
            processData: false, contentType: false,
            beforeSend: function() { Swal.showLoading(); },
            success: function(res) {
                Swal.fire('Berhasil', 'Berkas berhasil disimpan', 'success').then(() => { 
                    window.location.hash = '#tab-final';
                    location.reload(); 
                });
            },
            error: function(xhr) { 
                Swal.fire('Gagal', 'Periksa format file dan pastikan ukurannya maksimal 10MB', 'error'); 
            }
        });
    }

    function simpanPermanen() {
        Swal.fire({
            title: 'Kunci Data?',
            text: "Data tidak bisa diubah lagi!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            confirmButtonText: 'Ya, Kunci!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({ 
                    url: "{{ route('user.simpan-permanen') }}", 
                    method: "POST", 
                    data: { _token: "{{ csrf_token() }}" }, 
                    success: function() { location.reload(); } 
                });
            }
        });
    }

    function previewFile(url, title) { 
        $('#previewTitle').text(title); 
        $('#previewFrame').attr('src', url); 
        $('#modalPreview').modal('show'); 
    }
</script>
@endsection