@extends('layouts.public')

@section('title', ($settings['event_title'] ?? 'Semakan e-Sijil') . ' - e-Sijil 2026')

@section('content')
<section class="hero-banner text-center">
    <div class="container">
        <div class="row justify-content-center mb-3">
            <div class="col-auto">
                @if(!empty($settings['organizer_logo']))
                    <img src="{{ asset('storage/' . $settings['organizer_logo']) }}" alt="Logo Penganjur" height="60" class="me-3">
                @endif
                @if(!empty($settings['event_logo']))
                    <img src="{{ asset('storage/' . $settings['event_logo']) }}" alt="Logo Acara" height="60">
                @endif
            </div>
        </div>
        <h1 class="display-6 fw-bold mb-2">{{ $settings['event_name'] ?? 'Acara Larian Sempena Majlis Peluncuran Bulan Kebangsaan dan Kibar Jalur Gemilang 2026' }}</h1>
        <h2 class="h4 mb-0">{{ $settings['event_title'] ?? 'Semakan dan Muat Turun e-Sijil' }}</h2>
    </div>
</section>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(isset($notFound) && $notFound)
                <div class="alert alert-warning" role="alert">
                    <h5 class="alert-heading"><i class="bi bi-exclamation-triangle"></i> Rekod Tidak Ditemui</h5>
                    <p class="mb-0">Maaf, tiada nama peserta yang sepadan dengan “{{ $searchName }}”. Sila semak ejaan nama atau hubungi urus setia.</p>
                    <hr>
                    <div class="d-flex gap-2">
                        <a href="{{ route('certificate.reset') }}" class="btn btn-esijil">Cuba Semula</a>
                        <a href="tel:{{ $settings['secretariat_phone'] ?? '' }}" class="btn btn-outline-secondary">Hubungi Urus Setia</a>
                    </div>
                </div>
            @endif

            @if(isset($participants) && $participants->isNotEmpty())
                <div class="card search-card mb-4">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">{{ $participants->count() }} Rekod Peserta Ditemui</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">Pilih nama anda daripada senarai di bawah untuk memuat turun e-Sijil.</p>

                        <div class="list-group list-group-flush border rounded">
                            @foreach($participants as $participant)
                            <div class="list-group-item p-3">
                                <div class="row align-items-center g-3">
                                    <div class="col-lg">
                                        <h5 class="mb-2">{{ $participant->full_name }}</h5>
                                        <div class="d-flex flex-wrap gap-2 align-items-center">
                                            @if($participant->participant_number)
                                                <span class="text-muted">No. Peserta: <strong>{{ $participant->participant_number }}</strong></span>
                                            @endif
                                            @if($participant->category)
                                                <span class="badge bg-primary">{{ $participant->category }}</span>
                                            @endif
                                            @if($participant->certificate_status->value === 'downloaded')
                                                <span class="badge bg-success">Telah dimuat turun</span>
                                            @else
                                                <span class="badge bg-warning text-dark">Belum dimuat turun</span>
                                            @endif
                                        </div>
                                        @if($participant->first_downloaded_at)
                                            <small class="text-muted d-block mt-2">
                                                Muat turun pertama: {{ $participant->first_downloaded_at->format('d/m/Y g:i A') }}
                                            </small>
                                        @endif
                                    </div>
                                    <div class="col-lg-auto">
                                        <form class="download-form" action="{{ route('certificate.download') }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="participant_id" value="{{ $participant->id }}">
                                            <button type="submit" class="btn btn-download">
                                                &#128196; Muat Turun e-Sijil
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>

                        <a href="{{ route('certificate.reset') }}" class="btn btn-outline-secondary mt-3">Carian Baharu</a>
                    </div>
                </div>
            @else
                <div class="card search-card">
                    <div class="card-body p-4 p-md-5">
                        <p class="text-muted mb-4">Sila masukkan nama peserta untuk mencari dan memuat turun e-Sijil penyertaan acara larian.</p>

                        <form id="searchForm" action="{{ route('certificate.search') }}" method="POST">
                            @csrf
                            <div class="mb-4">
                                <label for="name" class="form-label fw-semibold">Nama Peserta</label>
                                <input type="text"
                                       class="form-control form-control-lg @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       placeholder="Contoh: Ahmad bin Abdullah"
                                       value="{{ old('name', $searchName ?? '') }}"
                                       maxlength="100"
                                       required
                                       autocomplete="off">
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="form-text">
                                    Masukkan sekurang-kurangnya 2 aksara. Anda boleh menggunakan sebahagian nama.
                                </div>
                            </div>

                            @if($captchaRequired ?? false)
                            <div class="mb-4">
                                <label class="form-label">Pengesahan Keselamatan</label>
                                <div class="alert alert-info">
                                    Sila masukkan kod: <strong>ESIJIL</strong>
                                </div>
                                <input type="text" name="g-recaptcha-response" class="form-control" placeholder="Masukkan kod pengesahan" required>
                            </div>
                            @endif

                            <button type="submit" class="btn btn-esijil btn-lg w-100">
                                &#128269; Semak Sijil
                            </button>
                        </form>
                    </div>
                </div>
            @endif

            <div class="privacy-notice mt-4 rounded">
                <strong>Notis Privasi:</strong>
                Carian ini hanya digunakan untuk mengenal pasti peserta dan menjana e-Sijil.
            </div>

        </div>
    </div>
</div>

<footer class="esijil-footer text-center">
    <div class="container">
        <p class="mb-0">{{ $settings['footer_text'] ?? 'Hak Cipta Terpelihara © 2026' }}</p>
        <p class="mb-0 small mt-1">{{ $settings['organizer_name'] ?? 'Kementerian Komunikasi' }}</p>
    </div>
</footer>
@endsection