@model HomeVM
<div id="VillasList">
<div class="row px-lg-5 m-lg-4 m-sm-0 px-sm-0" style="--bs-gutter-x:0">

    @foreach (var villa in Model.VillaList)
    {

        <div class="p-4 col-md-12 col-lg-6">
            <div class="row" style="border-radius:5px; border: 1px solid #aaa">
                <div class="col-4 p-2">
                    <img class="d-block w-100" style="border-radius:5px;" src="@villa.ImageUrl">
                </div>
                <div class="col-8">
                    <div class="d-flex justify-content-between">
                        <p class="card-title text-warning" style="font-size:xx-large">@villa.Name</p>
                        <div class="pt-2">
                            <button type="button" class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target='#exampleModal-@(villa.Id)'>
                                Details
                            </button>
                        </div>
                    </div>
                    <p class="card-text">
                        @Html.Raw(villa.Description)
                    </p>
                </div>
                <div class="col-12">
                    <div class="row pb-3 pt-2">
                        <div class="col-4">
                            @if (Model.CheckInDate > DateOnly.FromDateTime(DateTime.Now))
                            {
                                if (villa.IsAvailable)
                                {
                                        <a asp-controller="Booking" asp-action="FinalizeBooking" 
                                        asp-route-villaId="@villa.Id" asp-route-checkInDate="@Model.CheckInDate"
                                        asp-route-nights="@Model.Nights"
                                        class="btn btn-success form-control btn-block">
                                        Book
                                    </a>
                                }
                                else
                                {
                                    <a class="btn btn-outline-danger disabled form-control btn-block">
                                        Sold Out
                                    </a>
                                }
                            }
                        </div>
                        <div class="col-4">
                            <span class="">Max Occupancy : @villa.Occupancy adults </span><br />
                            <span class=" pt-1">Villa Size : @villa.Sqft sqft</span><br />
                        </div>
                        <div class="col-4">
                            <span class="text-warning float-end font-weight-bold pt-1" style="font-size:25px;">
                                USD
                                <span style="border-bottom:1px solid #ff6a00">
                                    @villa.Price.ToString("c")
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="exampleModal-@(villa.Id)" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" style="border: 1px solid #aaa; border-radius:7px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-3 text-success" id="exampleModalLabel">Villa Details</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body m-0">

                        <partial name="_VillaDetail" model="@villa" />
                    </div>
                    <div class="modal-footer">
                            <button asp-controller="Home" asp-action="GeneratePPTExport"
                            asp-route-id="@villa.Id" type="submit" class="btn btn-outline-warning">
                            <i class="bi bi-file-earmark-ppt"></i> Download Villa PPT
                        </button>
                        <button type="button" class="btn btn-outline-danger" data-bs-dismiss="modal">Close</button>
                    </div>

                </div>
            </div>
        </div>
    }
</div>
</div>
