@extends('frontLayouts.frontApp')

@section('headerContent')
    <div class="content">
        <h2>{{ __('lang.explore_saudi') }}</h2>
        <h6>{{ __('lang.striving') }}</h6>
        <button onclick="window.location.href='{{ route('experience') }}'" type="button" class="btn btn-warning">{{ __('lang.live_experience') }}</button>
    </div>
@endsection
@section('slider')
    <div class="slider">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
            <div class="carousel-inner">

                @foreach($sliders as $key => $slider)
                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                        <img src="{{url($slider->image)}}" class="d-block w-100" alt="#">
                    </div>
                @endforeach

            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>


@endsection
@section('frontContent')

<!-- Start King -->
<section class="sec-king">
    <div class="container">
        <div class="inside-king">
            <div class="row">
                <div class="col-md-8">
                    <div class="content">
                        <h4>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $content->head_title_ar : $content->head_title_en}}</h4>
                        <p>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $content->head_content_ar : $content->head_content_en}}</p>
                        <p class="green-text">{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $content->end_title_ar : $content->end_title_en }}</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="image">

                        <img src="{{url($content->head_image)}}" alt="#" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End King -->

<!-- Start Our Dream -->
<section class="our-dream">
    <div class="container">
        <div class="inside-dream">
            <div class="row">
                <h2 class="title">{{ __('lang.dreamed') }}</h2>
                <p>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $content->dream_details_ar : $content->dream_details_en}}</p>
            </div>
            <img src="{{asset('assets/Front/')}}/images/rectangle-157.svg" alt="#" class="recatingle">
        </div>
    </div>
</section>
<!-- End Our Dream -->

<!-- Start Our Work -->
<section class="our-work">
    <div class="container">
        <h2 class="title">{{ __('lang.our_work') }}</h2>
        <div class="inside-box">
            <div class="row">
                @foreach($works as $item)
                    <div class="col-lg-3 col-md-6">
                    <div class="box">
                        <img src="{{ url($item->image) }}" alt="#" class="main" />
                        <h3>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $item->name_ar : $item->name_en }}</h3>
                        <p>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $item->description_ar : $item->description_en }}</p>
                        <img src="{{asset('assets/Front/')}}/images/rectangle-158.svg" class="p-a" />
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<!-- End Our Work -->

<!-- Start Live the experience with us -->
<section class="live-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 $trip)
                <div class="item">
                    <div class="box" style="background-image: url({{url($trip->image)}})">
                        <div class="add-favorite {{ auth('customer')->check() ? count($trip->favorite) > 0 ? 'active' : '' : '' }}" data-tripid="{{ $trip->id }}" >
                            <i class="fa-solid fa-heart "></i>
                        </div>
                        <div class="text-title">
                            <h4>{{ LaravelLocalization::getCurrentLocale() == 'ar' ? $trip->name_ar : $trip->name_en }}</h4>
                            <h5><strong>{{$trip->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' ? $trip->City->name_ar : $trip->City->name_en}}</span></li>
                                        <li><i class="fas fa-clock"></i> <span>{{$trip->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',$trip->id) }}" class="btn btn-warning booking">{{ __('lang.book_now') }}</a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
</section>
<!-- End Live the experience with us -->

<!-- Start Contact Us -->
<section class="contact-us-home">
    <div class="container">
        <h3 class="title">{{ __('lang.connect_with_us') }}</h3>
        @include('frontLayouts.messages')
        @include('frontLayouts.errors')
        <form method="post"  id="form" action="{{route('inbox.store')}}" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label>{{ __('lang.first_name') }}</label>
                        <input name="f_name" value="{{ old('f_name') }}" min="3" max="200" type="text" class="form-control" required>
                    </div>
                </div>
                <div class="col-lg-4">
                    <label>{{ __('lang.last_name') }}</label>
                    <input  name="l_name" value="{{ old('l_name') }}" type="text" min="3" max="200" class="form-control" required>
                </div>
                <div class="col-lg-4">
                    <label>{{ __('lang.email') }}</label>
                    <input  name="email" value="{{ old('email') }}" type="email" class="form-control" required>
                </div>
            </div>
            <button type="submit" id="submit" class="btn btn-warning booking">{{ __('lang.follow') }}</button>
        </form>
    </div>
</section>
<!-- End Contact Us -->
@endsection
@section('js')
    <script>
        $(document).ready(function() {
            $(document).on('submit', 'form', function() {
                $('button').attr('disabled', 'disabled');
            });

            // 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