@extends('layouts.app')

@section('title', 'Placement')
@section('styles')
    <link rel="shortcut icon" href="{{ asset('/assets/images/favicon.svg') }}" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.css" rel="stylesheet">
@endsection
@section('content')

    <div class="col-md-11 m-auto mobile-space">
        <div class="row justify-content-center align-items-center flex-column">
            <form class="col-md-12 m-auto" id="advance-search-form" action="{{ route('advance-search-post') }}" method="GET">
                {{--  @csrf  --}}
                <div class="col-md-12 text-center addvance-search">
                    <div class="col-md-12 col-sm-8 mb-5 mt-3">
                        <p class="text-white text-18"><b>ADVANCED SEARCH</b></p>
                    </div>
                </div>

                <div
                    class="d-flex col-md-12 align-items-center addvance-search align-items-center justify-content-center mb-3">
                    <div class="col-md-7 col-sm-8 d-flex p-0">
                        <p class="text-white text-18"><b>FILTER BY CATEGORY</b></p>
                    </div>
                    <div class="col-md-5 col-sm-2 d-flex justify-content-end text-center">
                        <!-- Reset Button -->
                        <button style="cursor: pointer;" type="reset"
                            class="text-color border-radius text-18 background-black pt-1 pb-1 align-items-center justify-content-center d-flex col-md-1">
                            <b><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z" />
                                    <path
                                        d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466" />
                                </svg></b>
                        </button>
                    </div>
                </div>

                <div class="btn-group container flex flex-wrap col-md-12 ">
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="voice" name="talent[]" value="10">
                            <label class="btn btn-warning button_select" for="voice"></label>
                            <span class="mx-2 text-white text-13">Voices</span>
                        </div>
                    </div>

                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="runway" name="talent[]" value="3">
                            <label class="btn btn-warning button_select" for="runway"></label>
                            <span class="mx-2 text-white text-13">Runway</span>
                        </div>
                    </div>
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="fitness_swimwear" name="talent[]" value="4">
                            <label class="btn btn-warning button_select" for="fitness_swimwear"></label>
                            <span class="mx-2 text-white text-13 text-nowrap">Fitness & swimwear</span>
                        </div>
                    </div>
                    {{--  <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="hand-talent" name="talent[]" value="5">
                            <label class="btn btn-warning button_select" for="hand-talent"></label>
                            <span class="mx-2 text-white text-13 text-nowrap">Hand Talent</span>
                        </div>
                    </div>  --}}
                    {{--  <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="real_family" name="talent[]" value="6">
                            <label class="btn btn-warning button_select" for="real_family"></label>
                            <span class="mx-2 text-white text-13 text-nowrap">Real Family</span>
                        </div>
                    </div>  --}}
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="singer" name="talent[]" value="7">
                            <label class="btn btn-warning button_select" for="singer"></label>
                            <span class="mx-2 text-white text-13">Singer</span>
                        </div>
                    </div>
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="teleprompter" name="talent[]" value="8">
                            <label class="btn btn-warning button_select" for="teleprompter"></label>
                            <span class="mx-2 text-white text-13">Teleprompter</span>
                        </div>
                    </div>
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="part_model" name="talent[]" value="11">
                            <label class="btn btn-warning button_select" for="part_model"></label>
                            <span class="mx-2 text-white text-13 text-nowrap">Part Models</span>
                        </div>
                    </div>

                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="model" name="talent[]" value="2">
                            <label class="btn btn-warning button_select" for="model"></label>
                            <span class="mx-2 text-white text-13">Models</span>
                        </div>
                    </div>

                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="actor" name="talent[]" value="1">
                            <label class="btn btn-warning button_select" for="actor"></label>
                            <span class="mx-2 text-white text-13">Actors</span>
                        </div>
                    </div>

                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="stunt" name="talent[]" value="12">
                            <label class="btn btn-warning button_select" for="stunt"></label>
                            <span class="mx-2 text-white text-13">Stunt</span>
                        </div>
                    </div>
                    <div class="select mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" id="influencer" name="talent[]" value="9">
                            <label class="btn btn-warning button_select" for="influencer"></label>
                            <span class="mx-2 text-white text-13">Influencers</span>
                        </div>
                    </div>
                </div>



                <div class="d-flex col-md-12 mt-5 form-block1 p-0 flex-wrap mb-5">
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group position-relative mb-4">
                            <input type="text"
                                class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none text-18"
                                name="first_name" id="first_name" placeholder="Talent First Name">
                            <i class="fa fa-user-o"></i>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12">
                        <div class="form-group position-relative mb-4">
                            <input type="text"
                                class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none text-18"
                                name="last_name" id="last_name" placeholder="Talent Last Name">
                            <i class="fa fa-user-o"></i>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12">
                        <label for="race"><strong>Race</strong></label>
                        <select id="race"
                            class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none text-18"
                            name="race">
                            <option value="">Select Option</option>
                            <option value="American Indian">American Indian</option>
                            <option value="Asian">Asian</option>
                            <option value="African American">African American</option>
                            <option value="East Indian">East Indian</option>
                            <option value="Caucasian">Caucasian</option>
                            <option value="Hispanic">Hispanic</option>
                            <option value="Middle Eastern">Middle Eastern</option>
                            <option value="Multi-Cultural">Multi-Cultural</option>
                        </select>
                    </div>
                </div>
                {{--  <div class="col-md-12 mb-3 mt-3 mb-5">
                    <div class="language col-md-12 d-flex full-border align-items-center p-2 flex-wrap">
                        <div class="col-md-6 col-sm-12">
                            <span class="text-white text-18">Bilingual - Fluent Spanish</span>
                        </div>
                        <div class="col-md-6 text-right col-sm-12">
                            <label class="Radio">
                                <input class="Radio-input u-hiddenVisually" value="yes" name="fluent-spanish"
                                    type="radio">
                                <span class="Radio-label text-white">Yes</span>
                            </label>

                            <label class="Radio">
                                <input class="Radio-input u-hiddenVisually" value="no" name="fluent-spanish"
                                    type="radio">
                                <span class="Radio-label text-white">No</span>
                            </label>
                        </div>

                    </div>
                </div>  --}}

                <div class="col-md-12 mb-3 mb-5">
                    <div class="language col-md-12 d-flex full-border align-items-center p-2 flex-wrap">
                        <div class="col-md-6 col-sm-12">
                            <span class="text-white text-18">SAG-AFTRA</span>
                        </div>
                        <div class="col-md-6 text-right col-sm-12">
                            <label class="Radio">
                                <input class="Radio-input u-hiddenVisually" value="yes" name="sag-aftra"
                                    type="radio">
                                <span class="Radio-label text-white">Yes/Active</span>
                            </label>
                            <label class="Radio">
                                <input class="Radio-input u-hiddenVisually" value="eligible" name="sag-aftra"
                                    type="radio">
                                <span class="Radio-label text-white">Eligible</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 mb-3 mt-3 mb-5">
                    <div class="language col-md-12 d-flex full-border align-items-center p-2 flex-wrap">
                        <div class="col-md-6 col-sm-12">
                            <span class="text-white text-18">Age Type</span>
                        </div>
                        <div class="col-md-6 text-right col-sm-12">
                            <label class="Radio">
                                <input class="Radio-input u-hiddenVisually" value="kid" name="age-type"
                                    type="radio">
                                <span class="Radio-label text-white">Kid</span>
                            </label>
                            <label class="Radio is-active">
                                <input class="Radio-input u-hiddenVisually" name="age-type" value="teen"
                                    type="radio">
                                <span class="Radio-label text-white">Teen</span>
                            </label>
                            <label class="Radio is-active">
                                <input class="Radio-input u-hiddenVisually" name="age-type" value="adult"
                                    type="radio">
                                <span class="Radio-label text-white">Adult</span>
                            </label>
                            <label class="Radio is-active">
                                <input class="Radio-input u-hiddenVisually" name="age-type" value="senior"
                                    type="radio">
                                <span class="Radio-label text-white">Senior</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 mb-5">
                    <div class=" d-flex justify-content-start">
                        <p class="text-white text-18"><b>Select Your Gender</b></p>
                    </div>
                    <div class="col-md-12  col-sm-12">
                        <label class="Radio">
                            <input class="Radio-input u-hiddenVisually" value="male" name="gender" type="radio">
                            <span class="Radio-label text-white">Male</span>
                        </label>

                        <label class="Radio">
                            <input class="Radio-input u-hiddenVisually" value="female" name="gender" type="radio">
                            <span class="Radio-label text-white">Female</span>
                        </label>
                    </div>
                </div>

                <div class="col-md-12 eye-color mb-5">
                    <div class="form-group">
                        <label for="hairColor">Select Hair Color</label>
                        <select id="hairColor" name="hair_color"
                            class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none">
                            <option value="" selected disabled></option>
                            @foreach ($talentHairColor as $hairColor)
                                <option value="{{ $hairColor->id }}">{{ ucfirst($hairColor->name) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="eyeColor">Select Eye Color</label>
                        <select id="eyeColor" name="eye_color"
                            class="form-control border-top-0 border-right-0 border-left-0 rounded-0 shadow-none">
                            <option value="" selected disabled></option>
                            @foreach ($talentEyeColor as $eyeColor)
                                <option value="{{ $eyeColor->id }}">{{ ucfirst($eyeColor->name) }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-12 p-0 pb-5 mb-5">
                    <div class="d-flex flex-wrap set-range">
                        <div class="col-md-6 col-sm-12 mob-margin">
                            <p class="text-white text-16">Height</p>
                            <div class="slidecontainer me-3">
                                <input type="hidden" name="set_height_min" id="set_height_min"
                                    value="{{ $heightMin }}">
                                <input type="hidden" name="set_height_max" id="set_height_max"
                                    value="{{ $heightMax }}">
                                <input type="hidden" name="height_min" id="height_min" value="">
                                <input type="hidden" name="height_max" id="height_max" value="">
                                <div id="heightRangeSlider"></div>
                                <div class="d-flex mt-4">
                                    <div class="col-md-6 p-0">
                                        <p class="text-16 text-white">Less Than: <span id="heightMinDisplay"></span></p>
                                    </div>
                                    <div class="col-md-6 text-right p-0">
                                        <p class="text-16 text-white"><span id="heightMaxDisplay"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-12 mob-margin">
                            <p class="text-white text-16">Age</p>
                            <div class="slidecontainer me-3">
                                <input type="hidden" name="set_age_min" id="set_age_min" value="{{ $ageMin }}">
                                <input type="hidden" name="set_age_max" id="set_age_max" value="{{ $ageMax }}">
                                <input type="hidden" name="age_min" id="age_min" value="">
                                <input type="hidden" name="age_max" id="age_max" value="">
                                <div id="ageRangeSlider"></div>
                                <div class="d-flex mt-4">
                                    <div class="col-md-6 p-0">
                                        <p class="text-16 text-white">Less Than : <span id="ageMinDisplay"></span></p>
                                    </div>
                                    <div class="col-md-6 text-right p-0">
                                        <p class="text-16 text-white"><span id="ageMaxDisplay"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <button class="btn btn-block shadow border-0 py-2 col-md-3 m-auto pt-2 pb-2 back-red-button">
                    <a href="##" class="text-white"> <strong class="text-18">SEARCH</strong></a>
                </button>
            </form>
        </div>
    </div>

@endsection


@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.js"></script>
    <script>
        $(document).ready(function() {
            // Listen for changes on the age-type radio buttons
            $("input[name='age-type']").change(function() {
                // Get the selected age-type value
                var selectedAgeType = $("input[name='age-type']:checked").val();

                // Make the AJAX call
                $.ajax({
                    url: "{{ route('advance-search') }}", // Replace with your actual route
                    type: "GET", // Use POST if necessary
                    data: {
                        age_type: selectedAgeType, // Send the selected age type as data
                    },
                    success: function(response) {
                        console.log(response);

                        // Update hair color select options
                        $('#hairColor').empty(); // Clear existing options
                        $('#hairColor').append(
                            '<option value="" selected disabled></option>'
                        ); // Add default option
                        response.talentHairColor.forEach(function(item) {
                            var capitalizedHairColor =
                                item.name.charAt(0).toUpperCase() + item.name.slice(
                                    1); // Use `name` instead of `hair_color`
                            $('#hairColor').append(
                                '<option value="' + item.name + '">' +
                                capitalizedHairColor + '</option>'
                            );
                        });

                        // Update eye color select options
                        $('#eyeColor').empty(); // Clear existing options
                        $('#eyeColor').append(
                            '<option value="" selected disabled></option>'
                        ); // Add default option
                        response.talentEyeColor.forEach(function(item) {
                            var capitalizedEyeColor =
                                item.name.charAt(0).toUpperCase() + item.name.slice(
                                    1); // Use `name` instead of `eye_color`
                            $('#eyeColor').append(
                                '<option value="' + item.name + '">' +
                                capitalizedEyeColor + '</option>'
                            );
                        });

                        // Validate and update sliders
                        var heightMin = parseInt(response.heightMin);
                        var heightMax = parseInt(response.heightMax);
                        var ageMin = parseInt(response.ageMin);
                        var ageMax = parseInt(response.ageMax);

                        // Use fallback values if the parsed values are not valid numbers
                        heightMin = isNaN(heightMin) ? 0 : heightMin;
                        heightMax = isNaN(heightMax) ? 200 : heightMax; // Default max height
                        ageMin = isNaN(ageMin) ? 0 : ageMin;
                        ageMax = isNaN(ageMax) ? 100 : ageMax; // Default max age

                        // Check that min is less than max before updating sliders
                        if (heightMin < heightMax) {
                            heightSlider.noUiSlider.updateOptions({
                                range: {
                                    min: heightMin,
                                    max: heightMax,
                                },
                            });
                            heightSlider.noUiSlider.set([heightMin, heightMax]);
                        }

                        if (ageMin < ageMax) {
                            ageSlider.noUiSlider.updateOptions({
                                range: {
                                    min: ageMin,
                                    max: ageMax,
                                },
                            });
                            ageSlider.noUiSlider.set([ageMin, ageMax]);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle any errors
                        console.error("An error occurred:", error);
                    },
                });
            });

            // Initialize slider values
            var heightMin = parseInt(document.getElementById('set_height_min').value);
            var heightMax = parseInt(document.getElementById('set_height_max').value);
            var ageMin = parseInt(document.getElementById('set_age_min').value);
            var ageMax = parseInt(document.getElementById('set_age_max').value);

            function formatHeight(value) {
                let feet = Math.floor(value); // Get whole feet
                let inches = Math.round((value - feet) * 12); // Convert decimal to inches
                return `${feet} feet ${inches} inches`; // Format as "X feet Y inches"
            }

            // Initialize sliders
            var heightSlider = document.getElementById('heightRangeSlider');
            var heightMin = 2; // Minimum height (2 feet)
            var heightMax = 7;
            noUiSlider.create(heightSlider, {
                start: [heightMin, heightMax],
                connect: true,
                range: {
                    min: heightMin,
                    max: heightMax,
                },
                step: 0.0833,
                tooltips: {
                    to: function(value) {
                        return formatHeight(value);
                    },
                    from: function(value) {
                        return Number(value);
                    }
                }
            });

            heightSlider.noUiSlider.on('update', function(values) {
                document.getElementById('heightMinDisplay').innerText = formatHeight(values[0]);
                document.getElementById('heightMaxDisplay').innerText = formatHeight(values[1]);
                document.getElementById('height_min').value = values[0];
                document.getElementById('height_max').value = values[1];
            });

            var ageSlider = document.getElementById('ageRangeSlider');
            var ageMin = parseInt(document.getElementById('set_age_min').value);
            var ageMax = parseInt(document.getElementById('set_age_max').value);

            // Ensure valid values
            ageMin = isNaN(ageMin) ? 0 : ageMin;
            ageMax = isNaN(ageMax) ? 100 : ageMax;

            if (ageSlider) {
                noUiSlider.create(ageSlider, {
                    start: [ageMin, ageMax],
                    connect: true,
                    range: {
                        min: ageMin,
                        max: ageMax,
                    },
                    tooltips: true,
                    step: 1,
                    format: {
                        to: function(value) {
                            return Math.round(value).toString(); // Convert to whole number string
                        },
                        from: function(value) {
                            return Number(value);
                        }
                    }
                });

                ageSlider.noUiSlider.on('update', function(values) {
                    document.getElementById('ageMinDisplay').innerText = Math.round(values[0]);
                    document.getElementById('ageMaxDisplay').innerText = Math.round(values[1]);
                    document.getElementById('age_min').value = values[0];
                    document.getElementById('age_max').value = values[1];
                });
            } else {
                console.error("Error: #ageRangeSlider not found!");
            }


            // Function to reset sliders
            function resetForm() {
                var form = document.getElementById('advance-search-form');

                // Reset sliders
                heightSlider.noUiSlider.set([heightMin, heightMax]);
                document.getElementById('heightMinDisplay').innerText = formatHeight(heightMin);
                document.getElementById('heightMaxDisplay').innerText = formatHeight(heightMax);
                document.getElementById('height_min').value = heightMin;
                document.getElementById('height_max').value = heightMax;

                ageSlider.noUiSlider.set([ageMin, ageMax]);
                document.getElementById('ageMinDisplay').innerText = ageMin;
                document.getElementById('ageMaxDisplay').innerText = ageMax;
                document.getElementById('age_min').value = ageMin;
                document.getElementById('age_max').value = ageMax;

                form.reset();

                $('#hairColor').val('');
                $('#eyeColor').val('');
                $('#race').val('');
            }

            // Attach reset functionality to the reset button
            $("button[type='reset']").on('click', function(event) {
                event.preventDefault();
                resetForm();
            });
        });
    </script>

@endsection