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

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

        <div class="d-flex justify-content-between align-items-center">
            <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('Skills')</span>
                    {{ $skill->name }}
                </h1>
            </div>
            <span class="filters-btn" style="{{ !in_array($tab, ['projects', 'works', 'freelancers']) ? 'visibility:hidden;' : '' }}">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                    width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
                    <g transform="translate(128 128) scale(0.72 0.72)">
                        <g transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)">
                            <path
                                d="M 52.537 80.466 V 45.192 L 84.53 2.999 C 85.464 1.768 84.586 0 83.041 0 H 6.959 C 5.414 0 4.536 1.768 5.47 2.999 l 31.994 42.192 v 43.441 c 0 1.064 1.163 1.719 2.073 1.167 l 11.758 -7.127 C 52.065 82.205 52.537 81.368 52.537 80.466 z"
                                transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
                        </g>
                    </g>
                </svg>
            </span>
        </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 === 'works' ? 'active' : '' }}" data-tab="works">
                <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="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
                </svg>
                @lang('Works')
            </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>

        <div class="search-page-cont">

            <!-- Sidebar: Projects filters — shown only on projects tab -->
            <div id="skill-filters-sidebar" class="{{ $tab !== 'projects' ? 'd-none' : '' }}" style="margin-top: 25px;">
                @include('front.project._filters')
            </div>

            <!-- Sidebar: Freelancers filters — shown only on freelancers tab -->
            <div id="skill-freelancers-filters-sidebar" class="{{ $tab !== 'freelancers' ? 'd-none' : '' }}" style="margin-top: 25px;">
                @include('front.freelancer._filters', [
                    'resetBtnId'    => 'resetFreelancerFilters',
                    'bigStarsClass' => 'fl-big-stars',
                ])
            </div>

            <!-- Sidebar: Works filters — shown only on works tab -->
            <div id="skill-works-filters-sidebar" class="{{ $tab !== 'works' ? 'd-none' : '' }}" style="margin-top: 25px;">
                @include('front.portfolios._works_filters', [
                    'filterSpinnerId'  => 'worksFilterLoadingSpinner',
                    'searchPlaceholder' => 'ابحث في الأعمال...',
                    'resetBtnId'       => 'resetWorksFilters',
                    'skillSelectId'    => 'works_skill_filter',
                ])
            </div>

            <!-- Tab Results (Left) -->
            <div class="search-results-cont">

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

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

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

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

                </div>
            </div>

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

@endsection
@section('js-body')
<script>
/* Blade config for project-filter.js — projects tab on skill page */
window.ProjectFilterConfig = {
    priceSteps    : [50, 100, 300, 500, 800, 1000, 1500, 2000, 3000, 5000, 10000],
    timeLabels    : @json($timesOrdered ?? []),
    timeIds       : @json($timeIds ?? []),
    defaultTimeVal: 0,
    baseUrl       : '{{ url()->current() }}'
};
</script>
<script src="{{ asset('front/js/project-filter.js') }}?v={{ filemtime(public_path('front/js/project-filter.js')) }}"></script>
<script>
(function() {
    var skillPageUrl = '{{ 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);
        });
        var projectsSidebar    = document.getElementById('skill-filters-sidebar');
        var freelancersSidebar = document.getElementById('skill-freelancers-filters-sidebar');
        var worksSidebar       = document.getElementById('skill-works-filters-sidebar');
        if (projectsSidebar)    projectsSidebar.classList.toggle('d-none', tab !== 'projects');
        if (freelancersSidebar) freelancersSidebar.classList.toggle('d-none', tab !== 'freelancers');
        if (worksSidebar)       worksSidebar.classList.toggle('d-none', tab !== 'works');

        var filtersBtn = document.querySelector('.filters-btn');
        if (filtersBtn) {
            filtersBtn.style.visibility = (tab === 'projects' || tab === 'freelancers' || tab === 'works') ? 'visible' : 'hidden';
        }
        currentTab = tab;
    }

    function fetchTab(tab, url) {
        var targetUrl = url || (skillPageUrl + '?tab=' + tab);
        if (targetUrl.indexOf('tab=') === -1) {
            targetUrl += (targetUrl.indexOf('?') !== -1 ? '&' : '?') + 'tab=' + tab;
        }

        var containerId = (tab === 'projects') ? 'results-container' : (tab + '-results');
        var container = document.getElementById(containerId);
        if (!container) return;

        container.style.opacity = '0.5';
        var xhr = new XMLHttpRequest();
        xhr.open('GET', targetUrl, 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;
                if (href.indexOf('tab=') === -1) {
                    href += (href.indexOf('?') !== -1 ? '&' : '?') + 'tab=' + tab;
                }
                fetchTab(tab, href);
                history.pushState({tab: tab}, '', href);
            });
        });
    }

    /* Tab button click */
    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}, '', skillPageUrl + '?tab=' + tab);
            if (tab !== 'projects') {
                fetchTab(tab, skillPageUrl + '?tab=' + tab);
            }
        });
    });

    /* Bind pagination for works & freelancers on initial load */
    ['works', 'freelancers'].forEach(function(tab) {
        var container = document.getElementById(tab + '-results');
        if (!container) return;
        bindPagination(tab, container);
    });

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

{{-- ── Works filters handler (scoped to #skill-works-filters-sidebar) ── --}}
<script>
(function () {
    var skillPageUrl  = '{{ url()->current() }}';
    var wkAbortCtrl   = null;
    var wkDebounce    = null;

    function collectWK() {
        var sb = document.getElementById('skill-works-filters-sidebar');
        if (!sb) return { tab: 'works' };
        var f = { tab: 'works' };

        var s = sb.querySelector('input[name="search"]');
        if (s && s.value.trim()) f.search = s.value.trim();

        var cat = sb.querySelector('input[name="category_id"]:checked');
        if (cat && cat.value) f.category_id = cat.value;

        var skillEl = sb.querySelector('select[name="skill_id"]');
        if (skillEl && skillEl.value) f.skill_id = skillEl.value;

        if (sb.querySelector('input[name="most_liked"]:checked'))  f.most_liked  = 1;
        if (sb.querySelector('input[name="most_viewed"]:checked')) f.most_viewed = 1;

        return f;
    }

    function buildWK(filters) {
        var url = new URL(skillPageUrl, window.location.origin);
        Object.keys(filters).forEach(function (k) {
            if (filters[k] !== '' && filters[k] != null) url.searchParams.set(k, filters[k]);
        });
        return url;
    }

    function fetchWK(url, push) {
        if (push === undefined) push = true;
        if (wkAbortCtrl) wkAbortCtrl.abort();
        wkAbortCtrl = new AbortController();

        var container = document.getElementById('works-results');
        if (!container) return;
        container.style.opacity = '0.5';

        var fetchUrl = (url instanceof URL) ? (url.pathname + url.search) : url;
        fetch(fetchUrl, {
            signal : wkAbortCtrl.signal,
            cache  : 'no-store',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (res) { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); })
        .then(function (data) {
            container.innerHTML = data.html;
            container.style.opacity = '1';
            if (push) window.history.pushState(null, '', (url instanceof URL) ? url.toString() : url);
            bindWKPagination();
        })
        .catch(function (err) {
            if (err.name !== 'AbortError') container.style.opacity = '1';
        });
    }

    function applyWK()          { fetchWK(buildWK(collectWK()), true); }
    function applyWKDebounced() { clearTimeout(wkDebounce); wkDebounce = setTimeout(applyWK, 400); }

    function bindWKPagination() {
        var c = document.getElementById('works-results');
        if (!c) return;
        c.querySelectorAll('.pagination-cont a').forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                fetchWK(this.href, true);
            });
        });
    }

    function initWK() {
        var sb = document.getElementById('skill-works-filters-sidebar');
        if (!sb) return;

        var searchEl = sb.querySelector('input[name="search"]');
        if (searchEl) {
            searchEl.addEventListener('input', applyWKDebounced);
            searchEl.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') { e.preventDefault(); clearTimeout(wkDebounce); applyWK(); }
            });
        }

        sb.querySelectorAll('input[name="category_id"]').forEach(function (cb) {
            cb.addEventListener('change', applyWK);
        });

        var skillEl = sb.querySelector('select[name="skill_id"]');
        if (skillEl) {
            typeof $ !== 'undefined' ? $(skillEl).on('change', applyWK) : skillEl.addEventListener('change', applyWK);
        }

        var sortEls = sb.querySelectorAll('input[name="most_liked"], input[name="most_viewed"]');
        sortEls.forEach(function (el) {
            el.addEventListener('change', function () {
                if (this.checked) {
                    sortEls.forEach(function (other) { if (other !== el) other.checked = false; });
                }
                applyWK();
            });
        });

        var resetBtn = document.getElementById('resetWorksFilters');
        if (resetBtn) {
            resetBtn.addEventListener('click', function () {
                if (searchEl) searchEl.value = '';
                sb.querySelectorAll('input[name="category_id"]').forEach(function (el) { el.checked = false; });
                if (skillEl) {
                    skillEl.value = '';
                    if (typeof $ !== 'undefined') $(skillEl).trigger('change.select2');
                }
                sortEls.forEach(function (el) { el.checked = false; });
                fetchWK(skillPageUrl + '?tab=works', true);
            });
        }

        bindWKPagination();
    }

    document.readyState === 'loading'
        ? document.addEventListener('DOMContentLoaded', initWK)
        : initWK();
}());
</script>

{{-- ── Freelancer filters handler (scoped to #skill-freelancers-filters-sidebar) ── --}}
<script>
(function () {
    var skillPageUrl  = '{{ url()->current() }}';
    var flAbortCtrl   = null;
    var flDebounce    = null;

    function collectFL() {
        var sb = document.getElementById('skill-freelancers-filters-sidebar');
        if (!sb) return { tab: 'freelancers' };
        var f = { tab: 'freelancers' };

        var s = sb.querySelector('input[name="search"]');
        if (s && s.value.trim()) f.search = s.value.trim();

        var cats = Array.prototype.slice.call(sb.querySelectorAll('input[name="category_id[]"]:checked'))
                       .map(function (el) { return el.value; });
        if (cats.length) f.category_id = cats.join(',');

        ['sub_category_id', 'skill_id', 'country_id'].forEach(function (n) {
            var el = sb.querySelector('select[name="' + n + '"]');
            if (el && el.value) f[n] = el.value;
        });

        var r = sb.querySelector('input[name="rating"]:checked');
        if (r) f.rating = r.value;

        ['verified', 'online', 'complete_profile'].forEach(function (n) {
            var el = sb.querySelector('input[name="' + n + '"]:checked');
            if (el) f[n] = el.value;
        });
        return f;
    }

    function buildFL(filters) {
        var url = new URL(skillPageUrl, window.location.origin);
        Object.keys(filters).forEach(function (k) {
            if (filters[k] !== '' && filters[k] != null) url.searchParams.set(k, filters[k]);
        });
        return url;
    }

    function fetchFL(url, push) {
        if (push === undefined) push = true;
        if (flAbortCtrl) flAbortCtrl.abort();
        flAbortCtrl = new AbortController();

        var container = document.getElementById('freelancers-results');
        if (!container) return;
        container.style.opacity = '0.5';

        var fetchUrl = (url instanceof URL) ? (url.pathname + url.search) : url;
        fetch(fetchUrl, {
            signal : flAbortCtrl.signal,
            cache  : 'no-store',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (res) { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); })
        .then(function (data) {
            container.innerHTML = data.html;
            container.style.opacity = '1';
            if (push) window.history.pushState(null, '', (url instanceof URL) ? url.toString() : url);
            bindFLPagination();
        })
        .catch(function (err) {
            if (err.name !== 'AbortError') container.style.opacity = '1';
        });
    }

    function applyFL()          { fetchFL(buildFL(collectFL()), true); }
    function applyFLDebounced() { clearTimeout(flDebounce); flDebounce = setTimeout(applyFL, 400); }

    function bindFLPagination() {
        var c = document.getElementById('freelancers-results');
        if (!c) return;
        c.querySelectorAll('.pagination-cont a').forEach(function (link) {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                fetchFL(this.href, true);
            });
        });
    }

    function initFL() {
        var sb = document.getElementById('skill-freelancers-filters-sidebar');
        if (!sb) return;

        var searchEl = sb.querySelector('input[name="search"]');
        if (searchEl) {
            searchEl.addEventListener('input', applyFLDebounced);
            searchEl.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') { e.preventDefault(); clearTimeout(flDebounce); applyFL(); }
            });
        }

        sb.querySelectorAll('input[name="category_id[]"]').forEach(function (cb) {
            cb.addEventListener('change', applyFL);
        });

        ['sub_category_id', 'skill_id', 'country_id'].forEach(function (n) {
            var el = sb.querySelector('select[name="' + n + '"]');
            if (!el) return;
            typeof $ !== 'undefined' ? $(el).on('change', applyFL) : el.addEventListener('change', applyFL);
        });

        ['verified', 'online', 'complete_profile'].forEach(function (n) {
            var el = sb.querySelector('input[name="' + n + '"]');
            if (el) el.addEventListener('change', applyFL);
        });

        /* Stars — uses fl-big-stars class to avoid conflict with project-filter.js */
        document.addEventListener('click', function (e) {
            var span = e.target.closest('.fl-big-stars span[data-value]');
            if (!span) return;
            var cb = span.previousElementSibling;
            if (!cb || cb.name !== 'rating') return;
            var was = cb.checked;
            sb.querySelectorAll('input[name="rating"]').forEach(function (x) { x.checked = false; });
            if (!was) cb.checked = true;
            var val = cb.checked ? parseInt(cb.value, 10) : 0;
            sb.querySelectorAll('.fl-big-stars span[data-value]').forEach(function (s) {
                s.classList.toggle('active', val > 0 && val >= parseInt(s.dataset.value, 10));
            });
            applyFL();
        });

        var resetBtn = document.getElementById('resetFreelancerFilters');
        if (resetBtn) {
            resetBtn.addEventListener('click', function () {
                if (searchEl) searchEl.value = '';
                sb.querySelectorAll('input[name="category_id[]"], input[name="rating"]').forEach(function (cb) { cb.checked = false; });
                sb.querySelectorAll('.fl-big-stars span[data-value]').forEach(function (s) { s.classList.remove('active'); });
                ['verified', 'online', 'complete_profile'].forEach(function (n) {
                    var el = sb.querySelector('input[name="' + n + '"]');
                    if (el) el.checked = false;
                });
                ['sub_category_id', 'skill_id', 'country_id'].forEach(function (n) {
                    var el = sb.querySelector('select[name="' + n + '"]');
                    if (!el) return;
                    el.value = '';
                    if (typeof $ !== 'undefined') $(el).trigger('change.select2');
                });
                fetchFL(skillPageUrl + '?tab=freelancers', true);
            });
        }

        bindFLPagination();
    }

    document.readyState === 'loading'
        ? document.addEventListener('DOMContentLoaded', initFL)
        : initFL();
}());
</script>
@endsection