<?php helper(['logo']); ?>
<!DOCTYPE html>
<html lang="id">
<head>
    <?php helper('logo'); ?>
    <link rel="icon" type="image/png" href="<?= getLogo('sekolah') ?>">
<meta charset="UTF-8">
<title>Cetak Kartu Kosong - <?= esc($event['name']) ?></title>
<style>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #e2e8f0;
    padding: 20px;
}

/* Preview Header */
.preview-header {
    background: #1e293b;
    color: white;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 10px;
    z-index: 100;
}
.preview-header h2 {
    font-size: 1.1rem;
    margin: 0;
}
.preview-header p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-top: 4px;
}
.btn-back {
    background: #475569;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-right: 8px;
}
.btn-print {
    background: #0ea5e9;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Page Setup: FOLIO / F4 size (216mm x 330mm) */
@page {
    size: 216mm 330mm;
    margin: 0;
}

.folio-sheet {
    width: 216mm;
    height: 330mm;
    background: white;
    position: relative;
    page-break-after: always;
    margin: 0 auto 20px;
    padding: 6mm 6mm;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4mm 4mm;
}

/* Card Container: 98mm x 100mm */
.exam-card {
    width: 98mm;
    height: 100mm;
    border: 1.5px solid #000;
    padding: 1.5mm 2.5mm;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
}

/* Kop Kartu */
.kop-kartu {
    display: flex;
    align-items: center;
    border-bottom: 1.5px solid #000;
    padding-bottom: 0.8mm;
    margin-bottom: 2.2mm; /* Widened from 1.2mm */
}
.kop-logo {
    width: 11mm;
    height: auto;
}
.kop-text-container {
    flex: 1;
    text-align: center;
    line-height: 1.15;
}
.kop-school {
    font-size: 8.5pt;
    font-weight: bold;
    text-transform: uppercase;
}
.kop-title {
    font-size: 8.5pt;
    font-weight: bold;
    text-transform: uppercase;
}
.kop-sub {
    font-size: 8.0pt;
    font-weight: bold;
    text-transform: uppercase;
}
.kop-detail {
    font-size: 8.0pt;
    font-weight: bold;
    text-transform: uppercase;
}

/* Student Details Section */
.details-box {
    margin-bottom: 4.2mm; /* Balanced spacing without clipping */
}
.field-row {
    display: flex;
    margin-bottom: 0.8mm;
    font-size: 8pt;
    line-height: 1.15;
}
.field-label {
    width: 21mm;
    font-weight: normal;
    text-transform: uppercase;
    flex-shrink: 0;
}
.field-colon {
    width: 2mm;
    text-align: center;
    flex-shrink: 0;
}
.field-value {
    flex: 1;
    font-weight: bold;
    text-transform: uppercase;
}

/* Schedule Section */
.schedule-container {
    flex: 1;
    margin-bottom: 3.0mm; /* Balanced spacing without clipping */
    overflow: hidden;
}
.schedule-title {
    text-align: center;
    font-size: 7pt;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.8mm;
    border-bottom: 1px solid #000;
    padding-bottom: 0.3mm;
}
.sch-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 6pt;
}
.sch-table th, .sch-table td {
    border: 1px solid #000;
    padding: 0.5mm 0.8mm;
    vertical-align: middle;
}
.sch-table th {
    text-align: center;
    font-weight: bold;
    background: #f1f5f9;
    text-transform: uppercase;
}
.sch-table td.center {
    text-align: center;
}

/* Footer: Notes & Signature side-by-side */
.footer-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 6pt;
    margin-top: auto;
}
.notes-box {
    font-weight: bold;
    border: 1px solid #000;
    padding: 1.2mm 1.5mm;
    font-size: 6pt;
    text-align: center;
    max-width: 42mm;
    line-height: 1.2;
    text-transform: uppercase;
}
.signature-box {
    text-align: center;
    width: 44mm;
    position: relative;
    line-height: 1.1;
    font-size: 7pt;
}
.sign-place-date {
    margin-bottom: 0.5mm;
}
.sign-role {
    margin-bottom: 4.5mm;
}
.sign-name {
    font-weight: bold;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 7.5pt;
}
.sign-nip {
    font-size: 6pt;
}
.ttd-img {
    position: absolute;
    left: 50%;
    top: 0mm;
    transform: translateX(-50%);
    height: 70px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Print Overrides */
@media print {
    body {
        background: white;
        padding: 0;
        margin: 0;
    }
    .preview-header {
        display: none !important;
    }
    .folio-sheet {
        margin: 0;
        box-shadow: none;
        page-break-after: always;
    }
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
</style>
</head>
<body>

<div class="preview-header">
    <div>
        <h2>📇 Cetak Kartu Kosong (Blanko Manual)</h2>
        <p>1 Lembar Master F4 &nbsp;·&nbsp; 6 kartu / lembar (2x3 Grid)</p>
    </div>
    <div>
        <button class="btn-back" onclick="window.history.back()">← Kembali</button>
        <button class="btn-print" onclick="window.print()">🖨 Cetak / Simpan PDF</button>
    </div>
</div>

<div class="folio-sheet">
    <?php for ($cIdx = 1; $cIdx <= 6; $cIdx++): ?>
        <div class="exam-card">
            
            <!-- KOP KARTU -->
            <div class="kop-kartu">
                <img src="<?= getLogo('kemenag') ?>" class="kop-logo" alt="Logo Kemenag">
                <div class="kop-text-container">
                    <div class="kop-school"><?= strtoupper(esc($school['school_name'] ?? '')) ?></div>
                    <div class="kop-title">KARTU PESERTA ASESMEN</div>
                    <div class="kop-sub"><?= strtoupper(esc($event['name'])) ?></div>
                    <div class="kop-detail">TA. <?= strtoupper(esc($activePeriod['academic_year_name'] ?? '')) ?></div>
                </div>
                <img src="<?= getLogo('sekolah') ?>" class="kop-logo" alt="Logo Sekolah">
            </div>

            <!-- STUDENT DETAILS -->
            <div class="details-box">
                <div class="field-row">
                    <div class="field-label">No. Peserta</div>
                    <div class="field-colon">:</div>
                    <div class="field-value" style="border-bottom: 1px solid #000; min-height: 3.8mm;"></div>
                </div>
                <div class="field-row" style="margin-top: 0.3mm; margin-bottom: 0.3mm;">
                    <div class="field-label">Nama Siswa</div>
                    <div class="field-colon">:</div>
                    <div class="field-value" style="border-bottom: 1px solid #000; min-height: 3.8mm;"></div>
                </div>
                <div class="field-row">
                    <div class="field-label">Kelas</div>
                    <div class="field-colon">:</div>
                    <div class="field-value" style="border-bottom: 1px solid #000; min-height: 3.8mm;"></div>
                </div>
                <div class="field-row">
                    <div class="field-label">Ruang</div>
                    <div class="field-colon">:</div>
                    <div class="field-value" style="border-bottom: 1px solid #000; min-height: 3.8mm;"></div>
                </div>
            </div>

            <!-- SCHEDULE SECTION -->
            <div class="schedule-container">
                <div class="schedule-title">Jadwal Asesmen</div>
                <?php if (empty($schedules)): ?>
                    <table class="sch-table" style="width: 100%;">
                        <tbody>
                            <tr>
                                <td class="center" style="color: #94a3b8; font-style: italic; padding: 2mm;">
                                    Jadwal belum diatur
                                </td>
                            </tr>
                        </tbody>
                    </table>
                <?php elseif (count($schedules) <= 3): ?>
                    <!-- Single full-width table -->
                    <table class="sch-table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th width="35%">Hari, Tgl</th>
                                <th width="65%">Mata Pelajaran</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($schedules as $sch): ?>
                                <?php 
                                $subs = $sch['subjects'] ?? []; 
                                if (empty($subs)) $subs = ['-'];
                                ?>
                                <?php foreach ($subs as $idx => $sub): 
                                    if (is_array($sub)) {
                                        $subName = $sub['name'] ?? '';
                                    } else {
                                        $subName = $sub;
                                    }
                                ?>
                                    <tr>
                                        <?php if ($idx === 0): ?>
                                            <td class="center" rowspan="<?= count($subs) ?>">
                                                <strong><?= esc($sch['exam_day']) ?></strong>
                                                <div style="font-size: 5pt; color: #475569; margin-top: 0.5mm;"><?= date('d/m/Y', strtotime($sch['exam_date'])) ?></div>
                                            </td>
                                        <?php endif; ?>
                                        <td><?= esc($subName) ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php else: 
                    // Split into left and right tables side-by-side by chunking the days (schedules)
                    $half = ceil(count($schedules) / 2);
                    $leftSchedules = array_slice($schedules, 0, $half);
                    $rightSchedules = array_slice($schedules, $half);
                ?>
                    <div style="display: flex; gap: 1.5mm;">
                        <!-- Left Side Table -->
                        <table class="sch-table" style="width: 50%; margin-bottom: 0;">
                            <thead>
                                <tr>
                                    <th width="40%">Hari, Tgl</th>
                                    <th width="60%">Mata Pelajaran</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($leftSchedules as $sch): ?>
                                    <?php 
                                    $subs = $sch['subjects'] ?? []; 
                                    if (empty($subs)) $subs = ['-'];
                                    ?>
                                    <?php foreach ($subs as $idx => $sub): 
                                        if (is_array($sub)) {
                                            $subName = $sub['name'] ?? '';
                                        } else {
                                            $subName = $sub;
                                        }
                                    ?>
                                        <tr>
                                            <?php if ($idx === 0): ?>
                                                <td class="center" rowspan="<?= count($subs) ?>">
                                                    <strong><?= esc($sch['exam_day']) ?></strong>
                                                    <div style="font-size: 4.8pt; color: #475569; margin-top: 0.5mm;"><?= date('d/m/Y', strtotime($sch['exam_date'])) ?></div>
                                                </td>
                                            <?php endif; ?>
                                            <td><?= esc($subName) ?></td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php endforeach; ?>
                            </tbody>
                        </table>

                        <!-- Right Side Table -->
                        <table class="sch-table" style="width: 50%; margin-bottom: 0;">
                            <thead>
                                <tr>
                                    <th width="40%">Hari, Tgl</th>
                                    <th width="60%">Mata Pelajaran</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($rightSchedules as $sch): ?>
                                    <?php 
                                    $subs = $sch['subjects'] ?? []; 
                                    if (empty($subs)) $subs = ['-'];
                                    ?>
                                    <?php foreach ($subs as $idx => $sub): 
                                        if (is_array($sub)) {
                                            $subName = $sub['name'] ?? '';
                                        } else {
                                            $subName = $sub;
                                        }
                                    ?>
                                        <tr>
                                            <?php if ($idx === 0): ?>
                                                <td class="center" rowspan="<?= count($subs) ?>">
                                                    <strong><?= esc($sch['exam_day']) ?></strong>
                                                    <div style="font-size: 4.8pt; color: #475569; margin-top: 0.5mm;"><?= date('d/m/Y', strtotime($sch['exam_date'])) ?></div>
                                                </td>
                                            <?php endif; ?>
                                            <td><?= esc($subName) ?></td>
                                        </tr>
                                    <?php endforeach; ?>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                <?php endif; ?>
            </div>

            <!-- FOOTER SECTION -->
            <div class="footer-box">
                <div class="notes-box">
                    KARTU CADANGAN, BERLAKU HANYA UNTUK 1 HARI
                </div>
                
                <div class="signature-box">
                    <?php
                    $cityName = ucwords(strtolower($school['city'] ?? 'Wonogiri'));
                    $months = [
                        1 => 'Januari', 2 => 'Februari', 3 => 'Maret', 4 => 'April', 5 => 'Mei', 6 => 'Juni',
                        7 => 'Juli', 8 => 'Agustus', 9 => 'September', 10 => 'Oktober', 11 => 'November', 12 => 'Desember'
                    ];
                    $start_time = strtotime($event['start_date']);
                    $day = date('d', $start_time);
                    $month_num = (int)date('m', $start_time);
                    $year = date('Y', $start_time);
                    $indonesian_date = $day . ' ' . $months[$month_num] . ' ' . $year;
                    ?>
                    <div class="sign-place-date"><?= esc($cityName) ?>, <?= esc($indonesian_date) ?></div>
                    <div class="sign-role">
                        <?php 
                        $schoolName = $school['school_name'] ?? '';
                        if (stripos($schoolName, 'Madrasah') !== false || stripos($schoolName, 'MTs') !== false || stripos($schoolName, 'MA') !== false || stripos($schoolName, 'MI') !== false) {
                            echo 'Kepala Madrasah,';
                        } else {
                            echo 'Kepala Sekolah,';
                        }
                        ?>
                    </div>
                    
                    <?php if (!empty($cardSetting['headmaster_signature']) && file_exists(FCPATH . 'uploads/card/' . $cardSetting['headmaster_signature'])): ?>
                        <img class="ttd-img" src="<?= base_url('uploads/card/' . $cardSetting['headmaster_signature']) ?>" alt="TTD">
                    <?php endif; ?>

                    <div class="sign-name" style="margin-top: 4.5mm;"><?= strtoupper(esc($school['principal_name'] ?? 'HADI PRIYONO, S.Pd.')) ?></div>
                    <div class="sign-nip">NIP. <?= esc($school['principal_nip'] ?? '-') ?></div>
                </div>
            </div>

        </div>
    <?php endfor; ?>
</div>

</body>
</html>
