@extends('layouts.app')

@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>{{ __('label.book_your_appointment') }}</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">

                                @include('customer.book-appoinment.nav-bar')

                                <div class="pt-4">
                                    <div class="result-found-area">
                                        @include('customer.book-appoinment.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 ">
                                                                            <a
                                                                                href="{{ url('book-appointments/staffs/' . $branch->id) }}">
                                                                                <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>

                                                                            <div
                                                                                class="d-flex justify-content-between align-items-center mt-2">
                                                                                <div
                                                                                    class="check-box whish-sel-home detail-whishglist">
                                                                                    <input
                                                                                        id="whishlist_{{ $key }}"
                                                                                        type="checkbox"
                                                                                        data-branch-id="{{ $branch->id }}"
                                                                                        {{ in_array($branch->id, $favoritesIds) ? 'checked disabled' : '' }}
                                                                                        class="filled-in {{ in_array($branch->id, $favoritesIds) ? '' : 'whishlist-selected' }}">
                                                                                    <label
                                                                                        for="whishlist_{{ $key }}"
                                                                                        class="btn btn-outline-head btn-sm">{{ in_array($branch->id, $favoritesIds) ? __('static.added') : __('static.add_to_whishlist') }}</label>
                                                                                </div>

                                                                                @if (@$branch->branchView->starting_from)
                                                                                    <div class="text-right">
                                                                                        <p class="makeup-details">

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

                                                                            </div>

                                                                        </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="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>
        $(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>
    <script>
        $(document).on('change', 'input[type="checkbox"].whishlist-selected', function() {

            // Check if the checkbox is checked
            if ($(this).is(':checked')) {
                // Get the item ID from the data attribute
                var branchID = $(this).data('branch-id');

                // Make an AJAX call to add the item to the wishlist
                $.ajax({
                    url: app_url + '/api/favorites/store', // Replace with your server-side endpoint
                    type: 'POST',
                    data: {
                        branch_id: branchID,
                        '_token': '{{ csrf_token() }}'
                    },
                    beforeSend: function() {
                        $('#loaderDiv').show();
                    },

                    success: function($response) {
                        $('#loaderDiv').hide();
                        if ($response.status === 200) {
                        Swal.fire({
                                title: success_text,
                                text: $response.message,
                                icon: "success",
                                confirmButtonText: ok_text
                            });
                            setTimeout(function() {
                                location.reload();
                            }, 2200);
                        }
                    },
                    error: function($response) {
                        $('#loaderDiv').hide();
                        if ($response.status === 422) {
                            if (
                                Object.size($response.responseJSON) > 0 &&
                                Object.size($response.responseJSON.errors) > 0
                            ) {
                                show_validation_error($response.responseJSON.errors);
                            }
                        } else {
                            Swal.fire(
                                info_text,
                                $response.responseJSON.message,
                                "warning"
                            );
                            setTimeout(function() {}, 1200);
                        }
                    },
                });
            }
        });
    </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;

                        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;
            }

            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();

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

        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>
@endsection