@extends('layouts.website')

@section('title', 'Cetak Kartu Pendaftaran')

@section('content')
{{-- Custom Style Internal --}}
<style>
    .card-custom-shadow {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    .bg-gradient-primary-custom {
        background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
    }
    .form-control-lg {
        font-size: 1rem;
        padding: 1rem;
    }
    .btn-hover-effect {
        transition: all 0.3s ease;
    }
    .btn-hover-effect:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    }
    .icon-box {
        width: 80px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        backdrop-filter: blur(5px);
    }
</style>

<div class="container d-flex align-items-center justify-content-center" style="min-height: 85vh; padding-top: 40px; padding-bottom: 40px;">
    <div class="col-lg-6 col-md-8">
        
        {{-- Card Utama dengan Animasi AOS --}}
        <div class="card border-0 card-custom-shadow rounded-4 overflow-hidden" data-aos="fade-up" data-aos-duration="1000">
            
            {{-- Header Card dengan Gradasi Tema --}}
            <div class="card-header bg-gradient-primary-custom text-white text-center py-5 position-relative">
                {{-- Hiasan background abstrak (opsional) --}}
                <div style="position: absolute; top: -20px; right: -20px; width: 100px; height: 100px; background: rgba(255,255,255,0.05); border-radius: 50%;"></div>
                <div style="position: absolute; bottom: -20px; left: -20px; width: 70px; height: 70px; background: rgba(255,255,255,0.05); border-radius: 50%;"></div>

                <div class="position-relative z-1">
                    <div class="icon-box animate__animated animate__bounceIn">
                        <i class="fas fa-print fa-2x text-warning"></i>
                    </div>
                    <h3 class="fw-bold mb-1">Cetak Kartu Pendaftaran</h3>
                    <p class="mb-0 opacity-75 small text-uppercase letter-spacing-1">SPMB ONLINE SMK SWASTA 16 FARMASI BENGKULU</p>
                </div>
            </div>

            <div class="card-body p-4 p-md-5 bg-white">
                
                {{-- Alert Error --}}
                @if(session('error'))
                    <div class="alert alert-danger border-0 d-flex align-items-center shadow-sm mb-4 rounded-3" role="alert" data-aos="shake">
                        <div class="me-3 text-danger">
                            <i class="fas fa-exclamation-triangle fa-2x"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-0">Data Tidak Ditemukan</h6>
                            <small>{{ session('error') }}</small>
                        </div>
                        <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <p class="text-center text-muted mb-4">
                    Masukkan <strong>Nomor Induk Siswa Nasional (NISN)</strong> yang Anda gunakan saat mendaftar untuk mengunduh kartu peserta.
                </p>

                <form action="{{ route('cetak.kartu.action') }}" method="POST">
                    @csrf
                    
                    <div class="mb-4">
                        <div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden">
                            <span class="input-group-text bg-light border-0 text-primary ps-4">
                                <i class="fas fa-id-card"></i>
                            </span>
                            <input type="number" 
                                   class="form-control border-0 bg-light" 
                                   id="nisn" 
                                   name="nisn" 
                                   placeholder="Contoh: 0012345678" 
                                   required
                                   style="font-size: 1rem;">
                        </div>
                    </div>
                    
                    <div class="d-grid gap-3">
                        <button type="submit" class="btn btn-warning btn-lg fw-bold text-dark btn-hover-effect rounded-pill">
                            <i class="fas fa-file-pdf me-2"></i> Cari & Download PDF
                        </button>
                        
                        <div class="text-center mt-2">
                            <a href="{{ route('web.index') }}" class="text-decoration-none text-muted small">
                                <i class="fas fa-arrow-left me-1"></i> Kembali ke Halaman Utama
                            </a>
                        </div>
                    </div>
                </form>
            </div>
            
            {{-- Footer Card Kecil --}}
            <div class="card-footer bg-light text-center py-3 border-0">
                <small class="text-muted">Butuh bantuan? <a href="{{ route('kontak.form') }}" class="fw-bold text-primary text-decoration-none">Hubungi Panitia</a></small>
            </div>
        </div>
    </div>
</div>
@endsection