@extends('site.pages')

@section('title', $page_title)


@section('breadcrumb_content')
    <h1 class="mb-3">{{$page_title}}</h1>
    <nav aria-label="breadcrumb" class="d-block">
        <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('home')}}">{{__('pages.home')}}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$page_title}}</li>
        </ul>
    </nav>
@endsection

@section('content')
    @include('site.partials.breadcrumb')


<!-- top Destination starts -->
<section class="trending pt-6 pb-0 bg-lgrey">
    <div class="container">
        <div class="row">
            <div class="col-lg-7">
                <div class="single-content">
                    <div class="single-full-title border-b mb-2 pb-2">
                        <div class="single-title">
                            <h2 class="mb-1">{{$data['tour']['name']}}</h2>
                            <div class="rating-main d-lg-flex align-items-center text-lg-start text-center">
                                <p class="mb-0 me-2"><i class="icon-location-pin"></i> {{$data['tour']['country']['name']}} </p>
                            </div>
                                <br>
                            <div class="rating-main d-lg-flex align-items-center text-lg-start text-center">
                                <p class="mb-0 me-2"><i class="icon-location-pin"></i> {{ implode(', ', $data['tour']['city']) }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="description-images mb-4 overflow-hidden">
                        <div class="thumbnail-images position-relative">
                            <div class="slider-store rounded overflow-hidden">
                                @foreach($data['tour']['gallery'] as $image)
                                    check if it's video or image from the extension
                                    @if (in_array(pathinfo($image, PATHINFO_EXTENSION), ['mp4', 'webm', 'ogg', 'ogv']))
                                        <div>
                                            <video width="100%" height="100%" controls>
                                                <source src="{{asset('storage/'.$image)}}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                    @else
                                    <div>
                                        <img src="{{asset('storage/'.$image)}}" alt="{{$data['tour']['name']}}">
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                            <div class="slider-thumbs">
                                @foreach($data['tour']['gallery'] as $image)
                                    @if (in_array(pathinfo($image, PATHINFO_EXTENSION), ['mp4', 'webm', 'ogg', 'ogv']))
                                        <div>
                                            <video width="100%" height="100%" controls>
                                                <source src="{{asset('storage/'.$image)}}" type="video/mp4">
                                                Your browser does not support the video tag.
                                            </video>
                                        </div>
                                    @else
                                    <div>
                                        <img src="{{asset('storage/'.$image)}}" alt="{{$data['tour']['name']}}">
                                    </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div class="description mb-2">
                        <h4>Description</h4>
                        {!! $data['tour']['description'] !!}
                    </div>

                    <div class="tour-includes mb-4">
                        <table>
                            <tbody>
                            <tr>
                                <td><i class="fa fa-clock-o pink mr-1" aria-hidden="true"></i> {{$data['tour']['days']}} {{__('pages.days')}}
                                <td><i class="fa fa-group pink mr-1" aria-hidden="true"></i> {{__('pages.max_people')}} : {{$data['tour']['max_people']}}</td>
                                <td><i class="fa fa-calendar pink mr-1" aria-hidden="true"></i> {{\Carbon\Carbon::parse($data['tour']['start_date'])->format('Y M d')}} - {{\Carbon\Carbon::parse($data['tour']['end_date'])->format('Y M d')}}</td>
                            </tr>
                            <tr>
                                <td><i class="fa fa-user pink mr-1" aria-hidden="true"></i> {{__('pages.min_age')}} : {{$data['tour']['min_age']}}+</td>
                                <td><i class="fa fa-map-signs pink mr-1" aria-hidden="true"></i>  {{__('pages.pickup')}} : {{$data['tour']['pick_up']}}</td>
                                <td><i class="fa fa-file-alt pink mr-1" aria-hidden="true"></i>  {{__('pages.languages')}} - {{$data['tour']['languages']}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="description mb-2">
                        <div class="row">
                            @foreach($data['tour']['custom_features'] as $feature)
                                <div class="col-lg-6 col-md-6 mb-2">
                                    <div class="desc-box bg-grey p-4 rounded">
                                        <h5 class="mb-2">{!! $feature['title'] !!}</h5>
                                        <p class="mb-0">{!! $feature['content'] !!}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="description mb-4">
                        <h4>{{__('pages.what_to_expect')}}</h4>
                        {!! $data['tour']['what_to_expect'] !!}
                    </div>

                    <div class="description mb-4">
                        <h4>{{__('pages.not_included')}}</h4>
                        {!! $data['tour']['not_included'] !!}
                    </div>

                    <div class="accrodion-grp faq-accrodion mb-4" data-grp-name="faq-accrodion">
                        @foreach($data['tour']['timeline'] as $timeline)
                            <div class="accrodion @if($loop->first) active @endif timeline_location" data-link="{{$loop->index}}">
                                <div class="accrodion-title rounded">
                                    <h5 class="mb-0"><span>{{$timeline['title']}}</h5>
                                </div>
                                <div class="accrodion-content" style="@if($loop->first) display:block; @else display:none; @endif">
                                    <div class="inner">
                                        <p>{!! $timeline['content'] !!}</p>
                                    </div><!-- /.inner -->
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="single-map mb-4">
                        <h4>{{__('pages.location_map')}}</h4>
                        <div class="map rounded overflow-hidden">
                            <div style="width: 100%">
                               {{-- <iframe class=" rounded overflow-hidden" height="400"
                                        src="{{$data['tour']['location_map']}}"></iframe>--}}
                                @include('site.partials.tour_map', ['tour' => $data['tour']])
                            </div>
                        </div>
                    </div>

                    <div class="customer-information mb-4 d-flex align-items-center bg-grey rounded p-4">
                        <i class="fa fa-grin-wink rounded fs-1 bg-theme white p-3 px-4"></i>
                        <div class="customer-info ps-4">
                            <h6 class="mb-1">{{__('pages.good_to_know')}}</h6>
                            {{--<small>{{$data['tour']['cancellation_policy']}}</small>
                            <br>--}}
                            {!!$data['tour']['cancellation_policy']!!}
                    
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 ps-lg-4">
                @include('site.partials.booking_form')
            </div>
        </div>
    </div>
</section>
<!-- top Destination ends -->


<section style="padding-bottom: 0">
    <div class="container">
        <div class="section-title text-center text-lg-start">
            <h2 class="mb-3">{{__('pages.prices_and_accommodation')}}</h2>
        </div>
        <div class="row">
            @foreach($data['tour']['packages'] as $package)
            <div class="col-sm-5 mb-3">
                <div class="accommodation">
                    <div class="accommodation-head">
                        <h3>{{$package['title']}}</h3>
                    </div>
                    <div class="accommodation-container">
                        <h4>{{__('pages.prices')}}</h4>
                        @foreach($package['sub_packages'] as $sub_package)
                        <div class="accommodation-item">
                            <h6>{{ $sub_package['start_month'] }} - {{ $sub_package['end_month'] }}</h6>
                            <ul>
                                @foreach($sub_package['options'] as $option)
                                <li>
                                    <span class="tour-title">{{ $option['description'] }}</span>
                                    <span class="tour-price">{{$basic_info['current_currency_symbol']}} {{ $option['price'] }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        @endforeach
                        <div class="accommodation-hotels">
                            <h4>{{__('pages.hotels')}}</h4>
                            <div class="row">
                                @foreach($package['hotels'] as $hotel)
                                    <div class="col-sm-12 col-xxl-6">
                                        <div class="hotels-item">
                                            <div class="img-box">
                                                <img src="{{$hotel['image']}}" alt="{{$hotel['name']}}">
                                            </div>
                                            <div class="hotels-info">
                                                <h6>{{$hotel['name']}}</h6>
                                                <div class="comment-rate">
                                                    <div class="rating mar-right-15">
                                                        @for($i=1; $i <= $hotel['rate']; $i++)
                                                            <span class="fa fa-star checked"></span>
                                                        @endfor
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

@endsection
@push('js_scripts')
    <script>
      
        $(document).ready(function(){
            $(".niceSelect").niceSelect('destroy');
       // on submit
            $('.booking_form').submit(function(e) {
                e.preventDefault();

                $('#error_message').hide();
                // go to error message div

                // Prevent multiple form submissions
                if ($(this).data('submitted')) {
                    return false;
                }

                // Validate form inputs
                var title = $('#title').val();
                var name = $('#name').val();
                var email = $('#email').val();
                var phone = $('#phone').val();
                var gender = $('#gender').val();
                var start_date = $('#start_date').val();
                var adults =  $('#adults').text();
                var children = $('#children').text();
                var infants = $('#infants').text();
                var comment = $('#comment').val();

                if (!title ||
                        title == 0 ||
                        title == "Select" ||
                    !name ||
                    !email ||
                    !phone ||
                    !gender ||
                    !start_date ||
                    !adults ||
                    !children ||
                    !infants
                     ) {
                    $('#error_message_list').html('<li class="d-block">{{ __("pages.All fields are required.") }}</li>');
                    $('#error_message').show();
                    $('#error_message').get(0).scrollIntoView();
                    return false;
                }

                // Serialize the form data
                var formData = new FormData();
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('title', title);
                formData.append('name', name);
                formData.append('email', email);
                formData.append('phone', phone);
                formData.append('gender', gender);
                formData.append('start_date', start_date);
                formData.append('adults', adults == '10+' ? 10 : adults);
                formData.append('children', children == '10+' ? 10 : children);
                formData.append('infants', infants == '10+' ? 10 : infants);
                formData.append('comment', comment);
                // Set flag to prevent multiple form submissions
                $(this).data('submitted', true);

                // AJAX request
                $.ajax({
                    url: "{{ route('tour.booking',['tour_id' => $data['tour']['id']]) }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType:  false,
                    success: function(data) {
                        if(data.status == 'success'){
                            $('.booking_form').html('<h3 class="text-success">{{ __("pages.Thank you for your inquiry. We will get back to you shortly") }}</h3>');
                            $('.booking_form').get(0).scrollIntoView();
                        }else{
                            $('#error_message_list').html('<li class="d-block">{{ __("pages.Something went wrong. Please try again.") }}</li>');
                            $('#error_message').show();
                            $('#error_message').get(0).scrollIntoView();
                        }
                    },
                    error: function(xhr, status, error) {
                        var error_message = '';
                        var errors = xhr.responseJSON.errors;
                        if(errors){
                            var num = 1;
                            $.each(errors, function(key, value) {
                                error_message += '<li class="d-block"> ' + num + ' - ' + value + '</li>';
                                num++;
                            });
                        } else {
                            error_message += '<li class="d-block">'+ xhr.responseJSON.message +'</م>';
                        }

                        $('#error_message_list').html(error_message);
                        $('#error_message').show();
                        $('#error_message').get(0).scrollIntoView();
                    },
                    complete: function() {
                        // Reset flag to allow form submissions
                        $('.booking_form').data('submitted', false);
                    }
                });
                return false;
            });
        });
    </script>
    <script>
        const buttons = document.querySelectorAll("button");
        const minValue = 0;
        const maxValue = 10;

        buttons.forEach((button) => {
            button.addEventListener("click", (event) => {

                // except the submit button
                if (event.target.type === "submit") {
                    return;
                }

                // 1. Get the clicked element
                const element = event.currentTarget;
                // 2. Get the parent
                const parent = element.parentNode;
                // 3. Get the number (within the parent)
                const numberContainer = parent.querySelector(".number");
                const number = parseFloat(numberContainer.textContent);
                // 4. Get the minus and plus buttons
                const increment = parent.querySelector(".plus");
                const decrement = parent.querySelector(".minus");
                // 5. Change the number based on click (either plus or minus)
                const newNumber = element.classList.contains("plus")
                    ? number + 1
                    : number - 1;
                numberContainer.textContent = newNumber;
                console.log(newNumber);
                // 6. Disable and enable buttons based on number value (and undim number)
                if (newNumber === minValue) {
                    decrement.disabled = true;
                    numberContainer.classList.add("dim");
                    // Make sure the button won't get stuck in active state (Safari)
                    element.blur();
                } else if (newNumber > minValue && newNumber < maxValue) {
                    decrement.disabled = false;
                    increment.disabled = false;
                    numberContainer.classList.remove("dim");
                } else if (newNumber === maxValue) {
                    increment.disabled = true;
                    numberContainer.textContent = `${newNumber}+`;
                    element.blur();
                }
            });
        });



    </script>
@endpush