@using Contracts.ViewModels

@model List<ProductViewModel>
@{
    ViewData["Title"] = "Home page";
}

<!-- Шапка -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Catalog</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Категории
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Пистолеты</a>
                    <a class="dropdown-item" href="#">Револьверы</a>
                    <a class="dropdown-item" href="#">Винтовки</a>
                </div>
            </li>
        </ul>
        <form method="get">
            <div class="form-inline col-lg-12">
                <input class="form-control mr-sm-2" type="search" placeholder="Поиск" name="search" value="">
                <button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i></button>
            </div>
        </form>
        <div class="form-group">
            <form method="get" m>
                <input type="range" step="100" min="0" max="10000" value="50000" class="custom-range" id="priceFrom">
                <label for="priceFrom">От: <span id="priceLabelFrom">50 000</span> руб.</label>
            </form>

            <form method="get">
                <input type="range" step="100" min="0" max="100000" value="50000" class="custom-range" id="priceTo">
                <label for="priceTo">До: <span id="priceLabelTo">50 000</span> руб.</label>
            </form>
        </div>
    </div>
</nav>

<!-- Таблица товаров -->
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Название</th>
            <th scope="col">Цена</th>
            <th scope="col">Изображение</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var weapon in Model)
        {
            <tr>
                <th scope="row">@Model.IndexOf(weapon)</th>
                <td>@weapon.Name</td>
                <td>@weapon.Price руб.</td>
                <td><img src="@weapon" alt="@weapon.Name" style="width:100px;height:100px;"></td>
            </tr>
        }
    </tbody>
</table>

@section Scripts {
    <script>
        document.getElementById("priceFrom").addEventListener("input", function () {
            var price = this.value;
            document.getElementById("priceLabelFrom").textContent = price + " руб.";
            // Здесь должен быть код для фильтрации товаров по цене
        });

        document.getElementById("priceTo").addEventListener("input", function () {
            var price = this.value;
            document.getElementById("priceLabelTo").textContent = price + " руб.";
            // Здесь должен быть код для фильтрации товаров по цене
        });
    </script>
}