@extends('front_end.template_new')
@section('isi')
<!-- Revolution Slider -->
<section class="revolution-slider">
  <div class="bannercontainer">
    <div class="banner">
      <ul>
        <!-- Slide 1 -->
        <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" > 
          <!-- Main Image --> 
          <img src="{{ asset('assets/img/banner1.jpg') }}" style="opacity:0;" alt="slidebg1"  data-bgfit="cover" data-bgposition="left bottom" data-bgrepeat="no-repeat"> 
          <!-- Layers -->           
          <!-- Layer 1 -->
          {{-- <div class="caption sft revolution-starhotel bigtext"  
          				data-x="505" 
                        data-y="30" 
                        data-speed="700" 
                        data-start="1700" 
                        data-easing="easeOutBack"> 
						<span><i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span> A Five Star Hotel <span><i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span></div> --}}
          <!-- Layer 2 -->
          {{-- <div class="caption sft revolution-starhotel smalltext"  
          				data-x="605" 
                        data-y="105" 
                        data-speed="800" 
                        data-start="1700" 
                        data-easing="easeOutBack">
						<span>And we like to keep it that way!</span></div> --}}
        <!-- Layer 3 -->
                  {{-- <div class="caption sft"  
          				data-x="775" 
                        data-y="175" 
                        data-speed="1000" 
                        data-start="1900" 
                        data-easing="easeOutBack">
						<a href="room-list.html" class="button btn btn-purple btn-lg">See rooms</a> 
                  </div> --}}
        </li>
		<!-- Slide 2 -->
        <li data-transition="boxfade" data-slotamount="7" data-masterspeed="1000" > 
          <!-- Main Image --> 
          <img src="{{ asset('assets/img/banner4.jpg') }}"  alt="darkblurbg"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> 
          <!-- Layers -->           
          <!-- Layer 1 -->
          {{-- <div class="caption sft revolution-starhotel bigtext"  
          				data-x="585" 
                        data-y="30" 
                        data-speed="700" 
                        data-start="1700" 
                        data-easing="easeOutBack"> 
						<span><i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span> Double room <span><i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i></span></div> --}}
          <!-- Layer 2 -->
          {{-- <div class="caption sft revolution-starhotel smalltext"  
          				data-x="682" 
                        data-y="105" 
                        data-speed="800" 
                        data-start="1700" 
                        data-easing="easeOutBack">
						<span>€ 99,- a night this summer</span></div> --}}
        <!-- Layer 3 -->
                  {{-- <div class="caption sft"  
          				data-x="785" 
                        data-y="175" 
                        data-speed="1000" 
                        data-start="1900" 
                        data-easing="easeOutBack">
						<a href="room-detail.html" class="button btn btn-purple btn-lg">Book this room</a> 
                  </div> --}}
        </li>
      </ul>
    </div>
  </div>
</section>

<section id="reservation-form">
    <div class="container">
      <div class="row">
        <div class="col-md-12">           
          <form class="form-inline reservation-horizontal clearfix" role="form" method="post" action="php/reservation.php" name="reservationform" id="reservationform">
          <div id="message"></div><!-- Error message display -->
            <div class="row">
              <div class="col-sm-3">
                <div class="form-group">
                  <label for="email" accesskey="E">Nama Hotel</label>
                  <input name="nama_hotel" type="text" id="nama_hotel" class="form-control"/>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <label for="checkin">Check-in</label>
                  <div class="popover-icon" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Check-In is from 11:00"> <i class="fa fa-info-circle fa-lg"> </i> </div>
                  <i class="fa fa-calendar infield"></i>
                  <input name="checkin" type="text" id="checkin" value="" class="form-control" placeholder="Check-in"/>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <label for="checkout">Check-out</label>
                  <div class="popover-icon" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Check-out is from 12:00"> <i class="fa fa-info-circle fa-lg"> </i> </div>
                  <i class="fa fa-calendar infield"></i>
                  <input name="checkout" type="text" id="checkout" value="" class="form-control" placeholder="Check-out"/>
                </div>
              </div>
              <div class="col-sm-1">
                <div class="form-group">
                  <div class="guests-select">
                    <label>Guests</label>
                    <i class="fa fa-user infield"></i>
                    <div class="total form-control" id="test">1</div>
                    <div class="guests">
                      <div class="form-group adults">
                        <label for="adults">Adults</label>
                        <div class="popover-icon" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="+18 years"> <i class="fa fa-info-circle fa-lg"> </i> </div>
                        <select name="adults" id="adults" class="form-control">
                          <option value="1">1 adult</option>
                          <option value="2">2 adults</option>
                          <option value="3">3 adults</option>
                        </select>
                      </div>
                      <div class="form-group children">
                        <label for="children">Children</label>
                        <div class="popover-icon" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="0 till 18 years"> <i class="fa fa-info-circle fa-lg"> </i> </div>
                        <select name="children" id="children" class="form-control">
                          <option value="0">0 children</option>
                          <option value="1">1 child</option>
                          <option value="2">2 children</option>
                          <option value="3">3 children</option>
                        </select>
                      </div>
                      <button type="button" class="btn btn-default button-save btn-block">Save</button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-2">
                <button type="submit" class="btn btn-primary btn-block">CARI</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

<!-- Rooms -->
<section class="rooms mt100">
  <div class="container">
    <div class="row room-list fadeIn appear">
      <div class="col-sm-12">
        <h2 class="lined-heading"><span>Daftar Hotel</span></h2>
      </div>
      
      @foreach ($hotel as $val)
      <div class="col-sm-4 single">
        <div class="room-thumb"> <img src="{{ SMUDESA::get_first_foto_hotel($val->id) }}" alt="room 1" class="img-responsive" />
          <div class="mask">
            <div class="main">
              <h5>{{ (Str::length($val->nama) > 20 ? Str::substr($val->nama, 0, 20).'...' : Str::substr($val->nama, 0, 20)) }}</h5>
              <div class="price">{!! SMUDESA::get_first_harga_hotel($val->id) !!} <span>per malam</span></div>
            </div>
            <div class="content">
                <p><span>Hotel : </span> {!! $val->nama !!}</p>
                <p><span>Alamat : </span> {!! $val->alamat !!}</p>
              {{-- <div class="row">
                <div class="col-xs-6">
                  <ul class="list-unstyled">
                    <li><i class="fa fa-check-circle"></i> Incl. breakfast</li>
                    <li><i class="fa fa-check-circle"></i> Private balcony</li>
                    <li><i class="fa fa-check-circle"></i> Sea view</li>
                  </ul>
                </div>
                <div class="col-xs-6">
                  <ul class="list-unstyled">
                    <li><i class="fa fa-check-circle"></i> Free Wi-Fi</li>
                    <li><i class="fa fa-check-circle"></i> Incl. breakfast</li>
                    <li><i class="fa fa-check-circle"></i> Bathroom</li>
                  </ul>
                </div>
              </div> --}}
              <a href="{{ url('front/hotel/detail/'.$val->id) }}" class="btn btn-primary btn-block">Read More</a>
            </div>
          </div>
        </div>
      </div>
      @endforeach

    </div>
  </div>
</section>
@endsection