@extends('layouts.app')

@section('title', 'Placement')

@section('styles')
    <link rel="shortcut icon" href="{{ secure_asset('assets/images/favicon.svg') }}" />
    <link rel='stylesheet' href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
@endsection

@section('content')
    <div class="col-md-11 m-auto justify-content-between align-items-center pl-2">
        <!-- partial:index.partial.html -->
        <div class="col-md-12 mobile-space">
            <div class="d-flex col-md-12 align-items-center flex-wrap mobile-space mb-3 mt-3 fix-search-box p-0">
                <div class="col-md-1 p-0">
                    <div class="search-container">
                        <input class="search" id="searchleft" type="search" name="search" placeholder="Search" value="{{ request('search') }}">
                        <label class="button1 searchbutton" for="searchleft">
                            <span class="mglass">⚲</span>
                        </label>
                    </div>
                </div>
                @if($title == 'voiceover')
                <div class="col-md-4 ml-5 text-center col-sm-12">
                    <p class="text-white text-30 pb-3 PT-5">All {{ ucfirst($title) }}</p>
                </div>
                @else
                <div class="col-md-9 text-center col-sm-12">
                    <p class="text-white text-30 pb-3 PT-5">{{ ucfirst($title) }}</p>
                </div>
                @endif
                @if($title != 'real-family')
                <div class="col-md-2 col-sm-2 responsiv-btn drp-select d-flex justify-content-end col-sm-12 p-0">
                    <select id="genderFilter" class="form-select text-20 border-black border-radius-7 text-white"
                        aria-label="Gender Filter">
                        <option value="">All</option>
                        <option value="male" {{ request('filter') == 'male' ? 'selected' : '' }}>Male</option>
                        <option value="female" {{ request('filter') == 'female' ? 'selected' : '' }}>Female</option>
                        <option value="kids" {{ request('filter') == 'kids' ? 'selected' : '' }}>Kids</option>
                    </select>
                </div>
                @endif
                @if($title == 'voiceover')
                    <div class="col-md-2 col-sm-2 ml-4 responsiv-btn drp-select d-flex justify-content-end col-sm-12 p-0">
                        <!-- Age Range Filter -->
                        <select id="ageFilter" class="form-select text-20 border-black border-radius-7 text-white"
                            aria-label="Age Range Filter">
                            <option value="">Age Range</option>
                            <option value="20-24" {{ request('age') == '20-24' ? 'selected' : '' }}>20-24</option>
                            <option value="25-29" {{ request('age') == '25-29' ? 'selected' : '' }}>25-29</option>
                            <option value="30-34" {{ request('age') == '30-34' ? 'selected' : '' }}>30-34</option>
                            <option value="35-39" {{ request('age') == '35-39' ? 'selected' : '' }}>35-39</option>
                            <option value="40-44" {{ request('age') == '40-44' ? 'selected' : '' }}>40-44</option>
                            <option value="45-49" {{ request('age') == '45-49' ? 'selected' : '' }}>45-49</option>
                            <option value="50-54" {{ request('age') == '50-54' ? 'selected' : '' }}>50-54</option>
                            <option value="55-59" {{ request('age') == '55-59' ? 'selected' : '' }}>55-59</option>
                            <option value="60-64" {{ request('age') == '60-64' ? 'selected' : '' }}>60-64</option>
                            <option value="65+" {{ request('age') == '65+' ? 'selected' : '' }}>65+</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-2 ml-4 responsiv-btn drp-select d-flex justify-content-end col-sm-12 p-0">
                        <select id="languageFilter" class="form-select text-20 border-black border-radius-7 text-white"
                            aria-label="Languages Filter">
                            <option value="">Languages</option>
                            @foreach($languages as $language)
                                <option value="{{ $language->id }}"
                                    {{ request('language') == $language->id ? 'selected' : '' }}>
                                    {{ $language->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif
            </div>
        </div>

        <!-- partial:index.partial.html -->
        <div class="list-wrapper">
            <div class="list-item">
                @include('talent-list', ['talentPartModels' => $talentPartModels])
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
    <script src="{{ asset('assets/frontend/js/upload-pic.js') }}"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.js'></script>
    <script>
        var slider1 = new Swiper('.slider1', {
            effect: 'slide',
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            scrollbar: {
                el: '.swiper-scrollbar',
            },
        });
    </script>
    <script>
        $(document).ready(function() {
            // Pass the slug directly from the Blade variable to JavaScript
            var currentSlug = "{{ $title }}"; // Use Blade variable to get the slug

            // Handle search input on Enter key press
            $('#searchleft').on('keypress', function(e) {
                if (e.which === 13) { // Enter key
                    var query = $(this).val().trim();
                    var filter = $('#genderFilter').val();
                    var age = $('#ageFilter').val();
                    var language = $('#languageFilter').val();

                    updateUrlAndData(query, filter, age, language);
                }
            });

            // Handle filter changes
            $('#genderFilter, #ageFilter, #languageFilter').on('change', function() {
                var query = $('#searchleft').val().trim();
                var filter = $('#genderFilter').val();
                var age = $('#ageFilter').val();
                var language = $('#languageFilter').val();

                updateUrlAndData(query, filter, age, language);
            });

            function updateUrlAndData(query, filter, age, language) {
                // Build URL with parameters
                var url = new URL("{{ url()->current() }}");

                // Add or remove parameters based on input values
                if (query) {
                    url.searchParams.set("search", query);
                } else {
                    url.searchParams.delete("search");
                }

                if (filter) {
                    url.searchParams.set("filter", filter);
                } else {
                    url.searchParams.delete("filter");
                }

                if (age) {
                    url.searchParams.set("age", age);
                } else {
                    url.searchParams.delete("age");
                }

                if (language) {
                    url.searchParams.set("language", language);
                } else {
                    url.searchParams.delete("language");
                }

                // Update browser URL and load data
                location.href = url.search ? url : url.pathname;
                loadData(query, filter, age, language);
            }

            function loadData(query = '', filter = '', age = '', language = '', page = 1) {
                // Prepare data object, only include non-empty parameters
                var data = { page: page };
                if (query) data.search = query;
                if (filter) data.filter = filter;
                if (age) data.age = age;
                if (language) data.language = language;

                // Use the slug directly in the URL, since it is dynamic
                $.ajax({
                    url: "{{ route('talent-data', ['slug' => $title]) }}", // Pass the slug dynamically
                    method: 'GET',
                    data: data,
                    success: function(response) {
                        $('.list-wrapper').html(response.list); // Update the list wrapper with new data
                        $('#main-pagination').html(response.pagination); // Update the pagination
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX error:", error); // Log any AJAX errors
                    }
                });
            }
        });
    </script>
@endsection