@extends('layouts.app')

@section('title', $lang === 'en' ? 'Job Vacancies' : 'Jawatan Kosong')

@push('styles')
<style>
    /* ── Hero Banner ── */
    .jk-hero {
        background: #003c5d;
        padding: 60px 0;
        margin: -28px -24px 32px;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        margin-top: -28px;
        margin-bottom: 32px;
        position: relative;
        overflow: hidden;
    }

    .jk-hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 40%;
        background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 100%);
        pointer-events: none;
    }

    .jk-hero__inner {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 40px;
        position: relative;
        z-index: 1;
    }

    .jk-hero__content {
        border-left: 3px solid #ffffff;
        padding-left: 24px;
        max-width: 640px;
    }

    .jk-hero__label {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 12px;
    }

    .jk-hero__title {
        font-size: 34px;
        font-weight: 700;
        color: #ffffff;
        margin: 0 0 16px;
        line-height: 1.2;
    }

    .jk-hero__desc {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
        line-height: 1.7;
    }

    @media (max-width: 768px) {
        .jk-hero {
            padding: 40px 0;
        }
        .jk-hero__inner {
            padding: 0 24px;
        }
        .jk-hero__title {
            font-size: 26px;
        }
        .jk-hero__desc {
            font-size: 14px;
        }
    }

    /* ── Job Listings ── */
    .jawatan-kosong {
        color: #0f172a;
    }
    .jawatan-list {
        display: grid;
        gap: 18px;
    }
    .jawatan-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }
    .jawatan-card__inner {
        display: flex;
        gap: 0;
    }
    .jawatan-card__main {
        flex: 1;
        padding: 26px;
    }
    .jawatan-card__side {
        width: 240px;
        background: #dae5eb;
        padding: 22px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .jawatan-card__header {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        justify-content: space-between;
    }
    .jawatan-card__title {
        margin: 0 0 8px;
        font-size: 22px;
        color: #003c5d;
    }
    .jawatan-card__department {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 13px;
        margin: 0;
    }
    .jawatan-card__badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 999px;
        background: #003c5d;
        color: #ffffff;
    }
    .jawatan-card__badge--kontrak {
        background: #0f766e;
    }
    .jawatan-card__badge--tamat {
        background: #64748b;
    }
    .jawatan-card__meta {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 18px 0 22px;
    }
    .jawatan-meta--location { grid-column: 1; grid-row: 1; }
    .jawatan-meta--qualification { grid-column: 2; grid-row: 1; }
    .jawatan-meta--closing { grid-column: 1; grid-row: 2; }
    .jawatan-meta--salary { grid-column: 2; grid-row: 2; }
    .jawatan-meta {
        display: flex;
        gap: 10px;
    }
    .jawatan-meta svg {
        color: #003c5d;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .jawatan-meta__label {
        font-size: 12px;
        color: #94a3b8;
        margin-bottom: 2px;
    }
    .jawatan-meta__value {
        font-size: 13px;
        color: #334155;
    }
    .jawatan-card__actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .jawatan-card__btn {
        flex: 1;
        text-align: center;
        padding: 10px 14px;
        font-size: 13px;
        text-decoration: none;
        border: 1px solid #003c5d;
    }
    .jawatan-card__btn--primary {
        background: #003c5d;
        color: #ffffff;
    }
    .jawatan-card__btn--ghost {
        background: transparent;
        color: #003c5d;
    }
    .jawatan-card__side label {
        font-size: 12px;
        color: #64748b;
        display: block;
        margin-bottom: 4px;
    }
    .jawatan-card__side span {
        font-size: 13px;
        color: #0f172a;
        display: block;
    }
    .jawatan-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 28px;
    }
    .jawatan-pagination button {
        width: 40px;
        height: 40px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 18px;
        color: #003c5d;
    }
    .jawatan-pagination button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }
    .jawatan-pagination__count {
        padding: 6px 14px;
        background: rgba(0, 60, 93, 0.1);
        color: #003c5d;
        font-size: 13px;
    }
    @media (max-width: 900px) {
        .jawatan-card__inner { flex-direction: column; }
        .jawatan-card__side { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
    }
    @media (max-width: 640px) {
        .jawatan-card__main { padding: 22px; }
        .jawatan-card__side { padding: 18px; }
        .jawatan-card__meta { grid-template-columns: 1fr; }
        .jawatan-card__actions { flex-direction: column; }
    }
</style>
@endpush

@section('content')
{{-- ── Hero Banner ── --}}
<section class="jk-hero">
    <div class="jk-hero__inner">
        <div class="jk-hero__content">
            <div class="jk-hero__label">{{ $lang === 'en' ? 'Career' : 'Kerjaya' }}</div>
            <h1 class="jk-hero__title">{{ $lang === 'en' ? 'Job Vacancies' : 'Kekosongan Jawatan' }}</h1>
            <p class="jk-hero__desc">
                {{ $lang === 'en' 
                    ? 'Latest career opportunities at LPSA Perak. Join us in our mission to manage Perak\'s water resources.' 
                    : 'Peluang kerjaya terkini di LPSA Perak. Sertai kami dalam misi menguruskan sumber air negeri Perak.' }}
            </p>
        </div>
    </div>
</section>

@php
    $labels = [
        'location' => $lang === 'en' ? 'Location' : 'Lokasi',
        'tarafJawatan' => $lang === 'en' ? 'Job Status' : 'Taraf Jawatan',
        'salary' => $lang === 'en' ? 'Salary Schedule' : 'Jadual Gaji',
        'closing' => $lang === 'en' ? 'Closing Date' : 'Tarikh Tutup',
        'published' => $lang === 'en' ? 'Date Advertised' : 'Tarikh Diiklankan',
        'refno' => $lang === 'en' ? 'Reference No.' : 'No. Rujukan',
        'details' => $lang === 'en' ? 'View Details' : 'Lihat Butiran',
        'apply' => $lang === 'en' ? 'Apply Now' : 'Mohon Sekarang',
        'noJobs' => $lang === 'en' ? 'No job vacancies available.' : 'Tiada jawatan kosong buat masa ini.',
    ];
    $typeLabels = [
        'tetap' => $lang === 'en' ? 'Permanent' : 'Tetap',
        'kontrak' => $lang === 'en' ? 'Contract' : 'Kontrak',
    ];
    $statusLabels = [
        'aktif' => $lang === 'en' ? 'Active' : 'Aktif',
        'tamat' => $lang === 'en' ? 'Closed' : 'Tamat',
    ];
    $itemsPerPage = 10;
@endphp

<div class="jawatan-kosong" data-items-per-page="{{ $itemsPerPage }}">
    @if($jobs->isEmpty())
        <div class="jawatan-card" style="padding: 48px; text-align: center;">
            {{ $labels['noJobs'] }}
        </div>
    @else
        <div class="jawatan-list">
            @foreach($jobs as $job)
                @php
                    $typeLabel = $job->type ? ($typeLabels[$job->type] ?? $job->type) : '';
                    $position = $job->getText('position', $lang);
                    $kumpulanPerkhidmatan = $job->getText('kumpulan_perkhidmatan', $lang);
                    $department = $job->getText('department', $lang);
                    $location = $job->getText('location', $lang);
                    
                    if ($job->gaji_min !== null && $job->gaji_max !== null) {
                        if ($job->gaji_min == $job->gaji_max) {
                            $salaryText = 'RM ' . number_format($job->gaji_min, 2);
                        } else {
                            $salaryText = ($lang === 'en' ? 'Min Salary' : 'Gaji Minimum') . ': RM ' . number_format($job->gaji_min, 2) . ' - ' . ($lang === 'en' ? 'Max Salary' : 'Gaji Maksimum') . ': RM ' . number_format($job->gaji_max, 2);
                        }
                    } else {
                        $salaryText = $job->getText('salary', $lang);
                    }

                    $daysMalay = [
                        'Sunday' => 'AHAD', 'Monday' => 'ISNIN', 'Tuesday' => 'SELASA',
                        'Wednesday' => 'RABU', 'Thursday' => 'KHAMIS', 'Friday' => 'JUMAAT', 'Saturday' => 'SABTU'
                    ];
                    $daysEnglish = [
                        'Sunday' => 'SUNDAY', 'Monday' => 'MONDAY', 'Tuesday' => 'TUESDAY',
                        'Wednesday' => 'WEDNESDAY', 'Thursday' => 'THURSDAY', 'Friday' => 'FRIDAY', 'Saturday' => 'SATURDAY'
                    ];
                    $dayName = $job->close_date ? $job->close_date->format('l') : '';
                    $dayLabel = $lang === 'en' 
                        ? ($daysEnglish[$dayName] ?? '') 
                        : ($daysMalay[$dayName] ?? '');
                    
                    $closingDateText = $job->close_date 
                        ? $job->close_date->format('d-m-Y') . ' 11:59 PM (' . $dayLabel . ')' 
                        : '-';
                @endphp
                <article class="jawatan-card" data-job-card>
                    <div class="jawatan-card__inner">
                        <div class="jawatan-card__main">
                            <div class="jawatan-card__header">
                                <div>
                                    <h3 class="jawatan-card__title">{{ $position }}</h3>
                                    @if($kumpulanPerkhidmatan)
                                        <p class="jawatan-card__department" style="font-weight: 600; color: #003c5d; margin-bottom: 4px;">
                                            {{ $lang === 'en' ? 'Service Group' : 'Kumpulan Perkhidmatan' }}: {{ $kumpulanPerkhidmatan }}
                                        </p>
                                    @endif
                                    @if($department)
                                        <p class="jawatan-card__department">
                                            {{ $lang === 'en' ? 'Classification of Service' : 'Klasifikasi Perkhidmatan' }}: {{ $department }}
                                        </p>
                                    @endif
                                </div>
                                <div style="display:flex; flex-direction:column; gap:8px; align-items:flex-end;">
                                    @if($typeLabel)
                                        <span class="jawatan-card__badge jawatan-card__badge--{{ $job->type }}">{{ $typeLabel }}</span>
                                    @endif
                                    @if($job->status !== 'aktif')
                                        <span class="jawatan-card__badge jawatan-card__badge--tamat">{{ $statusLabels[$job->status] ?? $job->status }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="jawatan-card__meta">
                                <div class="jawatan-meta jawatan-meta--location">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                        <circle cx="12" cy="10" r="2.5" stroke="currentColor" stroke-width="1.6"/>
                                    </svg>
                                    <div>
                                        <div class="jawatan-meta__label">{{ $labels['location'] }}</div>
                                        <div class="jawatan-meta__value">{{ $location ?: '-' }}</div>
                                    </div>
                                </div>
                                <div class="jawatan-meta jawatan-meta--qualification">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 3l7 4v6c0 4-3 7-7 8-4-1-7-4-7-8V7l7-4z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <div>
                                        <div class="jawatan-meta__label">{{ $labels['tarafJawatan'] }}</div>
                                        <div class="jawatan-meta__value">{{ $typeLabel ?: '-' }}</div>
                                    </div>
                                </div>
                                <div class="jawatan-meta jawatan-meta--salary">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 3v18M7 8h6a3 3 0 0 0 0-6H9a3 3 0 0 0 0 6h6a3 3 0 0 1 0 6H7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                    <div>
                                        <div class="jawatan-meta__label">{{ $labels['salary'] }}</div>
                                        <div class="jawatan-meta__value">{{ $salaryText ?: '-' }}</div>
                                    </div>
                                </div>
                                <div class="jawatan-meta jawatan-meta--closing">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <rect x="3" y="4" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.6"/>
                                        <path d="M8 2v4M16 2v4M3 10h18" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
                                    </svg>
                                    <div>
                                        <div class="jawatan-meta__label">{{ $labels['closing'] }}</div>
                                        <div class="jawatan-meta__value">{{ $closingDateText }}</div>
                                    </div>
                                </div>
                            </div>

                            <div class="jawatan-card__actions">
                                <a class="jawatan-card__btn jawatan-card__btn--primary" href="{{ route('jawatan.show', $job->id) }}">
                                    {{ $labels['details'] }}
                                </a>
                                <a class="jawatan-card__btn jawatan-card__btn--ghost" href="{{ route('jawatan.apply', $job->id) }}">
                                    {{ $labels['apply'] }}
                                </a>
                            </div>
                        </div>
                        <aside class="jawatan-card__side">
                            <div>
                                <label>{{ $labels['refno'] }}</label>
                                <span>{{ $job->ref_no ?: '-' }}</span>
                            </div>
                            <div>
                                <label>{{ $labels['published'] }}</label>
                                <span>{{ $job->publish_date ? $job->publish_date->format('d M Y') : '-' }}</span>
                            </div>
                        </aside>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="jawatan-pagination" data-pagination>
            <button type="button" data-action="first" aria-label="First">«</button>
            <button type="button" data-action="prev" aria-label="Previous">‹</button>
            <div class="jawatan-pagination__count" data-count>1 / 1</div>
            <button type="button" data-action="next" aria-label="Next">›</button>
            <button type="button" data-action="last" aria-label="Last">»</button>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
(function() {
    var root = document.querySelector('.jawatan-kosong');
    if (!root) return;
    var cards = Array.prototype.slice.call(root.querySelectorAll('[data-job-card]'));
    var perPage = parseInt(root.getAttribute('data-items-per-page') || '10', 10);
    if (!cards.length) return;
    var pagination = root.querySelector('[data-pagination]');
    var countLabel = pagination ? pagination.querySelector('[data-count]') : null;
    var totalPages = Math.max(1, Math.ceil(cards.length / perPage));
    var current = 1;

    var update = function() {
        cards.forEach(function(card, index) {
            var page = Math.floor(index / perPage) + 1;
            card.style.display = page === current ? '' : 'none';
        });
        if (countLabel) countLabel.textContent = current + ' / ' + totalPages;
        if (pagination) {
            pagination.querySelectorAll('button[data-action]').forEach(function(btn) {
                var action = btn.getAttribute('data-action');
                btn.disabled = (action === 'first' || action === 'prev') ? current === 1 : current === totalPages;
            });
        }
    };

    if (pagination) {
        pagination.addEventListener('click', function(event) {
            var target = event.target;
            if (!(target instanceof HTMLElement)) return;
            var action = target.getAttribute('data-action');
            if (!action) return;
            if (action === 'first') current = 1;
            else if (action === 'prev') current = Math.max(1, current - 1);
            else if (action === 'next') current = Math.min(totalPages, current + 1);
            else if (action === 'last') current = totalPages;
            update();
        });
    }
    update();
})();
</script>
@endpush