@extends('frontend.layouts.main')
@section('title', 'Cek Status Pendaftaran — ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')
<div class="page-hero">
    <div class="container page-hero-inner">
        <h1>Cek Status Pendaftaran</h1>
        <p>Masukkan nomor registrasi dan email untuk melihat status seleksi Anda</p>
    </div>
</div>

<section style="padding:60px 0;background:var(--c-50);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">

                {{-- Search Form --}}
                <div style="background:var(--white);border:1px solid var(--c-200);border-radius:18px;padding:32px;margin-bottom:24px;" data-aos="fade-up">
                    <div style="text-align:center;margin-bottom:24px;">
                        <div style="width:56px;height:56px;background:var(--c-blue-xs);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;">
                            <i class="fas fa-search" style="color:var(--c-blue);font-size:1.3rem;"></i>
                        </div>
                        <h2 style="font-size:1.1rem;font-weight:800;color:var(--c-900);margin-bottom:6px;">Cari Pendaftaran Anda</h2>
                        <p style="font-size:13.5px;color:var(--c-500);margin:0;">Masukkan nomor registrasi (REG-XXXX-XXXX) dan email yang digunakan saat mendaftar</p>
                    </div>

                    @if($errors->any())
                    <div style="background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:12px 14px;margin-bottom:16px;font-size:13.5px;color:#dc2626;display:flex;align-items:center;gap:8px;">
                        <i class="fas fa-exclamation-circle" style="flex-shrink:0;"></i>
                        {{ $errors->first() }}
                    </div>
                    @endif

                    <form action="{{ route('frontend.registration.check') }}" method="POST">
                        @csrf
                        <div style="margin-bottom:14px;">
                            <label style="font-size:13px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Nomor Registrasi</label>
                            <input type="text" name="registration_number" value="{{ old('registration_number') }}"
                                   placeholder="REG-2024-0001"
                                   style="width:100%;padding:11px 13px;border:1.5px solid var(--c-200);border-radius:9px;font-size:14px;font-family:var(--ff-body);outline:none;text-transform:uppercase;letter-spacing:.03em;"
                                   onfocus="this.style.borderColor='var(--c-blue)';this.style.boxShadow='0 0 0 3px rgba(37,99,235,.1)'"
                                   onblur="this.style.borderColor='var(--c-200)';this.style.boxShadow='none'"
                                   required>
                        </div>
                        <div style="margin-bottom:20px;">
                            <label style="font-size:13px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Email Pendaftaran</label>
                            <input type="email" name="email" value="{{ old('email') }}"
                                   placeholder="email@contoh.com"
                                   style="width:100%;padding:11px 13px;border:1.5px solid var(--c-200);border-radius:9px;font-size:14px;font-family:var(--ff-body);outline:none;"
                                   onfocus="this.style.borderColor='var(--c-blue)';this.style.boxShadow='0 0 0 3px rgba(37,99,235,.1)'"
                                   onblur="this.style.borderColor='var(--c-200)';this.style.boxShadow='none'"
                                   required>
                        </div>
                        <button type="submit" class="btn-corp btn-blue w-100" style="justify-content:center;">
                            <i class="fas fa-search"></i> Cek Status Sekarang
                        </button>
                    </form>
                </div>

                {{-- Result --}}
                @if($registration)
                @php $si = $registration->status_info; @endphp
                <div style="background:var(--white);border:2px solid {{ $si['border'] }};border-radius:18px;overflow:hidden;" data-aos="fade-up">
                    {{-- Status Header --}}
                    <div style="background:{{ $si['bg'] }};padding:20px 24px;display:flex;align-items:center;gap:14px;">
                        <div style="width:50px;height:50px;background:{{ $si['color'] }};border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <i class="{{ $si['icon'] }}" style="color:#fff;font-size:1.2rem;"></i>
                        </div>
                        <div>
                            <div style="font-size:11px;font-weight:700;color:{{ $si['color'] }};text-transform:uppercase;letter-spacing:.07em;">Status Pendaftaran</div>
                            <div style="font-size:1.1rem;font-weight:800;color:{{ $si['color'] }};">{{ $si['label'] }}</div>
                        </div>
                        <div style="margin-left:auto;text-align:right;">
                            <div style="font-size:11px;color:var(--c-400);">No. Registrasi</div>
                            <div style="font-family:var(--ff-display);font-size:1rem;font-weight:800;color:var(--c-blue);">{{ $registration->registration_number }}</div>
                        </div>
                    </div>

                    <div style="padding:22px;">
                        {{-- Info --}}
                        @foreach([
                            ['fas fa-book-open','Program', $registration->program->title ?? '-'],
                            ['fas fa-user','Nama', $registration->full_name],
                            ['fas fa-calendar','Tanggal Daftar', $registration->created_at->format('d M Y')],
                        ] as $info)
                        <div style="display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--c-100);">
                            <i class="{{ $info[0] }}" style="color:var(--c-400);font-size:12px;width:14px;flex-shrink:0;"></i>
                            <span style="font-size:13px;color:var(--c-500);width:120px;flex-shrink:0;">{{ $info[1] }}</span>
                            <span style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $info[2] }}</span>
                        </div>
                        @endforeach

                        {{-- Interview info --}}
                        @if($registration->status === 'interview' && $registration->interview_date)
                        <div style="background:var(--c-blue-xs);border:1px solid var(--c-blue-sm);border-radius:10px;padding:14px;margin-top:14px;">
                            <div style="font-size:13.5px;font-weight:700;color:var(--c-blue);margin-bottom:10px;">
                                <i class="fas fa-video me-2"></i>Jadwal Interview
                            </div>
                            <div style="font-size:13.5px;color:var(--c-700);">
                                📅 {{ \Carbon\Carbon::parse($registration->interview_date)->format('d M Y') }}
                                @if($registration->interview_time) · {{ $registration->interview_time }} @endif
                            </div>
                            @if($registration->interview_location)
                            <div style="font-size:13px;color:var(--c-500);margin-top:4px;">📍 {{ $registration->interview_location }}</div>
                            @endif
                            @if($registration->interview_link)
                            <a href="{{ $registration->interview_link }}" target="_blank"
                               style="display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--c-blue);color:#fff;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;">
                                <i class="fas fa-video" style="font-size:11px;"></i> Buka Link Interview
                            </a>
                            @endif
                        </div>
                        @endif

                        {{-- Admin notes --}}
                        @if($registration->admin_notes)
                        <div style="background:var(--c-50);border:1px solid var(--c-200);border-radius:10px;padding:14px;margin-top:14px;">
                            <div style="font-size:12px;font-weight:700;color:var(--c-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;">Catatan dari Tim</div>
                            <div style="font-size:13.5px;color:var(--c-700);line-height:1.65;">{{ $registration->admin_notes }}</div>
                        </div>
                        @endif

                        {{-- Progress bar --}}
                        @php $statusOrder = ['pending'=>1,'reviewing'=>2,'interview'=>3,'accepted'=>4,'waitlist'=>4,'rejected'=>4]; $curr = $statusOrder[$registration->status] ?? 1; @endphp
                        <div style="margin-top:18px;">
                            <div style="font-size:12px;font-weight:600;color:var(--c-500);margin-bottom:10px;">Tahapan Seleksi</div>
                            <div style="display:flex;gap:0;align-items:center;">
                                @foreach(['Daftar','Review','Interview','Hasil'] as $si => $sl)
                                <div style="flex:1;text-align:center;">
                                    <div style="width:28px;height:28px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;
                                        background:{{ $curr > $si+1 ? '#16a34a' : ($curr == $si+1 ? 'var(--c-blue)' : 'var(--c-200)') }};
                                        color:{{ $curr >= $si+1 ? '#fff' : 'var(--c-400)' }};">
                                        {{ $curr > $si+1 ? '✓' : $si+1 }}
                                    </div>
                                    <div style="font-size:10.5px;color:{{ $curr >= $si+1 ? 'var(--c-900)' : 'var(--c-400)' }};font-weight:{{ $curr >= $si+1 ? '600' : '400' }};">{{ $sl }}</div>
                                </div>
                                @if($si < 3)
                                <div style="flex:1;height:2px;background:{{ $curr > $si+1 ? '#16a34a' : 'var(--c-200)' }};margin-bottom:18px;"></div>
                                @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection