@extends('layouts.guest.master')

@section('content')
    @php
        $locale = session()->get('locale') ? session()->get('locale') : App\Helpers\ConstantHelper::ENGLISH;
    @endphp
    <section class="hero-section">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                @foreach ($banners as $key => $banner)
                    <li data-target="#carouselExampleIndicators" data-slide-to="{{ $key }}"
                        {{ $key === 0 ? ' class="active"' : '' }}></li>
                @endforeach
            </ol>
            <div class="carousel-inner">
                @forelse($banners as $key => $banner)
                    <div class="carousel-item {{ $key === 0 ? ' active' : '' }}">
                        @if ($banner->banner_image)
                            <img class="d-block w-100" src="{{ $banner->banner_image }}" alt="First slide">
                        @else
                            <img class="d-block w-100" src="{{ asset('assets/images/top-banner.jpg') }}" alt="Second slide">
                        @endif
                        <div class="banner-head-content carousel-caption d-none d-md-block">
                            <h1>{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $banner->title_ar : $banner->title_en }}
                            </h1>
                            <p>
                                {!! $locale == App\Helpers\ConstantHelper::ARABIC ? $banner->description_ar : $banner->description_en !!}</p>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
        <div class="herosection-layer">
            <div class="container">
                <div class="top-banner">
                    <div class="banner-head-content mt-sm-0 mt-5">
                        <div class="row justify-content-center align-items-center my-sm-5 my-3">
                            <div class="col-md-8">
                                <form id="searchForm">
                                    <div class="search-bar d-flex align-items-center justify-content-between">
                                        <div class="discover-items">
                                            <input type="text" class="form-control" name="search" id="search"
                                                placeholder="{{ __('dashboard.what_are_you_looking_for') }}">
                                        </div>
                                        <div class="discover-items discover-location d-flex align-items-center">
                                            <input type="text" name="location" class="form-control"
                                                placeholder="{{ __('dashboard.location') }}" id="map-search">
                                            <a href="##" class="px-4"><i class="fas fa-map-marker-alt"></i></a>
                                            <input type="hidden" id="latitude" name="latitude" placeholder="Latitude" />
                                            <input type="hidden" id="longitude" name="longitude" placeholder="Longitude" />
                                        </div>
                                        <div class="search-btn-area">
                                            <button type="submit"
                                                class="btn btn-primary-banner">{{ __('dashboard.explore') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="browse-categories">
                            <p>{{ __('static.or_browse') }}</p>
                            <div class="d-flex align-items-center justify-content-center my-3">
                                @forelse($categories as $category)
                                    <div class="browse-links">
                                        <a
                                            href="{{ url('branches/' . $category->alias_en) }}">{{ $locale == App\Helpers\ConstantHelper::ARABIC ? $category->title_ar : $category->title_en }}</a>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    @if (count($categories) > 0)
        <section class="top-category">
            <div class="container">
                <div class="row justify-content-center align-items-center">
                    <div class="col-md-12 col-12">
                        <div class="head-text text-center">
                            <h1>{{ __('static.top_most_categories') }}</h1>
                            <div class="mini-h-bdr mt-1 mt-sm-2"></div>
                        </div>
                        <div class="row mt-4 mt-sm-5">
                            @foreach ($categories as $category)
                                <div class="col-md-4 col-6">
                                    <a href="{{ url('branches/' . $category->alias_en) }}">
                                        <div class="cate-box">
                                            <img src="{{ $category->category_image }}" alt="/">
                                            <p class="mt-2">
                                                {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $category->title_ar : $category->title_en }}
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Popular Services Offered -->
    <section class="services-offered mt-0 mt-sm-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="head-text text-center">
                        <h1>{{ __('static.popular_services_offered') }}</h1>
                        <div class="mini-h-bdr my-2"></div>
                        <h5>{{ __('static.discover_business_professional') }}</h5>
                    </div>
                    <div class="row my-4 my-sm-5">
                        <div class="col-md-12" id="service-list">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Let join us section -->
    <section class="join-us">
        <div class="join-us-overlay">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="join-text">
                            <h1>{{ __('static.let_join_us') }}</h1>
                            <p class="my-4">{!! __('static.let_join_us_des') !!}</p>
                            <div class="row">
                                <div class="col-md-12">
                                    @if (!auth()->check())
                                        <a href="{{ route('register') }}"
                                            class="btn-primary btn-hov-w btn">{{ __('static.list_your_business') }}</a>
                                    @endif

                                </div>
                            </div>

                        </div>
                    </div>

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

    <!-- How it works section -->
    <section class="it-works">
        <div class="container">
            <div class="row justify-content-center align-items-center">
                <div class="col-md-12 col-12">
                    <div class="head-text mb-3 mb-sm-5">
                        <h1>{{ __('static.how_it_works') }}</h1>
                        <div class="mini-h-bdr mt-2"></div>
                    </div>

                    <div class="row align-items-center">
                        <div class="col-md-5">
                            <div class="work-disc">
                                <a href="##">
                                    <div class="d-flex align-items-center">
                                        <div class="how-work-img mr-4">
                                            <i class="fas fa-search"></i>
                                        </div>
                                        <div class="work-content">
                                            <h1>{{ __('static.search_your_serviced') }}</h1>
                                            <p>{{ __('static.search_your_serviced_des') }}.</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="work-disc mt-sm-5 mt-4">
                                <a href="##">
                                    <div class="d-flex align-items-center">
                                        <div class="how-work-img mr-4">
                                            <i class="fas fa-hand-pointer"></i>
                                        </div>
                                        <div class="work-content">
                                            <h1>{{ __('static.select_business') }}</h1>
                                            <p>{{ __('static.select_business_des') }}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div class="work-disc mt-sm-5 mt-4">
                                <a href="##">
                                    <div class="d-flex align-items-center">
                                        <div class="how-work-img mr-4">
                                            <i class="far fa-calendar-check"></i>
                                        </div>
                                        <div class="work-content">
                                            <h1>{{ __('static.book_your_slot') }}</h1>
                                            <p>{{ __('static.book_your_slot_des') }}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>

                        </div>
                        <div class="col-md-7 col-12 mt-4 mt-sm-0">
                            <div class="it-works-bg">
                                <img src="{{ asset('assets/images/how-it-works-img.jpg') }}" alt="/">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    @if (count($blogs) > 0)
        <section class="from-blog">
            <div class="container">
                <div class="row justify-content-center align-items-center">
                    <div class="col-md-12 col-12">
                        <div class="head-text text-center mb-sm-5 mb-3">
                            <h1>{{ __('static.from_the_blog') }}</h1>
                            <div class="mini-h-bdr mt-2"></div>
                        </div>

                        <div class="row noflexwrap">
                            @foreach ($blogs as $blog)
                                @php
                                    if ($locale == App\Helpers\ConstantHelper::ARABIC) {
                                        $url = 'blog/' . $blog->alias_en;
                                    } else {
                                        $url = 'blog/' . $blog->alias_ar;
                                    }
                                @endphp
                                <div class="col-md-4 mb-sm-0 mb-4">
                                    <div class="blog-item">
                                        <a href="{{ url($url) }}">
                                            <div class="blog-box">
                                                <div class="overlay p-3 p-sm-4">
                                                    <div class="blogging-item-content">
                                                        <p><span>{{ App\Helpers\GeneralHelper::dateFormat($blog->created_at) }}</span>
                                                        </p>
                                                        <h1 class="my-sm-3 my-2 short-100">
                                                            {{ $locale == App\Helpers\ConstantHelper::ARABIC ? $blog->title_ar : $blog->title_en }}
                                                        </h1>
                                                        <div class="short-100">
                                                            @if ($locale == App\Helpers\ConstantHelper::ARABIC)
                                                                <p>{!! $blog->description_ar !!}</p>
                                                            @else
                                                                <p>{!! $blog->description_en !!}</p>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="img-box-2">
                                                    @if ($blog->blog_image)
                                                        <img src="{{ $blog->blog_image }}" alt="/"
                                                            style="width: 100%; height: 100%;" />
                                                    @endif
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="row justify-content-center mt-3 mt-sm-5">
                            <div class="col-md-12 text-center">
                                <a href="{{ route('blog') }}"
                                    class="btn btn-outline-head">{{ __('static.view_blog') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
@endsection
@section('scripts')
    <script>
        if ("{{ session('message') }}") {
            Swal.fire({
                icon: 'success',
                text: "{{ session('message') }}",
            })
        }
    </script>
@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>
        $('#company-logo').on('change', function(event) {
            handleFileChange(event, 'preview-logo');
        });
    </script>

    <script type="text/javascript">
        // Fetch Current Location
        document.addEventListener("DOMContentLoaded", function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;
                    $.ajax({
                        url: app_url + '/popular-services?latitude=' + latitude + '&longitude=' +
                            longitude,
                        type: 'GET',
                        cache: false,
                        datatype: 'html',
                        success: function(data) {
                            $('#service-list').html(data.data);
                            slider();
                        }
                    });
                });
            }
        });

        function initAutocomplete() {
            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();
                console.log(document.getElementById("latitude").value);
            });
        }

        window.initAutocomplete = initAutocomplete;

        $('#searchForm').submit(function(e) {
            e.preventDefault(); // Prevent the default form submission
            // Get the user's search query
            var searchQuery = $('#search').val();
            var mapSearch = $('#map-search').val();
            var latitude = $('#latitude').val();
            var longitude = $('#longitude').val();
            var params = '?search=' + encodeURIComponent(searchQuery) + '&location=' + encodeURIComponent(
                    mapSearch) + '&latitude=' + encodeURIComponent(latitude) + '&longitude=' +
                encodeURIComponent(
                    longitude);

            var $auth = "{{ auth()->check() }}";
            if ($auth) {
                var $redirect = '/book-appointments' + params;
            } else {
                var $redirect = '/branches' + params;
            }
            // Redirect to the search results page with the query appended to the URL
            window.location.href = $redirect;
        });
    </script>
@endsection