@extends('front.layouts.master-auth')
@section('content')
    <!-- Start Page Content -->
    <section class="page-content">
        <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">@lang('Favourites')</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="search-page-cont">
                <form method="get">
                    <div class="search-filters-cont">
                <div class="search-filters">
                        {{-- Favorite Type Filter --}}
                        <h4 class="filter-title" style="margin-bottom: 15px;">
                            نوع المفضلة
                            <span id="filterLoadingSpinner" style="display:none; margin-inline-start:6px; vertical-align:middle; line-height:1;">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 50 50" aria-hidden="true">
                                    <circle cx="25" cy="25" r="20" fill="none" stroke="#000" stroke-width="4"
                                        stroke-linecap="round" stroke-dasharray="31.4 31.4">
                                        <animateTransform attributeName="transform" type="rotate"
                                            from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/>
                                    </circle>
                                </svg>
                            </span>
                        </h4>
                        <div class="filter-cont">
                            <div class="checkbox">
                                <label>
                                    <input type="radio" name="favorite_type" value="project" 
                                        @if(($favorite_type ?? 'project') == 'project') checked @endif>
                                    <span class="mark">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                             viewBox="0 0 31.345 28.516">
                                            <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                                  transform="rotate(11 -21.661 43.426)" />
                                        </svg>
                                    </span>
                                    @lang('Projects')
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="radio" name="favorite_type" value="user" 
                                        @if(($favorite_type ?? 'project') == 'user') checked @endif>
                                    <span class="mark">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                             viewBox="0 0 31.345 28.516">
                                            <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                                  transform="rotate(11 -21.661 43.426)" />
                                        </svg>
                                    </span>
                                    المستخدمين
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="radio" name="favorite_type" value="work" 
                                        @if(($favorite_type ?? 'project') == 'work') checked @endif>
                                    <span class="mark">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="31.345" height="28.516"
                                             viewBox="0 0 31.345 28.516">
                                            <path data-name="Path 16139" d="m0 10.668 6.506 5.872L18.88 0"
                                                  transform="rotate(11 -21.661 43.426)" />
                                        </svg>
                                    </span>
                                    @lang('Works')
                                </label>
                            </div>
                        </div>

                        {{-- Sort Filter --}}
                        <div id="sort-filter-section">
                            <h4 class="filter-title">
                                الترتيب
                            </h4>
                            <div class="filter-cont">
                                <select class="form-control" name="sort" id="sort-select">
                                    <option value="newest" @if(($sort ?? 'newest') === 'newest') selected @endif>الأحدث أولاً</option>
                                    <option value="oldest" @if(($sort ?? 'newest') === 'oldest') selected @endif>الأقدم أولاً</option>
                                    @if(($favorite_type ?? 'project') === 'project')
                                    <option value="budget_high" @if(($sort ?? 'newest') === 'budget_high') selected @endif>الميزانية: الأعلى</option>
                                    <option value="budget_low" @if(($sort ?? 'newest') === 'budget_low') selected @endif>الميزانية: الأقل</option>
                                    @endif
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="filter-overlay"></div>
                </div>
                </form>
                <div class="search-results-cont">
                    @include('front.user.project.fav_list')
                </div>
            </div>
        </div>
    </section>

    <style>
        .filter-cont .checkbox label{
            margin: 5px 0;
        }
    </style>

    <!-- End Page Content -->

@endsection
@section('js-body')
    <script>
        const loginUrl = '{{ route('view.login') }}';

        (function () {
            'use strict';

            var baseUrl = '{{ route("project.user.favs") }}';

            /* ── helpers ────────────────────────────────────── */
            function showLoading() {
                var spinner = document.getElementById('filterLoadingSpinner');
                if (spinner) { spinner.style.display = 'inline-block'; }
                var c = document.querySelector('.search-results-cont');
                if (c) { c.style.pointerEvents = 'none'; }
            }
            function hideLoading() {
                var spinner = document.getElementById('filterLoadingSpinner');
                if (spinner) { spinner.style.display = 'none'; }
                var c = document.querySelector('.search-results-cont');
                if (c) { c.style.pointerEvents = 'auto'; }
            }

            /* ── collect current filter params from the sidebar DOM ── */
            function collectParams() {
                var p = {};

                var typeEl = document.querySelector('input[name="favorite_type"]:checked');
                if (typeEl) { p.favorite_type = typeEl.value; }

                var sortEl = document.getElementById('sort-select');
                if (sortEl && sortEl.value && sortEl.value !== 'newest') {
                    p.sort = sortEl.value;
                }

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

                return p;
            }

            /* ── build a URL from a params object ─────────────────── */
            function buildURL(params, page) {
                var url = new URL(baseUrl, window.location.origin);
                Object.keys(params).forEach(function (k) {
                    if (params[k] !== '' && params[k] != null) {
                        url.searchParams.set(k, params[k]);
                    }
                });
                if (page && page > 1) { url.searchParams.set('page', page); }
                return url;
            }

            /* ── core AJAX fetch ───────────────────────────────────── */
            var abortCtrl = null;
            function fetchResults(url, pushHistory) {
                if (abortCtrl) { abortCtrl.abort(); }
                abortCtrl = new AbortController();
                showLoading();

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

                fetch(fetchUrl, {
                    signal : abortCtrl.signal,
                    cache  : 'no-store',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function (r) {
                    if (!r.ok) { throw new Error('HTTP ' + r.status); }
                    return r.json();
                })
                .then(function (data) {
                    document.querySelector('.search-results-cont').innerHTML = data.html;
                    if (pushHistory !== false) {
                        window.history.pushState(null, '', (url instanceof URL) ? url.toString() : url);
                    }
                    hideLoading();
                })
                .catch(function (err) {
                    if (err.name === 'AbortError') { return; }
                    console.error('[FavFilter]', err);
                    hideLoading();
                });
            }

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

            /* ── update sort options depending on type ─────────── */
            var projectSortOptions = [
                { value: 'newest',      label: 'الأحدث أولاً' },
                { value: 'oldest',      label: 'الأقدم أولاً' },
                { value: 'budget_high', label: 'الميزانية: الأعلى' },
                { value: 'budget_low',  label: 'الميزانية: الأقل' }
            ];
            var basicSortOptions = [
                { value: 'newest', label: 'الأحدث أولاً' },
                { value: 'oldest', label: 'الأقدم أولاً' }
            ];

            function syncSortOptions(type) {
                var sel = document.getElementById('sort-select');
                if (!sel) { return; }

                var options = (type === 'project') ? projectSortOptions : basicSortOptions;
                var currentVal = sel.value;

                /* rebuild options list */
                sel.innerHTML = '';
                options.forEach(function (o) {
                    var opt = document.createElement('option');
                    opt.value = o.value;
                    opt.textContent = o.label;
                    sel.appendChild(opt);
                });

                /* restore value if still valid, otherwise fall back to newest */
                var stillValid = options.some(function (o) { return o.value === currentVal; });
                sel.value = stillValid ? currentVal : 'newest';

                /* notify select2 if active */
                if (window.jQuery && jQuery.fn.select2) {
                    jQuery(sel).trigger('change.select2');
                }
            }

            /* ── events ─────────────────────────────────────────── */
            document.addEventListener('change', function (e) {
                /* favorite type radio */
                if (e.target && e.target.name === 'favorite_type') {
                    syncSortOptions(e.target.value);
                    applyFilters();
                }
                /* sort select (native change — fires when select2 is NOT active) */
                if (e.target && e.target.id === 'sort-select') {
                    applyFilters();
                }
                /* category checkboxes */
                if (e.target && e.target.name === 'category_id[]') {
                    applyFilters();
                }
            });

            /* pagination — event delegation on results container */
            document.addEventListener('click', function (e) {
                var paginationLink = e.target.closest('.pagination-cont a');
                if (paginationLink) {
                    e.preventDefault();
                    fetchResults(paginationLink.href, true);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                    return;
                }

                /* mobile filter toggle */
                if (e.target.closest('.filters-btn')) {
                    document.querySelector('.search-filters').classList.toggle('active');
                    document.querySelector('.filter-overlay').classList.toggle('active');
                    return;
                }
                if (e.target.closest('.filter-overlay')) {
                    document.querySelector('.search-filters').classList.remove('active');
                    document.querySelector('.filter-overlay').classList.remove('active');
                    return;
                }

                /* ── Remove-from-favorites button ──────────────── */
                var btn = e.target.closest('.addToFav');
                if (!btn || btn.disabled) { return; }
                e.preventDefault();

                var favUrl = btn.dataset.favUrl;
                if (!favUrl) { return; }

                // Find the closest card regardless of type
                var card = btn.closest('.project-item, .freelancer-item, .work-item');

                btn.disabled      = true;
                btn.style.opacity = '0.5';

                fetch(favUrl, {
                    cache  : 'no-store',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                })
                .then(function (r) {
                    if (!r.ok) {
                        var err = new Error('HTTP ' + r.status);
                        err.status = r.status;
                        throw err;
                    }
                    return r.json();
                })
                .then(function (data) {
                    var wasRemoved = (data.action === 'removed') ||
                                     (data.is_favorited === false && (data.success || data.status === 'success'));

                    if (wasRemoved && card) {
                        // Fade out and remove the card
                        card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                        card.style.opacity    = '0';
                        card.style.transform  = 'scale(0.95)';
                        setTimeout(function () {
                            card.remove();
                            // If no more items, reload to show empty state
                            var remaining = document.querySelectorAll('.project-item, .freelancer-item, .work-item');
                            if (remaining.length === 0) { location.reload(); }
                        }, 320);
                    } else {
                        btn.classList.toggle('active');
                        btn.disabled      = false;
                        btn.style.opacity = '1';
                    }
                })
                .catch(function (err) {
                    btn.disabled      = false;
                    btn.style.opacity = '1';
                    if (err.status === 401 || err.status === 403) {
                        window.location.href = loginUrl;
                    }
                });
            });

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

            hideLoading();

            /* ── select2 fires jQuery events, not native DOM events ── */
            /* so we attach a jQuery handler for the sort select separately */
            if (window.jQuery) {
                jQuery(document).on('change', '#sort-select', function () {
                    applyFilters();
                });
            }
        }());
    </script>
@endsection