@extends('layout.main')
@section('main-section')
<div class="breadcumb-wrapper" data-bg-src="assets/img/breadcumb/breadcumb-bg.jpg">
    <div class="container z-index-common">
        <div class="breadcumb-content">
            <h1 class="breadcumb-title">{{$package->name}}</h1>
            <div class="breadcumb-menu-wrap">
                <ul class="breadcumb-menu">
                    <li><a href="/">Home</a></li>
                    <li>{{$package->name}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>


<section class="space-bottom">
    <div class="outer-wrap">
        <div class="container">
            <div class="shadow-content1">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="filter-active tour-booking-active">
                            <div class="filter-item tab-content1">
                                <div class="info-image">
                                    <img src="{{asset('/public/uploads/post/'.$package->image)}}" style="width:100%;" alt="tours-img">
                                </div>
                                <div class="tour-review">
                                    <ul>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="fas fa-star"></i></li>
                                        <li><i class="far fa-star"></i></li>
                                        <li>(4 Review)</li>
                                    </ul>
                                </div>
                                <div class="row justify-content-between align-items-center">
                                    <div class="col-md-8">
                                        <h2 class="tab-title">{{$package->name}}</h2>
                                    </div>
                                    <div class="col-auto">
                                        <p class="tour-price"><strong>$299</strong> / Per Person</p>
                                    </div>
                                </div>
                                <p>{{$package->para}}</p>
                                <table class="infolist">
                                    <tr>
                                        <td class="info-heading">Destination</td>
                                        <td class="info">{{$package->name}}</td>
                                    </tr>
                                    <tr>
                                        <td class="info-heading">Departure</td>
                                        <td class="info">{{$package->d4}}</td>
                                    </tr>
                                    <tr>
                                        <td class="info-heading">Departure Time</td>
                                        <td class="info">Approximately 8.00AM</td>
                                    </tr>
                                    <tr>
                                        <td class="info-heading">Age Restriction</td>
                                        <td class="info">Must be 13+</td>
                                    </tr>
                                    <tr>
                                        <td class="info-heading">Service Included</td>
                                        <td>
                                            <table class="sub-infolist">
                                                <tr>
                                                    <td class="info">5 Star Accommodation</td>
                                                    <td class="info">Airport Transfer</td>
                                                    <td class="info">Breakfast</td>
                                                    <td class="info">Personal Guide</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="info-heading">Service Not Included</td>
                                        <td>
                                            <table class="sub-infolist">
                                                <tr>
                                                    <td class="info">Gallery Ticket</td>
                                                    <td class="info">Lunch</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="sidebar-area tours-sidebar">
                            <div class="widget">
                                <h3 class="widget_title">Plan Your Trip</h3>
                                <p class="widget_text">Get the Best Trip Experience with Travelling with Us</p>
                                <form class="booking-form">
                                    <div class="form-group ">
                                        <i class="fas fa-search"></i>
                                        <input type="text" placeholder="Search Tour" />
                                    </div>
                                    <div class="form-group ">
                                        <i class="fas fa-compass"></i>
                                        <input type="text" placeholder="Where To?" />
                                    </div>

                                    <div class="form-group">
                                        <i class="fas fa-calendar-alt"></i>
                                        <select class="form-select" name="name">
                                            <option value="" selected="selected" disabled="disabled" hidden="">Select Month</option>
                                            <option value="">January</option>
                                            <option value="">February</option>
                                            <option value="">March</option>
                                            <option value="">April</option>
                                        </select>
                                    </div>

                                    <button class="vs-btn style4 w-100">Search</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="filter-item tab-content1">

                    <h2 class="tab-title">Tour Plan </h2>
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    <h4 class="tp-title">Day 1: {{$package->d1}}</h4>
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$package->p1}}
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    <h4 class="tp-title">Day 2: {{$package->d2}}</h4>
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$package->p2}}
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    <h4 class="tp-title">Day 3: {{$package->d3}}</h4>
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$package->p3}}
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFour">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    <h4 class="tp-title">Day 4: {{$package->d4}}</h4>
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$package->p4}}
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingFive">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    <h4 class="tp-title">Day 5: {{$package->d5}}</h4>
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
                                <div class="accordion-body">
                                    {{$package->p5}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <section class="shape-mockup-wrap" style="margin-top:40px;">
                    <div class="container ">
                        <div class="row justify-content-center text-center">
                            <div class="col-xl-6 col-lg-8 wow fadeInUp" data-wow-delay="0.3s">
                                <div class="title-area">
                                    <span class="sec-subtitle">Our</span>
                                    <h2 class="sec-title h1">Gallery</h2>
                                </div>
                            </div>
                        </div>
                        <div class="row vs-carousel" data-slide-show="4" data-arrows="false" data-lg-slide-show="3" data-md-slide-show="2"
                            data-sm-slide-show="1">
                            <div class="col-xl-4 col-lg-4 col-sm-4">
                                <div class="package-style1">
                                    <div class="package-img">
                                        <a href="#"><img class="w-100" src="{{asset('/public/assets/gallery/goa.webp')}}"
                                                alt="Package Image"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-sm-6">
                                <div class="package-style1">
                                    <div class="package-img">
                                        <a href="#"><img class="w-100" src="{{asset('/public/assets/gallery/kerala.webp')}}"
                                                alt="Package Image"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-sm-6">
                                <div class="package-style1">
                                    <div class="package-img">
                                        <a href="#"><img class="w-100" src="{{asset('/public/assets/gallery/port-blair.webp')}}"
                                                alt="Package Image"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-sm-6">
                                <div class="package-style1">
                                    <div class="package-img">
                                        <a href="#"><img class="w-100" src="{{asset('/public/assets/gallery/srinagar.webp')}}"
                                                alt="Package Image"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-6 col-sm-6">
                                <div class="package-style1">
                                    <div class="package-img">
                                        <a href="#"><img class="w-100" src="{{asset('/public/assets/gallery/yamontri.webp')}}"
                                                alt="Package Image"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <div class="filter-item tab-content1" style="margin-top:50px;">
                    <h2 class="tab-title">Reviews Scores and Score Breakdown</h2>
                    <p class="tab-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                        eget dolor. Aenean massa. Cum sociis Theme natoque penatibus et magnis dis parturient montes,
                        nascetur ridiculus mus</p>

                    <div class="row">
                        <div class="col-lg-3">
                            <div class="progress-style1">
                                <div class="circle-progress" data-value="0.90"><span class="progress-value"></span></div>
                                <h3 class="progress-title h5">Rating</h3>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="progress-style1">
                                <div class="circle-progress" data-value="0.95"><span class="progress-value"></span></div>
                                <h3 class="progress-title h5">Comfort</h3>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="progress-style1">
                                <div class="circle-progress" data-value=".99"><span class="progress-value"></span></div>
                                <h3 class="progress-title h5">Foods</h3>
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="progress-style1">
                                <div class="circle-progress" data-value="0.97"><span class="progress-value"></span></div>
                                <h3 class="progress-title h5">Security</h3>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</section>











@endsection