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

    <section class="pay-booking py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-head">
                        <h2>{{ $locale == App\Helpers\ConstantHelper::ENGLISH ? $selectedCategory->title_en : $selectedCategory->title_ar }}
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-2 py-sm-4">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="services-tabs">

                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade active show" id="nav-artist">
                                <div class="pt-4">
                                    <div class="result-found-area">

                                        {{-- BEGIN::Filter --}}

                                        <div class="">
                                            <div class="row">
                                                <div class="col-md-4 col-12 mt-sm-0 mt-2">
                                                    <div class="notificationbar-2">
                                                        <div data-toggle="dropdown"
                                                            class="dropdown d-inline-block cursor-pointer notifications-icon-div">
                                                            <div class=""
                                                                style="padding: 10px 20px; width:347px; border-radius:3px; height: 50px; color: #808080; font-size: 15px; font-weight: 500; border: 1px solid #dbdbdb; box-shadow:0 1px 3px 0px rgba(0, 0, 0, 0.06) ">
                                                                {{ __('static.categories') }} <i
                                                                    class="fa fa-angle-down down-arrowlogo"
                                                                    aria-hidden="true" style="padding-left:208px"></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="radio" class="filled-in"
                                                                                        name="category"
                                                                                        value="{{ $category->alias_en }}"
                                                                                        {{ $category->alias_en == $selectedCategory->alias_en ? '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 type="button"
                                                                            class="btn btn-filter btn-primary btn-sm"
                                                                            onclick="applyFilter()">{{ __('static.apply') }}</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-4 col-12 mt-sm-0 mt-2">
                                                    <div class="search-group location-input">
                                                        <input type="text" name="location" class="form-control"
                                                            placeholder="{{ __('dashboard.location') }}"
                                                            value="{{ $location }}" id="map-search">
                                                        <input type="hidden" id="latitude" name="latitude"
                                                            value="{{ $deviceLatitude }}" placeholder="Latitude" />
                                                        <input type="hidden" id="longitude" name="longitude"
                                                            value="{{ $deviceLongitude }}" placeholder="Longitude" />
                                                        <a href="#"><i class="fas fa-map-marker-alt"></i></a>
                                                    </div>
                                                </div>
                                                <div class="col-md-4 mt-sm-0 mt-2">
                                                    <div class="search-group location-input">
                                                        <input type="text" name="date_range" value="{{ $dateRange }}"
                                                            class="form-control"
                                                            placeholder="{{ __('dashboard.date_range') }}" id="date-range"
                                                            autocomplete="off">
                                                        <a href="#"><i class="fas fa-calendar-alt"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- END::Filter --}}

                                        <div class="result-found-colums mt-3 py-4">
                                            <div class="px-3 px-sm-4">
                                                <div class="disc-results-found mb-4">
                                                    <a href="##">{{ $branches->total() }}
                                                        {{ __('static.results_found') }}</a>
                                                </div>

                                                <div class="row">
                                                    @forelse ($branches as $key => $branch)
                                                        <div class="col-md-6 mb-3">
                                                            <div class="makeup-bordr">
                                                                <div class="row align-items-center justify-content-center">
                                                                    <div class="col-md-12">
                                                                        <div class="makeup-item-content ">
                                                                            @if (auth()->check())
                                                                                <a
                                                                                    href="{{ url('book-appointments/staffs/' . $branch->id) }}">
                                                                                @else
                                                                                    <a
                                                                                        href="/branches/services/{{ $branch->id }}">
                                                                            @endif
                                                                            <div
                                                                                class="makeup-item-inner d-flex align-items-center">
                                                                                <div class="makeup-img-circle mr-2">
                                                                                    <img src="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}"
                                                                                        onerror="this.src='/assets/images/makeup-circle-1.jpg'"
                                                                                        alt="{{ isset($branch->companyProfile->company_logo) ? $branch->companyProfile->company_logo : '' }}">
                                                                                </div>

                                                                                <div class="makeup-context">
                                                                                    <h3>{{ $locale == App\Helpers\ConstantHelper::ENGLISH ? $branch->name_en : $branch->name_ar }}
                                                                                        <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>
                                                                            </a>
                                                                            <div class="bdr-div my-3"></div>
                                                                            @if (@$branch->branchView->starting_from)
                                                                                <div
                                                                                    class="d-flex justify-content-between align-items-center mt-2">
                                                                                    <div class="text-right">
                                                                                        <p class="makeup-details">

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

                                                                        </div>
                                                                    </div>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    @empty
                                                        <div class="col-md-6 mb-3">
                                                            <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>

                                <div class="d-flex mt-4 justify-content-between">
                                    <a href="{{ url('/home') }}">
                                        <button class="btn btn-outline-secondary"><i class="fas fa-chevron-left mr-1"></i>
                                            {{ __('static.cancel') }}</button>
                                    </a>
                                </div>

                            </div>
                        </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="radio"]').prop('checked', false);

                // Optionally trigger the form submission to reset the filters on the server
                // $('.filterForm').submit();
            });
        });
    </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'),
            }).on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format(
                    'MM/DD/YYYY'));
                applyFilter();
            });
        });
    </script>

    <script type="text/javascript">
        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;

                        // Submit the form after setting the values
                        applyFilter();
                    },
                    (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;
            }

            const input = document.getElementById("map-search");
            const searchBox = new google.maps.places.SearchBox(input);

            searchBox.addListener("places_changed", () => {
                const places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                const place = places[0];
                document.getElementById("latitude").value = place.geometry['location'].lat();
                document.getElementById("longitude").value = place.geometry['location'].lng();
                applyFilter();
            });
        }

        window.initAutocomplete = initAutocomplete;
    </script>

    <script>
        function applyFilter() {
            let latitude = $('#latitude').val();
            let longitude = $('#longitude').val();
            let date_range = $('#date-range').val();
            let location = $('#map-search').val();
            let category = $('input[name="category"]:checked').val();
            const currentUrl = new URL(window.location.href);
            const newUrl = currentUrl.origin + '/branches/' + category + '?location=' + location + '&latitude=' + latitude +
                '&longitude=' + longitude + '&date_range=' + date_range;
            window.location.href = newUrl;

        }
    </script>
@endsection