@extends('frontLayouts.frontApp')

@section('headerContent')
    <div class="content">
        <h2>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $data->name_ar : $data->name_en }}</h2>
    </div>
@endsection
@section('class')
    our_culture art
@endsection

@section('frontContent')


    <!-- Start Content Our Culture  -->
    <section class="content_our_culture art-secation">
      <div class="container">
        <div class="box">
          <div class="content">
            <div class="row">
              <div class="col-md-8 text-content">
                <h5>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $data->description_ar : $data->description_en }}</h5>
              </div>
              <div class="col-md-4 image-content">
                <img src="{{ url($data->image2) }}" alt="#" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End Content Our Culture  -->

     <!-- Start Blog -->
     <section class="blog art-related">
      <div class="container">
        <h2 class="title">{{ __('lang.related_arts') }}</h2>
        <div class="row">
          @foreach($posts as $post)
            <div class="col-lg-3 col-md-6">
            <div class="box">
              <img src="{{ url($post->image) }}" alt="#" />
              <h4>{{  LaravelLocalization::getCurrentLocale() == 'ar' ? $post->name_ar : $post->name_en }}</h4>
                <p>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? \Illuminate\Support\Str::words($post->description_ar,14) : \Illuminate\Support\Str::words($post->description_en,14) }}</p>
                <a href="{{ route('front.our.culture.details',$post->id) }}" class="btn btn-warning read_more">{{ __('lang.read_more') }}</a>
            </div>
          </div>
          @endforeach
        </div>
      </div>
    </section>
    <!-- End Blog -->

    <!-- Start Live the experience with us -->
    <section class="live-experience art-experience">
      <div class="container">
        <h3 class="title">{{ __('lang.live_experience_with') }}</h3>
        <div class="row ">
          <div class="owl-carousel owl-theme" id="owl-carousel-1">
              @foreach($trips as $item)
                <div class="item">
                    <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> {{ __('lang.SAR') }}</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.days') }}</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>
      </div>
    </section>
    <!-- End Live the experience with us -->

@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