@extends('layouts.main')

@section('title','Detail Kartu Ujian Semester')
@section('header','Detail Kartu Ujian Semester')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/kartu-ujian-semester">Kartu Ujian Semester</a></li>
<li class="breadcrumb-item active">Detail Kartu</li>
@endsection

@section('content')

<div class="row justify-content-center">
    <div class="col-md-10 col-lg-8">
        <div class="card shadow-lg">
            <div class="card-header bg-gradient-primary text-white">
                <h4 class="mb-0">
                    <i class="fas fa-id-card"></i>
                    KARTU UJIAN {{ strtoupper($ujian->jenis_ujian) }}
                </h4>
            </div>
            <div class="card-body p-4">
                <!-- Header Kartu -->
                <div class="text-center mb-4 pb-3 border-bottom">
                    <h3 class="text-primary font-weight-bold mb-1">
                        {{ $ujian->jenis_sekolah->jenis_sekolah ?? 'YAYASAN PENDIDIKAN' }}
                    </h3>
                    <p class="mb-1"><strong>Tahun Ajaran: {{ $ujian->tahun_ajaran->tahun_ajaran ?? '-' }}</strong></p>
                    <p class="mb-0 text-muted">Semester: <strong>{{ $ujian->semester }}</strong></p>
                </div>

                <!-- Informasi Siswa -->
                <div class="row">
                    <div class="col-md-8">
                        <table class="table table-sm table-borderless">
                            <tr>
                                <td width="35%"><strong>Nomor Kartu</strong></td>
                                <td width="5%">:</td>
                                <td><span class="badge badge-primary px-3 py-2">{{ $nomor_kartu }}</span></td>
                            </tr>
                            <tr>
                                <td><strong>Nama Lengkap</strong></td>
                                <td>:</td>
                                <td><strong>{{ strtoupper($siswa->nama_lengkap) }}</strong></td>
                            </tr>
                            <tr>
                                <td><strong>Email</strong></td>
                                <td>:</td>
                                <td>{{ $siswa->email }}</td>
                            </tr>
                            @if($daftar_ulang && $daftar_ulang->no_pendaftaran)
                            <tr>
                                <td><strong>No. Pendaftaran</strong></td>
                                <td>:</td>
                                <td>{{ $daftar_ulang->no_pendaftaran }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="border rounded p-2 bg-light">
                            @if($siswa->foto && $siswa->foto != 'default.png')
                            <img src="/images/foto_siswa/{{ $siswa->foto }}"
                                 class="img-thumbnail mb-2" width="120" height="160" alt="Foto Siswa">
                            @else
                            <div class="bg-secondary text-white rounded d-flex align-items-center justify-content-center mb-2"
                                 style="width: 120px; height: 160px; margin: 0 auto;">
                                <i class="fas fa-user fa-3x"></i>
                            </div>
                            @endif
                            <small class="text-muted d-block">Foto Siswa</small>
                        </div>
                    </div>
                </div>

                <!-- Jadwal Ujian -->
                <div class="mt-4 p-3 bg-light rounded">
                    <h5 class="text-primary mb-3"><i class="fas fa-calendar-check"></i> Jadwal Ujian</h5>
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-2">
                                <strong>Tanggal Mulai:</strong><br>
                                <span class="badge badge-info px-3 py-2">
                                    {{ date('d F Y', strtotime($ujian->tanggal_mulai)) }}
                                </span>
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="mb-2">
                                <strong>Tanggal Selesai:</strong><br>
                                <span class="badge badge-info px-3 py-2">
                                    {{ date('d F Y', strtotime($ujian->tanggal_selesai)) }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>

                <!-- QR Code -->
                <div class="mt-4 text-center">
                    <div class="d-inline-block p-3 bg-light rounded">
                        {!! $qr_code !!}
                        <p class="mb-0 mt-2 small text-muted">QR Code Verifikasi</p>
                    </div>
                </div>

                <!-- Keterangan -->
                <div class="mt-4 p-3 border-left border-primary bg-light">
                    <h6 class="text-primary"><i class="fas fa-info-circle"></i> Keterangan Penting</h6>
                    <ul class="mb-0 small">
                        <li>Kartu ujian ini wajib dibawa pada saat pelaksanaan ujian</li>
                        <li>Pastikan identitas pada kartu sesuai dengan data diri Anda</li>
                        <li>Simpan kartu ujian dengan baik dan jangan sampai hilang</li>
                        <li>Jika ada kesalahan data, segera hubungi administrator sekolah</li>
                    </ul>
                </div>

                <!-- Tanggal Cetak -->
                <div class="mt-4 text-right">
                    <p class="mb-0 small text-muted">
                        <i class="fas fa-print"></i> Dicetak pada: {{ $tanggal_cetak }}
                    </p>
                </div>
            </div>

            <!-- Footer Actions -->
            <div class="card-footer bg-white">
                <div class="d-flex justify-content-between">
                    <a href="/kartu-ujian-semester" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Kembali
                    </a>
                    <div>
                        <button onclick="window.print()" class="btn btn-primary mr-2">
                            <i class="fas fa-print"></i> Cetak
                        </button>
                        <a href="/kartu-ujian-semester/{{ $ujian->id }}/pdf" class="btn btn-success">
                            <i class="fas fa-download"></i> Download PDF
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('custom-styles')
<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

@media print {
    .btn, .breadcrumb, .card-footer, .navbar, .sidebar {
        display: none !important;
    }
    .card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    body {
        background: white !important;
    }
}
</style>
@endpush