@extends('adminlte::layouts.master')
@section('main-content')
<!-- Banner -->
<div class="banner agileits w3layouts">
<img src="img/banner.jpg" alt="Agileits W3layouts">
<h1 class="wow agileits w3layouts fadeInDown">HOMESTAY MAWAR</h1>
</div>
<!-- //Banner -->
<!-- Booking -->
<div class="details agileits w3layouts" style="margin-top: 10px;">
<div class="container">
<div class="col-md-12 col-sm-12 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<form action="#" method="post">
<div class="col-md-3 col-sm-3 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<input class="date agileits w3layouts" id="datepicker1" type="text" value=" Tanggal Check in" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required="">
</div>
<div class="col-md-3 col-sm-3 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<input class="date agileits w3layouts" id="datepicker2" type="text" value=" Tanggal Check out" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" required="">
</div>
<div class="col-md-3 col-sm-3 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<input type="text" class="text wow agileits w3layouts slideInLeft" name="Name" placeholder="Jumlah Orang" required="" style="background-color: white; color: black">
</div>
<div class="col-md-3 col-sm-3 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<a class="popup-with-zoom-anim agileits w3layouts" href="#small-dialog">BOOK NOW</a>
</div>
</form>
<div class="submit wow agileits w3layouts slideInLeft">
</div>
<!-- Popup-Box -->
<div id="popup">
<div id="small-dialog" class="mfp-hide agileits w3layouts">
<div class="pop_up agileits w3layouts">
<div class="payment-online-form-left agileits w3layouts">
<form>
<h4><span class="shipping agileits w3layouts"> </span>Customer Details</h4>
<ul class="agileits w3layouts">
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="First Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}"></li>
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Last Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Last Name';}"></li>
</ul>
<ul class="agileits w3layouts">
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}"></li>
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Phone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}"></li>
</ul>
<div class="clearfix"></div>
<h4 class="paymenthead agileits w3layouts"><span class="payment agileits w3layouts"></span>Payment Details</h4>
<div class="clearfix"></div>
<ul class="payment-type agileits w3layouts">
<li class="agileits w3layouts"><span class="col_checkbox agileits w3layouts">
<input id="3" class="css-checkbox1 agileits w3layouts" type="checkbox">
<label for="3" class="css-label1 agileits w3layouts"></label>
<a class="visa agileits w3layouts" href="#"></a>
</span>
</li>
<li class="agileits w3layouts">
<span class="col_checkbox agileits w3layouts">
<input id="4" class="css-checkbox2 agileits w3layouts" type="checkbox">
<label for="4" class="css-label2 agileits w3layouts"></label>
<a class="paypal agileits w3layouts" href="#"></a>
</span>
</li>
</ul>
<ul class="agileits w3layouts">
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Card Number" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Card Number';}"></li>
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Name on card" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name on card';}"></li>
</ul>
<ul class="agileits w3layouts">
<li class="agileits w3layouts"><input required="" class="text-box-light hasDatepicker agileits w3layouts" type="text" id="datepicker" value="Expiration Date" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Expiration Date';}"><em class="pay-date"> </em></li>
<li class="agileits w3layouts"><input required="" class="text-box-dark agileits w3layouts" type="text" value="Security Code" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Security Code';}"></li>
</ul>
<ul class="payment-sendbtns agileits w3layouts">
<li class="agileits w3layouts"><input type="reset" value="Reset"></li>
<li class="agileits w3layouts"><input type="submit" value="Process Payment" class="order"></li>
</ul>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
<!-- <button title="Close (Esc)" type="button" class="mfp-close agileits w3layouts">×</button> -->
<!-- //Popup-Box -->
</div>
</div>
</div>
<!-- Booking -->
<!-- Informations -->
<div class="cuisines agileits w3layouts">
<div class="container">
<div class="col-md-6 col-sm-6 cuisines-grids agileits w3layouts cuisines-grids-1 wow slideInLeft">
<h2 style="margin-bottom: 10px;"> Fasilitas </h2>
<ul style="list-style-type: none;">
<li> Air Panas </li>
<li> Alat Panggang </li>
<li> Kamar mandi bersih </li>
<li> 3 Kamar Tidur </li>
<li> Tepat dipinggi danau </li>
</ul>
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> -->
<img style="width: 450px; margin-top: 10px;" src="img/line1.png">
<h2 style="margin-bottom: 10px;"> Info Pemilik </h2>
<ul style="list-style-type: none;">
<li> Pemilik : Palti Sinaga </li>
<li> No Telp : +62 8123182739 </li>
</ul>
</div>
<div class="col-md-6 col-sm-6 cuisines-grids agileits w3layouts cuisines-grids-2 wow slideInRight">
<img src="img/cuisines.jpg" alt="Agileits W3layouts">
</div>
<!-- <div class="clearfix"></div> -->
<div class="container">
<div class="details-grids agileits w3layouts">
<!--Homestay pict -->
<div class="col-md-4 col-sm-4 details-grid agileits w3layouts details-grid-1 wow slideInUp">
<div class=" details-grid1 agileits w3layouts">
<div class="details-grid-image agileits w3layouts">
<img src="img/project-1.jpg" alt="Agileits W3layouts" data-toggle="modal" data-target="#myModal" style="cursor: pointer;">
</div>
<!-- <div class="details-grid-info agileits w3layouts">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.</p>
</div> -->
<!-- <button class="btn btn-primary wow agileits w3layouts fadeInLeft" data-toggle="modal" data-target="#myModal">EXPLORE<span class="glyphicon agileits w3layouts glyphicon-arrow-right" aria-hidden="true"></span></button> -->
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 col-sm-4 details-grid details-grid-2 wow agileits w3layouts slideInUp">
<div class="details-grid2 agileits w3layouts">
<div class="details-grid-image agileits w3layouts">
<img src="img/project-6.jpg" alt="Agileits W3layouts" data-toggle="modal" data-target="#myModal" style="cursor: pointer;">
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-4 col-sm-4 details-grid agileits w3layouts details-grid-3 wow slideInUp">
<div class="details-grid3 agileits w3layouts">
<div class="details-grid-image agileits w3layouts">
<img src="img/project-7.jpg" alt="Agileits W3layouts" data-toggle="modal" data-target="#myModal" style="cursor: pointer;">
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<!--Homestay pict -->
<!-- Tooltip-Content -->
<div class="tooltip-content agileits w3layouts">
<div class="modal fade agileits w3layouts details-modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog agileits w3layouts modal-lg">
<div class="modal-content agileits w3layouts">
<div class="modal-header agileits w3layouts">
<button type="button" class="close agileits w3layouts" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title agileits w3layouts">LOREM IPSUM</h4>
</div>
<div class="modal-body agileits w3layouts">
<img src="img/project-1.jpg" alt="Agileits W3layouts">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</p>
</div>
</div>
</div>
</div>
<div class="modal fade agileits w3layouts details-modal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg agileits w3layouts">
<div class="modal-content agileits w3layouts">
<div class="modal-header agileits w3layouts">
<button type="button" class="close agileits w3layouts" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title agileits w3layouts">LOREM IPSUM</h4>
</div>
<div class="modal-body agileits w3layouts">
<img src="img/project-6.jpg" alt="Agileits W3layouts">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</p>
</div>
</div>
</div>
</div>
<div class="modal fade details-modal agileits w3layouts" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg agileits w3layouts">
<div class="modal-content agileits w3layouts">
<div class="modal-header agileits w3layouts">
<button type="button" class="close agileits w3layouts" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title agileits w3layouts">LOREM IPSUM</h4>
</div>
<div class="modal-body agileits w3layouts">
<img src="img/project-7.jpg" alt="Agileits W3layouts">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia.</p>
</div>
</div>
</div>
</div>
<script>
$('#myModal').modal('');
</script>
</div>
<!-- //Tooltip-Content -->
</div>
</div>
</div>
<!-- //Informations -->
<!-- Kritik & Saran -->
<div class="details agileits w3layouts">
<div class="container">
<div class="col-md-6 col-sm-6 agileits w3layouts contact-grid contact-grid-2 wow slideInLeft">
<h2 style="margin-bottom: 10px;"> Kritik dan Saran </h2>
<form action="#" method="post" style="margin-bottom: 25px;">
<input type="text" class="text wow agileits w3layouts slideInLeft" name="Name" placeholder="Name" required="">
<input type="text" class="text wow agileits w3layouts slideInLeft" name="Email" placeholder="Email" required="">
<textarea name="Message" class="wow agileits w3layouts slideInLeft" placeholder="Message" required=""></textarea>
<input type="submit" class="more_btn wow agileits w3layouts slideInLeft" value="Send Message">
</form>
</div>
</div>
</div>
<!-- Kritik & Saran -->
@endsection