@extends('admin.layouts.app')

@section('title', 'Pengurusan Jawatan Kosong')

@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-btn-danger {
        background: #ef4444;
        color: #fff;
    }

    .jk-btn-danger:hover {
        background: #dc2626;
    }

    .jk-btn-sm {
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 4px;
    }

    /* Toggle Switch */
    .jk-toggle-switch {
        position: relative;
        display: inline-block;
        width: 38px;
        height: 22px;
        vertical-align: middle;
        margin: 0 4px;
    }

    .jk-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .jk-toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #cbd5e1;
        transition: .3s;
        border-radius: 22px;
    }

    .jk-toggle-slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .jk-toggle-switch input:checked+.jk-toggle-slider {
        background-color: #22c55e;
    }

    .jk-toggle-switch input:checked+.jk-toggle-slider:before {
        transform: translateX(16px);
    }

    .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: 3px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        text-transform: capitalize;
    }

    .jk-badge-aktif {
        background: #dcfce7;
        color: #15803d;
    }

    .jk-badge-tamat {
        background: #fee2e2;
        color: #b91c1c;
    }

    .jk-badge-tetap {
        background: #e0f2fe;
        color: #0369a1;
    }

    .jk-badge-kontrak {
        background: #ccfbf1;
        color: #0f766e;
    }

    .jk-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .jk-count {
        color: #64748b;
        font-size: 13px;
        margin-top: 4px;
        display: block;
    }
</style>
@endpush

@section('content')
<div class="jk-admin">
    <div class="jk-header">
        <div>
            <h1>🏢 Pengurusan Jawatan Kosong</h1>
            <span class="jk-count">{{ $jobs->count() }} jawatan dijumpai</span>
        </div>
        <div style="display:flex; gap:10px; align-items:center;">
            <a href="{{ route('admin.dashboard') }}" class="jk-btn jk-btn-secondary">
                ← Kembali ke Dashboard
            </a>
            <a href="{{ route('admin.jawatan.create') }}" class="jk-btn jk-btn-primary">
                ＋ Tambah Jawatan
            </a>
        </div>
    </div>

    <form method="GET" action="{{ route('admin.jawatan.index') }}" class="jk-toolbar">
        <input type="text" name="search" placeholder="Cari jawatan..." value="{{ request('search') }}" style="width:250px;" />
        <select name="filter_status">
            <option value="">Semua Status</option>
            <option value="aktif" {{ request('filter_status') === 'aktif' ? 'selected' : '' }}>Aktif</option>
            <option value="tamat" {{ request('filter_status') === 'tamat' ? 'selected' : '' }}>Tamat</option>
        </select>
        <button type="submit" class="jk-btn jk-btn-primary jk-btn-sm">Cari</button>
        @if(request()->has('search') || request()->has('filter_status'))
            <a href="{{ route('admin.jawatan.index') }}" class="jk-btn jk-btn-secondary jk-btn-sm">Reset</a>
        @endif
    </form>

    <div class="jk-table-responsive">
        <table class="jk-table">
            <thead>
                <tr>
                    <th style="width:40px">#</th>
                    <th>No. Rujukan</th>
                    <th>Jawatan</th>
                    <th>Bahagian</th>
                    <th>Jenis</th>
                    <th>Tarikh Tutup</th>
                    <th>Status</th>
                    <th style="width:180px">Tindakan</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($jobs as $i => $job)
                    <tr id="jk-row-{{ $job->id }}">
                        <td>{{ $i + 1 }}</td>
                        <td><strong>{{ $job->ref_no }}</strong></td>
                        <td>{{ $job->position_ms }}</td>
                        <td>{{ $job->department_ms }}</td>
                        <td>
                            <span class="jk-badge jk-badge-{{ $job->type }}">
                                {{ $job->type }}
                            </span>
                        </td>
                        <td>{{ $job->close_date ? \Carbon\Carbon::parse($job->close_date)->format('d M Y') : '-' }}</td>
                        <td>
                            <span class="jk-badge jk-badge-{{ $job->status }}">
                                {{ $job->status }}
                            </span>
                        </td>
                        <td class="jk-actions">
                            <a href="{{ route('admin.jawatan.edit', $job->id) }}" class="jk-btn jk-btn-secondary jk-btn-sm">Edit</a>
                            
                            <label class="jk-toggle-switch" title="Tukar status">
                                <input type="checkbox" onchange="toggleJobStatus({{ $job->id }})" {{ $job->status === 'aktif' ? 'checked' : '' }}>
                                <span class="jk-toggle-slider"></span>
                            </label>

                            <form action="{{ route('admin.jawatan.destroy', $job->id) }}" method="POST" onsubmit="return confirm('Padam jawatan ini?')" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="jk-btn jk-btn-danger jk-btn-sm">🗑</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" style="text-align:center;padding:40px;color:#94a3b8;">Tiada jawatan kosong.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function toggleJobStatus(id) {
        var url = '{{ url("admin/jawatan") }}/' + id + '/toggle';
        
        fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json'
                }
            })
            .then(function(r) {
                if (!r.ok) throw new Error('Ralat server');
                return r.json();
            })
            .then(function(data) {
                if (data.success) {
                    var row = document.getElementById('jk-row-' + id);
                    if (row) {
                        var badges = row.querySelectorAll('.jk-badge');
                        var statusBadge = badges[badges.length - 1];
                        if (statusBadge) {
                            statusBadge.className = 'jk-badge jk-badge-' + data.status;
                            statusBadge.textContent = data.status;
                        }
                    }
                    var toast = document.getElementById('jk-toast');
                    if (!toast) {
                        toast = document.createElement('div');
                        toast.id = 'jk-toast';
                        toast.style.cssText = 'position:fixed;bottom:24px;right:24px;background:#1e293b;color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;z-index:9999;transition:opacity 0.4s;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1);';
                        document.body.appendChild(toast);
                    }
                    toast.textContent = 'Status jawatan berjaya ditukar.';
                    toast.style.opacity = '1';
                    clearTimeout(toast._timer);
                    toast._timer = setTimeout(function() {
                        toast.style.opacity = '0';
                    }, 2000);
                }
            })
            .catch(function() {
                location.reload();
            });
    }
</script>
@endpush