@extends('frontLayouts.frontApp')
@section('class')
    rate-nav
@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" data-del="{{ $item->trip_id }}">
                    <div class="box" style="background-image: url({{ url($item->trip->image) }});">
                        <div class="add-favorite active" data-tripid="{{ $item->trip_id }}" >
                            <i class="fa-solid fa-heart "></i>
                        </div>
                        <div class="text-title">
                            <h4>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $item->trip->name_ar :  $item->trip->name_en }}</h4>
                            <h5><strong>{{ $item->trip->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->trip->City->name_ar : $item->trip->City->name_en }}</span></li>
                                        <li><i class="fas fa-clock"></i> <span>{{ $item->trip->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->trip_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_favorite') }} </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');
                            $('div[data-del=' + tripId + ']').fadeOut(500);
                            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