@extends('admin.layouts.main')
@section('title','Detail Registrasi TKI: ' . $app->full_name)

@section('content')
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 class="page-title">Detail Registrasi TKI</h1>
        <p class="page-sub">{{ $app->application_number }} · {{ $app->full_name }}</p>
    </div>
    <a href="{{ route('admin.job-applications.index') }}" class="btn-adm btn-outline-adm btn-adm-sm">
        <i class="fas fa-arrow-left"></i> Kembali
    </a>
</div>

<div class="row g-4">
    {{-- Left --}}
    <div class="col-lg-8">
        {{-- Data Diri --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-user"></i> Data Diri</div>
                @php $si = $app->status_info; @endphp
                <span style="display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:100px;background:{{ $si['bg'] }};color:{{ $si['color'] }};border:1px solid {{ $si['border'] }};">
                    <i class="{{ $si['icon'] }}" style="font-size:10px;"></i> {{ $si['label'] }}
                </span>
            </div>
            <div class="adm-card-body">
                <div class="row g-3">
                    @foreach([
                        ['Nama Lengkap',$app->full_name,'col-md-6'],
                        ['NIK',$app->nik ?? '-','col-md-6'],
                        ['Tempat Lahir',$app->birth_place ?? '-','col-md-4'],
                        ['Tanggal Lahir',$app->birth_date ? $app->birth_date->format('d M Y') : '-','col-md-4'],
                        ['Jenis Kelamin',$app->gender,'col-md-4'],
                        ['Status Pernikahan',$app->marital_status ?? '-','col-md-4'],
                        ['WhatsApp',$app->whatsapp,'col-md-4'],
                        ['Email',$app->email ?? '-','col-md-4'],
                        ['Kontak Darurat',$app->emergency_contact ?? '-','col-md-12'],
                    ] as $info)
                    <div class="{{ $info[2] }}">
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">{{ $info[0] }}</div>
                        <div style="font-size:14px;font-weight:600;color:var(--c-900);">{{ $info[1] }}</div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Fisik & Domisili --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-ruler-vertical"></i> Fisik & Domisili</div></div>
            <div class="adm-card-body">
                <div class="row g-3">
                    @foreach([
                        ['Tinggi Badan',($app->height_cm ? $app->height_cm.' cm' : '-'),'col-md-3'],
                        ['Berat Badan',($app->weight_kg ? $app->weight_kg.' kg' : '-'),'col-md-3'],
                        ['Gol. Darah',$app->blood_type ?? '-','col-md-3'],
                        ['Kota/Kab KTP',$app->domicile_city,'col-md-3'],
                        ['Provinsi',$app->domicile_province ?? '-','col-md-4'],
                        ['Alamat',$app->domicile_address ?? '-','col-md-8'],
                    ] as $info)
                    <div class="{{ $info[2] }}">
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">{{ $info[0] }}</div>
                        <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $info[1] }}</div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Tujuan & Pendidikan --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-globe-asia"></i> Tujuan & Pendidikan</div></div>
            <div class="adm-card-body">
                <div class="row g-3">
                    @foreach([
                        ['Negara Tujuan',$app->target_country,'col-md-4'],
                        ['Posisi Diminati',$app->target_position ?? '-','col-md-4'],
                        ['Pendidikan',$app->education_level,'col-md-4'],
                        ['Sekolah/Univ',$app->school_name ?? '-','col-md-6'],
                        ['Tahun Lulus',$app->graduation_year ?? '-','col-md-3'],
                        ['Punya Paspor',$app->has_passport ? 'Ya' : 'Belum','col-md-3'],
                    ] as $info)
                    <div class="{{ $info[2] }}">
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">{{ $info[0] }}</div>
                        <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $info[1] }}</div>
                    </div>
                    @endforeach
                    @if($app->has_passport && $app->passport_number)
                    <div class="col-md-4">
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">No. Paspor</div>
                        <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $app->passport_number }}</div>
                    </div>
                    @endif
                    @if($app->has_overseas_exp)
                    <div class="col-12">
                        <div style="background:var(--c-50);border:1px solid var(--c-200);border-radius:9px;padding:12px;">
                            <div style="font-size:12px;font-weight:700;color:var(--c-blue);margin-bottom:6px;">🌏 Pengalaman Luar Negeri: {{ $app->prev_country }} — {{ $app->prev_position }}</div>
                            @if($app->work_experience)<div style="font-size:13px;color:var(--c-700);">{{ $app->work_experience }}</div>@endif
                        </div>
                    </div>
                    @endif
                    @if($app->motivation)
                    <div class="col-12">
                        <div style="font-size:10.5px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px;">Motivasi</div>
                        <div style="font-size:13.5px;color:var(--c-700);line-height:1.75;">{{ $app->motivation }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Documents --}}
        <div class="adm-card">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-paperclip"></i> Dokumen</div></div>
            <div class="adm-card-body">
                <div class="d-flex gap-3 flex-wrap">
                    @foreach(['photo_file'=>['Foto','fas fa-image','#16a34a'],'ktp_file'=>['KTP','fas fa-id-card','#2563eb'],'ijazah_file'=>['Ijazah','fas fa-scroll','#d97706'],'cv_file'=>['CV','fas fa-file-pdf','#dc2626']] as $field => $meta)
                    @if($app->$field)
                    <a href="{{ asset('storage/'.$app->$field) }}" target="_blank"
                       style="display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--c-50);border:1px solid var(--c-200);border-radius:10px;font-size:13px;font-weight:600;color:{{ $meta[2] }};transition:all .18s;"
                       onmouseenter="this.style.background='{{ $meta[2] }}22';this.style.borderColor='{{ $meta[2] }}'"
                       onmouseleave="this.style.background='var(--c-50)';this.style.borderColor='var(--c-200)'">
                        <i class="{{ $meta[1] }}"></i> {{ $meta[0] }}
                        <i class="fas fa-external-link-alt" style="font-size:10px;opacity:.6;"></i>
                    </a>
                    @else
                    <span style="display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--c-100);border:1px solid var(--c-200);border-radius:10px;font-size:13px;color:var(--c-400);">
                        <i class="{{ $meta[1] }}"></i> {{ $meta[0] }} (-)
                    </span>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Right: Update Status --}}
    <div class="col-lg-4">
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-edit"></i> Update Status</div></div>
            <div class="adm-card-body">
                <form action="{{ route('admin.job-applications.update-status', $app->id) }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="form-label">Status Seleksi</label>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px;">
                            @foreach($statuses as $key => $s)
                            @php
                                $isActive  = $app->status == $key;
                                $lblBorder = $isActive ? $s['border'] : '#e2e8f0';
                                $lblBg     = $isActive ? $s['bg']     : '#f8fafc';
                            @endphp
                            <label style="display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:9px;cursor:pointer;border:1.5px solid {{ $lblBorder }};background:{{ $lblBg }};transition:all .18s;">
                                <input type="radio" name="status" value="{{ $key }}" {{ $isActive ? 'checked' : '' }} style="accent-color:{{ $s['color'] }};width:13px;height:13px;">
                                <i class="{{ $s['icon'] }}" style="color:{{ $s['color'] }};font-size:10px;"></i>
                                <span style="font-size:12px;font-weight:600;color:{{ $s['color'] }};">{{ $s['label'] }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div id="itvFields" style="{{ $app->status=='interview' ? '' : 'display:none;' }}">
                        <div class="form-group">
                            <label class="form-label" style="font-size:12px;font-weight:700;color:var(--c-blue);text-transform:uppercase;margin-bottom:8px;">📅 Jadwal Interview</label>
                            <input type="date" name="interview_date" class="form-control" value="{{ $app->interview_date }}" style="margin-bottom:6px;">
                            <input type="text" name="interview_time" class="form-control" value="{{ $app->interview_time }}" placeholder="10:00 WIB" style="margin-bottom:6px;">
                            <input type="text" name="interview_location" class="form-control" value="{{ $app->interview_location }}" placeholder="Kantor / Zoom / Google Meet">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Catatan Admin</label>
                        <textarea name="admin_notes" class="form-control" rows="4"
                            placeholder="Catatan seleksi...">{{ $app->admin_notes }}</textarea>
                    </div>

                    <button type="submit" class="btn-adm btn-primary-adm w-100" style="justify-content:center;">
                        <i class="fas fa-save"></i> Simpan
                    </button>
                </form>
            </div>
        </div>

        <div class="adm-card">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-info-circle"></i> Info</div></div>
            <div class="adm-card-body" style="padding:0;">
                @foreach([
                    ['fas fa-hashtag','No. Aplikasi',$app->application_number,'#2563eb'],
                    ['fas fa-calendar','Tgl Daftar',$app->created_at->format('d M Y'),'#94a3b8'],
                    ['fas fa-user-check','Direview oleh',$app->reviewer->name ?? '-','#94a3b8'],
                ] as $info)
                <div style="display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--c-100);">
                    <i class="{{ $info[0] }}" style="color:{{ $info[3] }};font-size:12px;margin-top:2px;width:14px;flex-shrink:0;"></i>
                    <div>
                        <div style="font-size:10px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.04em;">{{ $info[1] }}</div>
                        <div style="font-size:13.5px;font-weight:600;color:var(--c-900);">{{ $info[2] }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
document.querySelectorAll('input[name="status"]').forEach(r=>{
    r.addEventListener('change',()=>{
        document.getElementById('itvFields').style.display = r.value==='interview' ? '' : 'none';
    });
});
</script>
@endpush