@extends('layouts/indexLayoutMaster')

@section('title', 'Buddies')

@section('content')
<section class="buddies-hero mb-5" style="background-image: url('{{asset('images/banners/' . $heroBanner['image'])}}');">
    <div class="container-fluid pt-5">
        <div class="row justify-content-center">
            <div class="col-md-8" data-sal="slide-down" data-sal-duration="1000">
                <h2 class="hero-text text-white font-weight-bolder font-large-1 line-height-condensed text-center mt-3 mb-2">
                    @if ( Config::get('app.locale') == 'id')
                        {{ $heroBanner['title'] }}
                    @else
                        {{ $heroBanner['title_en'] }}
                    @endif
                </h2>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-12" data-sal="fade" data-sal-duration="1000">
                <div class="card card-search-buddy" data-loc="{{$request->city}}">
                    <div class="card-body">
                        <form>
                            <div class="form-row">
                                <div class="col-md-3 col-12">
                                    <div class="form-group my-50">
                                        <select class="select2 form-control form-control-lg" name="city">
                                            <option value="" selected>{{ __('locale.all_city') }}</option>
                                            @foreach($cities as $data)
                                                @if ($request->city == $data->city_name)
                                                    <option value="{{$data->city_name}}" selected>{{$data->city_name}}</option>
                                                @else
                                                    <option value="{{$data->city_name}}">{{$data->city_name}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group my-50">
                                        <select class="select2 form-control form-control-lg" name="activity">
                                            <option value="" selected>{{ __('locale.all_activity') }}</option>
                                            @foreach($activities as $data)
                                                @if ($request->activity == $data->name)
                                                    <option value="{{$data->name}}" selected>{{$data->name}}</option>
                                                @else
                                                    <option value="{{$data->name}}">{{$data->name}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3 col-12">
                                    <div class="form-group my-50">
                                        <input type="text" id="fp-default" class="form-control flatpickr-date input-date" placeholder="date" name="date"/>
                                
                                    </div>
                                </div>
                                <div class="col-md-2 col-12">
                                    <div class="form-group my-50">
                                        <select class="select2 form-control form-control-lg" name="participant">
                                            <option value="">{{ __('locale.participant') }}</option>
                                            <option value="1">0 - 5</option>
                                            <option value="2">5 - 10</option>
                                            <option value="3">10 - 20</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-1 col-12">
                                    <div class="form-group my-50">
                                        <button class="btn btn-primary waves-effect waves-float waves-light w-100" type="submit">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="buddies-list mb-5">
    <div class="container-fluid">
        @if (count($recommendServices) > 0)
        <h2 class="font-large-1 font-weight-bolder text-primary">{{ __('landing.best_recommendation') }}</h2>
        <div class="d-block item-lists mt-3 mb-2 slick-buddy">
            @foreach($recommendServices as $key => $data)
                @include('panels.item-buddy-slider')
            @endforeach
        </div>
        @endif
        <div class="row">
            <div class="col-6">
                <div class="title mb-2">
                    <h2 class="font-large-1 font-weight-bolder text-primary">{{ __('locale.our_buddies') }}</h2>
                    <span>
                        @if ($request->city)
                            {{ __('locale.in_city') . $request->city}}
                        @else
                            {{ __('locale.near_you') }}
                        @endif
                    </span>
                </div>
            </div>
            <div class="col-6 text-right">
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-primary dropdown-toggle waves-effect" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ __('locale.sort_by') }}
                    </button>
                    <div class="dropdown-menu" style="">
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 1) active @endif " href="javascript:void(0);" data-item="1">{{ __('locale.review') }}</i></a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 2) active @endif " href="javascript:void(0);" data-item="2">{{ __('locale.price') }} <i data-feather="arrow-up"></i></a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 3) active @endif " href="javascript:void(0);" data-item="3">{{ __('locale.price') }} <i data-feather="arrow-down"></i></a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 4) active @endif " href="javascript:void(0);" data-item="4">{{ __('locale.name') }} a-z</a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 5) active @endif " href="javascript:void(0);" data-item="5">{{ __('locale.name') }} z-a</a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 6) active @endif " href="javascript:void(0);" data-item="6">{{ __('locale.male') }} - {{ __('locale.female') }}</a>
                        <a class="dropdown-item dropdown-sort @if ($request->sort == 7) active @endif " href="javascript:void(0);" data-item="7">{{ __('locale.female') }} - {{ __('locale.male') }}</a>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        @if ($grouped)
            @foreach($services as $key => $category)
                <div class="d-block my-2">
                    <h3 class="text-primary">{{$category['service_name']}}</h3>
                </div>
                @include('panels.item-buddy-grouped')
            @endforeach
        @else
            <div class="row item-lists mt-3">
                @foreach($services as $key => $data)
                    @include('panels.item-buddy')
                @endforeach
            </div>
        @endif
        
    </div>
</section>

@include('panels.call-to-action')
@include('panels.socmed')

{{-- <section>
    <div
        class="modal fade"
        id="modalProfile"
        tabindex="-1"
        role="dialog"
        aria-hidden="true"
        >
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">{{ __('locale.complete_profile') }}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>
                    {{ __('locale.complete_profile_note') }}
                </p>
            </div>
            <div class="modal-footer">
                <a href="{{ route('settings') }}" class="btn btn-primary">{{ __('locale.complete_profile') }}</a>
            </div>
            </div>
        </div>
        </div>
</section> --}}

@endsection

@section('page-script')
    {{-- Page js files --}}
    <script src="{{ asset(('js/scripts/home/buddies.js')) }}"></script>
    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/61b860e380b2296cfdd19c20/1fms3kufr';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
@endsection