@extends('layouts.frontend')
@section('content')
 <!-- search -->
 <div class="search-overlay">
    <div class="d-table">
        <div class="d-table-cell">
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-layer"></div>
            <div class="search-overlay-close">
                <span class="search-overlay-close-line"></span>
                <span class="search-overlay-close-line"></span>
            </div>
            <div class="search-overlay-form">
                <form>
                    <input type="text" class="input-search" placeholder="Search here...">
                    <button type="button"><i class="fas fa-search"></i></button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Common Banner Area -->
<section id="common_banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="common_bannner_text">
                    <h2>Destination details</h2>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><span><i class="fas fa-circle"></i></span><a
                                href="top-destinations.html">Destination</a></li>
                        <li><span><i class="fas fa-circle"></i></span>Destination details</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<!--Destination details Areas -->
<section id="top_destination_main" class="section_padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="tour_details_leftside_wrapper">
                    <div class="tour_details_heading_wrapper">
                        <div class="tour_details_top_heading">
                            <h2>{{$package->tour_name}}</h2>
                            <h5><i class="fas fa-map-marker-alt"></i> {{$package->location}}.</h5>
                        </div>
                        <div class="tour_details_top_heading_right">
                            {{-- <h4>Excellent</h4> --}}
                            <h6>{{$package->days}} Days / {{$package->night != null ? $package->night .' Night' : ''}}</h6>
                            {{-- <p>(1214 reviewes)</p> --}}
                        </div>
                    </div>
                    {{-- <div class="tour_details_top_bottom">
                        <div class="toru_details_top_bottom_item">
                            <div class="tour_details_top_bottom_icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="tour_details_top_bottom_text">
                                <h5>Duration</h5>
                                <p>10 days</p>
                            </div>
                        </div>
                        <div class="toru_details_top_bottom_item">
                            <div class="tour_details_top_bottom_icon">
                                <i class="fas fa-paw"></i>
                            </div>
                            <div class="tour_details_top_bottom_text">
                                <h5>Tour type</h5>
                                <p>Group tour</p>
                            </div>
                        </div>
                        <div class="toru_details_top_bottom_item">
                            <div class="tour_details_top_bottom_icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="tour_details_top_bottom_text">
                                <h5>Group size</h5>
                                <p>50 people</p>
                            </div>
                        </div>
                        <div class="toru_details_top_bottom_item">
                            <div class="tour_details_top_bottom_icon">
                                <i class="fas fa-map-marked"></i>
                            </div>
                            <div class="tour_details_top_bottom_text">
                                <h5>Location</h5>
                                <p>Amazon rain forest</p>
                            </div>
                        </div>
                    </div> --}}
                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner">
                        @foreach ($package->images as $key => $item)
                            
                          <div class="carousel-item {{$key == 0 ? 'active' : ''}}">
                            <img class="d-block w-100" src="{{$item->url}}" alt="First slide" style="max-width:100%">
                          </div>
                         @endforeach
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="tour_details_boxed">
                        <h3 class="heading_theme">Overview</h3>
                        <div class="tour_details_boxed_inner">
                            {!! $package->tour_overview !!}
                        </div>
                    </div>
                    <div class="tour_details_boxed">
                        <h3 class="heading_theme">Itinerary</h3>
                        <div class="tour_details_boxed_inner">
                            <div class="accordion" id="accordionExample">
                                @foreach ($package->packagePackageIteneraries as $key => $itenerary)
                                <div class="accordion_flex_area">
                                    <div class="accordion_left_side">
                                        <h5>Day {{$key + 1}}</h5>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{$key+1}}">
                                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{$key+1}}" aria-expanded="true"
                                                aria-controls="collapse{{$key+1}}">
                                                {{$itenerary->title}}
                                            </button>
                                        </h2>
                                        <div id="collapse{{$key+1}}" class="accordion-collapse collapse {{$key == 0 ? 'show' : ''}}"
                                            aria-labelledby="heading{{$key+1}}" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="accordion_itinerary_list">
                                                    {!! $itenerary->description !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                
                               
                            </div>
                        </div>
                    </div>
                    <div class="tour_details_boxed">
                        <h3 class="heading_theme">Inclusions</h3>
                        <div class="tour_details_boxed_inner">
                            @php
                                $inclusions = explode(',',$package->inclusions);
                            @endphp
                            <ul>
                                @foreach($inclusions as $inclusion)
                                <li>
                                    <i class="fa fa-circle fa-3x" aria-hidden="true" style="color:green; font-size:9px !important"></i>
                                    {{$inclusion}}
                                </li>
                                @endforeach
                            </ul>
                            
                        </div>
                    </div>
                    <div class="tour_details_boxed">
                        <h3 class="heading_theme">Exclusions</h3>
                        <div class="tour_details_boxed_inner">
                            @php
                                $exclusions = explode(',',$package->exclusions);
                            @endphp
                            <ul>
                                @foreach($exclusions as $exclusion)
                                <li>
                                    <i class="fa fa-circle fa-3x" aria-hidden="true" style="color:red; font-size:9px !important"></i>
                                    {{$exclusion}}
                                </li>
                                @endforeach
                            </ul>
                            
                        </div>
                    </div>
                    
                </div>
            </div>
            <div class="col-lg-4">
                <div class="write_your_review_wrapper">
                    <h3 class="heading_theme">Write your Query</h3>
                    <div class="write_review_inner_boxed">
                        <form action="{{route('frontend.query-store')}}" method="POST" id="news_comment_form">
                            <input type="hidden" name="package_id" value="{{$package->id}}">
                            @csrf
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="Enter full name" name="name">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="Enter email address" name="email">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="To Location" name="to_location">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="From Location" name="from_location">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="date" class="form-control bg_input"
                                            placeholder="Travel Date" name="date_of_travel">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="number" class="form-control bg_input"
                                            placeholder="Travel Passengers" name="no_of_people">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="No of Days" name="no_of_days">
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-froup">
                                        <input type="text" class="form-control bg_input"
                                            placeholder="Mobile No" name="mobile_no">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-froup">
                                        <textarea rows="6" placeholder="Short Description" name="description" class="form-control bg_input"></textarea>
                                    </div>
                                    <div class="comment_form_submit">
                                        <button class="btn btn_theme btn_md" type="submit">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
    $('.carousel').carousel();
</script>
@endsection