@extends('frontLayouts.frontApp')

@section('headerContent')
    <div class="content">
        <h2>{{ __('lang.live_with_experience') }}</h2>
        <form method="post" action="{{ route('experience.search') }}">
            @csrf
            <div class="input-group mb-3">
                <input type="text" name="name" value="{{ request()->name }}" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
                </div>
            </div>
            <div class="select-search">
                <div class="row">
                    <div class="col-md-4">
                        <select name="city" class="form-select" aria-label="Default select example">
                            <option selected disabled>{{ __('lang.city') }}</option>
                            @foreach($cities as $city)
                                <option value="{{ $city->id }}" {{ $city->id == request()->city ? 'selected' : '' }}>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $city->name_ar : $city->name_en }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="day" class="form-select" aria-label="Default select example">
                            <option selected disabled>{{ __('lang.number_days') }}</option>
                            @foreach($days as $key => $day)
                                @php $key = $key + 1 @endphp
                                <option value="{{ $key }}" {{ $key == request()->day ? 'selected' : '' }}>{{ $key }} {{ __('lang.day') }} </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select name="price" class="form-select" aria-label="Default select example">
                            <option selected disabled>{{ __('lang.price') }}</option>
                            <option value="DESC" {{ request()->price == 'DESC' ? 'SELECTED' : '' }}>{{ __('lang.highest_price') }}</option>
                            <option value="ASC" {{ request()->price == 'ASC' ? 'SELECTED' : '' }}>{{ __('lang.lowest_price') }}</option>
                        </select>
                    </div>
                    <button class="btn btn-warning">{{ __('lang.search') }}</button>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('class')
    experiment h-580
@endsection

@section('frontContent')
    <!-- Start Live the experience with us 2 -->
    <section class="live-experience live-the-experience-2">
        <div class="container">
            @if(count($data))
            <div class="row ">
                @foreach($data as $item)
                    <div class="col-lg-4 col-md-6">
                    <div class="box" style="background-image: url({{ url($item->image) }});">
                        <div class="add-favorite {{ auth('customer')->check() ? count($item->favorite) > 0 ? 'active' : '' : '' }}" data-tripid="{{ $item->id }}" >
                            <i class="fa-solid fa-heart "></i>
                        </div>
                        <div class="text-title">
                            <h4>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $item->name_ar :  $item->name_en }}</h4>
                            <h5><strong>{{ $item->economical_price }}</strong> {{trans('lang.currency')}}</h5>
                        </div>
                        <div class="maps-days">
                            <div class="row">
                                <div class="col-lg-6 maps">
                                    <ul>
                                        <li><i class="fas fa-map-marker-alt"></i> <span>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $item->City->name_ar : $item->City->name_en }}</span></li>
                                        <li><i class="fas fa-clock"></i> <span>{{ $item->days_count }} {{ __('lang.day') }}</span></li>
                                    </ul>
                                </div>
                                <div class="col-lg-6 star">
                                    <ul>
                                        <li class="star"><i class="fas fa-star"></i> <span>4.5</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('front.trip.details',$item->id) }}" class="btn btn-warning booking">{{ __('lang.book_now') }}</a>
                    </div>
                </div>
                @endforeach
            </div>
            {{$data->links("pagination::bootstrap-4")}}
            @else
                <h4 style="text-align: center;font-size: 58px;padding-block: 150px;color: #ca990e;font-weight: bold;">{{ __('lang.sorry') }} {{ request()->name }}</h4>
            @endif
        </div>
    </section>

    <!-- End Live the experience with us 2 -->


@endsection


@section('js')
    <script>
        $(document).ready(function() {

            // Store Data By Ajax
            $('.add-favorite').click(function () {
                @php
                    if(auth('customer')->check()){
                @endphp
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                var tripId = $(this).data('tripid')
                $.ajax({
                    type: 'POST',
                    url: '{{ route('profile.add_favorite') }}',
                    data: {
                        trip_id: tripId,
                    },
                    success: function (r) {
                        if (r.action == 'add') {
                            $('div[data-tripid=' + tripId + ']').addClass('active');
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            })

                            Toast.fire({
                                icon: 'success',
                                title: r.message,
                            })
                        } else {
                            $('div[data-tripid=' + tripId + ']').removeClass('active');
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 3000,
                                timerProgressBar: true,
                                didOpen: (toast) => {
                                    toast.addEventListener('mouseenter', Swal.stopTimer)
                                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                                }
                            })

                            Toast.fire({
                                icon: 'success',
                                title: r.message,
                            })
                        }
                    }
                })
                @php }else{ @endphp

                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })

                Toast.fire({
                    icon: 'error',
                    title: '{{ __('lang.error_login') }}'
                })

                @php } @endphp

            });

        });
    </script>
@endsection