@extends('layout.main')


@push('title')
    {!!$destination->meta!!}
@endpush

@section('main-section')

    <div class="subheader normal-bg section-padding" style="">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="text-custom-white">{{$destination->name}}</h1>
                    <ul class="custom-flex justify-content-center">
                        <li class="fw-500"> <a href="{{url('/')}}" class="text-custom-white">Home</a> </li>
                        <li class="fw-500"> <a href="{{url('/destination')}}" class="text-custom-white">Destination</a> </li>
                        <li class="active fw-500"> {{$destination->name}} </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <section class="section-padding bg-light-white listing-details">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="listing-details-inner  bg-custom-white padding-20">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="detail-slider-for mb-xl-20 magnific-gallery">
                                    <div class="slide-item">
                                        <a href="{{ asset('public/storage/'.$destination->image)}}" class="popup">
                                            <img src="{{ asset('public/storage/'.$destination->image)}}" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                </div>
                                <hr>
                                <div class="listing-meta-sec mb-md-80">
                                    <div class="tabs">
                                        <div class="tab-content">
                                            <div class="tab-pane fade active show" id="overview">
                                                <div class="tab-inner">
                                                    <div class="row">
                                                        <div class="col-md-7 mx-auto">
                                                            <div class="hotel-type mb-xl-20 bg-light-white padding-10">
                                                                <ul class="custom">
                                                                    <li class="text-light-dark">
                                                                        <label class="no-margin text-custom-blue">Destination Location</label>
                                                                        {{$destination->location->name}}
                                                                    </li>
                                                                    <li class="text-light-dark">
                                                                        <label class="no-margin text-custom-blue">Destination</label>
                                                                        {{$destination->name}}
                                                                    </li>
                                                                    <li class="text-light-dark">
                                                                        <label class="no-margin text-custom-blue">Time Period</label>
                                                                        {{$destination->time_period}}
                                                                    </li>
                                                                    <li class="text-light-dark">
                                                                        <label class="no-margin text-custom-blue">Destination Availability</label>
                                                                        Available
                                                                    </li>
                                                                    <li class="text-light-dark">
                                                                        <label class="no-margin text-custom-blue">Total Price</label>
                                                                        ₹ {{$destination->price}}
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-12">
                                                            <div class="information">
                                                                <h4 class="text-custom-black">{{$destination->name}} Information</h4>
                                                                {!!$destination->description!!}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="blog-details bg-custom-white">
                                            <hr>
                                            <div class="comment-box p-relative">
                                                <div id="comment-box">
                                                    <h4 class="text-custom-black fw-600">Reviews</h4>
                                                    <ul class="comments custom">
                                                        
                                                        @foreach ($reviewData as $reviewRow)
                                                        @if ($reviewRow->destination_id == $destination->id)
                                                        <li class="comment">
                                                            <article>
                                                                <div class="comment-avatar">
                                                                    @if ($reviewRow->image != null)
                                                                    <img src="{{asset('public/storage/'.$reviewRow->image)}}" class="rounded-circle" alt="{{$reviewRow->name}}" style="width: 90px">
                                                                    @else
                                                                    <img src="{{asset('public/assets/images/user.png')}}" class="rounded-circle" alt="{{$reviewRow->name}}" style="width: 90px">
                                                                    @endif
                                                                </div>
                                                                <div class="comment-content">
                                                                    <div class="comment-meta">
                                                                        <div class="comment-meta-header">
                                                                            <h5 class="text-custom-black fw-600 author mb-3">
                                                                                {{$reviewRow->name}}
                                                                                <span class="text-yellow">
                                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                                        @if ($i <= $reviewRow->rating)
                                                                                        <i class="fa fa-star"></i>
                                                                                        @else
                                                                                        <i class="far fa-star"></i>
                                                                                        @endif
                                                                                    @endfor
                                                                                </span></h5>
                                                                            <div class="post-date">
                                                                                <a href="#" class="date bg-custom-blue text-custom-white">{{$reviewRow->location}}</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="comment">
                                                                        <p class="text-light-dark">{{$reviewRow->message}}</p>
                                                                    </div>
                                                                </div>
                                                            </article>
                                                        </li>
                                                        @endif
                                                        @endforeach
                                                    </ul>
                                                    <div class="comment-respond" id="respond">
                                                        <h4 class="text-custom-black fw-600">Leave Comment</h4>
                                                        <form action="{{url('/comment')}}" method="post">
                                                            {!! csrf_field() !!}
                                                            <input type="hidden" name="tour_id" value="">
                                                            <input type="hidden" name="destination_id" value="{{$destination->id}}">
                                                            <input type="hidden" name="route_id" value="">
                                                            <input type="hidden" name="vehicle_id" value="">
                                                            <div class="row">
                                                                <div class="col-md-12">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Full Name</label>
                                                                        <input type="text" name="name" value="{{old('name')}}" class="form-control form-control-custom" placeholder="Full Name">
                                                                        <div style="color: #ff5050;margin-left: 15px; font-size: 11px; position: relative;bottom: 10px">
                                                                            @error('name')
                                                                                $message
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Email I'd</label>
                                                                        <input type="email" name="email" value="{{old('email')}}" class="form-control form-control-custom" placeholder="Enter Your Email">
                                                                        <div style="color: #ff5050;margin-left: 15px; font-size: 11px; position: relative;bottom: 10px">
                                                                            @error('email')
                                                                                $message
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Mobile Number</label>
                                                                        <input type="tel" name="phone" value="{{old('phone')}}" class="form-control form-control-custom" placeholder="Enter Your Mobile Number">
                                                                        <div style="color: #ff5050;margin-left: 15px; font-size: 11px; position: relative;bottom: 10px">
                                                                            @error('phone')
                                                                                $message
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Location</label>
                                                                        <input type="text" name="location" value="{{old('location')}}" class="form-control form-control-custom" placeholder="Enter Your City">
                                                                        <div style="color: #ff5050;margin-left: 15px; font-size: 11px; position: relative;bottom: 10px">
                                                                            @error('location')
                                                                                $message
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Rating</label>
                                                                        <select name="rating" class="form-control form-control-custom">
                                                                            <option value="1" style="color: #ff0000">&#9733;</option>
                                                                            <option value="2" style="color: #ff0000">&#9733;&#9733;</option>
                                                                            <option value="3" style="color: #ff0000">&#9733;&#9733;&#9733;</option>
                                                                            <option value="4" style="color: #ff0000">&#9733;&#9733;&#9733;&#9733;</option>
                                                                            <option value="5" style="color: #ff0000">&#9733;&#9733;&#9733;&#9733;&#9733;</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-12">
                                                                    <div class="form-group">
                                                                        <label class="text-custom-black fw-500 fs-14">Comment</label>
                                                                        <textarea rows="4" name="msg" class="form-control form-control-custom" placeholder="Comment">{{old('message')}}</textarea>
                                                                        <div style="color: #ff5050;margin-left: 15px; font-size: 11px; position: relative;bottom: 10px">
                                                                            @error('message')
                                                                                $message
                                                                            @enderror
                                                                        </div>
                                                                    </div>
                                                                    <button type="submit" class="btn-first btn-submit">Leave Comment</button>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="quick-quote bx-wrapper padding-20 mb-xl-30">
                                            <h5 class="text-custom-black">Enquiry Now</h5>
                                            <form action="{{ url('/enquiry')}}" method="post">
                                                <div class="row">
                                                    {!! csrf_field() !!}
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Name</label>
                                                            <input type="text" name="name" value="{{old('name')}}" class="form-control form-control-custom" placeholder="Your Name">
                                                            <div style="color: #ff0000;margin-left: 15px; font-size: 11px; position: relative;bottom: 0px">
                                                                @error('name')
                                                                    {{$message}}
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Email</label>
                                                            <input type="email" name="email" value="{{old('email')}}" class="form-control form-control-custom" placeholder="Your Email">
                                                            <div style="color: #ff0000;margin-left: 15px; font-size: 11px; position: relative;bottom: 0px">
                                                                @error('email')
                                                                    {{$message}}
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Phone Number</label>
                                                            <input type="tel" name="phone" value="{{old('phone')}}" class="form-control form-control-custom" placeholder="Your Phone">
                                                            <div style="color: #ff0000;margin-left: 15px; font-size: 11px; position: relative;bottom: 0px">
                                                                @error('phone')
                                                                    {{$message}}
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Pick Up</label>
                                                            <input type="text" name="pickup" value="{{old('pickup')}}" class="form-control form-control-custom" placeholder="Pick up Location">
                                                            <div style="color: #ff0000;margin-left: 15px; font-size: 11px; position: relative;bottom: 0px">
                                                                @error('pickup')
                                                                    {{$message}}
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Pick Up Date</label>
                                                            <div class="input-group group-form">
                                                                <input type="text" name="pickup_date" required value="{{old('pickup_date')}}" class="form-control form-control-custom datepickr" placeholder="mm/dd/yy" readonly>
                                                                <span class="input-group-append"> <i class="far fa-calendar"></i> </span>
                                                            </div>
                                                            <div style="color: #ff0000;margin-left: 15px; font-size: 11px; position: relative;bottom: 0px">
                                                                @error('pickup_date')
                                                                    {{$message}}
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Location</label>
                                                            <div class="group-form">
                                                                <select name="location" class="custom-select form-control form-control-custom">
                                                                    @foreach ($destinationData as $destinationRow)
                                                                    <option value="{{$destinationRow->name}}">{{$destinationRow->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500">Car Type</label>
                                                            <div class="group-form">
                                                                <select name="vehicle" class="custom-select form-control form-control-custom">
                                                                    @foreach ($vehicleData as $vehicleRow)
                                                                    <option value="{{$vehicleRow->name}}">{{$vehicleRow->name}}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <button type="submit" name="submit" class="btn-first btn-submit full-width btn-height">Book Now</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="need-help bx-wrapper padding-20">
                                            <h5 class="text-custom-black">Need Help?.</h5>
                                            <p class="text-light-dark">We would be more than happy to help you. Our
                                                team advisor are 24/7 at your service to help you.</p>
                                            <ul class="custom">
                                                <li class="text-custom-blue fs-18"> <i class="fas fa-phone-alt"></i>
                                                    <a href="tel:{{$data->phone1}}" class="text-light-dark">{{$data->phone1}}</a>
                                                </li>
                                                <li class="text-custom-blue fs-18"> <i class="fas fa-envelope"></i>
                                                    <a href="mailto:{{$data->email1}}" class="text-light-dark fs-14">{{$data->email1}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-padding partners">
        <div class="container">
            <div class="section-header text-center">
                <div class="section-heading">
                    <div class="section-description">
                        {{-- <p class="text-light-dark">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry. Lorem Ipsum has been the industry's standard dummy text.</p> --}}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="partners-slider arrow-layout-2 row">
                        
                        @foreach ($destination->destination_gallery as $image)
                        <div class="slide-item col-12">
                            <div class="partner-box bx-wrapper animate-img">
                                <a href="#">
                                    <img src="{{ asset('public/storage/'.$image)}}" class="img-fluid image-fit" alt="img">
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    @if(!empty($destination->faqs))
    <section class="section-padding bg-light-white faqs">
        <div class="container">
            <div class="row">
                <h6 class="d-none">1</h6>
                <div class="col-lg-12">
                    <h4 class="text-custom-black fw-600">Frequently Ask Questions</h4>
                    <div id="accordion" class="custom-accordion">
                        @foreach($destination->faqs as $key => $value)
                        @if($loop->iteration == 1)
                        <div class="card">
                            <div class="card-header" id="heading{{$loop->iteration}}">
                                <button class="collapsebtn" data-toggle="collapse" data-target="#collapse{{$loop->iteration}}">{{$key}}</button>
                            </div>
                            <div id="collapse{{$loop->iteration}}" class="collapse show" data-parent="#accordion">
                                <div class="card-body">
                                    <p class="text-theme">{{$value}}</p>
                                </div>
                            </div>
                        </div>
                        @else
                        <div class="card">
                            <div class="card-header" id="heading{{$loop->iteration}}">
                                <button class="collapsebtn collapsed" data-toggle="collapse" data-target="#collapse{{$loop->iteration}}">{{$key}}</button>
                            </div>
                            <div id="collapse{{$loop->iteration}}" class="collapse" data-parent="#accordion">
                                <div class="card-body">
                                    <p class="text-theme">{{$value}}</p>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
@endsection