@extends('layout.main')

@section('main-section')
    <!-- subheader -->
    <section id="subheader" style="background: url( {{ asset('public/storage/'.$tour->image) }})no-repeat fixed top;background-size: cover">
      <div class="container-fluid m-5-hor">
        <div class="row">
          <div class="col-md-12">
            <h1 class="big-heading">
              {{ $tour->name }}
            </h1>
            <p>{{ $tour->location }}</p>
          </div>
        </div>
      </div>
    </section>
    <!-- subheader end -->
    
    <!-- section -->
    <section aria-label="section-blog" id="content">
        <div class="container-fluid">
            <div class="row">
                <div class="v-align">
                    <div class="col-md-11 col-xs-12">
                        <div class="row">
                            <!-- left content -->
                            <div class="col-md-8">
                                <!-- detail img -->
                                <div id="projectsBig" class="owl-carousel">
                                    @foreach($tour->tour_gallery as $image)
                                    <div class="item"><img alt="#" src="{{ asset('public/storage/'.$image) }}"></div>
                                    @endforeach
                                </div>
                                <!-- detail img end -->
                                <div class="grid-item">
                                    <!-- text detail -->
                                    <h3 class="big-heading">The {{ $tour->name }}</h3>
                                    {!! $tour->description !!}
                                    <!-- text detail end -->
                                </div>
                            </div>
                            <!-- left content end -->
                            
                            <!-- left content -->
                            <div class="col-md-4">
                                <aside>
                                    <!-- widget -->
                                    <div class="widget">
                                        <div class="service-hotel onStep animated fadeInUp" data-animation="fadeInUp" data-time="1200">
                                            <div class="price">₹ {{ $tour->price }} <sub>/{{ $tour->time_period }}</sub></div>
                                            <!-- spacer -->
                                            <div class="space-half"></div>
                                            <h3 class="big-heading">Rating</h3>
                                            <div class="devider-rooms-detail"></div>
                                            <span><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i> {{ $tour->rating }}</span>
                                        </div>
                                    </div>
                                    <!-- widget end -->
                                </aside>
                                <div class="frm-search" style="background: url( {{asset('resources/img/bg-search-ver.jpg') }} );">
                                    <div class="container-fluid m-5-hor m-5-hor-dev">
                                        <div class="row">
                                            <form class="form-inline" id="sform">
                                                <div class="form-group">
                                                    <h3 class="big-heading">Search Results</h3>
                                                    <span class="result">9 Results Found</span>
                                                </div>
                                                <div class="form-group search-icn">
                                                    <label for="name"><span class="ti-user color"></span> Name</label>
                                                    <input type="text" name="name" class="form-control" required="" id="name">
                                                </div>
                                                <div class="form-group">
                                                    <label for="phone"><span class="ti-mobile color"></span> Phone</label>
                                                    <input type="tel" name="phone" class="form-control" required="" id="phone">
                                                </div>
                                                <div class="form-group">
                                                    <label for="phone"><span class="ti-email color"></span> Email</label>
                                                    <input type="email" name="email" class="form-control" required="" id="email">
                                                </div>
                                                <div class="form-group">
                                                    <label for="pick"><span class="ti-location-pin color"></span> Pick Up</label>
                                                    <input type="text" name="pickup" class="form-control" required="" id="pick">
                                                </div>
                                                <div class="form-group">
                                                    <label for="drop"><span class="ti-location-pin color"></span> Drop Off</label>
                                                    <input type="text" name="dropoff" class="form-control" required="" id="drop">
                                                </div> 
                                                <div class="form-group">
                                                    <label><span class="ti-map-alt color"></span> Destination</label>
                                                    <select class="cust-select" name="destination" required="">
                                                        @foreach($tourData as $tourRow)
                                                        <option value="{{ $tourRow->id}}">{{ $tourRow->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div> 
                                                <div class="form-group">
                                                    <label><span class="ti-time color"></span> Duration</label>
                                                    <select class="cust-select" name="duraion" required="">
                                                        <option value="">Any</option>
                                                        <option value="1 Day">1 Day Travel</option>
                                                        <option value="2 Day">2 Days Travel</option>
                                                        <option value="3 Day">3 Days Travel</option>
                                                        <option value="4 Day">4 Days Travel</option>
                                                        <option value="5 Day">5 Days Travel</option>
                                                        <option value="6 Day">6 Days Travel</option>
                                                        <option value="7 Day">1 week Travel</option>
                                                        <option value="more-than-week">More Than 1 week Travel</option>
                                                    </select>
                                                </div> 
                                                <input class="btn-frm-search" value="FIND NOW" type="submit">
                                            </form> 
                                        </div>
                                    </div>
                                </div>
                                <!-- section search end -->
                            </div>
                            <!-- left content end -->

                <!-- right content --
                <div class="col-md-4">
                  <aside>

                    <!-- widget --
                    <div class="widget">
                      <div class="service-hotel onStep animated fadeInUp" data-animation="fadeInUp" data-time="1200">
                        <div class="price">$900<sub>/ night</sub></div>
                        <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher
                          voluptate nisi qui.</p>

                        <!-- spacer --
                        <div class="space-half"></div>

                        <h3 class="big-heading">Facilities Services</h3>
                        <div class="devider-rooms-detail"></div>
                        <span><i class="ti-check-box"></i> Double Bed</span>
                        <span><i class="ti-check-box"></i> Privacy Beach</span>
                        <span><i class="ti-check-box"></i> Breakfast Include</span>
                        <span><i class="ti-check-box"></i> Private Balcony</span>
                        <span><i class="ti-check-box"></i> Free Wi-Fi</span>
                        <span><i class="ti-check-box"></i> 4 Persons</span>
                      </div>
                      <a class="btn-book" href="ecommerce-form.html">BOOK NOW</a>
                    </div>
                    <!-- widget end --


                    <!-- widget --
                    <div class="widget">
                      <h4 class="big-heading">
                        Tags
                      </h4>

                      <div class="devider-widget">
                      </div>

                      <div class="tags">
                        <div>
                          <a href="#">Photography</a>
                        </div>

                        <div>
                          <a href="#">Trends</a>
                        </div>

                        <div>
                          <a href="#">Interactive</a>
                        </div>

                        <div>
                          <a href="#">Personal</a>
                        </div>

                        <div>
                          <a href="#">Responsive</a>
                        </div>

                        <div>
                          <a href="#">Creative</a>
                        </div>

                        <div>
                          <a href="#">Design</a>
                        </div>

                        <div>
                          <a href="#">website</a>
                        </div>

                        <div>
                          <a href="#">application</a>
                        </div>
                      </div>
                    </div>
                    <!-- widget end --

                  </aside>
                </div>
                <!-- right content end -->

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

        </div>
      </div>
    </section>
    <!-- section end -->
@endsection