@model List<Models.DataTransferObjects.Serach.CarsDTO>


@{
    ViewData["Title"] = "Search results";
}

@{
    <div class="container">
        <h1 class="text-light my-5">Search results</h1>
        <div class="d-flex justify-content-center align-items-center flex-wrap">
            @foreach (var item in Model)
            {
                <div class="ad">
                    <h3 class="mb-4 text-center">@item.Brand @item.Model</h3>
                    @if (item.FuelEfficiency.ToLower().Equals("luxury"))
                    {
                        <span class="fuel-eff luxury">@item.FuelEfficiency</span>
                    }
                    else
                    {
                        <span class="fuel-eff eco">@item.FuelEfficiency</span>
                    }
                    <div class="d-flex justify-content-between align-items-center">
                        <img src="@item.ImgUrl" alt="slika" />
                        <div class="d-flex justify-content-center align-items-center">
                            <div class="d-flex flex-column justify-content-center align-items-center mx-3">
                                <img src="~/img/icons/gearbox.png" alt="car seat" class="ad-icons" />
                                <b>@item.Transmission</b>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center mx-3">
                                <img src="~/img/icons/car-seat.png" alt="car seat" class="ad-icons" />
                                <b>@item.NumSeats</b>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center mx-3">
                                <img src="~/img/icons/car-door.png" alt="car seat" class="ad-icons" />
                                <b>@item.NumOfDoors</b>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center mx-3">
                                <span class="color" style="background-color: @item.Color.ToLower();"></span>
                                <b>@item.Color</b>
                            </div>
                            <div class="d-flex flex-column justify-content-center align-items-center mx-3">
                                <img class="ad-icons" src="~/img/icons/arrows.png" alt="produced" />
                                <b>@item.ModelYear</b>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="d-flex justify-content-between align-items-center flex-wrap px-3">
                        <p>@item.CompanyName</p>
                        <span class="price">@item.DailyRentalPrice$ / day</span>
                    </div>
                    <hr />
                    <div>
                        <div id="accordion">
                            <div class="card my-2">
                                <div class="card-header" id="heading_@item.CarId">
                                    <h5 class="mb-0">
                                        <button class="btn btn-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapse_@item.CarId" aria-expanded="true" aria-controls="collapse_@item.CarId">
                                            Additional equipment
                                        </button>
                                    </h5>
                                </div>
                                <div id="collapse_@item.CarId" class="collapse" aria-labelledby="heading_@item.CarId" data-bs-parent="#accordion">
                                    <div class="card-body d-flex align-items-center flex-wrap">
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <img class="ad-icons" src="~/img/icons/map.png" alt="navigation" />
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="mr-1">Navigation</span>
                                                <input type="checkbox" />
                                            </div>
                                            <span>+5 &euro;</span>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <img class="ad-icons" src="~/img/icons/contract.png" alt="navigation" />
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="mr-1">Green card</span>
                                                <input type="checkbox" />
                                            </div>
                                            <span>+5 &euro;</span>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <img class="ad-icons" src="~/img/icons/baby-car-seat (1).png" alt="navigation" />
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="mr-1">Baby seat</span>
                                                <input type="checkbox" />
                                            </div>
                                            <span>+5 &euro;</span>
                                        </div>
                                        <div class="d-flex align-items-center justify-content-center flex-column">
                                            <img class="ad-icons" src="~/img/icons/trunk.png" alt="trunk" />
                                            <div class="d-flex align-items-center justify-content-center">
                                                <span class="mr-1">Roof rack</span>
                                                <input type="checkbox" />
                                            </div>
                                            <span>+5 &euro;</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    @Html.ActionLink("RENT NOW", "Index", "Rent", new { @id = item.CarId }, new { @class = "rent-now text-center" })
                </div>
            }
        </div>
    </div>

    <style>
        img {
            max-width: 300px;
            border-radius: 10px;
        }

        .ad {
            background-color: white;
            position: relative;
            border-radius: 10px;
            padding: 10px;
            min-width: 800px;
            margin-bottom: 50px;
        }

        .ad-icons {
            width: 40px;
            height: 40px;
            padding: 5px;
        }

        .fuel-eff {
            position: absolute;
            top: 10px;
            right: 10px;
            font-weight: bold;
            text-transform: uppercase;
            padding: 5px;
            border-radius: 5px;
            color: black;
        }

        .eco {
            background-color: #6eff3e;
        }

        .luxury {
            background-color: gold;
        }

        .rent-now {
            padding: 10px;
            display: block;
            margin: 10px auto;
            min-width: 200px;
            border-radius: 10px;
            background-color: cornflowerblue;
            color: #121d33;
            font-weight: bold;
            border: none;
        }

            .rent-now:hover {
                box-shadow: 0 0 3px 3px cornflowerblue;
                background-color: #121d33;
                color: cornflowerblue;
            }

        .company-logo {
            max-width: 80px;
        }

        .price {
            font-weight: bold;
            font-size: 35px;
        }

        .color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid black;
            margin-bottom: 8px;
        }

        .card-body {
            justify-content: space-evenly;
        }
    </style>

    <script>
        function changeHandler() {

        }
    </script>
}