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

@section('content')
<div class="page-hero">
    <div class="container page-hero-inner">
        <h1>Cek Status Registrasi TKI</h1>
        <p>Masukkan nomor aplikasi dan nomor WhatsApp yang digunakan saat mendaftar</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">
                <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-passport" 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;">Cek Status Registrasi TKI</h2>
                        <p style="font-size:13.5px;color:var(--c-500);margin:0;">Masukkan nomor aplikasi (APP-XXXX-XXXX) dan WhatsApp</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.job-application.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 Aplikasi</label>
                            <input type="text" name="application_number" value="{{ old('application_number') }}"
                                   placeholder="APP-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;background:var(--c-50);"
                                   onfocus="this.style.borderColor='var(--c-blue)';this.style.boxShadow='0 0 0 3px rgba(37,99,235,.1)';this.style.background='#fff'"
                                   onblur="this.style.borderColor='var(--c-200)';this.style.boxShadow='none';this.style.background='var(--c-50)'"
                                   required>
                        </div>
                        <div style="margin-bottom:20px;">
                            <label style="font-size:13px;font-weight:600;color:var(--c-700);display:block;margin-bottom:5px;">Nomor WhatsApp</label>
                            <div style="position:relative;">
                                <i class="fab fa-whatsapp" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#25D366;font-size:15px;pointer-events:none;"></i>
                                <input type="tel" name="whatsapp" value="{{ old('whatsapp') }}"
                                       placeholder="08xx xxxx xxxx"
                                       style="width:100%;padding:11px 13px 11px 36px;border:1.5px solid var(--c-200);border-radius:9px;font-size:14px;font-family:var(--ff-body);outline:none;background:var(--c-50);"
                                       onfocus="this.style.borderColor='var(--c-blue)';this.style.boxShadow='0 0 0 3px rgba(37,99,235,.1)';this.style.background='#fff'"
                                       onblur="this.style.borderColor='var(--c-200)';this.style.boxShadow='none';this.style.background='var(--c-50)'"
                                       required>
                            </div>
                        </div>
                        <button type="submit" class="btn-corp btn-blue w-100" style="justify-content:center;padding:13px 24px;font-size:14.5px;">
                            <i class="fas fa-search"></i> Cek Status Sekarang
                        </button>
                    </form>
                </div>

                @if($app)
                @php $si = $app->status_info; @endphp
                <div style="background:var(--white);border:2px solid {{ $si['border'] }};border-radius:18px;overflow:hidden;" data-aos="fade-up">
                    <div style="background:{{ $si['bg'] }};padding:20px 24px;display:flex;align-items:center;gap:14px;">
                        <div style="width:52px;height:52px;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 style="flex:1;">
                            <div style="font-size:11px;font-weight:700;color:{{ $si['color'] }};text-transform:uppercase;letter-spacing:.07em;">Status Registrasi</div>
                            <div style="font-size:1.15rem;font-weight:800;color:{{ $si['color'] }};">{{ $si['label'] }}</div>
                        </div>
                        <div style="text-align:right;">
                            <div style="font-size:11px;color:var(--c-400);">No. Aplikasi</div>
                            <div style="font-family:var(--ff-display);font-size:1rem;font-weight:800;color:var(--c-blue);">{{ $app->application_number }}</div>
                        </div>
                    </div>

                    <div style="padding:22px;">
                        @foreach([
                            ['fas fa-globe','Negara Tujuan', $app->target_country.' '.($app->target_position ? '— '.$app->target_position : '')],
                            ['fas fa-user','Nama Lengkap', $app->full_name],
                            ['fas fa-map-marker-alt','Domisili', $app->domicile_city],
                            ['fas fa-calendar','Tanggal Daftar', $app->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

                        @if($app->status === 'interview' && $app->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:14px;color:var(--c-700);font-weight:600;">
                                📅 {{ \Carbon\Carbon::parse($app->interview_date)->format('d M Y') }}
                                @if($app->interview_time)· {{ $app->interview_time }}@endif
                            </div>
                            @if($app->interview_location)
                            <div style="font-size:13px;color:var(--c-500);margin-top:4px;">📍 {{ $app->interview_location }}</div>
                            @endif
                        </div>
                        @endif

                        @if($app->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-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;">Catatan Tim Kami</div>
                            <div style="font-size:13.5px;color:var(--c-700);line-height:1.65;">{{ $app->admin_notes }}</div>
                        </div>
                        @endif
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection