@extends('includes.layout') <!-- Extend the layout -->

@section('content')

<!-- Define the content section -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="bg-main-body">
    <div class="container-xl">
        <div class="row py-4">
            <div class="col-md-12 mb-4">
                
              <img src="https://res.cloudinary.com/urbanclap/image/upload/t_high_res_template/images/growth/luminosity/1698216892976-9623f5.jpeg" class="img-fluid rounded">
            </div>

            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <div class="bg-white rounded">
                            <div class="border-bottom p-3">
                                <a id="clear-filters" class="tx-12  mt-2 float-end text-decoration-none cursor-pointer">Clear Filters</a>
                                <h6 class="pt-2 pb-2 ">Filter</h6>

                                @foreach ($services as $service)
                                @if (strtolower($service->name) !== 'other')
                                <input type="checkbox" id="btn{{$service->id}}" data-service-id="{{$service->id}}" class="btn-check" autocomplete="off">
                                <label class="btn btn-outline-theme mb-2" for="btn{{$service->id}}">{{ ucwords($service->name) }}</label>
                                @endif
                                @endforeach
                            </div>

                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2">Gender</h6>
                                <div class="form-check ps-0">
                                    <input class="form-check-input gender-filter float-end" type="checkbox" value="male" id="male" name="gender">
                                    <label class="form-check-label text-start tx-14" for="male"> Male </label>
                                </div>
                                <div class="form-check ps-0">
                                    <input class="form-check-input gender-filter float-end" type="checkbox" value="female" id="female" name="gender">
                                    <label class="form-check-label text-start tx-14" for="female"> Female </label>
                                </div>
                            </div>
                            <div class="border-bottom  p-3">
                                <h6 class="pt-2 pb-2 ">Rating</h6>
                                <div class="stars">
                                    <form action="">
                                        <input class="star star-5" id="star-5" type="radio" name="leftstar" value="5" />
                                        <label class="star star-5" for="star-5"></label>
                                        <input class="star star-4" id="star-4" type="radio" name="leftstar" value="4" />
                                        <label class="star star-4" for="star-4"></label>
                                        <input class="star star-3" id="star-3" type="radio" name="leftstar" value="3" />
                                        <label class="star star-3" for="star-3"></label>
                                        <input class="star star-2" id="star-2" type="radio" name="leftstar" value="2" />
                                        <label class="star star-2" for="star-2"></label>
                                        <input class="star star-1" id="star-1" type="radio" name="leftstar" value="1" />
                                        <label class="star star-1" for="star-1"></label>
                                    </form>
                                </div>
                            </div>

                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2">Price Range</h6>
                                <div class="input-group border-0 mb-3">
                                    <input type="number" value="100" class="form-control bg-light tx-14" id="min-price" placeholder="Min Price" aria-label="Min Price">
                                    <span class="input-group-text bg-white">-</span>
                                    <input type="number" value="7000" class="form-control bg-light tx-14" id="max-price" placeholder="Max Price" aria-label="Max Price">
                                </div>
                            </div>

                            <div class="border-bottom p-3">
                                <h6 class="pt-2 pb-2">Discount</h6>
                                <div class="form-check ps-0">
                                    <input class="form-check-input discount-filter float-end" type="checkbox" value="10" id="10" name="discount[]">
                                    <label class="form-check-label text-start tx-14" for="10"> Up to 10% off</label>
                                </div>
                                <div class="form-check ps-0">
                                    <input class="form-check-input discount-filter float-end" type="checkbox" value="20" id="20" name="discount[]">
                                    <label class="form-check-label text-start tx-14" for="20"> Up to 20% off</label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="row" id="filtered-results">
                            <!-- card-one start here -->
                            <!-- data is moved to paginationajax blade for pagination with filter  -->
                           @include('paginationajax')
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="bg-white p-3 ">
                    <section class="HoverVideo">
                        <div class="HoverVideo__wrapper ">
                            @php
                            $iteration = 0;
                            @endphp


                            @foreach ($saloonvideos as $key=> $saloonvideo)

                            <div class="HoverVideo__videoBox mb-3 rounded position-relative">
                                <video class="video" loop preload="yes" muted>
                                    <source src="{{asset('/saloonvideos/'.$saloonvideo->image_file)}}" type="video/mp4">
                                </video>
                                <span class="position-absolute bottom-0 w-100 end-0 p-2 shadow-1">
                                    <h6 class="text-theme text-truncate mb-0">{{ucwords($saloonvideo->user->name)}}</h6>
                                    <p class="tx-11 text-white text-truncate  mb-0">{{$saloonvideo->user->address}} , {{$saloonvideo->user->city}}</p>
                                </span>
                            </div>

                            @php
                            $iteration++;
                            if ($iteration == 4) break;
                            @endphp

                            @endforeach
                        </div>
                        <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {

         //Pagination with ajax filter
    $('body').on('click', '.pagination a', function(event){
        event.preventDefault();
        var page = $(this).attr('href').split('page=')[1];
        $('#hidden_page').val(page);
        updateFilters(page);
    });
        
        function updateFilters(page='') {
            var selectedServices = [];
            var selectedGender = [];

            $('input.gender-filter:checked').each(function() {
                selectedGender.push($(this).val());
            });
            var selectedRating = $('input[name="leftstar"]:checked').val();
            var location = $('input[name="q"]').val();

            var minPrice = $('#min-price').val();
            var maxPrice = $('#max-price').val();
            var selectedDiscount = []; // Use an array to store selected discounts
            $('input.discount-filter:checked').each(function() {
                selectedDiscount.push($(this).val());
            });
            $('.btn-check:checked').each(function() {
                selectedServices.push($(this).data('service-id'));
            });
            console.log("minprice =", minPrice);
            console.log("maxprice =", maxPrice);
            console.log("location =", location);

            console.log(selectedServices, selectedGender, selectedRating, selectedDiscount);
            var url = "{{ route('filter') }}";
            // Check if at least one filter is selected or price range is specified
            if (selectedServices.length > 0 || selectedGender.length > 0 || selectedRating || (minPrice && maxPrice) || selectedDiscount.length > 0) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                // Send an AJAX request with selected filters and price range
                $.ajax({
                    url: url+"?page="+page,
                    method: 'POST',
                    data: {
                        selectedServices: selectedServices,
                        selectedGender: selectedGender,
                        selectedRating: selectedRating,
                        minPrice: minPrice,
                        maxPrice: maxPrice,
                        selectedDiscount: selectedDiscount,
                        location: location // Include selected discounts
                    },
                    success: function(data) {
                        $('#filtered-results').html('');
                        $('#filtered-results').html(data);
                    },
                    error: function(error) {
                        console.error('AJAX request error:', error);
                    }
                });
            }
            return false;
        }
        $('.btn-check, input.gender-filter, input[name="leftstar"], input.discount-filter, #min-price, #max-price, input[name="q"]').on('change keyup', function() {
            updateFilters();
        });

    });

    $(document).ready(function() {
        $('#clear-filters').on('click', function() {
            window.location.reload();
        });
    });

    // Function to generate star ratings HTML based on the average rating
    function generateStarRatingsHtml(averageRating, saloonId) {
        let starHtml = '';

        for (let i = 5; i > 0; i--) {
            let isChecked = (i == averageRating) ? 'checked' : '';


            starHtml += `
            <input class="star star-${i}" id="star-${i}-${saloonId}" type="radio" name="star" ${isChecked} disabled/>
            <label class="star star-${i} tx-15" for="star-${i}-${saloonId}"></label>
        `;
        }

        return starHtml;
    }
</script>

@endsection