@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>
                {{ $subCategory->name }}
            </h1>
        </div>

        <!-- Tabs Navigation -->
        <div class="skill-tabs-nav">
            <button class="skill-tab-btn 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">
            <div class="skill-tab-panel active" id="tab-freelancers">
                <div id="freelancers-results">
                    @include('front.sub_category._freelancers_tab')
                </div>
            </div>
        </div>

    </div>
</section>

<script>
(function() {
    var pageUrl = '{{ url()->current() }}';

    function bindPagination(container) {
        container.querySelectorAll('.pagination a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                var href = this.href;
                container.style.opacity = '0.5';

                var xhr = new XMLHttpRequest();
                xhr.open('GET', href, 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(container);
                        } catch(err) {
                            container.style.opacity = '1';
                        }
                    } else {
                        container.style.opacity = '1';
                    }
                };
                xhr.send();
                history.pushState({}, '', href);
            });
        });
    }

    var freelancersContainer = document.getElementById('freelancers-results');
    if (freelancersContainer) bindPagination(freelancersContainer);
})();
</script>
@endsection