@extends('layouts.front')

@section('content')
<div class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <div class="position-sticky sticky-top d-none d-md-block">
                    <form class="resource-sidebar gap-4 bg-white d-flex flex-column" action="{{ route('Resources') }}" method="GET">

                        {{-- Search --}}
                        <div class="search">
                            <div class="position-relative">
                                <div class="d-flex srch justify-content-between align-items-center">
                                    <input
                                        type="search"
                                        name="q"
                                        value="{{ request('q') }}"
                                        autocomplete="off"
                                        class="form-control search-input border-0 p-0"
                                        placeholder="Search...">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M17 17L21 21"></path>
                                        <path d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div>
                            {{-- Access --}}
                            <h6>Access</h6>
                            @foreach ([
                            'free' => 'Free',
                            'paid' => 'Paid',
                            'subscribe' => 'Subscribe'
                            ] as $value => $label)
                            <div class="form-check mb-2">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="type[]"
                                    value="{{ $value }}"
                                    id="type-{{ $value }}"
                                    {{ in_array($value, (array) request('type', [])) ? 'checked' : '' }}>
                                <label
                                    class="form-check-label"
                                    for="type-{{ $value }}">
                                    {{ $label }}
                                </label>
                            </div>
                            @endforeach
                        </div>

                        <div>
                            {{-- Categories --}}
                            <h6>Categories</h6>
                            @foreach (($resourceCategories ?? []) as $category)
                            @php
                            $categoryValue = is_object($category)
                            ? ($category->slug ?? $category->id)
                            : $category;

                            $categoryLabel = is_object($category)
                            ? ($category->name ?? $categoryValue)
                            : $category;
                            @endphp

                            <div class="form-check mb-2">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    name="category[]"
                                    value="{{ $categoryValue }}"
                                    id="category-{{ $categoryValue }}"
                                    {{ in_array($categoryValue, (array) request('category', [])) ? 'checked' : '' }}>
                                <label
                                    class="form-check-label"
                                    for="category-{{ $categoryValue }}">
                                    {{ $categoryLabel }}
                                </label>
                            </div>
                            @endforeach
                        </div>

                        {{-- Apply Filters --}}
                        <button
                            type="submit"
                            class="btn-cta w-100 border">
                            Apply filters
                        </button>

                    </form>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="row justify-content-between mb-4 align-items-center smfr">
                    <div class="col-md-4">
                        @php
                        $selectedTypes = (array) request('type', []);
                        $selectedCategories = (array) request('category', []);
                        @endphp

                        @if (!empty($selectedTypes) || !empty($selectedCategories) || request('q'))

                        <div class="active-filters mb-3 mb-md-0">

                            <div class="d-flex align-items-center flex-wrap gap-2">

                                <h6 class="m-0">
                                    Filters:
                                </h6>

                                {{-- Search --}}
                                @if (request('q'))
                                <span class="status">
                                    Search: {{ request('q') }}
                                </span>
                                @endif


                                {{-- Access Types --}}
                                @foreach ($selectedTypes as $type)

                                @php
                                $typeLabels = [
                                'free' => 'Free',
                                'paid' => 'Paid',
                                'subscribe' => 'Subscribe',
                                ];

                                $label = $typeLabels[$type] ?? ucfirst($type);
                                @endphp

                                <span class="status bg-dark text-white">
                                    {{ $label }}
                                </span>

                                @endforeach


                                {{-- Categories --}}
                                @foreach ($selectedCategories as $categorySlug)

                                @php
                                $category = $resourceCategories->firstWhere('slug', $categorySlug);
                                @endphp

                                @if ($category)
                                <span class="status bg-dark text-white">
                                    {{ $category->name }}
                                </span>
                                @endif

                                @endforeach


                                {{-- Clear Filters --}}
                                <a
                                    href="{{ route('Resources') }}"
                                    class="text-decoration-none small ms-2 text-danger">
                                    Clear all
                                </a>

                            </div>

                        </div>

                        @endif
                    </div>
                    <div class="col-6 d-block d-md-none">
                        <div class="d-flex filter-toggle gap-2 align-items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M3 7H6" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M3 17H9" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M18 17L21 17" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M15 7L21 7" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M6 7C6 6.06812 6 5.60218 6.15224 5.23463C6.35523 4.74458 6.74458 4.35523 7.23463 4.15224C7.60218 4 8.06812 4 9 4C9.93188 4 10.3978 4 10.7654 4.15224C11.2554 4.35523 11.6448 4.74458 11.8478 5.23463C12 5.60218 12 6.06812 12 7C12 7.93188 12 8.39782 11.8478 8.76537C11.6448 9.25542 11.2554 9.64477 10.7654 9.84776C10.3978 10 9.93188 10 9 10C8.06812 10 7.60218 10 7.23463 9.84776C6.74458 9.64477 6.35523 9.25542 6.15224 8.76537C6 8.39782 6 7.93188 6 7Z"></path>
                                <path d="M12 17C12 16.0681 12 15.6022 12.1522 15.2346C12.3552 14.7446 12.7446 14.3552 13.2346 14.1522C13.6022 14 14.0681 14 15 14C15.9319 14 16.3978 14 16.7654 14.1522C17.2554 14.3552 17.6448 14.7446 17.8478 15.2346C18 15.6022 18 16.0681 18 17C18 17.9319 18 18.3978 17.8478 18.7654C17.6448 19.2554 17.2554 19.6448 16.7654 19.8478C16.3978 20 15.9319 20 15 20C14.0681 20 13.6022 20 13.2346 19.8478C12.7446 19.6448 12.3552 19.2554 12.1522 18.7654C12 18.3978 12 17.9319 12 17Z"></path>
                            </svg>
                            <span class="fw-semibold">{{ 'Filter' }}</span>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6">
                        <div class="text-end text-md-center">
                            <p class="small text-muted m-0">
                                <span class="fw-semibold">{{ $resources->total() }}</span>
                                results
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-4 d-none d-md-block">
                        <div class="d-flex  gap-4 justify-content-end">
                            <form
                                method="GET"
                                action="{{ route('Resources') }}"
                                id="resource-sort-form"
                                class="d-flex align-items-center gap-2">
                                {{-- Preserve search --}}
                                @if(request('q'))
                                <input
                                    type="hidden"
                                    name="q"
                                    value="{{ request('q') }}">
                                @endif


                                {{-- Preserve access filters --}}
                                @foreach((array) request('type', []) as $type)
                                <input
                                    type="hidden"
                                    name="type[]"
                                    value="{{ $type }}">
                                @endforeach


                                {{-- Preserve category filters --}}
                                @foreach((array) request('category', []) as $category)
                                <input
                                    type="hidden"
                                    name="category[]"
                                    value="{{ $category }}">
                                @endforeach

                                <select
                                    name="sort"
                                    id="resource-sort"
                                    class="form-select form-select-sm">
                                    <option value="#" selected>Sort By</option>
                                    <option
                                        value="latest"
                                        {{ request('sort', 'latest') === 'latest' ? 'selected' : '' }}>
                                        Latest
                                    </option>

                                    <option
                                        value="oldest"
                                        {{ request('sort') === 'oldest' ? 'selected' : '' }}>
                                        Oldest
                                    </option>

                                    <option
                                        value="title_asc"
                                        {{ request('sort') === 'title_asc' ? 'selected' : '' }}>
                                        Alphabetical: A–Z
                                    </option>

                                    <option
                                        value="title_desc"
                                        {{ request('sort') === 'title_desc' ? 'selected' : '' }}>
                                        Alphabetical: Z–A
                                    </option>

                                    <option
                                        value="price_asc"
                                        {{ request('sort') === 'price_asc' ? 'selected' : '' }}>
                                        Price: Lowest to Highest
                                    </option>

                                    <option
                                        value="price_desc"
                                        {{ request('sort') === 'price_desc' ? 'selected' : '' }}>
                                        Price: Highest to Lowest
                                    </option>
                                </select>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row g-3">
                    @yield('data')
                </div>
            </div>
        </div>
    </div>
</div>
<div class="sm-filter-panel position-fixed top-0 start-0 h-100 w-75">
    <form class="resource-sidebar gap-4 bg-white d-flex flex-column" action="{{ route('Resources') }}" method="GET">

        {{-- Search --}}
        <div class="search">
            <div class="position-relative">
                <div class="d-flex srch justify-content-between align-items-center">
                    <input
                        type="search"
                        name="q"
                        value="{{ request('q') }}"
                        autocomplete="off"
                        class="form-control search-input border-0 p-0"
                        placeholder="Search...">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 17L21 21"></path>
                        <path d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div>
            {{-- Access --}}
            <h6>Access</h6>
            @foreach ([
            'free' => 'Free',
            'paid' => 'Paid',
            'subscribe' => 'Subscribe'
            ] as $value => $label)
            <div class="form-check mb-2">
                <input
                    class="form-check-input"
                    type="checkbox"
                    name="type[]"
                    value="{{ $value }}"
                    id="type-{{ $value }}"
                    {{ in_array($value, (array) request('type', [])) ? 'checked' : '' }}>
                <label
                    class="form-check-label"
                    for="type-{{ $value }}">
                    {{ $label }}
                </label>
            </div>
            @endforeach
        </div>

        <div>
            {{-- Categories --}}
            <h6>Categories</h6>
            @foreach (($resourceCategories ?? []) as $category)
            @php
            $categoryValue = is_object($category)
            ? ($category->slug ?? $category->id)
            : $category;

            $categoryLabel = is_object($category)
            ? ($category->name ?? $categoryValue)
            : $category;
            @endphp

            <div class="form-check mb-2">
                <input
                    class="form-check-input"
                    type="checkbox"
                    name="category[]"
                    value="{{ $categoryValue }}"
                    id="category-{{ $categoryValue }}"
                    {{ in_array($categoryValue, (array) request('category', [])) ? 'checked' : '' }}>
                <label
                    class="form-check-label"
                    for="category-{{ $categoryValue }}">
                    {{ $categoryLabel }}
                </label>
            </div>
            @endforeach
        </div>

        {{-- Apply Filters --}}
        <button
            type="submit"
            class="btn-cta w-100 border">
            Apply filters
        </button>

    </form>
</div>

<script>
    document.getElementById('resource-sort').addEventListener('change', function() {
        document.getElementById('resource-sort-form').submit();
    });

    document.addEventListener('DOMContentLoaded', function() {
        const filterToggle = document.querySelector('.filter-toggle');

        if (filterToggle) {
            filterToggle.addEventListener('click', function() {
                document.body.classList.toggle('filter-panel');
            });
        }
    });
</script>
@endsection