@extends('layout.main')


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

@section('main-section')

        <!--================== PAGE-COVER ===============-->
        <section class="page-cover" id="cover-travel-guide">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-title">{{$vehicle->name}}</h1>
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{url('/vehicle')}}">Vehicle</a></li>
                            <li class="breadcrumb-item">{{$vehicle->name}}</li>
                        </ul>
                    </div><!-- end columns -->
                </div><!-- end row -->
            </div><!-- end container -->
        </section><!-- end page-cover -->
        
        <!--===== INNERPAGE-WRAPPER ====-->
        <section class="innerpage-wrapper">
            <div id="travel-guide" class="innerpage-section-padding">
                <div class="container">
                    <div class="row">
                    
                        <div class="col-12 col-md-12 col-lg-9 col-xl-9 content-side">
                            <div class="detail-tabs">
                                <ul class="nav nav-tabs nav-justified ">
                                    <li class="nav-item active"><a class="nav-link" href="#tv-guide-overview" data-toggle="tab">Overview</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#tv-guide-gallery" data-toggle="tab">Gallery</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#tv-guide-map" data-toggle="tab">Map</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#tv-guide-reviews" data-toggle="tab">Reviews</a></li>
                                </ul>
                                
                                <div class="tab-content">
        
                                    <div id="tv-guide-overview" class="tab-pane in active">
                                        <img src="{{asset('public/storage/'.$vehicle->image)}}" class="img-fluid" alt="{{$vehicle->name}}" />
                                            
                                        <div class="tab-text">
                                            <h3>{{$vehicle->name}} Overview</h3>
                                            <div class="rating">
                                                @for ($i = 1; $i <= 5; $i++)
                                                    @if ($i <= $vehicle->rating)
                                                    <span><i class="fa fa-star orange"></i></span>
                                                    @else
                                                    <span><i class="fa fa-star lightgrey"></i></span>
                                                    @endif
                                                @endfor
                                            </div><!-- end rating -->
                                            <div class="table-responsive">
                                                <table class="table table-striped">
                                                    <tbody>
                                                        <tr>
                                                            <td>Vehicle</td>
                                                            <td>{{$vehicle->name}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Vehicle Type</td>
                                                            <td>{{$vehicle->type}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Price</td>
                                                            <td>{{$vehicle->price}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Seat</td>
                                                            <td>{{$vehicle->seat}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Bags</td>
                                                            <td>{{$vehicle->bags}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td>Vehicle Rating</td>
                                                            <td>
                                                                <div class="rating">
                                                                    @for ($i = 1; $i <= 5; $i++)
                                                                    @if ($i <= $vehicle->rating)
                                                                    <span><i class="fa fa-star orange"></i></span>
                                                                    @else
                                                                    <span><i class="fa fa-star lightgrey"></i></span>
                                                                    @endif
                                                                    @endfor
                                                                </div><!-- end rating -->
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div><!-- end table-responsive -->
                                            {!! $vehicle->description !!}
                                        </div><!-- end tab-text -->
                                    </div><!-- end tv-guide-overview -->
                                    
                                    <div id="tv-guide-gallery" class="tab-pane">
                                        <div class="col-12">
                                            <div id="masonry" class="gaalery-padding masonary-padding">
                                                    
                                                @foreach ($vehicle->vehicle_gallery as $image)
                                                <div class="gallery-product">
                                                    <div class="gallery-block">
                                                        <div class="gallery-img ">
                                                            <img src="{{asset('public/storage/'.$image)}}" class="img-fluid" alt="Image-{{$loop->iteration}}" >
                                                            <div class="gallery-mask">
                                                                <div class="gallery-title">
                                                                    <h2>Image {{$loop->iteration}}</h2>
                                                                </div><!-- end gallery-title --> 
                                                                <a href="{{asset('public/storage/'.$image)}}" title="Image-{{$loop->iteration}}" class="with-caption image-link"><span><i class="fa fa-arrows-v"></i></span></a>
                                                            </div><!-- end gallery-mask -->
                                                        </div><!-- end gallery-img -->
                                                    </div><!-- end gallery-block -->
                                                </div><!-- end gallery-product -->
                                                @endforeach
                                            </div><!-- end masonry --> 
                                                
                                        </div>
                                    </div><!-- end tv-guide-hotels -->
                                    
                                    <div id="tv-guide-map" class="tab-pane">
                                        <div class="tv-guide-block">
                                            <div class="row">
                                                <div class="col-md-12 col-lg-12">
                                                    <iframe src="{{$data->map}}" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                                                </div><!-- end columns -->
                                            </div><!-- end row -->
                                        </div><!-- end tv-guide-block -->
                                        
                                    </div><!-- end tv-guide-gym -->
                                    
                                    <div id="tv-guide-reviews" class="tab-pane">
                                        @foreach($reviewData as $reviewRow)
                                        @if($reviewRow->vehicle_id == $vehicle->id)
                                        <div class="tv-guide-block">
                                            <div class="row">
                                                <div class="col-md-3 col-lg-3 tab-img">
                                                    <a href="#">
                                                        @if($reviewRow->image != null)
                                                        <img src="{{'public/storage/'.$reviewRow->image}}" class="img-fluid" alt="{{$reviewRow->name}}" />
                                                        @else
                                                        <img src="{{asset('public/images/user.png')}}" class="img-fluid" alt="{{$reviewRow->name}}" />
                                                        @endif
                                                    </a>
                                                </div><!-- end columns -->
                                                
                                                <div class="col-md-9 col-lg-9 tab-text">
                                                    <h3><a href="#">{{$reviewRow->name}}</a></h3>
                                                    <p class="attract-loc"><span><i class="fa fa-map-marker"></i></span>{{$reviewRow->location}}</p>
                                                    <div class="rating">
                                                        @for ($i = 1; $i <= 5; $i++)
                                                        @if ($i <= $reviewRow->rating)
                                                        <span><i class="fa fa-star orange"></i></span>
                                                        @else
                                                        <span><i class="fa fa-star lightgrey"></i></span>
                                                        @endif
                                                        @endfor
                                                    </div><!-- end rating -->
                                                    <p>{!! $reviewRow->description!!}</p>
                                                </div><!-- end columns -->
                                            </div><!-- end row -->
                                        </div><!-- end tv-guide-block -->
                                        @endif
                                        @endforeach
                                        <div class="side-bar">
                                            <div class="side-bar-block booking-form-block">
                                                <div class="booking-form">
                                                    <h3>Add Review</h3>
                                                    <p>Find your dream tour today</p>
                                                        
                                                    <form action={{url('/comment')}} method="post" class="row">
                                                        {!! csrf_field() !!}
                                                        <input type="hidden" name="tour_id" value="">
                                                        <input type="hidden" name="destination_id" value="">
                                                        <input type="hidden" name="vehicle_id" value="{{$vehicle->id}}">
                                                        <div class="col-md-12 no-sp-l">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" placeholder="Full Name" value="{{old('name')}}" name="name" required/>
                                                                <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                                    @error('name')
                                                                    {{$message}}
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 no-sp-l">
                                                            <div class="form-group">
                                                                <input type="email" class="form-control" placeholder="Email" value="{{old('name')}}" name="email" required/>
                                                                <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                                    @error('email')
                                                                    {{$message}}
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 no-sp-l">
                                                            <div class="form-group">
                                                                <input type="tel" class="form-control" placeholder="Phone" value="{{old('name')}}" name="phone" required/>
                                                                <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                                    @error('phone')
                                                                    {{$message}}
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 no-sp-l">
                                                            <div class="form-group">
                                                                <input type="text" class="form-control" placeholder="Current Location" value="{{old('location')}}" name="location" required/>
                                                                <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                                    @error('location')
                                                                    {{$message}}
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 no-sp-l">    
                                                            <div class="form-group right-icon">
                                                                <select class="form-control" name="rating" required>
                                                                    <option selected disabled value="">Rating out of Five</option>
                                                                    <option value="1">&#9733;</option>
                                                                    <option value="2">&#9733;&#9733;</option>
                                                                    <option value="3">&#9733;&#9733;&#9733;</option>
                                                                    <option value="4">&#9733;&#9733;&#9733;&#9733;</option>
                                                                    <option value="5">&#9733;&#9733;&#9733;&#9733;&#9733;</option>
                                                                </select>
                                                                <i class="fa fa-angle-down"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12 no-sp-l">
                                                            <div class="form-group">
                                                                <textarea class="form-control" placeholder="Enter Message" name="msg" required>{{old('msg')}}</textarea>
                                                                <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                                    @error('msg')
                                                                    {{$message}}
                                                                    @enderror
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-12 text-center" id="result_msg"></div>
                                                        <button class="btn btn-block btn-orange" type="submit" id="submit" name="submit">Confirm Booking</button>
                                                    </form>
                                                        
                                                </div><!-- end booking-form -->
                                            </div><!-- end side-bar-block -->
                                                
                                        </div>
                                    </div><!-- end tv-guide-sports -->
                                    
                                </div><!-- end tab-content -->
                            </div><!-- end detail-tabs -->
                        </div><!-- end columns -->  
                        
                        <div class="col-12 col-md-12 col-lg-3 side-bar right-side-bar">
                            
                            <div class="side-bar-block booking-form-block">
                                <h2 class="selected-price">₹ {{$vehicle->price}} <span>Price</span></h2>
                            
                                <div class="booking-form">
                                    <h3>Book Vehicle</h3>
                                    <p>Find your dream tour today</p>
                                    
                                    <form action="{{url('/booking')}}" method="post">
                                        {!! csrf_field() !!}
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Full Name" value="{{old('name')}}" name="name"/>
                                            <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                @error('name')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                            
                                        <div class="form-group">
                                            <input type="email" class="form-control" placeholder="Email" value="{{old('email')}}" name="email"/>
                                            <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                @error('email')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <input type="tel" class="form-control" placeholder="Phone" value="{{old('phone')}}" name="phone"/>
                                            <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                @error('phone')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <input type="text" class="form-control" placeholder="Pick-up Location" value="{{old('pickup')}}" name="pickup"/>
                                            <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                @error('pickup')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="form-group">
                                            <input type="text" class="form-control dpd3" placeholder="Pick-up Date" value="{{old('pickup_date')}}" name="pickup_date"/>
                                            <div style="color: #f13352;margin: 0 15px;position:absolute;">
                                                @error('pickup_date')
                                                {{$message}}
                                                @enderror
                                            </div>
                                        </div>
                                        
                                        <div class="form-group right-icon">
                                            <select class="form-control" name="destination">
                                                @foreach($vehicleData as $vehicleRow)
                                                <option value="{{$vehicleRow->name}}" @if($vehicleRow->id == $vehicle->id) selected @endif>{{$vehicleRow->name}}</option>
                                                @endforeach
                                            </select>
                                            <i class="fa fa-angle-down"></i>
                                        </div>
                                        
                                        <div class="form-group right-icon">
                                            <select class="form-control" name="vehicle">
                                                <option selected disabled>Select Car</option>
                                                @foreach($vehicleData as $vehicleRow)
                                                <option value="{{$vehicleRow->name}}">{{$vehicleRow->name}}</option>
                                                @endforeach
                                            </select>
                                            <i class="fa fa-angle-down"></i>
                                        </div>
                                        <div class="col-md-12 text-center" id="result_msg"></div>
                                        <button class="btn btn-block btn-orange" type="submit" id="submit" name="submit">Confirm Booking</button>
                                    </form>
                         
                                </div><!-- end booking-form -->
                            </div><!-- end side-bar-block -->
                            
                        </div><!-- end columns -->
        
                    </div><!-- end row -->
                </div><!-- end container -->   
            </div><!-- end travel-guide -->
        </section><!-- end innerpage-wrapper -->
        
@endsection