@php
    $sortOptions = [
        'latest' => 'جدیدترین خدمات',
        'most_visited' => 'پربیننده‌ترین خدمات',
        'most_favorite' => 'محبوب‌ترین خدمات',
    ];
@endphp

<x-default-landing-layout>
    {{ Breadcrumbs::view('layout.partials.landing._breadcrumb', 'landing.services') }}
    <section class="section-padding pb-0 d-flex justify-content-center align-items-center">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-12">
                    <form class="custom-form hero-form" action="#" method="get" role="form">
                        <h3 class="text-white mb-3">خدمت مورد نظر خود را جستجو کنید</h3>
                        <div class="row">
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="input-group">
                                    <span class="input-group-text" id="basic-addon1"><i
                                            class="bi-person custom-icon"></i></span>
                                    <input type="text" name="title" id="service-title" class="form-control"
                                        placeholder="عنوان خدمت"
                                        @if ($title = request()->title) value="{{ $title }}" @endif>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="input-group">
                                    <span class="input-group-text" id="basic-addon1"><i
                                            class="bi-geo-alt custom-icon"></i></span>
                                    <select name="zone" id="service-zone"
                                        aria-label="موقعیت جغرافیایی را انتخاب کنید" data-control="select2"
                                        data-placeholder="یک موقعیت جغرافیایی را انتخاب کنید"
                                        class="form-select form-control">
                                        <option value="">یک موقعیت جغرافیایی را انتخاب کنید</option>
                                        @foreach (\App\Models\Zone::get() as $zone)
                                            <option value="{{ $zone->id }}"
                                                {{ $zone->id == request()->zone ? 'selected' : '' }}>
                                                {{ $zone->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-4 col-12">
                                <div class="input-group">
                                    <span class="input-group-text" id="basic-addon1"><i
                                            class="bi-tag custom-icon"></i></span>
                                    <select name="category" id="service-category" aria-label="دسته‌بندی را انتخاب کنید"
                                        data-control="select2" data-placeholder="یک دسته‌بندی را انتخاب کنید"
                                        class="form-select form-control">
                                        <option value="">یک دسته‌بندی را انتخاب کنید</option>
                                        @foreach (\App\Models\ServiceCategory::get() as $category)
                                            <option value="{{ $category->id }}"
                                                {{ $category->id == request()->category ? 'selected' : '' }}>
                                                {{ $category->title }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-12 col-12">
                                <button type="submit" class="form-control">
                                    جستجوی خدمت
                                </button>
                            </div>
                            <div class="col-12">
                                <div class="d-flex flex-wrap align-items-center mt-4 mt-lg-0">
                                    <span class="text-white mb-lg-0 mb-md-0 me-2">کلیدواژه‌های پرتکرار:</span>
                                    <div>
                                        @foreach (getPupularKeywords() as $keyword)
                                            <a href="{{ route('services', ['title' => $keyword->keyword]) }}"
                                                class="badge">
                                                {{ $keyword->keyword }}
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <section class="service-section section-padding">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-12 mb-lg-4">
                    <h4>نتایج {{ $services->firstItem() }}-{{ $services->lastItem() }} از {{ $services->total() }}
                        خدمت
                    </h4>
                </div>
                <div class="col-lg-4 col-12 d-flex align-items-center ms-auto mb-5 mb-lg-4">
                    <p class="mb-0 ms-lg-auto">مرتب‌سازی بر اساس:</p>
                    <div class="dropdown dropdown-sorting ms-3 me-4">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownSortingButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            {{ $sortOptions[($sort = request()->sort)] ?? $sortOptions[array_key_first($sortOptions)] }}
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownSortingButton">
                            @foreach ($sortOptions as $option => $value)
                                <li>
                                    <a class="dropdown-item"
                                        href="{{ request()->fullUrlWithQuery(['sort' => $option]) }}">
                                        {{ $value }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @foreach ($services as $service)
                    @include('layout.partials.landing._service_block_item', ['service' => $service])
                @endforeach
                @if ($services->hasPages() > 0)
                    <!-- Pagination Area -->
                    {!! $services->appends(request()->input())->links('pagination::landing') !!}
                    <!-- End Pagination Area -->
                @endif
            </div>
        </div>
    </section>
    @include('layout.partials.landing._cta')

    @push('scripts')
        <script>
            @if ($user = auth()->user())
                let url = [
                    '{{ route('client-area.bookmarks.destroy', 'bookmark_id') }}',
                    '{{ route('services.add-bookmark', 'service_id') }}'
                ];
                let method = ['DELETE', 'POST'];
                let icon = ['bi-bookmark-fill', 'bi-bookmark'];
                let label = ['حذف نشان', 'نشان کردن'];
                document.querySelectorAll('[data-service-id]').forEach(element => {
                    let bookmarkId = $(element).attr('data-bookmark-id');

                    $(element).addClass(icon[bookmarkId ? 0 : 1]);

                    $(element).on('click', function(e) {
                        let bookmarkId = $(element).attr('data-bookmark-id');
                        let serviceId = $(element).attr('data-service-id');
                        e.preventDefault();
                        $.ajax({
                            url: bookmarkId ? url[0].replace('bookmark_id', bookmarkId) : url[1]
                                .replace('service_id', serviceId),
                            method: method[bookmarkId ? 0 : 1],
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(data) {
                                if (bookmarkId) {
                                    $(element).removeAttr('data-bookmark-id');
                                } else {
                                    $(element).attr('data-bookmark-id', data.data.bookmark_id);
                                }
                                $(element).removeClass(icon[bookmarkId ? 0 : 1]);
                                $(element).addClass(icon[bookmarkId ? 1 : 0]);
                            },
                            error: function(xhr) {
                                //
                            }
                        });
                    });
                });
            @else
                $('[data-service-id]').attr('href', '{{ route('login') }}');
            @endif
        </script>
    @endpush

</x-default-landing-layout>