@extends('admin.layouts.app')

@section('title', 'Pengurusan Permohonan Kerja')

@push('styles')
<style>
    .jk-admin {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 24px;
    }

    .jk-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e8f0;
    }

    .jk-header h1 {
        margin: 0;
        color: #0f172a;
        font-size: 20px;
        font-weight: 700;
    }

    .jk-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        text-decoration: none;
        transition: 0.2s;
    }

    .jk-btn-primary {
        background: #003c5d;
        color: #fff;
    }

    .jk-btn-primary:hover {
        background: #004d7a;
    }

    .jk-btn-secondary {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #334155;
    }

    .jk-btn-secondary:hover {
        background: #e2e8f0;
    }

    .jk-toolbar {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        align-items: center;
        flex-wrap: wrap;
    }

    .jk-toolbar input,
    .jk-toolbar select {
        padding: 8px 12px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        font-size: 13px;
        background-color: #fff;
        color: #334155;
    }

    .jk-toolbar input:focus,
    .jk-toolbar select:focus {
        outline: none;
        border-color: #003c5d;
        box-shadow: 0 0 0 1px #003c5d;
    }

    .jk-table-responsive {
        width: 100%;
        overflow-x: auto;
    }

    .jk-table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
    }

    .jk-table th {
        background: #f8fafc;
        border-bottom: 2px solid #e2e8f0;
        color: #475569;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 600;
    }

    .jk-table td {
        padding: 14px 16px;
        border-bottom: 1px solid #e2e8f0;
        font-size: 13px;
        color: #334155;
        vertical-align: middle;
    }

    .jk-table tr:hover td {
        background: #f8fafc;
    }

    .jk-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        text-transform: capitalize;
    }

    .jk-count {
        color: #64748b;
        font-size: 13px;
        margin-top: 4px;
        display: block;
    }

    /* Action Button Styles */
    .jk-btn-sm {
        padding: 5px 12px;
        font-size: 12px;
    }
</style>
@endpush

@section('content')
<div class="jk-admin">
    <div class="jk-header">
        <div>
            <h1>📄 Pengurusan Permohonan Kerja</h1>
            <span class="jk-count">{{ $permohonan->total() }} permohonan dijumpai</span>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="jk-btn jk-btn-secondary">
            ← Kembali ke Dashboard
        </a>
    </div>

    <form method="GET" action="{{ route('admin.permohonan.index') }}" class="jk-toolbar">
        <input type="text" name="search" placeholder="Cari nama pemohon/no kad pengenalan..." value="{{ request('search') }}" style="width:280px;" />
        
        <select name="job_id">
            <option value="">Semua Jawatan</option>
            @foreach (\App\Models\JawatanKosong::orderBy('ordering')->get(['id', 'position_ms']) as $j)
                <option value="{{ $j->id }}" {{ request('job_id') == $j->id ? 'selected' : '' }}>
                    {{ $j->position_ms }}
                </option>
            @endforeach
        </select>

        <select name="filter_status">
            <option value="">Semua Status</option>
            @foreach (\App\Models\Permohonan::STATUS_MAP as $k => $v)
                <option value="{{ $k }}" {{ request('filter_status') === $k ? 'selected' : '' }}>
                    {{ $v['label'] }}
                </option>
            @endforeach
        </select>

        <select name="per_page" onchange="this.form.submit()" title="Bilangan rekod setiap halaman">
            <option value="10" {{ request('per_page') == '10' ? 'selected' : '' }}>10 / halaman</option>
            <option value="20" {{ request('per_page', '20') == '20' ? 'selected' : '' }}>20 / halaman</option>
            <option value="50" {{ request('per_page') == '50' ? 'selected' : '' }}>50 / halaman</option>
            <option value="100" {{ request('per_page') == '100' ? 'selected' : '' }}>100 / halaman</option>
        </select>
        
        <button type="submit" class="jk-btn jk-btn-primary">Tapis & Cari</button>
        
        <a href="{{ route('admin.permohonan.exportCsv', request()->query()) }}" class="jk-btn" style="background:#16a34a; color:white; text-decoration:none; font-weight:bold;">
            📥 Eksport Senarai (CSV)
        </a>
        
        @if(request()->has('search') || request()->has('job_id') || request()->has('filter_status') || request()->has('per_page'))
            <a href="{{ route('admin.permohonan.index') }}" class="jk-btn jk-btn-secondary">Reset</a>
        @endif
    </form>

    <div class="jk-table-responsive">
        <table class="jk-table">
            <thead>
                <tr>
                    <th style="width:160px">Tarikh Mohon</th>
                    <th>Nama Pemohon</th>
                    <th style="width:150px">No. KP</th>
                    <th>Jawatan Dipohon</th>
                    <th style="width:150px">Status Semasa</th>
                    <th style="width:120px; text-align:right;">Tindakan</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($permohonan as $a)
                    @php
                        $statusInfo = $a->getStatusInfo();
                    @endphp
                    <tr>
                        <td style="color:#64748b; font-size:12px;">{{ $a->created_at->format('d M Y, H:i') }}</td>
                        <td><strong style="color:#0f172a; font-size:14px;">{{ $a->nama_penuh }}</strong></td>
                        <td style="color:#334155; font-family:monospace;">{{ $a->no_kp }}</td>
                        <td style="color:#334155; font-size:13px; font-weight:500;">
                            {{ $a->jawatan->position_ms ?? '-' }}
                        </td>
                        <td>
                            <span class="jk-badge" style="background: {{ $statusInfo['bg'] }}; color: {{ $statusInfo['color'] }};">
                                {{ $statusInfo['label'] }}
                            </span>
                        </td>
                        <td style="text-align:right;">
                            <a href="{{ route('admin.permohonan.show', array_merge(['id' => $a->id], request()->query())) }}" class="jk-btn jk-btn-secondary jk-btn-sm" style="white-space:nowrap;">
                                Semak Profil
                            </a>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" style="text-align:center;padding:40px; color:#64748b; font-size:15px;">Tiada rekod ditemui berdasarkan kriteria carian anda.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{ $permohonan->withQueryString()->links('vendor.pagination.custom') }}
</div>
@endsection