Notes

@model ReservationVM

@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";

}
{
@section Links{
<link rel="stylesheet" href="~/css/reservation.css">
<link rel="stylesheet" href="~/css/bootstrap.min.css">
}

<!-- Start All Pages -->
<div class="all-page-title page-breadcrumb">
<div class="container text-center">
<div class="row">
<div class="col-lg-12">
<h1>Reservation</h1>
</div>
</div>
</div>
</div>
<!-- End All Pages -->
<!-- Start Reservation -->
<div class="reservation-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="heading-title text-center">
<h2>Reservation</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<div class="contact-block">
<form id="contactForm" asp-asp-controller="reservation" asp-action="Index" method="post">
<div class="row">
<div class="col-md-6">
<h3>Book a table</h3>
<div class="col-md-12">
<div class="form-group">
<input onchange="" asp-for="Reservation.Date" type="date" class="date time form-control picker__input" required data-error="Please enter time">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input asp-for="Reservation.Time" type="time" class="format-time time form-control timepicker picker__input" required data-error="Please enter time">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<select asp-items="ViewBag.Tables" class="custom-select d-block form-control" d required data-error="Please select Person">
<option disabled selected>Select Table*</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-md-6">
<h3>Contact Details</h3>
<div class="col-md-12">
<div class="form-group">
<input asp-for="Reservation.Name" type="text" class="form-control" placeholder="Your Name" required data-error="Please enter your name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input asp-for="Reservation.Email" type="text" placeholder="Your Email" class="form-control" required data-error="Please enter your email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input asp-for="Reservation.Email" type="text" placeholder="Your Numbar" class="form-control" required data-error="Please enter your Numbar">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="submit-button text-center">
<button class="btn btn-common" type="submit">Book Table</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- End Reservation -->
<!-- Start Customer Reviews -->
<div class="customer-reviews-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="heading-title text-center">
<h2>Customer Reviews</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 mr-auto ml-auto text-center">
<div id="reviews" class="carousel slide" data-ride="carousel">
<div class="carousel-inner mt-4">
<div class="carousel-item text-center active">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="images/profile-1.jpg" alt="">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Paul Mitchel</strong></h5>
<h6 class="text-dark m-0">Web Developer</h6>
<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="images/profile-3.jpg" alt="">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Steve Fonsi</strong></h5>
<h6 class="text-dark m-0">Web Designer</h6>
<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
<div class="carousel-item text-center">
<div class="img-box p-1 border rounded-circle m-auto">
<img class="d-block w-100 rounded-circle" src="images/profile-7.jpg" alt="">
</div>
<h5 class="mt-4 mb-0"><strong class="text-warning text-uppercase">Daniel vebar</strong></h5>
<h6 class="text-dark m-0">Seo Analyst</h6>
<p class="m-0 pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Idac bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet.</p>
</div>
</div>
<a class="carousel-control-prev" href="#reviews" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#reviews" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- End Customer Reviews -->



<!-- End Contact info -->
<script>
const date=document.querySelector(".date");
date.addEventListener("input",(field)=>{
var dateObj = new Date();
const date=field.target.value;
})
$.ajax({
url:"/reservation/"
})
</script>