@extends('admin.layouts.main')
@section('title','Detail Pendaftar: ' . $reg->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 Pendaftar</h1>
        <p class="page-sub">{{ $reg->registration_number }} · {{ $reg->full_name }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('admin.registrations.by-program', $reg->training_program_id) }}" class="btn-adm btn-outline-adm btn-adm-sm">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>
</div>

<div class="row g-4">
    {{-- Left --}}
    <div class="col-lg-7">
        {{-- Personal Info --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header">
                <div class="adm-card-title"><i class="fas fa-user"></i> Data Pribadi</div>
                @php $si = $reg->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',$reg->full_name],
                        ['Email',$reg->email],
                        ['Telepon',$reg->phone],
                        ['NIK',$reg->nik ?? '-'],
                        ['Tanggal Lahir',$reg->birth_date ? $reg->birth_date->format('d M Y') : '-'],
                        ['Jenis Kelamin',$reg->gender ?? '-'],
                        ['Kota',$reg->city ?? '-'],
                        ['Provinsi',$reg->province ?? '-'],
                    ] as $info)
                    <div class="col-md-6">
                        <div style="font-size:11px;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
                    @if($reg->address)
                    <div class="col-12">
                        <div style="font-size:11px;font-weight:700;color:var(--c-400);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;">Alamat</div>
                        <div style="font-size:14px;font-weight:500;color:var(--c-700);">{{ $reg->address }}</div>
                    </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Education --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-graduation-cap"></i> Pendidikan</div></div>
            <div class="adm-card-body">
                <div class="row g-3">
                    @foreach([
                        ['Pendidikan Terakhir',$reg->education_level ?? '-'],
                        ['Sekolah/Universitas',$reg->school_name ?? '-'],
                        ['Tahun Lulus',$reg->graduation_year ?? '-'],
                    ] as $info)
                    <div class="col-md-4">
                        <div style="font-size:11px;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>

        {{-- Motivation --}}
        @if($reg->motivation)
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-pen"></i> Motivasi</div></div>
            <div class="adm-card-body">
                <div style="font-size:14px;color:var(--c-700);line-height:1.8;">{{ $reg->motivation }}</div>
            </div>
        </div>
        @endif

        {{-- Documents --}}
        <div class="adm-card">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-paperclip"></i> Dokumen Diunggah</div></div>
            <div class="adm-card-body">
                <div class="d-flex gap-3 flex-wrap">
                    @foreach(['cv_file'=>['CV / Resume','fas fa-file-pdf','#2563eb'],'photo_file'=>['Foto','fas fa-image','#0d9488'],'ijazah_file'=>['Ijazah','fas fa-scroll','#d97706']] as $field => $meta)
                    @if($reg->$field)
                    <a href="{{ asset('storage/'.$reg->$field) }}" target="_blank"
                       style="display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--c-50);border:1px solid var(--c-200);border-radius:10px;font-size:13.5px;font-weight:600;color:{{ $meta[2] }};text-decoration:none;transition:all .2s;"
                       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:8px;padding:10px 14px;background:var(--c-100);border:1px solid var(--c-200);border-radius:10px;font-size:13.5px;color:var(--c-400);">
                        <i class="{{ $meta[1] }}"></i> {{ $meta[0] }} (tidak ada)
                    </span>
                    @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    {{-- Right --}}
    <div class="col-lg-5">
        {{-- Status Update Card --}}
        <div class="adm-card mb-4">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-edit"></i> Update Status & Catatan</div></div>
            <div class="adm-card-body">
                <form action="{{ route('admin.registrations.update-status', $reg->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)
                            <label style="display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:9px;cursor:pointer;border:1.5px solid {{ $reg->status == $key ? $s['border'] : 'var(--c-200)' }};background:{{ $reg->status == $key ? $s['bg'] : 'var(--c-50)' }};transition:all .18s;">
                                <input type="radio" name="status" value="{{ $key }}" {{ $reg->status == $key ? 'checked' : '' }} style="accent-color:{{ $s['color'] }};width:14px;height:14px;">
                                <i class="{{ $s['icon'] }}" style="color:{{ $s['color'] }};font-size:11px;"></i>
                                <span style="font-size:12.5px;font-weight:600;color:{{ $s['color'] }};">{{ $s['label'] }}</span>
                            </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="form-group" id="interviewFields" style="{{ $reg->status == 'interview' ? '' : 'display:none;' }}">
                        <label class="form-label" style="font-size:12px;font-weight:700;color:var(--c-blue);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;">📅 Detail Interview</label>
                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label" style="font-size:12px;">Tanggal</label>
                                <input type="date" name="interview_date" class="form-control" value="{{ $reg->interview_date }}">
                            </div>
                            <div class="col-6">
                                <label class="form-label" style="font-size:12px;">Waktu</label>
                                <input type="text" name="interview_time" class="form-control" value="{{ $reg->interview_time }}" placeholder="10:00 WIB">
                            </div>
                            <div class="col-12">
                                <label class="form-label" style="font-size:12px;">Lokasi</label>
                                <input type="text" name="interview_location" class="form-control" value="{{ $reg->interview_location }}" placeholder="Kantor / Zoom / Google Meet">
                            </div>
                            <div class="col-12">
                                <label class="form-label" style="font-size:12px;">Link Online (jika ada)</label>
                                <input type="url" name="interview_link" class="form-control" value="{{ $reg->interview_link }}" placeholder="https://zoom.us/...">
                            </div>
                        </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, alasan diterima/ditolak, informasi penting...">{{ $reg->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 Perubahan
                    </button>
                </form>
            </div>
        </div>

        {{-- Registration Info --}}
        <div class="adm-card">
            <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-info-circle"></i> Info Pendaftaran</div></div>
            <div class="adm-card-body" style="padding:0;">
                @foreach([
                    ['fas fa-hashtag','No. Registrasi',$reg->registration_number,'var(--c-blue)'],
                    ['fas fa-book-open','Program',$reg->program->title ?? '-','var(--c-blue)'],
                    ['fas fa-calendar','Tanggal Daftar',$reg->created_at->format('d M Y, H:i'),'var(--c-400)'],
                    ['fas fa-user-check','Direview oleh',$reg->reviewer->name ?? 'Belum direview','var(--c-400)'],
                    ['fas fa-clock','Waktu Review',$reg->reviewed_at ? $reg->reviewed_at->format('d M Y H:i') : '-','var(--c-400)'],
                ] as $info)
                <div style="display:flex;gap:10px;align-items:flex-start;padding:10px 18px;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:10.5px;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', function() {
        const fields = document.getElementById('interviewFields');
        fields.style.display = this.value === 'interview' ? '' : 'none';
    });
});
</script>
@endpush