@extends('main')

@section('title', $seo->title)
@section('description', $seo->description)
@section('keywords', $seo->keywords)
@section('author', $seo->author)

@section('content')

<section id="home_intro">
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            @foreach ($slider as $slide)
                <li data-target="#carousel-example-generic" data-slide-to="{{$loop->index}}" @if($loop->index == 0) class="active" @endif></li>
            @endforeach
        </ol>
      <div class="carousel-inner" role="listbox">
        @foreach ($slider as $slide)
        <div class="item @if($loop->index == 0) active @endif">
            <img src="{{asset($slide->image)}}" alt="{{$slide->title}}">
            <div class="carousel-caption d-none d-md-block">
                <h5>{{$slide->title}}</h5>
                <p>{{$slide->text}}</p>
            </div>
        </div>
        @endforeach
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
</section>

<section id="home_search_form">
    <div class="tabs type-2 tabs-section clearfix">                
        <div class="tabs-content">
          <div id="tab-1">
            <form action="{{url('/Search')}}" method="get" id="search_form">
              <div class="select-area">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-3">
                        <div class="select-col">
                          <div class="form-group">
                            <label>الدولة</label>
                            <div class="auto-custom-select">
                                <select name="country" id="country_selector_custom" data-url="{{url('get_country_cities')}}">
                                    <option value="" disabled selected>اختار الدولة</option>
                                    @foreach ($hotels_countries as $country)
                                        <option value="{{$country->id}}">{{$country->ar_title}}</option>
                                    @endforeach
                                </select> 
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-3">
                        <div class="select-col">
                          <div class="form-group">
                            <label>المدينة</label>
                            <div class="auto-custom-select">
                                <select name="city" id="city_selector_custom">
                                    <option value="" disabled selected>اختار المدينة</option>
                                   
                                </select> 
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-3">
                        <div class="select-col">
                          <div class="form-group">
                            <label>عدد الافراد</label>
                            <div class="auto-custom-select">
                              <input type="number" name="people" placeholder="عدد الافراد" />
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-3">
                      <div class="select-col">
                        <div class="form-group">
                          <label>عدد الغرف</label>
                          <div class="auto-custom-select">
                            <input type="number" name="rooms" placeholder="عدد الغرف" />
                          </div>
                        </div>
                      </div>
                  </div>
                    <div class="col-12 col-sm-12 col-md-3">
                        <div class="select-col">
                          <div class="form-group">
                            <label>االنجوم</label>
                            <div class="auto-custom-select">
                                <select name="stars">
                                    @for($i = 5; $i >= 1; $i--)
                                        <option value="{{$i}}">{{$i}} نجوم</option>
                                    @endfor
                                </select> 
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4">
                        <div class="select-col">
                            <div class="form-group">
                                <label>تاريخ الوصول - تاريخ المغادرة</label>
                                <input type="text" name="start_date" id="home_start_date" data-url="{{url('start_date_tomorrow')}}" 
                                placeholder="تاريخ البداية" value="{{date('Y-m-d')}}" min="{{date('Y-m-d')}}" />
                            </div>
                        </div>
                    </div>
                  <div class="col-12 col-sm-6 col-md-3">
                    <div class="select-col">
                      <button type="submit" class="btn btn-style-2"><i class="licon-magnifier"></i> بحث</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
</secion>
<section id="best_tourism_countries">
<div class="container">
  <div class="content-element4">
    <div class="title-holder align-center">
      <h2 class="section-title">أفضل الوجهات السياحية</h2>
    </div>
    <div class="review-section">
      <div class="row">
        @foreach ($best_places as $place)
          <div class="col-sm-4 col-xs-12">
            <article class="entry review-item">
              <div class="entry-attachment">
                <figure class="thumbnail-attachment">
                  <a href="{{url('Hotels/'.$place->name)}}">
                    <img src="{{asset($place->image)}}" alt="{{$place->ar_title}}">
                  </a>
                </figure>
              </div>
              <div class="entry-body">
                <h4 class="entry-title">
                  <a href="{{url('Hotels/'.$place->name)}}">
                    {{$place->ar_title}}
                  </a>
                </h4>
              </div>
            </article>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</div>
</section>

<section id="latest_hotels">
  <div class="page-section-bg">
    <h2 class="section-title align-center">أخر الفنادق</h2>
    <div class="car-carousel">
      <div class="carousel-type-3">
        <div class="owl-carousel container" data-max-items="4" data-item-margin="30">
          @foreach ($latest_hotels as $hotel)
            <!-- Slide -->                  
            <div class="item-carousel">
              <!-- Carousel Item -->                  
              <!-- - - - - - - - - - - - - - Product - - - - - - - - - - - - - - - - -->
              <div class="product">
                <!-- - - - - - - - - - - - - - Product Image - - - - - - - - - - - - - - - - -->
                <a href="{{url('/Hotel/'.beautify_url($hotel->title))}}"><img src="{{asset($hotel->hotel_images[0]->image)}}" alt="{{$hotel->title}}"></a>
                <!-- - - - - - - - - - - - - - End of Product Image - - - - - - - - - - - - - - - - -->
                <!-- - - - - - - - - - - - - - Product Description - - - - - - - - - - - - - - - - -->
                <div class="product-description">
                  <h5 class="product-name"><a href="{{url('/Hotel/'.beautify_url($hotel->title))}}">{{$hotel->title}}</a></h5>
                  <div class="rating-area">
                    <ul class="rating">
                    @for ($i = 1; $i <= $hotel->stars; $i++)
                      <li><i class="fas fa-star"></i></li>
                    @endfor
                    </ul>
                  </div>
                </div>
                <!-- - - - - - - - - - - - - - End of Product Description - - - - - - - - - - - - - - - - -->
              </div>
              <!-- /Carousel Item --> 
            </div>
            <!-- /Slide -->
          @endforeach
        </div>
      </div>
    </div>
  </div>
</section>
@endsection