@extends('frontend.layout.dashboard-master')
@section('site_title', __('All Jobs'))

@section('style')
<style>
/* Job card styles — also used in AJAX-loaded search-result.blade.php */
.job-card { background: #fff; border: 1px solid #E9EBF0; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; }
.job-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; }
.job-badge-type     { background: #F1F5F9; color: #3B4759; }
.job-badge-open     { background: #EFF9F3; color: var(--main-color-one); }
.job-badge-closed   { background: #ECEDEF; color: #3B4759; }
.job-badge-progress { background: #FFF4E8; color: #FA8C00; }
.job-badge-complete { background: #ECEDEF; color: #3B4759; }
.job-title-link { font-size: 16px; font-weight: 600; color: #242B36; text-decoration: none; }
.job-title-link:hover { color: var(--main-color-one); }
.job-meta { font-size: 13px; color: #637381; }
.disabled-link { background-color: #ccc !important; pointer-events: none; cursor: default; }

.job-card-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid #E9EBF0; }
.job-card-actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 480px) {
    .job-card { padding: 16px; }
    .job-card-footer { flex-direction: column; align-items: stretch; }
    .job-card-footer > a,
    .job-card-actions { width: 100%; justify-content: center; }
    .job-card-actions > a { flex: 1; justify-content: center; text-align: center; }
}
</style>
@endsection

@section('content')

{{-- Page Header --}}
<div class="mb-6 flex flex-col gap-4 rounded-xl border border-[#C4C8CE] bg-white p-6 sm:flex-row sm:items-center sm:justify-between">
    <div class="space-y-1">
        <h1 class="text-[20px] font-semibold leading-7 text-[#242B36]">{{ __('My Jobs') }}</h1>
        <p class="text-[14px] font-normal text-[#3B4759]">{{ __('Manage your posted jobs and track proposals') }}</p>
    </div>
    @if(moduleExists('SecurityManage'))
        @if(Auth::guard('web')->user()->freeze_job == 'freeze')
            <a href="#" class="disabled-link inline-flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-[14px] font-semibold text-white">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>
                {{ __('Post a Job') }}
            </a>
        @else
            <a href="{{ route('client.job.create') }}"
               class="inline-flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-[14px] font-semibold text-white transition hover:bg-secondary">
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>
                {{ __('Post a Job') }}
            </a>
        @endif
    @else
        <a href="{{ route('client.job.create') }}"
           class="inline-flex items-center gap-2 rounded-xl bg-primary px-5 py-2.5 text-[14px] font-semibold text-white transition hover:bg-secondary">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14" stroke-linecap="round"/></svg>
            {{ __('Post a Job') }}
        </a>
    @endif
</div>

{{-- Tabs --}}
<div class="border-b border-[#E9EBF0]">
    <div class="flex items-center gap-6 overflow-x-auto md:gap-10" style="scrollbar-width:none">
        <button class="jobs_filter_for_client active-job-tab relative whitespace-nowrap py-4 text-[14px] font-medium text-primary" data-tab="all" data-val="all">
            {{ __('All Jobs') }} ({{ $all_jobs->count() }})
            <div class="job-tab-indicator absolute bottom-0 left-0 h-[3px] w-full rounded-t-full bg-primary"></div>
        </button>
        <button class="jobs_filter_for_client relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="active" data-val="active">
            {{ __('Active Jobs') }} ({{ $active_jobs }})
            <div class="job-tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
        </button>
        <button class="jobs_filter_for_client relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="closed" data-val="close">
            {{ __('Closed Jobs') }} ({{ $closed_jobs }})
            <div class="job-tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
        </button>
        <button class="jobs_filter_for_client relative whitespace-nowrap py-4 text-[14px] font-medium text-[#3B4759] hover:text-primary" data-tab="complete" data-val="complete">
            {{ __('Completed Jobs') }} ({{ $complete_jobs }})
            <div class="job-tab-indicator absolute bottom-0 left-0 hidden h-[3px] w-full rounded-t-full bg-primary"></div>
        </button>
    </div>
</div>

<input type="hidden" id="set_filter_type_value" value="all">

{{-- Job list --}}
<div class="search_result mt-6">
    @include('frontend.user.client.job.my-job.search-result')
</div>

@endsection

@section('script')
<x-sweet-alert.sweet-alert2-js />
<script>
    let mainPageUrl = { href: window.location.href };
</script>
@include('frontend.user.client.job.my-job.all-jobs-js')
<script>
(function () {
    const PER_PAGE   = 10;
    let currentPage  = 1;
    let currentTab   = 'all';

    const cards  = Array.from(document.querySelectorAll('.job-card'));
    const listEl = document.getElementById('job-list');
    const emptyEl = document.getElementById('job-empty-filter');
    const pagEl  = document.getElementById('job-pagination');

    const PREV = '{{ __("Previous") }}';
    const NEXT = '{{ __("Next") }}';

    function visibleCards() {
        return cards.filter(c => {
            return currentTab === 'all' || c.dataset.status === currentTab;
        });
    }

    function render() {
        const visible = visibleCards();
        const total   = visible.length;
        const pages   = Math.ceil(total / PER_PAGE) || 1;
        if (currentPage > pages) currentPage = 1;

        cards.forEach(c => c.classList.add('hidden'));
        visible.slice((currentPage - 1) * PER_PAGE, currentPage * PER_PAGE)
               .forEach(c => c.classList.remove('hidden'));

        if (emptyEl) emptyEl.classList.toggle('hidden', total > 0);
        renderPagination(pages);
    }

    function renderPagination(pages) {
        if (!pagEl) return;
        if (pages <= 1) { pagEl.innerHTML = ''; return; }
        const cp = currentPage;
        let html = '';

        html += cp === 1
            ? `<span class="cursor-not-allowed rounded-full border border-[#C4C8CE] px-3 py-1.5 opacity-50">‹ ${PREV}</span>`
            : `<button class="pag-btn rounded-full border border-[#C4C8CE] px-3 py-1.5 hover:bg-[#F9FBFC]" data-p="${cp-1}">‹ ${PREV}</button>`;

        for (let p = 1; p <= pages; p++) {
            if (p === 1 || p === pages || Math.abs(p - cp) <= 1) {
                html += p === cp
                    ? `<span class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-white">${p}</span>`
                    : `<button class="pag-btn flex h-7 w-7 items-center justify-center rounded-full border border-[#C4C8CE] hover:bg-[#F9FBFC]" data-p="${p}">${p}</button>`;
            } else if ((p === cp - 2 && cp > 3) || (p === cp + 2 && cp < pages - 2)) {
                html += `<span class="px-1">...</span>`;
            }
        }

        html += cp === pages
            ? `<span class="cursor-not-allowed rounded-full border border-[#C4C8CE] px-4 py-1.5 opacity-50">${NEXT} ›</span>`
            : `<button class="pag-btn rounded-full border border-[#C4C8CE] px-4 py-1.5 hover:bg-[#F9FBFC]" data-p="${cp+1}">${NEXT} ›</button>`;

        pagEl.innerHTML = html;
        pagEl.querySelectorAll('.pag-btn').forEach(btn => {
            btn.addEventListener('click', () => { currentPage = +btn.dataset.p; render(); });
        });
    }

    document.querySelectorAll('.jobs_filter_for_client').forEach(btn => {
        btn.addEventListener('click', () => {
            currentTab = btn.dataset.val;
            currentPage = 1;
            document.querySelectorAll('.jobs_filter_for_client').forEach(b => {
                b.classList.remove('active-job-tab', 'text-primary');
                b.classList.add('text-[#3B4759]');
                const ind = b.querySelector('.job-tab-indicator');
                if (ind) ind.classList.add('hidden');
            });
            btn.classList.add('active-job-tab', 'text-primary');
            btn.classList.remove('text-[#3B4759]');
            const ind = btn.querySelector('.job-tab-indicator');
            if (ind) ind.classList.remove('hidden');
            render();
        });
    });

    render();
})();

function toastr_success_js(msg) {
    toastr.success(msg, "Success!");
    toastr.options = { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: "5000" };
}
function toastr_warning_js(msg) {
    toastr.warning(msg, "Warning!");
    toastr.options = { closeButton: true, progressBar: true, positionClass: "toast-top-right", timeOut: "5000" };
}
</script>
@endsection