@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<style>
    /* Styling Kertas A4 & Lingkungan Print */
    .print-wrapper {
        background-color: #f1f5f9;
        padding: 20px 15px; /* Margin luar agar tidak terlalu menempel tepi layar HP */
        min-height: 100vh;
    }

    .document-container {
        background-color: #fff;
        width: 100%;
        max-width: 21cm; /* Fleksibel! Di layar besar pas 21cm, di layar HP menyesuaikan */
        min-height: 29.7cm; /* Tinggi minimal A4 */
        margin: 0 auto;
        padding: 2cm 1.5cm;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        font-family: "Times New Roman", Times, serif;
        color: #000;
    }

    /* KOP SURAT */
    .kop-surat table { width: 100%; border-collapse: collapse; border: none; }
    .kop-surat td { border: none; padding: 2px; vertical-align: middle; }
    .teks-kop { text-align: center; line-height: 1.2; }
    .garis-kop {
        border-top: 3px solid #000;
        border-bottom: 1px solid #000;
        height: 2px;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /* TABEL LAPORAN */
    .table-laporan {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: 11pt;
    }
    .table-laporan th, .table-laporan td {
        border: 1px solid #000;
        padding: 8px;
        text-align: left;
    }
    .table-laporan th {
        background-color: #e9ecef !important;
        text-align: center;
        font-weight: bold;
    }
    .text-center { text-align: center !important; }

    /* STATUS BADGE KHUSUS PRINT */
    .status-sakit { font-weight: bold; color: #ca8a04; }
    .status-izin { font-weight: bold; color: #0284c7; }
    .status-alfa { font-weight: bold; color: #dc2626; }

    /* TANDA TANGAN */
    .ttd-container { width: 100%; margin-top: 40px; page-break-inside: avoid; }
    .ttd-box { float: right; width: 250px; text-align: center; font-size: 11pt; line-height: 1.5; }
    .ttd-space { height: 70px; }
    .nama-kepsek { font-weight: bold; text-decoration: underline; }

    /* CSS SAAT DIPRINT DARI BROWSER (CTRL+P) */
    @media print {
        body * { visibility: hidden; }
        #areaCetak, #areaCetak * { visibility: visible; }
        #areaCetak {
            position: absolute;
            left: 0;
            top: 0;
            width: 21cm !important; /* Paksa kertas jadi A4 */
            max-width: none !important;
            margin: 0;
            padding: 0;
            box-shadow: none;
        }
        .table-laporan th { background-color: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

    /* TAMPILAN MOBILE BROWSER: Mengecilkan proporsi agar pas tanpa scroll samping */
    @media (max-width: 768px) {
        .card-header.d-flex {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 16px;
        }
        .card-header .d-flex.gap-2 { width: 100%; justify-content: space-between; }
        .card-header .d-flex.gap-2 button { flex: 1; font-size: 13px; padding: 10px 8px; justify-content: center; display: inline-flex; align-items: center; }

        /* Kertas menyusut proporsional */
        .document-container { padding: 1cm 0.6cm; min-height: auto; }
        .kop-surat td img { width: 50px !important; }
        .teks-kop div:nth-child(1) { font-size: 10pt !important; }
        .teks-kop div:nth-child(2) { font-size: 12pt !important; }
        .teks-kop div:nth-child(3), .teks-kop div:nth-child(4) { font-size: 8pt !important; }
        
        .table-laporan { font-size: 9pt; }
        .table-laporan th, .table-laporan td { padding: 4px; }
        
        .ttd-box { width: 180px; font-size: 9.5pt; }
    }

    /* Spinner Loading PDF */
    .spinner {
        display: none; width: 16px; height: 16px;
        border: 2px solid #fff; border-top-color: transparent;
        border-radius: 50%; animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
</style>

<div class="container mt-4 mb-4 d-print-none">
    {{-- CONTROL PANEL FILTER (Tidak akan ikut ter-print) --}}
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-header bg-white p-4 border-bottom rounded-top-4 d-flex justify-content-between align-items-center">
            <div>
                <h4 class="fw-bold mb-1"><i class="bi bi-funnel-fill text-primary me-2"></i>Filter Laporan</h4>
                <p class="text-muted mb-0" style="font-size: 0.9rem;">Sesuaikan data yang ingin dicetak atau diunduh.</p>
            </div>
            <div class="d-flex gap-2 w-sm-100">
                <button class="btn btn-danger fw-bold rounded-3 shadow-sm" id="btnPdf" onclick="downloadPDF()">
                    <i class="bi bi-file-earmark-pdf-fill me-1" id="iconPdf"></i>
                    <div class="spinner d-inline-block align-middle me-1" id="spinnerPdf"></div>
                    <span id="labelPdf">Unduh PDF</span>
                </button>
                <button class="btn btn-dark fw-bold rounded-3 shadow-sm" onclick="window.print()">
                    <i class="bi bi-printer-fill me-1"></i> Cetak A4
                </button>
            </div>
        </div>
        <div class="card-body p-4 bg-light rounded-bottom-4">
            <form action="{{ route('absen-manual.laporan') }}" method="GET" class="row g-3 align-items-end">
                <div class="col-12 col-md-3">
                    <label class="form-label fw-bold text-muted small">Pilih Tanggal</label>
                    <input type="date" name="tanggal" class="form-control" value="{{ $tanggalTerpilih }}">
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-bold text-muted small">Pilih Kelas</label>
                    <select name="kelas" class="form-select">
                        <option value="Semua" {{ $kelasTerpilih == 'Semua' ? 'selected' : '' }}>Semua Kelas</option>
                        @foreach($listKelas as $k)
                            <option value="{{ $k }}" {{ $kelasTerpilih == $k ? 'selected' : '' }}>Kelas {{ $k }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-3">
                    <label class="form-label fw-bold text-muted small">Status Kehadiran</label>
                    <select name="status" class="form-select">
                        <option value="Semua" {{ $statusTerpilih == 'Semua' ? 'selected' : '' }}>Semua Status</option>
                        <option value="Sakit" {{ $statusTerpilih == 'Sakit' ? 'selected' : '' }}>Sakit</option>
                        <option value="Izin" {{ $statusTerpilih == 'Izin' ? 'selected' : '' }}>Izin</option>
                        <option value="Alfa" {{ $statusTerpilih == 'Alfa' ? 'selected' : '' }}>Alfa</option>
                    </select>
                </div>
                <div class="col-12 col-md-3">
                    <button type="submit" class="btn btn-primary w-100 fw-bold shadow-sm">Terapkan Filter</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- AREA KERTAS PRINT/PDF --}}
<div class="print-wrapper">
    <div class="document-container" id="areaCetak">
        
        {{-- KOP SURAT --}}
        <div class="kop-surat">
            <table>
                <tr>
                    <td style="width:100px; text-align:left;">
                        <img src="{{ asset('img/logokhz.png') }}" style="width:80px; height:auto;" alt="Logo">
                    </td>
                    <td class="teks-kop">
                        <div style="font-size:12pt; font-weight:bold;">YAYASAN KIYAI HAJI ZUMRATUL MUTTAQIN</div>
                        <div style="font-size:16pt; font-weight:900; margin:4px 0; font-family:Arial,sans-serif;">MTs KH ZUMRATUL MUTTAQIN</div>
                        <div style="font-size:10pt;">NPSN: 60728096</div>
                        <div style="font-size:9.5pt; font-style:italic;">Kp. Gunungpari No.108 Desa Sukamenak Kec. Sukarame Kab. Tasikmalaya</div>
                    </td>
                    <td style="width:100px; text-align:right;">
                        <img src="{{ asset('img/logo.png') }}" style="width:80px; height:auto;" alt="Logo">
                    </td>
                </tr>
            </table>
            <div class="garis-kop"></div>
        </div>

        {{-- JUDUL LAPORAN --}}
        <div style="text-align: center; margin-bottom: 20px;">
            <h3 style="margin: 0; font-size: 14pt; font-weight: bold; text-decoration: underline;">REKAPITULASI KETIDAKHADIRAN SISWA</h3>
            <p style="margin: 5px 0 0 0; font-size: 11pt;">
                Tanggal: {{ \Carbon\Carbon::parse($tanggalTerpilih)->translatedFormat('d F Y') }} <br>
                Kelas: {{ $kelasTerpilih == 'Semua' ? 'Seluruh Kelas' : 'Kelas ' . $kelasTerpilih }} | Filter Status: {{ $statusTerpilih }}
            </p>
        </div>

        {{-- TABEL DATA --}}
        <table class="table-laporan">
            <thead>
                <tr>
                    <th style="width: 5%;">No</th>
                    <th style="width: 20%;">NISN</th>
                    <th style="width: 40%;">Nama Siswa</th>
                    <th style="width: 15%;">Kelas</th>
                    <th style="width: 20%;">Keterangan</th>
                </tr>
            </thead>
            <tbody>
                @forelse($laporan as $index => $l)
                <tr>
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td class="text-center">{{ $l->nisn }}</td>
                    <td>{{ $l->nama }}</td>
                    <td class="text-center">{{ $l->kelas }}</td>
                    <td class="text-center">
                        @if($l->status_kehadiran == 'Sakit')
                            <span class="status-sakit">Sakit</span>
                        @elseif($l->status_kehadiran == 'Izin')
                            <span class="status-izin">Izin</span>
                        @else
                            <span class="status-alfa">Alfa</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" style="text-align: center; padding: 30px;">
                        <em>- Nihil. Tidak ada data siswa tidak hadir pada kriteria pencarian ini -</em>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        {{-- TANDA TANGAN --}}
        <div class="ttd-container">
            <div class="ttd-box">
                <p>Tasikmalaya, {{ \Carbon\Carbon::parse($tanggalTerpilih)->translatedFormat('d F Y') }}</p>
                <p>Kepala Sekolah,</p>
                <div class="ttd-space"></div>
                <p class="nama-kepsek">(  Drs.H.GAOSUL ADOM, M.M.Pd.  )</p>
                <p style="margin-top:3px;">NIP. 196607172007011029</p>
            </div>
            <div style="clear:both;"></div>
        </div>

    </div>
</div>

{{-- LIBRARY PDF --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script>
async function downloadPDF() {
    const btn = document.getElementById('btnPdf');
    const icon = document.getElementById('iconPdf');
    const spinner = document.getElementById('spinnerPdf');
    const label = document.getElementById('labelPdf');

    // UI Loading state
    btn.disabled = true;
    icon.style.display = 'none';
    spinner.style.display = 'inline-block';
    label.innerText = ' Memproses...';

    try {
        const { jsPDF } = window.jspdf;
        const area = document.getElementById('areaCetak');

        const canvas = await html2canvas(area, {
            scale: 2, 
            useCORS: true, 
            backgroundColor: '#ffffff',
            // Paksa html2canvas untuk mengabaikan mode HP dan menganggap ia dibuka di layar lebar (1024px)
            windowWidth: 1024,
            onclone: function(clonedDoc) {
                // Manipulasi DOM pada clone (di balik layar) agar A4 kembali presisi
                const clonedArea = clonedDoc.getElementById('areaCetak');
                clonedArea.style.width = '21cm';
                clonedArea.style.maxWidth = '21cm';
            }
        });

        const imgData = canvas.toDataURL('image/jpeg', 0.95);

        // Kertas A4 Portrait (210mm x 297mm)
        const pdf = new jsPDF('portrait', 'mm', 'a4');
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

        pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);

        // Generate Nama File Otomatis
        const fileName = `Laporan_Absen_{{ $kelasTerpilih }}_{{ $tanggalTerpilih }}.pdf`;
        pdf.save(fileName);

    } catch (error) {
        alert('Gagal membuat PDF. Pastikan koneksi internet stabil atau cek konsol browser.');
        console.error(error);
    } finally {
        // Kembalikan tombol ke semula
        btn.disabled = false;
        icon.style.display = 'inline-block';
        spinner.style.display = 'none';
        label.innerText = 'Unduh PDF';
    }
}
</script>
@endsection