@extends('layouts.guest.master')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp

    <section class="results">
        <div class="container-fluid p-0" style="overflow: inherit">
            <div class="row">
                <div class="col-md-7 pt-4 pt-sm-4 pr-3 pr-sm-0 ">
                    <div class="result-found-area">
                        <form action="" method="get" id="filter-form">
                            <div class="container px-3 px-sm-5">
                                <div class="row">
                                    <div class="col-md-6 col-12">
                                        <div class="search-group looking-input">
                                            <a href="##">
                                                <i class="fas fa-search"></i>
                                            </a>
                                            <input type="text" name="search" value="{{ $search }}"
                                                class="form-control"
                                                placeholder="{{ __('dashboard.what_are_you_looking_for') }}"
                                                onchange="this.form.submit()">
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-12 mt-sm-0 mt-2">
                                        <div class="search-group location-input">
                                            <input type="text" name="location" class="form-control"
                                                value="{{ $location }}" placeholder="{{ __('dashboard.location') }}"
                                                id="map-search">
                                            <input type="hidden" id="latitude" name="latitude" placeholder="Latitude"
                                                hidden value="{{ $deviceLatitude }}" />
                                            <input type="hidden" id="longitude" name="longitude" placeholder="Longitude"
                                                hidden value="{{ $deviceLongitude }}" />
                                            <a href="#"><i class="fas fa-map-marker-alt"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-6 mt-2">
                                        <div class="search-group location-input">
                                            <select name="user_type" class="form-control" onchange="this.form.submit()">
                                                <option value="" {{ $userType == '' ? 'selected' : '' }}>
                                                    {{ __('static.all') }}
                                                </option>
                                                <option value="{{ App\Helpers\ConstantHelper::INDIVIDUAL_USER }}"
                                                    {{ $userType == App\Helpers\ConstantHelper::INDIVIDUAL_USER ? 'selected' : '' }}>
                                                    {{ __('static.individual') }}
                                                </option>
                                                <option value="{{ App\Helpers\ConstantHelper::BUSINESS_USER }}"
                                                    {{ $userType == App\Helpers\ConstantHelper::BUSINESS_USER ? 'selected' : '' }}>
                                                    {{ __('static.business') }}
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mt-2">
                                        <div class="d-sm-flex d-block">
                                            {{-- Category Filter --}}
                                            <div class="notificationbar-2">
                                                <div data-toggle="dropdown"
                                                    class="dropdown d-inline-block cursor-pointer notifications-icon-div">
                                                    <div class="project-dropnew">
                                                        {{ __('static.categories') }} <i
                                                            class="fa fa-angle-down down-arrowlogo" aria-hidden="true"></i>
                                                    </div>
                                                    <div
                                                        class="dropdown-menu dropdown-menu-md notificationtab-2 project-dropdownbox useraction-dropdown dropdown-menu-right">
                                                        <div class="project-dropcontentbox filterForm">
                                                            <div class="row">
                                                                @foreach ($categories as $key => $category)
                                                                    <div class="col-md-6">
                                                                        <div class="filter-check form-group">
                                                                            <input type="checkbox" class="filled-in"
                                                                                name="categories[]"
                                                                                value="{{ $category->id }}"
                                                                                {{ in_array($category->id, isset($category_key) && count($category_key) > 0 ? $category_key : []) ? 'checked' : '' }}
                                                                                id="example_{{ $category->id }}">
                                                                            <label class="project-label"
                                                                                for="example_{{ $category->id }}">{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $category->title_ar : $category->title_en }}</label>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <div class="d-flex justify-content-between">
                                                                <button
                                                                    class="btn btn-outline-secondary btn-sm cancelButton">{{ __('static.cancel') }}</button>
                                                                <button type="submit"
                                                                    class="btn btn-filter btn-primary btn-sm">{{ __('static.apply') }}</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Price Filter --}}
                                            <div class="notificationbar-2">
                                                <div data-toggle="dropdown"
                                                    class="dropdown d-inline-block cursor-pointer notifications-icon-div">
                                                    <div class="project-dropnew">
                                                        {{ __('label.price') }} <i class="fa fa-angle-down down-arrowlogo"
                                                            aria-hidden="true"></i>
                                                    </div>

                                                    <div
                                                        class="dropdown-menu dropdown-menu-md notificationtab-2 project-dropdownbox useraction-dropdown dropdown-menu-right">
                                                        <div class="project-dropcontentbox filterForm">
                                                            <div class="row">
                                                                <div class="col-md-6">
                                                                    <div class="filter-check form-group">
                                                                        <input type="radio" class="filled-in"
                                                                            name="price" value="0-50" id="exampleCheck1"
                                                                            {{ $selected_price == '0-50' ? 'checked' : '' }}>
                                                                        <label class="project-label"
                                                                            for="exampleCheck1">{{ __('static.egp') }}
                                                                            50
                                                                            and Below</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="filter-check form-group">
                                                                        <input type="radio" class="filled-in"
                                                                            name="price" value="51-200" id="exampleCheck2"
                                                                            {{ $selected_price == '51-200' ? 'checked' : '' }}>
                                                                        <label class="project-label"
                                                                            for="exampleCheck2">{{ __('static.egp') }} 51
                                                                            - {{ __('static.egp') }} 200</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="filter-check form-group">
                                                                        <input type="radio" class="filled-in"
                                                                            name="price" value="201-500"
                                                                            id="exampleCheck3"
                                                                            {{ $selected_price == '201-500' ? 'checked' : '' }}>
                                                                        <label class="project-label"
                                                                            for="exampleCheck3">{{ __('static.egp') }} 201
                                                                            - {{ __('static.egp') }} 500</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="filter-check form-group">
                                                                        <input type="radio" class="filled-in"
                                                                            name="price" value="501-1000"
                                                                            id="exampleCheck4"
                                                                            {{ $selected_price == '501-1000' ? 'checked' : '' }}>
                                                                        <label class="project-label"
                                                                            for="exampleCheck4">{{ __('static.egp') }} 501
                                                                            - {{ __('static.egp') }} 1000</label>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="filter-check form-group">
                                                                        <input type="radio" class="filled-in"
                                                                            name="price" value="1001-2000"
                                                                            id="exampleCheck5"
                                                                            {{ $selected_price == '1001-2000' ? 'checked' : '' }}>
                                                                        <label class="project-label"
                                                                            for="exampleCheck5">{{ __('static.egp') }}
                                                                            1001 - {{ __('static.egp') }} 2000</label>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="d-flex justify-content-between">
                                                                <button
                                                                    class="btn btn-outline-secondary btn-sm cancelButton">{{ __('static.cancel') }}</button>
                                                                <button type="submit"
                                                                    class="btn btn-filter btn-primary btn-sm">{{ __('static.apply') }}</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="result-found-colums mt-3 py-4">
                            <div class="container px-3 px-sm-5">
                                <div class="disc-results-found mb-4">
                                    <a href="##">{{ $branches->total() }} {{ __('static.results_found') }}</a>
                                </div>
                                @forelse ($branches as $key => $branch)
                                    <div class="makeup-bordr mt-4">

                                        <div class="row align-items-center justify-content-center">
                                            <div class="col-md-4 col-12 pr-0">
                                                <div class="listing-item-image">
                                                    <img
                                                        src="{{ isset($branch->companyProfile->company_logo) && $branch->companyProfile->company_logo ? $branch->companyProfile->company_logo : (isset($branch->createdBy->user_profile) && $branch->createdBy->user_profile ? $branch->createdBy->user_profile : asset('/assets/images/makup-1.jpg')) }}">
                                                    <div class="overlaydivinnwr"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-8 pl-3 pl-sm-0 col-12">
                                                <div class="makeup-item-content ">
                                                    <div class="makeup-item-inner d-flex align-items-center">
                                                        <div class="makeup-context position-relative">
                                                            <h3>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $branch->name_ar : $branch->name_en }}
                                                                <i class="far fa-check-circle text-success"></i>
                                                            </h3>
                                                            <p class="my-1">{{ $branch->address }}
                                                                <span
                                                                    class="text-success">({{ round($branch->distance) . 'Km' }}
                                                                    )</span>
                                                            </p>
                                                            @if ($branch->branchView->rating > 0)
                                                                <div class="rating">
                                                                    @php
                                                                        $totalRating = round($branch->branchView->rating);
                                                                    @endphp
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                        @if ($i <= $totalRating)
                                                                            <i class="fas fa-star"></i>
                                                                        @else
                                                                            <i class="far fa-star"></i>
                                                                        @endif
                                                                    @endfor
                                                                    <span>({{ $totalRating }})</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="bdr-div my-3"></div>
                                                    <div class="row justify-content-between align-items-center mt-2">
                                                        <div class="col-md-5 col-6">
                                                            <a href="/branches/services/{{ $branch->id }}">
                                                                <button
                                                                    class="btn btn-primary btn-sm">{{ __('static.see_all_services') }}
                                                                </button>
                                                            </a>
                                                        </div>
                                                        @if (@$branch->branchView->starting_from)
                                                            <div class="col-md-7 col-6">
                                                                <div class="text-right">
                                                                    <a href="book.html">
                                                                        <p class="makeup-details">

                                                                            {{ __('static.starting_services_from') }}
                                                                            {{ 'EGP ' . @$branch->branchView->starting_from }}
                                                                        </p>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                @empty
                                    <div class="makeup-bordr mt-4">
                                        <p>
                                            <center class="text-danger">{{ __('admin::message.no_records_found') }}
                                            </center>
                                        </p>
                                    </div>
                                @endforelse
                                {{ $branches->appends(request()->input())->links('admin::partials.pagination') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-5 pl-0">
                    <div class="make-up-location">
                        <div id="map" style="height: 100%;"></div>
                    </div>

                </div>
            </div>

        </div>
    </section>
@endsection

@section('script')
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ config('app.MAP_API_KEY') }}&callback=initAutocomplete&libraries=places&v=weekly"
        defer></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            // Handle cancel button click
            $('.cancelButton').click(function() {
                // Clear checkbox selections
                $('input[type="checkbox"]').prop('checked', false);

                // Optionally trigger the form submission to reset the filters on the server
                $('.filterForm').submit();
            });
        });

        $(document).ready(function() {
            // Handle cancel button click
            $('.cancelButton').click(function() {
                // Clear checkbox selections
                $('input[type="radio"]').prop('checked', false);

                // Optionally trigger the form submission to reset the filters on the server
                $('.filterForm').submit();
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Call the initAutocomplete function after the DOM is fully loaded
            initAutocomplete();
        });

        function initAutocomplete() {
            let deviceLatitude = '{{ $deviceLatitude }}';
            let deviceLongitude = '{{ $deviceLongitude }}';
            let latitudeInput = document.getElementById("latitude");
            let longitudeInput = document.getElementById("longitude");

            if (deviceLatitude === '' && deviceLongitude === '' && navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        latitudeInput.value = position.coords.latitude;
                        longitudeInput.value = position.coords.longitude;
                        getAddressFromGeolocation(position.coords.latitude, position.coords.longitude)
                            .then((address) => {
                                document.getElementById("map-search").value = address;

                                // Submit the form after setting the values
                                latitudeInput.form.submit();
                            })
                            .catch((error) => {
                                console.error("Error getting formatted address:", error);
                            });
                    },
                    (error) => {
                        console.error("Error getting current location:", error);
                        // Handle error here if needed
                    }
                );
            } else {
                // If device latitude and longitude are not empty, use them directly
                latitudeInput.value = deviceLatitude;
                longitudeInput.value = deviceLongitude;
            }

            // Set lat long on map
            let latitude = parseFloat(document.getElementById("latitude").value);
            let longitude = parseFloat(document.getElementById("longitude").value);

            if (isNaN(latitude) || isNaN(longitude)) {
                latitude = 0; // Default latitude if not provided
                longitude = 0; // Default longitude if not provided
            }

            const map = new google.maps.Map(document.getElementById("map"), {
                center: {
                    lat: latitude,
                    lng: longitude
                },
                zoom: 13,
                mapTypeId: "roadmap",
            });

            // Show the bounce map
            let marker = new google.maps.Marker({
                map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: {
                    lat: latitude,
                    lng: longitude
                },
            });

            marker.addListener("click", toggleBounce);

            // Create the search box and link it to the UI element.
            const input = document.getElementById("map-search");
            const searchBox = new google.maps.places.SearchBox(input);

            // map.controls[google.maps.ControlPosition.TOP_RIGHT].push(input);
            // Bias the SearchBox results towards current map's viewport.
            map.addListener("bounds_changed", () => {
                searchBox.setBounds(map.getBounds());
            });

            markers = [];

            // Listen for the event fired when the user selects a prediction and retrieve
            // more details for that place.
            searchBox.addListener("places_changed", () => {
                console.log('aaa');
                const places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }

                const place = places[0];
                if (!place.geometry || !place.geometry.location) {
                    console.log("Place geometry or location not available");
                    return;
                }
                latitude = place.geometry.location.lat();
                longitude = place.geometry.location.lng();

                document.getElementById("latitude").value = latitude;
                document.getElementById("longitude").value = longitude;

                console.log("New latitude: " + latitude);
                console.log("New longitude: " + longitude);

                // Submit the form with updated values
                const form = document.getElementById(
                    "filter-form");
                form.submit();

                // Clear out the old markers.
                markers.forEach((marker) => {
                    marker.setMap(null);
                });
                markers = [];

                // For each place, get the icon, name and location.
                const bounds = new google.maps.LatLngBounds();

                places.forEach((place) => {
                    if (!place.geometry || !place.geometry.location) {
                        console.log("Returned place contains no geometry");
                        return;
                    }

                    const icon = {
                        url: place.icon,
                        size: new google.maps.Size(71, 71),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(17, 34),
                        scaledSize: new google.maps.Size(25, 25),
                    };

                    // Create a marker for each place.
                    markers.push(
                        new google.maps.Marker({
                            map,
                            icon,
                            title: place.name,
                            position: place.geometry.location,
                        }),
                    );
                    if (place.geometry.viewport) {
                        // Only geocodes have viewport.
                        bounds.union(place.geometry.viewport);
                    } else {
                        bounds.extend(place.geometry.location);
                    }
                });

                map.fitBounds(bounds);
            });
        }

        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }

        function getComponentValue(place, type) {
            for (const component of place.address_components) {
                for (const componentType of component.types) {
                    if (componentType === type) {
                        return component.long_name;
                    }
                }
            }
            return "";
        }

        function getAddressFromGeolocation(latitude, longitude) {
            return new Promise((resolve, reject) => {
                const geocoder = new google.maps.Geocoder();
                const latLng = new google.maps.LatLng(latitude, longitude);

                geocoder.geocode({
                    'location': latLng
                }, (results, status) => {
                    if (status === 'OK') {
                        if (results[0]) {
                            const address = results[0].formatted_address;
                            resolve(address);
                        } else {
                            reject('No results found');
                        }
                    } else {
                        reject('Geocoder failed due to: ' + status);
                    }
                });
            });
        }

        window.initAutocomplete = initAutocomplete;
    </script>
    <script>
        $(function() {
            $('input[name="date_range"]').daterangepicker({
                timePicker: false,
                autoUpdateInput: false, // This line prevents auto-filling the input with the default date range
                startDate: moment().format('MM/DD/YYYY'),
                endDate: moment().format('MM/DD/YYYY'),
                minDate: moment().format('MM/DD/YYYY'),
                maxDate: moment().add(15, 'days').format('MM/DD/YYYY'),
            }).on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                    'MM/DD/YYYY'));
                this.form.submit();
            });
        });
    </script>
@endsection