@extends('layouts.app')

@section('body-class', 'bg-light')

@section('title', 'Peserta Dashboard')

@section('content')
<main class="py-5">
    <div class="container">
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="fw-bold mb-2">Dashboard Peserta</h2>
                <p class="text-muted">Selamat datang, {{ Auth::user()->name }}!</p>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <a href="{{ route('peserta.info-status') }}" class="text-decoration-none text-reset d-block">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white border-bottom">
                            <h5 class="card-title mb-0 bg-primary text-white p-2">Status Pendaftaran</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info d-flex align-items-center" role="alert">
                                <i class="bi bi-info-circle me-3 fs-5"></i>
                                <div>
                                    <strong>Belum ada data pendaftaran</strong>
                                    <br>
                                    <small>Silakan mulai dengan mengisi formulir pendaftaran di bawah</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0 text-white p-2" style="background-color: purple;">Menu Peserta</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <a href="{{ route('peserta.daftar') }}" class="text-decoration-none">
                                    <div class="card border-1" style="border-color: #0d9488 !important;">
                                        <div class="card-body text-center py-4">
                                            <i class="bi bi-file-earmark-plus fs-1" style="color: #0d9488;"></i>
                                            <h6 class="mt-3 fw-semibold text-dark">Daftar Peserta Didik</h6>
                                            <p class="text-muted small mb-0">Isi formulir pendaftaran baru</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6">
                                <a href="{{ route('peserta.data-diri') }}" class="text-decoration-none">
                                    <div class="card border-1" style="border-color: #22c55e !important;">
                                        <div class="card-body text-center py-4">
                                            <i class="bi bi-file-earmark-check fs-1" style="color: #22c55e;"></i>
                                            <h6 class="mt-3 fw-semibold text-dark">Lihat Data Diri</h6>
                                            <p class="text-muted small mb-0">Verifikasi data yang telah didaftarkan</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6">
                                <a href="{{ route('peserta.info-status') }}" class="text-decoration-none">
                                    <div class="card border-1" style="border-color: #f59e0b !important;">
                                        <div class="card-body text-center py-4">
                                            <i class="bi bi-hourglass-split fs-1" style="color: #f59e0b;"></i>
                                            <h6 class="mt-3 fw-semibold text-dark">Status Pendaftaran</h6>
                                            <p class="text-muted small mb-0">Pantau status pendaftaran Anda</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="col-md-6">
                                <button type="button" class="btn btn-link p-0 text-decoration-none w-100" data-bs-toggle="modal" data-bs-target="#uploadModal">
                                    <div class="card border-1" style="border-color: #06b6d4 !important;">
                                        <div class="card-body text-center py-4">
                                            <i class="bi bi-upload fs-1" style="color: #06b6d4;"></i>
                                            <h6 class="mt-3 fw-semibold text-dark">Upload Data Pendukung</h6>
                                            <p class="text-muted small mb-0">Kartu Keluarga, Akta Kelahiran, Sertifikat  (JPG)</p>
                                        </div>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0 bg-warning text-dark p-2">Informasi Penting</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning mb-3">
                            <strong>Jadwal Pendaftaran</strong>
                            <hr class="my-2">
                            <small>
                                <strong>Tahun Pelajaran:</strong> {{ $schedule['tahun_pelajaran'] ?? '2025/2026' }}<br>
                                <strong>Dibuka:</strong> {{ $schedule['dibuka_formatted'] ?? '1 Juni 2026' }}<br>
                                <strong>Ditutup:</strong> {{ $schedule['ditutup_formatted'] ?? '30 Juni 2026' }}<br>
                                <strong>Pengumuman:</strong> {{ $schedule['pengumuman_formatted'] ?? '15 Juli 2026' }}
                            </small>
                        </div>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0 bg-success text-white p-2">Kontak Support</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">
                                <i class="bi bi-telephone me-2"></i>Telepon
                            </h6>
                            <p class="mb-0 fw-semibold">{{ $schedule['telepon'] ?? '+62-341-XXXXXX' }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">
                                <i class="bi bi-envelope me-2"></i>Email
                            </h6>
                            <p class="mb-0 fw-semibold">{{ $schedule['email'] ?? 'ppdb@sekolah.id' }}</p>
                        </div>
                        <div>
                            <h6 class="text-muted mb-1">
                                <i class="bi bi-clock me-2"></i>Jam Operasional
                            </h6>
                            <p class="mb-1 fw-semibold">
                                {{ explode("\n", $schedule['jam_operasional'] ?? "Senin-Jumat: 08:00-12:00\nSabtu: libur")[0] }}
                            </p>
                            <p class="mb-0 fw-semibold">
                                {{ explode("\n", $schedule['jam_operasional'] ?? "Senin-Jumat: 08:00-12:00\nSabtu: libur")[1] ?? '' }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadModalLabel">Upload Data Pendukung</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                @endif
                @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                @endif

                <p class="text-muted">Kartu Keluarga, Akta Kelahiran, Sertifikat  (JPG)</p>

                <form method="POST" action="{{ route('peserta.upload.submit') }}" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-3">
                                <label class="form-label">Kartu Keluarga (JPG)</label>
                                <input type="file" name="kartu_keluarga" accept=".jpg,.jpeg,image/jpeg" class="form-control">
                                @error('kartu_keluarga') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                                <label class="form-label">Akta Kelahiran (JPG)</label>
                                <input type="file" name="akta_kelahiran" accept=".jpg,.jpeg,image/jpeg" class="form-control">
                                @error('akta_kelahiran') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="mb-3">
                                <label class="form-label">Sertifikat Prestasi (JPG)</label>
                                <input type="file" name="sertifikat_prestasi" accept=".jpg,.jpeg,image/jpeg" class="form-control">
                                @error('sertifikat_prestasi') <div class="text-danger small">{{ $message }}</div> @enderror
                        </div>

                        <div class="d-flex justify-content-end">
                                <button type="button" class="btn btn-secondary me-2" data-bs-dismiss="modal">Batal</button>
                                <button class="btn btn-primary" type="submit">Upload</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
</div>

@if(session('error') || session('success') || $errors->any())
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var uploadModal = new bootstrap.Modal(document.getElementById('uploadModal'));
            uploadModal.show();
        });
    </script>
@endif
@endsection