@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ langConverter($reservation->en_name, $reservation->fr_name) }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ langConverter($reservation->en_name, $reservation->fr_name) }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /Breadcrumb Area -->

    <!-- Work Area -->
    <div class="about-us-area py-0">
        <div class="rscnActivitiesSection mb-0">
            <div class="container rscnActivitiesContainer">

                {{-- Slider --}}
                <div class="blog-slide emzBlogSlide slider updated-slider-x1 mt-0 pb-5">
                    @foreach ($reservation->gallery as $gallery)
                        <div class="single-grid-blog">
                            <div class="blog-thumbnail">
                                <img class="thumbnail-image" src="{{ asset($gallery->image_medium) }}" />
                            </div>
                        </div>
                    @endforeach
                </div>
                {{-- /Slider --}}

                {{-- Tabs --}}
                <div class="emzFunderTabsBox emzReserveTabsBox">
                    <ul class="row nav emzFunderNav rscnReserveNav">
                        <li class="col-md-4 nav-item emzNavItem">
                            <a class="nav-link emzNavLink active" id="about-tab" data-bs-toggle="tab"
                                data-bs-target="#about" href="#">
                                <img src="{{ asset('frontend/assets/images/aboutReserve.png') }}" class="rscsNavImg">
                                <span>{{ __('About') . ' ' . langConverter($reservation->en_name, $reservation->fr_name) }}</span>
                            </a>
                        </li>
                        <li class="col-md-4 nav-item emzNavItem">
                            <a class="nav-link emzNavLink" id="activities-tab" data-bs-toggle="tab"
                                data-bs-target="#activities" href="#">
                                <img src="{{ asset('frontend/assets/images/activities.svg') }}" class="rscsNavImg">
                                <span>{{ __('Activities') }}</span>
                            </a>
                        </li>
                        <li class="col-md-4 nav-item emzNavItem">
                            @if ($reservation->pdf)
                                <a class="nav-link emzNavLink" target="_blank"
                                    href="{{ asset(IMG_RESERVATION . $reservation->pdf) }}">
                                    <img src="{{ asset('frontend/assets/images/rates.svg') }}" class="rscsNavImg">
                                    <span>{{ __('Rates') }}</span>
                                </a>
                            @else
                                <a class="disabled nav-link emzNavLink" href="">
                                    <img src="{{ asset('frontend/assets/images/rates.svg') }}" class="rscsNavImg">
                                    <span>{{ __('Rates') }}</span>
                                </a>
                            @endif

                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="tabContent">
                    <div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
                        <div class="emzTabTxt newsletter-wrapper has-tabs">
                            {!! $reservation->about !!}
                          <div class="row mt-5">
                          @if ($reservation->pdf_file)
                            <div class="col-sm-6 col-md-4 col-lg-3">
                                <a target="_blank" class="file-link d-block mb-3" href="{{ asset(IMG_RESERVATION.$reservation->pdf_file) }}">
                                    <div class="newsletter-info box-shadow bg-white p-2">
                                        <h3 class="pdf-reserve reservePdf">
                                            <img src="{{ asset('frontend/assets/images/pdf.svg') }}" alt="pdf icon">
                                            {{ $reservation->file_title}}
                                        </h3>
                                    </div>
                                </a>
                            </div>
                          @endif
                          </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="activities" role="tabpanel" aria-labelledby="activities-tab">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="rscnActivitiesTit">{{ __('Activities') }}</div>
                                <div class="rscnActivitiesdesc">
                                    {{ __('There Are Many Tourist Destinations in This Area') }}</div>
                                <div class="rscnActivitiesTxt">
                                    {!! langConverter($reservation->en_activity, $reservation->fr_activity) !!}
                                </div>
                                <div class="row">
                                    @foreach ($reservation->activeActivities as $index => $activity)
                                        <div class="col-md-4 col-sm-6 d-flex">
                                            <button id="activityModalButton" type="button" class="btn rscnActBox w-100"
                                                data-bs-toggle="modal" data-bs-target="#activityModal"
                                                data-attr="{{ route('reserve-activity.show', $activity->id) }}?reservation_id={{ $reservation->id }}">
                                                <img src="{{ asset(IMG_ACTIVITY . $activity->icon) }}" class="rscnActImg">
                                                <div class="rscnActTit">
                                                    {{ langConverter($activity->en_name, $activity->fr_name) }}</div>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-lg-6 d-none d-lg-block">
                                <div class="text-end">
                                    <img src="{{ asset($reservation->activity_image_larg) }}"
                                        class="rscnReserveImg">
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="tab-pane fade" id="rates" role="tabpanel" aria-labelledby="rates-tab">
                        <a href="{{ route('careerForm.create') }}">ddd</a>
                    </div> --}}
                </div>
                {{-- /Tabs --}}

            </div>
        </div>

        {{-- Where to find us section --}}
        <div class="rscnReserveLocation">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="rscnLocationTit">{{ __('Welcome to Our Reserve') }}</div>
                        <div class="rscnLocationSubTit">{{ __('Where to find us') }}</div>
                        <div class="rscnLocationDescription">
                            {!! langConverter($reservation->en_find_us, $reservation->fr_find_us) !!}
                        </div>
                        <div class="rscnBookResRtl">
                            <a href="{{ route('booking') }}?reserve_id={{ $reservation->id }}"
                                class="btn border-0 rscnBookBtn">{{ __('Book Now') }}</a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="rscnLocationMapBox">
                            <img src="{{ asset($reservation->find_us_image_larg) }}"
                                class="rscnLocationMap" />
                            {{-- <button type="button" id="rscnMapMarker-1" class="rscnMapMarker btn p-0"></button> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- /Where to find us section --}}

    </div>
    <!-- /Work Area -->
    <!-- Activity Modal -->
    <div class="modal fade" id="activityModal" tabindex="-1" aria-labelledby="activityModalLabel" aria-hidden="true">
        <div class="modal-dialog rscnActivDialog">
            <div class="modal-content border-0">
                <div class="modal-header border-bottom-0">
                    <h5 class="modal-title" id="activityModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- Slider --}}
                    <div class="activityGallery">

                    </div>
                    {{-- /Slider --}}
                    <div id="activityModalDescription" class="activityModalDescription"></div>
                </div>
                <div class="modal-footer justify-content-start pt-0 border-top-0">
                    <a href="{{ route('booking') }}?reserve_id={{ $reservation->id }}"
                        class="btn emzBookBtn">{{ __('Book Now') }}</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /Activity Modal -->

@endsection
@push('post_script')
    <script type="text/javascript">
        $(document).on('click', '#activityModalButton', function(event) {
            event.preventDefault();
            $('#activityModal').modal('show');
            let href = $(this).attr('data-attr');
            $.ajax({
                url: href,
                beforeSend: function() {
                    $("#activityModalLabel").html('');
                    $("#activityModalDescription").html('');
                    $("#activityModalListImage").attr("src", '');
                    $(".activityGallery").html('')
                },
                // return the result
                success: function(result) {
                    var src = '{{ asset('uploaded_files/reservation/acitvity/') }}'
                    $("#activityModalListImage").attr("src", src + '/' + result.image);

                    @if (app()->getLocale() == 'en')

                        if (result.activity) $("#activityModalLabel").html(result.activity.en_name);
                        else $("#activityModalLabel").html(result.en_name);

                        $("#activityModalDescription").html(result.en_description);
                    @else
                        if (result.activity) $("#activityModalLabel").html(result.activity.fr_name);
                        else $("#activityModalLabel").html(result.fr_name);

                        $("#activityModalDescription").html(result.fr_description);
                    @endif
                    html = '<div class="slider-inside-popup"> <div class="hero-slider">';
                    var src2 = '/'
                    $.each(result.gallery, function(index, row) {
                        // var src2 = '/uploaded_files/reservation/acitvity/gallery/' + row.image
                        var src2 = '/' + row.image_larg
                        html += '<img class="thumbnail-image" src="' + src2 + '"/>'
                        src2 = '';
                    })
                    html += '</div></div>'
                    $(".activityGallery").html(html)
                    $('.direction-ltr .hero-slider').slick({
                        infinite: true,
                        speed: 500,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        autoplay: false,
                        autoplaySpeed: 3000,
                        dots: false,
                        arrows: true,
                        prevArrow: '<i class="fas fa-arrow-left slick-prev"></i>',
                        nextArrow: '<i class="fas fa-arrow-right slick-next"></i>',
                    });
                    $('.direction-rtl .hero-slider').slick({
                        infinite: true,
                        speed: 500,
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        autoplay: false,
                        autoplaySpeed: 3000,
                        rtl: true,
                        dots: false,
                        arrows: true,
                        prevArrow: '<i class="fas fa-arrow-left slick-prev"></i>',
                        nextArrow: '<i class="fas fa-arrow-right slick-next"></i>',
                    });

                },
                complete: function() {},
                error: function(jqXHR, testStatus, error) {
                    console.log(error);
                    alert("Page " + href + " cannot open. Error:" + error);
                    $('#loader').hide();
                },
                timeout: 8000
            })
        });
        $('.emzBlogSlide').slick({
            lazyLoad: 'ondemand',
            slidesToShow: 3,
            slidesToScroll: 1
        });
    </script>
@endpush