@extends('.frontend.default')

@section('content')

<div class="service-search-results_sec">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="search_results">
                    <div class="search_results_form">
                        <form>
                            <div class="row">
                                <div class="col-lg-12">
                                    <input type="text" placeholder="輸入服務關鍵字" name="event_keyword" class="keywords event_keyword border-primary" value="{{ old('event_keyword') }}" required/>
                                </div>
                                <div class="col-lg-3 pr-lg-0" style="margin-bottom: 15px;">
                                    <div class="object_select select_box">
                                        @include('frontend.template.event.options.target',[
                                                        'class'=>'event_target_id'
                                                        ])
                                    </div>
                                </div>
                                <div class="col-lg-3 pr-lg-0">
                                    <div class="object_select select_box">
                                        @include('frontend.template.event.options.method',[
                                                       'class'=>'event_method_id'
                                                       ])
                                    </div>
                                </div>
                                <div class="col-lg-3 pr-lg-0">
                                    <div class="object_select select_box">
                                        @include('frontend.template.event.options.class',[
                                                        'class'=>'event_class_id'
                                                        ])
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="object_select select_box">
                                         @include('frontend.template.event.options.is_personal_service',[
                                                    'class'=>'is_personal'
                                                    ])
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="custom-select-form">
                                        @include('frontend.template.unit.list',[
                                                        'id'=>'single-two',
                                                        'class'=>'unit_id',
                                                        ])
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="search_results_btn">
                        <button class="btn btn-large search-service btn-primary"><img src="{{ url('images/icon/search.svg') }}" alt=""> 搜尋服務</button>
                        <a onclick="location.href = location.pathname"><button class="btn btn-reset ml-2"> 重新搜尋</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="Popular_services_sec latest_service_sec">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="search-results_titel">
                    <div class="search-results">
                        <h1>搜尋結果</h1>
                    </div>
                    @if(count($events) > 0)
                        @include('frontend.template.event.sort_by',[])
                    @endif
                </div>
            </div>
            @if(count($events) > 0)
                @foreach ($events as $event)
                    <div class="col-12 col-sm-6 col-md-6 col-lg-3">
                        @include('.frontend.template.event.card',[
                            'event' => !empty($event['detail']) ? $event['detail'] : $event,'is_search_result' => true])
                    </div>
                @endforeach
            @else
                <div class="col-lg-12" style="min-height: 500px">
                    <h1>未找到相關服務</h1>
                </div>
            @endif

            <div class="col-lg-12 mt-1 mb-4">
                @if ($hasPages)
                    <div class="row justify-content-center">
                        @if(!$onFirstPage)
                            <div class="col-6 col-md-2">
                                <a href="{{ $previousPageUrl }}">
                                    <div class="btn btn-primary border-radius-10 px-4 py-1">
                                        上一頁
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($hasMorePages)
                            <div class="col-6 col-md-2 {{$onFirstPage ? 'text-center' : ''}}">
                                <a href="{{ $nextPageUrl }}">
                                    <div class="btn btn-primary border-radius-10 px-4 py-1">
                                        下一頁
                                    </div>
                                </a>
                            </div>
                        @endif

                    </div>
                @endif

                @if (!$hasMorePages)
                    <div class="customized_service_btn text-center">
                        <a href="{{ route(".event.search").'#custom_inquiry' }}" style="margin-left: auto; margin-right: auto;">沒有搜尋到合適的服務? 立即查詢訂制服務</a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('pagescript')

    <script>
        $(document).ready(function () {
        });

        $('.select_box').click(function () {
            $(this).toggleClass('active');
        });

        $('.search-service').click(function () {
            baseEventSearch();
        });

    </script>

    <script>
        $("#single, #single-two, #single-three").select2({
            placeholder: "搜尋任何單位",
            allowClear: true,
        });
    </script>
@endsection