@model HomeVM

<div>
    <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="~/images/slide2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="~/images/slide1.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <form method="post" 
          asp-action="GetVillasByDate" >
        <div class="row p-0 mx-0 py-4">

            <div class="col-12 col-md-5  offset-md-1 pl-2  pr-2 pr-md-0">
                <div class="form-group">
                    <label>Check In Date</label>
                    <input asp-for="CheckInDate" type="date" class="form-control" />
                </div>
            </div>

            <div class="col-8 col-md-3 pl-2 pr-2">
                <div class="form-group">
                    <label>No. of nights</label>
                    <select class="form-select" asp-for="Nights">
                        @for(var i = 1; i < 11; i++)
                        {
                            <option value="@i">@i</option>
                        }
                    </select>
                </div>
            </div>

            <div class="col-4 col-md-2 pt-4 pr-2">
                <div class="form-group">
                    <button type="button" onclick="fnLoadVillaList()" class="btn btn-success btn-block">
                        <i class="bi bi-search"></i>  &nbsp; Check Availability
                    </button>

                </div>
            </div>

        </div>
        <partial name="_VillaList" model="Model"/>
    </form>
</div>

@section scripts{
    <script>
        function fnLoadVillaList() {
            $('.spinner').show();
            var objData = {
                checkInDate: $("#CheckInDate").val(),
                nights: $("#Nights").val()
            };

        $.ajax({
                type: "POST",
                data:objData,
                url: "@Url.Action("GetVillasByDate","Home")",
                success: function (data) {
                    $("#VillasList").empty();
                    $("#VillasList").html(data);
                    $('.spinner').hide();
                },
                failure: function (response) {
                    $('.spinner').hide();
                    alert(response.responseText);
                },
                error: function (response) {
                    $('.spinner').hide();
                    alert(response.responseText);
                }
            });
        }
        </script>
}