@extends('website.layouts.master', ['no_transparent_header' => false])
@section('css')

<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

<!-- tdatepicker -->
<link rel="stylesheet" href="{{ asset('js/datepicker/t-datepicker.min.css') }}" />
<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />

<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />


<script src="{{ asset('js/spotlight_master/spotlight.bundle.js') }}"></script>


<!-- boostrap datepicker -->
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

@endsection


@section('content')


<section class="mb-3 container px-4 px-md-5 position-relative z-2 bg-white py-4 b-r-l-cont"
    style="border-radius: 20px 20px 20px 20px; position: relative; z-index: 1; top: -1rem;">

    <div class="d-flex justify-content-between align-items-center">
        <div>

            <a class="link-cust-text text-gray-400 mb-3" href="{{ route('patient_auth.all_visa') }}"><i
                    class="fa-solid fa-arrow-left"></i> Return Back</a>
            <h1 class="fw-bold mb-0">{{ $visa->name }}</h1>

            <p class="text-gray-300 text-s text-truncate fw-bold"><i class="fa-solid fa-location-dot"></i> <span> {{
                    $visa->country->name }}</span></p>
            <div>
                <div class="d-flex align-items-center flex-wrap">
                    <div class="second-color ms-2">
                        <span><i class="fa-solid fa-star"></i></span>
                        <span><i class="fa-solid fa-star"></i></span>
                        <span><i class="fa-solid fa-star"></i></span>
                        <span><i class="fa-solid fa-star"></i></span>
                        <span><i class="fa-solid fa-star"></i></span>
                    </div>
                    <h3 class="fw-bold mb-0">5.0<small class="text-gray-400 fw-light text-s">/5</small></h3>
                </div>
            </div>
        </div>

        <div class="text-center px-2 px-md-4">

            <div class="mb-3">
                @if($visa->lowest)
                <p class="text-xs text-gray-500 mb-0">Started</p>
                <h1 class="fw-bold mb-0">{{ $visa->lowest }} <small class="text-xxs texst-gray-400 fw-light">L.E
                    </small>
                </h1>
                <a href="#types">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        Check Visa Type
                    </div>
                </a>
                @else
                <a href="#">
                    <div class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                            class="fas fa-arrow-right ms-1"></i>
                        No Price Available
                    </div>
                </a>
                @endif

            </div>
        </div>

    </div>

</section>


<section class="container px-3 px-md-5 mb-4">
    <div class="bg-white border_radius_20 p-3 p-md-5" style="min-height: 455px">

        <ul class="nav nav-tabs mb-5 border-0 pe-0" id="myTab" role="tablist">
            <li class="nav-item " role="presentation">
                <button class="nav-link active text-gray-400" id="hotel-tab" data-bs-toggle="tab"
                    data-bs-target="#info_tap" type="button" role="tab" aria-controls="info_tap" aria-selected="true"
                    class="text-gray-500"><i class="fas fa-hotel ms-1"></i>
                    Description</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link text-gray-400" id="airline_tap-tab" data-bs-toggle="tab"
                    data-bs-target="#review_tap" type="button" role="tab" aria-controls="review_tap"
                    aria-selected="false" class="main-color"><i class="fa-solid fa-users ms-1"></i>
                    Rates</button>
            </li>
        </ul>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="info_tap" role="tabpanel" aria-labelledby="bus_tap">

                <div class="row">
                    <div class="col-12">
                        <h3 class="mb-3">
                            Know more about <span class=" fw-bold"> {{ $visa->name }}</span>
                        </h3>
                        <p class=" text-gray-400">{!! $visa->description !!}</p>
                    </div>

                </div>

            </div>

            {{-- rate --}}
            <div class="tab-pane fade show" id="review_tap" role="tabpanel" aria-labelledby="airline_tap">
                No rate yet
            </div>



        </div>
    </div>

    </div>

</section>


@if($visa->types)

{{-- rooms --}}
<section class="container px-3 px-md-5 mb-5" id="types">
    <h5 class="fw-bold mb-3"><i class="fa-solid fa-passport"></i> Choose your visa type</h5>

    @foreach ($visa->types as $item)

    <div class="bg-white border_radius_20 px-3 px-md-3 mb-3">
        {{-- available rooms --}}
        <div class="available_rooms_unit_cont">
            <div class="available_rooms_unit_item row border-bottom py-4">
                <div class="col-12 col-md-6 d-flex">
                    <img class="avatar-lg me-2 b-r-xs" src="{{ URL::asset('img/visa/cat/' . $visa->main_image) }}">
                    <div>
                        <h5 class="text-gray-900 text-truncate fw-bold mb-0">{{ $item->name }}</h5>
                        <h6 class="text-xs text-gray-400 mb-0">Price for 1 person</h6>
                    </div>
                </div>
                <div class="col-12 col-md-6 d-flex justify-content-around align-items-center">
                    <div>
                        <h6 class="mb-2 text-gray-800"><i class="fa-solid fa-user"></i>
                            1 Person
                        </h6>
                    </div>

                    <div class="text-center">
                        <p class="text-xs text-gray-500 mb-0">Total Price for 1 Person</p>
                        <h2 class="fw-bold mb-1">{{ $item->sell }} <small class="text-xxs texst-gray-400 fw-light">L.E
                            </small>
                        </h2>
                        <a data-bs-toggle="modal" data-bs-target="#choose_date_{{ $item->id }}"
                            class="yellow_400 border_radius_20 fw-normal text-s m-0"> <i
                                class="fas fa-arrow-right ms-1"></i>
                            Choose Traveling Date
                        </a>
                    </div>
                </div>

            </div>

        </div>

    </div>



    <!-- Modal lab insert data -->
    <div class="modal fade" id="choose_date_{{ $item->id }}" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">


            <div class="modal-content b-r-s-cont border-0">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-calendar me-1"></i>
                        Choose Date</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Modal content -->
                <div class="modal-body px-5 py-3">

                    <form id="add_price_modal">

                        <div class="row mb-2">

                            <div class="col-12 mb-3">
                                <label class="form-label">{{ __('Arrival Date') }}
                                    <small>({{ __('basic.optional') }})</small></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text"><i class="bi bi-calendar2-week-fill"></i>
                                        </div>
                                    </div>
                                    <input id="arrival_date_modal" type="text" class="form-control hasdatetimepicker"
                                        placeholder="YYYY/MM" required>
                                </div>
                            </div>

                        </div>

                    </form>
                </div>

                <div class="modal-footer">
                    <div class="left-side">
                        <button type="button" class="btn btn-default btn-link" data-bs-dismiss="modal">{{
                            __('basic.never mind') }}</button>
                    </div>
                    <div class="divider"></div>
                    <div class="right-side">
                        <button class="btn btn-default btn-link main-color fw-bold add_cart_ajax"
                            data-bs-dismiss="modal" data-id="{{ $item->id }}" data-cat="{{ $item->name }}"
                            data-type="visa" data-qty="1">Add To
                            Cart</button>
                    </div>
                </div>
            </div>

        </div>

    </div>
    @endforeach

</section>
@endif

{{-- related hotels --}}

<section class="container mb-0 bg-white b-r-l-cont pt-4">
    <div class="d-flex justify-content-between mb-0">

        <div class="mb-3">

            <h3 class="text-gray-800 fw-bold mb-0">
                Hotels You Might Like in {{ $visa->destination->name }}
            </h3>
            <h6 class="text-gray-300  mb-1">
                Here is a list of packages for you
            </h6>
        </div>
    </div>
    <div class="swiper swiper_products">

        <div class="swiper-wrapper">
            @foreach ($units as $item)
            @include('website.layouts.components.hotel_slider')
            @endforeach
        </div>

        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</section>

@endsection

@section('js')


{{-- gallery lightbox --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"
    integrity="sha512-Ixzuzfxv1EqafeQlTCufWfaC6ful6WFqIz4G+dWvK0beHw0NVJwvCKSgafpy5gwNqKmgUfIBraVwkKI+Cz0SEQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    lightbox.option({
      'resizeDuration': 200,
      'wrapAround': true,
      'disableScrolling': true,
    })
</script>

<!-- datapicker date and time -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    //-------- datepicker time --------
        $('.datepicker_time').flatpickr({
            enableTime: false,
            dateFormat: "Y-m-d",
            theme: "dark", // defaults to "light"
        });
</script>

<script>
    var full_height_width_slider_swiper = new Swiper(".full_height_width_slider_swiper", {
        pagination: {
        el: ".swiper-pagination",
      },
    });
 
    var swiper = new Swiper(".to_do_desti_swiper", {
      slidesPerView: "auto",
      loop: true,
      touchEventsTarget: 'container',
      slidesPerView: "auto",
      touchEventsTarget: 'container',
      spaceBetween: 10,
      loop: true,
      
    });
</script>


<script src="{{ asset('js/datepicker/t-datepicker.min.js') }}"></script>


<script>
    $('.t-datepicker').tDatePicker({
        autoClose:true,
        durationArrowTop:200,
        numCalendar:2
    });
</script>

<script>
    // Send Search Text to the server
        $(".search_hotel").keyup(function() {
        let search_query = $(this).val();
        if (search_query != "") {

            var url = "{{ route('patient_auth.destination_search', ':id') }}";
            url = url.replace(':id', search_query);

            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    $(".search_destination_cont").empty();

                    $('.dropdown_booking_destination_cont').show();

                    if (data.length > 0) {
                        var html = ''
                        $.each(data, function(key, value) {
                            html += 
                            '<li data-slug="' + value.slug + '" data-name="' + value.name + '" class="d-flex align-items-center clickable-item-pointer fs-6 link-cust-text text-gray-300 mb-2 search_hotel_select">' +
                                    '<i class="fa-solid fa-location-dot me-2"></i>' +
                                    '<p class="mb-0 text-end">' + value.name + '</p>' +
                            '</li>' 
                        });
                        $('.search_destination_cont').html(html);
                    }else{
                        $('.search_destination_cont').html('<li class="d-flex align-items-center fs-6 text-gray-300 mb-2">No serach found</li>' );
                    }
                },
            });
        } else {
            // $('.dropdown_booking_destination_cont').hide();
        }
    });

    $(document).on('click', '.search_hotel_select', function() {

        var slug = $(this).data('slug');
        var name = $(this).data('name');

        $(".search_hotel").val(name);
        $('.search_hotel_input').val(slug);
    })

</script>
<!-- jquery ui datepicker -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
    $(function() {
                $('.hasdatetimepicker').datepicker({
                    todayHighlight: true,
                    format: "yyyy-mm-dd",
                }).on('change', function(){
                    $('.datepicker').hide();
                });
            });
</script>
@endsection