@extends('front.layouts.master-auth')
@section('content')
<!-- Start Page Content -->
<section class="page-content userPage">
    <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">
                    أعمال المستقلين
                </h1>
            </div>
            <span class="filters-btn">
                <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>
        <div class="user-page-cont">
                @include('front.portfolios._works_filters', [
                    'filterSpinnerId'  => 'filterLoadingSpinner',
                    'searchPlaceholder' => 'ابحث في معرض الأعمال...',
                    'resetBtnId'       => 'resetFilters',
                    'skillSelectId'    => 'skill_filter',
                ])
            
            <div class="user-info-cont search-results-cont">
                <div id="results-container">
                    @include('front.user._user_works_content', ['items' => $items])
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .filter-loading-overlay{ bottom: 20% !important; }
</style>
<!-- End Page Content -->
@endsection

@section('js-body')
<script>
(function () {
    'use strict';

    var baseUrl        = '{{ route("portfolios.index") }}';
    var currentAbortCtrl = null;
    var debounceTimer    = null;

    /* ── Loading helpers (same pattern as project-filter.js) ── */

    function showLoading() {
        var spinner = document.getElementById('pageLoadingSpinner');
        if (spinner) { spinner.style.display = 'inline-block'; }
        var filterSpinner = document.getElementById('filterLoadingSpinner');
        if (filterSpinner) { filterSpinner.style.display = 'inline-block'; }
    }

    function hideLoading() {
        var spinner = document.getElementById('pageLoadingSpinner');
        if (spinner) { spinner.style.display = 'none'; }
        var filterSpinner = document.getElementById('filterLoadingSpinner');
        if (filterSpinner) { filterSpinner.style.display = 'none'; }
    }

    /* ── Collect active filter values ── */

    function collectFilters() {
        var f = {};

        var searchEl = document.querySelector('input[name="search"]');
        if (searchEl && searchEl.value.trim()) { f.search = searchEl.value.trim(); }

        var catEl = document.querySelector('input[name="category_id"]:checked');
        if (catEl && catEl.value) { f.category_id = catEl.value; }

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

        var wtEl = document.querySelector('input[name="work_type"]:checked');
        if (wtEl && wtEl.value) { f.work_type = wtEl.value; }

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

        return f;
    }

    /* ── Build URL from filters object ── */

    function buildURL(filters) {
        var url = new URL(baseUrl, window.location.origin);
        Object.keys(filters).forEach(function (key) {
            var val = filters[key];
            if (val !== '' && val !== null && val !== undefined) {
                url.searchParams.set(key, val);
            }
        });
        return url;
    }

    /* ── Sync results-count badge in filter sidebar ── */

    function syncResultsCount(html) {
        var tmp = document.createElement('div');
        tmp.innerHTML = html;
        var newBadge = tmp.querySelector('.results-count');
        var curBadge = document.querySelector('.filter-title .results-count');
        if (newBadge && curBadge) { curBadge.textContent = newBadge.textContent; }
    }

    /* ── Core AJAX fetch with request cancellation ── */

    function fetchResults(url, pushHistory) {
        if (pushHistory === undefined) { pushHistory = true; }

        if (currentAbortCtrl) { currentAbortCtrl.abort(); }
        currentAbortCtrl = new AbortController();

        showLoading();

        var fetchUrl = (url instanceof URL) ? (url.pathname + url.search) : url;

        fetch(fetchUrl, {
            signal : currentAbortCtrl.signal,
            cache  : 'no-store',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function (response) {
            if (!response.ok) { throw new Error('HTTP ' + response.status); }
            return response.json();
        })
        .then(function (data) {
            var container = document.getElementById('results-container');
            container.innerHTML = data.html;
            syncResultsCount(data.html);

            if (pushHistory) {
                var histUrl = (url instanceof URL) ? url.toString() : url;
                window.history.pushState(null, '', histUrl);
            }

            hideLoading();
        })
        .catch(function (err) {
            if (err.name === 'AbortError') { return; }
            console.error('[PortfolioFilter] fetch error:', err);
            hideLoading();
        });
    }

    /* ── Debounce helper ── */

    function debounce(fn, delay) {
        return function () {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(fn, delay);
        };
    }

    function applyFilters() {
        fetchResults(buildURL(collectFilters()), true);
    }

    var applyFiltersDebounced = debounce(applyFilters, 400);

    /* ── Restore DOM filters from current URL params ── */

    function restoreFiltersFromURL() {
        var params = new URLSearchParams(window.location.search);

        var searchEl = document.querySelector('input[name="search"]');
        if (searchEl) { searchEl.value = params.get('search') || ''; }

        var catId = params.get('category_id');
        document.querySelectorAll('input[name="category_id"]').forEach(function (el) {
            el.checked = catId ? (el.value === catId) : (el.value === '');
        });

        var skillEl = document.querySelector('select[name="skill_id"]');
        if (skillEl) { skillEl.value = params.get('skill_id') || ''; }

        var wtId = params.get('work_type') || '';
        document.querySelectorAll('input[name="work_type"]').forEach(function (el) {
            el.checked = (el.value === wtId);
        });

        var mostLikedEl  = document.querySelector('input[name="most_liked"]');
        var mostViewedEl = document.querySelector('input[name="most_viewed"]');
        if (mostLikedEl)  { mostLikedEl.checked  = !!params.get('most_liked'); }
        if (mostViewedEl) { mostViewedEl.checked = !!params.get('most_viewed'); }
    }

    /* ── Initialization ── */

    function init() {
        /* Search */
        var searchInput = document.querySelector('input[name="search"]');
        if (searchInput) {
            searchInput.addEventListener('input', applyFiltersDebounced);
            searchInput.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    clearTimeout(debounceTimer);
                    applyFilters();
                }
            });
        }

        /* Category radios */
        document.querySelectorAll('input[name="category_id"]').forEach(function (el) {
            el.addEventListener('change', applyFilters);
        });

        /* Work type radios */
        document.querySelectorAll('input[name="work_type"]').forEach(function (el) {
            el.addEventListener('change', applyFilters);
        });

        /* Skill select (supports Select2) */
        var skillEl = document.querySelector('select[name="skill_id"]');
        if (skillEl) {
            if (typeof $ !== 'undefined') {
                $(skillEl).on('change', applyFilters);
            } else {
                skillEl.addEventListener('change', applyFilters);
            }
        }

        /* Sort checkboxes (most_liked / most_viewed — single-select behaviour) */
        var sortEls = document.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; }
                    });
                }
                applyFilters();
            });
        });

        /* Pagination — event delegation on results container */
        document.getElementById('results-container').addEventListener('click', function (e) {
            var link = e.target.closest('.pagination-cont a');
            if (!link) { return; }
            e.preventDefault();
            fetchResults(link.href, true);
        });

        /* Browser back / forward */
        window.addEventListener('popstate', function () {
            restoreFiltersFromURL();
            fetchResults(window.location.href, false);
        });

        /* Reset filters */
        var resetBtn = document.getElementById('resetFilters');
        if (resetBtn) {
            resetBtn.addEventListener('click', function () {
                if (searchInput) { searchInput.value = ''; }
                document.querySelectorAll('input[name="category_id"]').forEach(function (el) {
                    el.checked = (el.value === '');
                });
                var skill = document.querySelector('select[name="skill_id"]');
                if (skill) {
                    skill.value = '';
                    if (typeof $ !== 'undefined') { $(skill).trigger('change.select2'); }
                }
                document.querySelectorAll('input[name="work_type"]').forEach(function (el) {
                    el.checked = (el.value === '');
                });
                sortEls.forEach(function (el) { el.checked = false; });
                fetchResults(baseUrl, true);
            });
        }

        /* Mobile filters toggle */
        var filtersBtn    = document.querySelector('.filters-btn');
        var filterOverlay = document.querySelector('.filter-overlay');
        var searchFilters = document.querySelector('.search-filters');
        if (filtersBtn) {
            filtersBtn.addEventListener('click', function () {
                if (searchFilters) { searchFilters.classList.toggle('active'); }
                if (filterOverlay) { filterOverlay.classList.toggle('active'); }
            });
        }
        if (filterOverlay) {
            filterOverlay.addEventListener('click', function () {
                if (searchFilters) { searchFilters.classList.remove('active'); }
                filterOverlay.classList.remove('active');
            });
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

}());
</script>
@endsection