@extends('front.layouts.master-auth')

@section('content')
<section class="page-content skill-page">
    <div class="container">

        <div class="page-title-cont">
            @if(isset($breadcrumbs) && is_array($breadcrumbs) && count($breadcrumbs) > 0)
                <x-breadcrumb :items="$breadcrumbs" />
            @endif
            <h1 class="page-title">
                <span class="skill-page-badge">@lang('Categories')</span>
                {{ $category->name }}
            </h1>
        </div>

        <!-- Tabs Navigation -->
        <div class="skill-tabs-nav">
            <button class="skill-tab-btn {{ $tab === 'projects' ? 'active' : '' }}" data-tab="projects">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
                </svg>
                @lang('Projects')
            </button>
            <button class="skill-tab-btn {{ $tab === 'freelancers' ? 'active' : '' }}" data-tab="freelancers">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                </svg>
                @lang('Freelancers')
            </button>
        </div>

        <!-- Tab Content -->
        <div class="skill-tabs-content">

            <!-- Projects Tab -->
            <div class="skill-tab-panel {{ $tab === 'projects' ? 'active' : '' }}" id="tab-projects">
                <div id="projects-results">
                    @include('front.category._projects_tab')
                </div>
            </div>

            <!-- Freelancers Tab -->
            <div class="skill-tab-panel {{ $tab === 'freelancers' ? 'active' : '' }}" id="tab-freelancers">
                <div id="freelancers-results">
                    @include('front.category._freelancers_tab')
                </div>
            </div>

        </div>
    </div>
</section>

<script>
(function() {
    var categoryPageUrl = '{{ url()->current() }}';
    var currentTab = '{{ $tab }}';

    function showTab(tab) {
        document.querySelectorAll('.skill-tab-btn').forEach(function(btn) {
            btn.classList.toggle('active', btn.getAttribute('data-tab') === tab);
        });
        document.querySelectorAll('.skill-tab-panel').forEach(function(panel) {
            panel.classList.toggle('active', panel.id === 'tab-' + tab);
        });
        currentTab = tab;
    }

    function fetchTab(tab, url) {
        var targetUrl = url || (categoryPageUrl + '?tab=' + tab);
        var container = document.getElementById(tab + '-results');
        if (!container) return;

        container.style.opacity = '0.5';

        var xhr = new XMLHttpRequest();
        xhr.open('GET', targetUrl + (targetUrl.indexOf('tab=') !== -1 ? '' : (targetUrl.indexOf('?') !== -1 ? '&' : '?') + 'tab=' + tab), true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.onload = function() {
            if (xhr.status === 200) {
                try {
                    var data = JSON.parse(xhr.responseText);
                    container.innerHTML = data.html;
                    container.style.opacity = '1';
                    bindPagination(tab, container);
                } catch(err) {
                    container.style.opacity = '1';
                }
            } else {
                container.style.opacity = '1';
            }
        };
        xhr.send();
    }

    function bindPagination(tab, container) {
        container.querySelectorAll('.pagination a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var href = this.href;
                fetchTab(tab, href);
                history.pushState({tab: tab}, '', href + (href.indexOf('tab=') === -1 ? (href.indexOf('?') !== -1 ? '&' : '?') + 'tab=' + tab : ''));
            });
        });
    }

    document.querySelectorAll('.skill-tab-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var tab = this.getAttribute('data-tab');
            if (tab === currentTab) return;
            showTab(tab);
            history.pushState({tab: tab}, '', categoryPageUrl + '?tab=' + tab);
        });
    });

    ['projects', 'freelancers'].forEach(function(tab) {
        var container = document.getElementById(tab + '-results');
        if (container) bindPagination(tab, container);
    });

    window.addEventListener('popstate', function(e) {
        if (e.state && e.state.tab) {
            showTab(e.state.tab);
        }
    });
})();
</script>
@endsection