@section('page-title', __('language.downloads'))
@extends('site.master')
@section('main-content')
    <section class="af-hdr ">
        <div class="header-decoration position-absolute">
            <img src="{{ asset('site/img/shape_nate.svg') }}" alt="">
        </div>
        <div class="container position-relative" style="z-index: 9">
            <div class="row">
                <div class="col-sm-12">
                    <h1 class=" text-uppercase text-white fnt-fam-ser fs-2 fwc-700">




                        @lang('language.downloads')</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="list-inline-item"><a class="text-white" href="{{ URL::to('/') }}"
                                    class="text-decoration-none">@lang('language.home')</a>
                            </li>

                            <li class="list-inline-item current text-danger">
                                @lang('language.downloads') </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <div class="decoration-pattern pattern-one position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_1.svg') }}" alt="">
        </div>
        <div class="decoration-pattern pattern-two position-absolute">
            <img src="{{ asset('site/img/breadcrumb_shape_pattern_2.svg') }}" alt="">
        </div>
    </section>
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <ul class="list-unstyled d-flex flex-row flex-lg-column gap-2">
                        @foreach ($categories as $item)
                            <li>
                                <a href="javascript:void(0)" class="text-decoration-none filter-item py-2 w-100 text-dark"
                                    data-filter="{{ $item->slug }}">
                                    <span class="filter-icons me-3"><i class="bi-arrow-right"></i></span>
                                    {{ $item->title }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-lg-9">
                    <div class="d-flex gap-3 flex-column" id="filter-results">
                        @foreach ($details as $result)
                            <div class="shadow p-3 d-none align-items-center gap-3 position-relative w-100 result-item"
                                data-info="{{ $result['categories']->first()->slug ?? '' }}">
                                <div class="se-image rounded-3" style="width: 40px; height: 40px;">
                                    @if ($result['image'])
                                        <img src="{{ asset($result['image']) }}" alt="{{ $result['title'] }}"
                                            style="object-fit: cover; height: 100%; width: 100%;">
                                    @else
                                        <img src="{{ asset('site/img/default.png') }}" alt="No Image"
                                            style="object-fit: cover; height: 100%; width: 100%;">
                                    @endif
                                </div>
                                <div class="d-flex align-items-center justify-content-between flex-grow-1">
                                    <h3 class="text-capitalize fs-6 text-dark w-75 mb-0">
                                        {{ $result['title'] }}
                                    </h3>
                                    @if ($result['file'])
                                        <i class="bi-download"></i>
                                    @endif
                                </div>
                                @if ($result['file'])
                                    <a href="{{ route('post.detailwithcategory', ['postcategory' => $result['categories']->first()->slug, 'slug' => $result['slug']]) }}" class="stretched-link"
                                        title="{{ $result['title'] }}"></a>
                                @endif

                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection
@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Get the first filter item and use its filter value to show related results on page load
            const filterItems = document.querySelectorAll('.filter-item');

            if (filterItems.length > 0) {
                const firstFilter = filterItems[0].dataset.filter; // Get the filter value of the first category
                const resultItems = document.querySelectorAll('.result-item');

                // Set the first filter item as active
                filterItems[0].classList.add('active'); // Add active class to the first filter

                let hasMatch = false; // Flag to check if there's any matching item

                resultItems.forEach(item => {
                    // Check if the current item's data-info matches the filter
                    if (item.dataset.info === firstFilter) {
                        item.classList.remove('d-none'); // Show matching results
                        item.classList.add('d-flex'); // Add the d-flex class
                        hasMatch = true; // Set the flag to true
                    } else {
                        item.classList.remove('d-flex'); // Remove the d-flex class
                        item.classList.add('d-none'); // Hide non-matching results
                    }
                });

                // If no items matched the first filter, hide all items
                if (!hasMatch) {
                    resultItems.forEach(item => {
                        item.classList.remove('d-flex'); // Remove d-flex class
                        item.classList.add('d-none'); // Add d-none class to hide
                    });
                }
            }

            // Add click event listeners to all filter items
            filterItems.forEach(item => {
                item.addEventListener('click', function() {
                    filterItems.forEach(i => i.classList.remove(
                        'active')); // Remove active class from all
                    this.classList.add('active'); // Add active class to the clicked filter

                    const filter = this.dataset.filter;
                    filterResults(filter);
                });
            });

            // Function to filter the results based on the selected filter
            function filterResults(filter) {
                const resultItems = document.querySelectorAll('.result-item');
                resultItems.forEach(item => {
                    // Check if the current item's data-info matches the filter
                    if (item.dataset.info === filter) {
                        item.classList.remove('d-none'); // Show matching results
                        item.classList.add('d-flex'); // Add the d-flex class
                    } else {
                        item.classList.remove('d-flex'); // Remove the d-flex class
                        item.classList.add('d-none'); // Hide non-matching results
                    }
                });
            }
        });
    </script>
@endpush