@extends('admin.layouts.main')
@section('title','Registrasi TKI Luar Negeri')

@section('content')
<div class="page-header d-flex align-items-center justify-content-between flex-wrap gap-3">
    <div>
        <h1 class="page-title">Registrasi TKI Luar Negeri</h1>
        <p class="page-sub">Kelola data pendaftar tenaga kerja luar negeri</p>
    </div>
    <a href="{{ route('admin.job-applications.export', request()->all()) }}" class="btn-adm btn-outline-adm btn-adm-sm">
        <i class="fas fa-download"></i> Export CSV
    </a>
</div>

{{-- Stats --}}
<div class="row g-3 mb-4">
    <div class="col-md-2 col-4">
        <div style="background:var(--white);border:1px solid var(--c-200);border-radius:12px;padding:14px;text-align:center;">
            <div style="font-family:var(--ffd);font-size:1.7rem;font-weight:800;color:var(--c-900);">{{ $stats['total'] }}</div>
            <div style="font-size:11.5px;color:var(--c-500);">Total</div>
        </div>
    </div>
    @foreach($statuses as $key => $s)
    <div class="col-md-2 col-4">
        <div style="background:{{ $s['bg'] }};border:1px solid {{ $s['border'] }};border-radius:12px;padding:14px;text-align:center;">
            <div style="font-family:var(--ffd);font-size:1.6rem;font-weight:800;color:{{ $s['color'] }};">{{ $stats[$key] ?? 0 }}</div>
            <div style="font-size:11px;color:{{ $s['color'] }};font-weight:600;">{{ $s['label'] }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Country breakdown --}}
<div class="adm-card mb-4">
    <div class="adm-card-header"><div class="adm-card-title"><i class="fas fa-globe"></i> Per Negara Tujuan</div></div>
    <div class="adm-card-body" style="display:flex;flex-wrap:wrap;gap:10px;">
        @foreach($countries as $cname => $cdata)
        @php
            $cnt      = $byCountry[$cname] ?? 0;
            $isCurr   = request('country') == $cname;
            $bgStyle  = $isCurr ? '#2563eb' : 'var(--c-50)';
            $bdrStyle = $isCurr ? '#2563eb' : 'var(--c-200)';
            $txtColor = $isCurr ? '#fff' : 'var(--c-700)';
            $badgeBg  = $isCurr ? 'rgba(255,255,255,.2)' : '#eff6ff';
            $badgeTxt = $isCurr ? '#fff' : '#2563eb';
        @endphp
        <a href="{{ route('admin.job-applications.index', ['country'=>$cname]) }}"
           style="display:flex;align-items:center;gap:8px;padding:10px 16px;background:{{ $bgStyle }};border:1px solid {{ $bdrStyle }};border-radius:10px;text-decoration:none;transition:all .18s;">
            <span style="font-size:20px;">{{ $cdata['flag'] }}</span>
            <span style="font-size:13.5px;font-weight:600;color:{{ $txtColor }};">{{ $cname }}</span>
            <span style="font-size:12px;font-weight:700;background:{{ $badgeBg }};color:{{ $badgeTxt }};padding:2px 8px;border-radius:100px;">{{ $cnt }}</span>
        </a>
        @endforeach
        @if(request('country'))
        <a href="{{ route('admin.job-applications.index') }}" style="display:flex;align-items:center;gap:6px;padding:10px 14px;border:1px solid var(--c-200);border-radius:10px;font-size:13px;color:var(--c-500);text-decoration:none;">
            <i class="fas fa-times" style="font-size:11px;"></i> Semua
        </a>
        @endif
    </div>
</div>

{{-- Filters --}}
<div class="adm-card mb-4">
    <div class="adm-card-body" style="padding:14px 18px;">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-md-4">
                <div style="position:relative;">
                    <i class="fas fa-search" style="position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--c-400);font-size:12px;pointer-events:none;"></i>
                    <input type="text" name="search" class="form-control" style="padding-left:32px;" placeholder="Nama, WhatsApp, no. aplikasi..." value="{{ request('search') }}">
                </div>
            </div>
            @if(request('country'))<input type="hidden" name="country" value="{{ request('country') }}">@endif
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">Semua Status</option>
                    @foreach($statuses as $key => $s)
                    <option value="{{ $key }}" {{ request('status')==$key?'selected':'' }}>{{ $s['label'] }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <select name="gender" class="form-select">
                    <option value="">Semua Gender</option>
                    <option value="Laki-laki" {{ request('gender')=='Laki-laki'?'selected':'' }}>Laki-laki</option>
                    <option value="Perempuan" {{ request('gender')=='Perempuan'?'selected':'' }}>Perempuan</option>
                </select>
            </div>
            <div class="col-md-2 d-flex gap-2">
                <button type="submit" class="btn-adm btn-primary-adm"><i class="fas fa-filter"></i> Filter</button>
                <a href="{{ route('admin.job-applications.index') }}" class="btn-adm btn-outline-adm"><i class="fas fa-times"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Table --}}
<form id="bulkForm" action="{{ route('admin.job-applications.bulk-update') }}" method="POST">
    @csrf
    <div class="adm-card">
        <div class="adm-card-header">
            <div class="adm-card-title"><i class="fas fa-plane-departure"></i> Data Pendaftar ({{ $applications->total() }})</div>
            <div class="d-flex gap-2 align-items-center">
                <select name="status" class="form-select" style="font-size:12.5px;padding:6px 10px;width:auto;">
                    @foreach($statuses as $key => $s)
                    <option value="{{ $key }}">→ {{ $s['label'] }}</option>
                    @endforeach
                </select>
                <button type="submit" class="btn-adm btn-warning-adm btn-adm-sm" onclick="return bulkCheck()">
                    <i class="fas fa-check-double"></i> Terapkan
                </button>
            </div>
        </div>
        <div style="overflow-x:auto;">
            <table class="adm-table">
                <thead>
                    <tr>
                        <th style="width:40px;"><input type="checkbox" id="checkAll" onchange="document.querySelectorAll('.rc').forEach(c=>c.checked=this.checked)"></th>
                        <th>Pendaftar</th>
                        <th>Fisik</th>
                        <th>Negara Tujuan</th>
                        <th>Pendidikan</th>
                        <th>Status</th>
                        <th>Tgl Daftar</th>
                        <th class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($applications as $app)
                    @php $si = $app->status_info; @endphp
                    <tr>
                        <td><input type="checkbox" name="ids[]" value="{{ $app->id }}" class="rc"></td>
                        <td>
                            <div style="font-weight:700;color:var(--c-900);font-size:13.5px;">{{ $app->full_name }}</div>
                            <div style="font-size:11.5px;color:var(--c-500);">
                                <i class="fab fa-whatsapp" style="color:#25D366;font-size:10px;"></i> {{ $app->whatsapp }}
                            </div>
                            <div style="font-size:10.5px;color:var(--c-400);">{{ $app->application_number }}</div>
                            <div style="font-size:11px;color:var(--c-600);">{{ $app->gender }}</div>
                        </td>
                        <td style="font-size:12.5px;color:var(--c-600);">
                            @if($app->height_cm)
                                {{ $app->height_cm }} cm
                            @endif
                            @if($app->weight_kg)
                                · {{ $app->weight_kg }} kg
                            @endif
                        </td>
                        <td>
                            <div style="font-size:13px;font-weight:600;color:var(--c-900);">{{ $app->target_country }}</div>
                            @if($app->target_position)
                            <div style="font-size:11.5px;color:var(--c-500);">{{ $app->target_position }}</div>
                            @endif
                        </td>
                        <td style="font-size:12.5px;color:var(--c-600);">{{ $app->education_level }}</td>
                        <td>
                            <span style="display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:100px;background:{{ $si['bg'] }};color:{{ $si['color'] }};border:1px solid {{ $si['border'] }};">
                                <i class="{{ $si['icon'] }}" style="font-size:9px;"></i> {{ $si['label'] }}
                            </span>
                        </td>
                        <td style="font-size:12.5px;color:var(--c-500);">{{ $app->created_at->format('d M Y') }}</td>
                        <td>
                            <div class="d-flex justify-content-center gap-1">
                                <a href="{{ route('admin.job-applications.show', $app->id) }}" class="btn-icon btn-icon-view" title="Detail"><i class="fas fa-eye"></i></a>
                                <form action="{{ route('admin.job-applications.destroy', $app->id) }}" method="POST" id="del-app-{{ $app->id }}">
                                    @csrf
                                    @method('DELETE')
                                    <button type="button" class="btn-icon btn-icon-del" onclick="confirmDelete('del-app-{{ $app->id }}')" title="Hapus"><i class="fas fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="8" style="text-align:center;padding:32px;color:var(--c-400);">Belum ada registrasi TKI</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($applications->hasPages())
        <div style="padding:14px 18px;border-top:1px solid var(--c-100);">{{ $applications->links() }}</div>
        @endif
    </div>
</form>
@endsection
@push('scripts')
<script>
function bulkCheck() {
    const c = document.querySelectorAll('.rc:checked');
    if (!c.length) { alert('Pilih setidaknya satu data.'); return false; }
    return confirm('Terapkan status ke '+c.length+' pendaftar?');
}
</script>
@endpush