@page
@model WebApp.Pages.User.PurchasesModel
@{
	ViewData["Title"] = "Покупки";
}

<style>
    #sendCheckButton {
        background - color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
    }

    /* Стили для неактивной кнопки */
    .disabledButton {
        background - color: grey;
        color: white;
        cursor: not - allowed;
    }
</style>

<div class="container my-5">
	<h1>Покупки</h1>
	@if (Model.purchaseViewModels == null! || Model.purchaseViewModels.Count == 0)
	{
		<p>Вы ещё не совершали покупок.</p>
	}
	else
	{
        <img src="data:image/png;base64,@Convert.ToBase64String(Model.GetStatistics())" class="card-img-top" alt="Статистика">
        <div class="btn-group">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    Фильтр
                </button>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li>
                        <form class="px-3 py-2" method="get">
                            <h6>Фильтр даты</h6>
                            <div class="mb-2">
                                От: <input type="datetime" class="form-control datetimepicker-input" id="dateFrom" name="datefrom" data-bs-target="#datetimepicker1" />
                            </div>
                            <div class="mb-2">
                                До: <input type="datetime" class="form-control datetimepicker-input" id="dateTo" name="dateto" data-bs-target="#datetimepicker2" />
                            </div>
                            <button class="btn btn-outline-success w-100" type="submit">Применить</button>
                        </form>
                    </li>
                </ul>
            </div>

            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="navbarDropdownMenuLink2" data-bs-toggle="dropdown" aria-expanded="false">
                    Просмотр статистики
                </button>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                    <li><a class="dropdown-item" href="#">Статистика за месяц</a></li>
                    <li><a class="dropdown-item" href="#">Статистика за год</a></li>
                </ul>
            </div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>Дата покупки</th>
                    <th>Дата получения</th>
                    <th>Количество товаров</th>
                    <th>Товары на сумму</th>
                    <th>Оплачено</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

                @foreach (var item in Model.purchaseViewModels)
                {

                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                @item.DateCreated
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                @if (item.DateClosed != null)
                                {
                                    @item.DateClosed
                                }
                                else
                                {
                                    @item.Status
                                }
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                @item.ProductCount
                            </div>
                        </td>

                        <td>
                            <div class="d-flex align-items-center">
                                @item.Cost
                            </div>
                        </td>

                        <td>
                            <div class="d-flex align-items-center">
                                @if (@item.IsPaid)
                                {
                                    <span style="color:green;">Оплачено</span>
                                }
                                else
                                {
                                    <span style="color:red;">Ждёт оплаты</span>
                                }                             
                            </div>
                        </td>

                        <td>
                            <form method="post">
                                <div class="d-flex align-items-center">
                                    <button class="btn-primary" type="submit" asp-page-handler="SendBill" asp-route-id="@item.Id">Получить чек</button>
                                </div>
                            </form>
                        </td>

                    </tr>
                }
            </tbody>
        </table>
	}
</div>


<script>

    function changeButtonState() {
        // Получаем элемент кнопки по ID
        var button = document.getElementById('sendCheckButton');

        // Меняем текст кнопки
        button.innerHTML = 'Отправлено на почту';

        // Добавляем класс disabledButton для изменения стилей
        button.classList.add('disabledButton');

        // Убираем обработчик события onclick, чтобы предотвратить повторное нажатие
        button.onclick = null;
    }

        <script type="text/javascript" >
            $(function () {
                $('#datetimepicker1').datetimepicker({
                    format: 'L'
                });
                $('#datetimepicker2').datetimepicker({
                    format: 'L',
                    useCurrent: false //Important! See issue #1075
                });
                $("#datetimepicker1").on("change.datetimepicker", function (e) {
                    $('#datetimepicker2').datetimepicker('minDate', e.date);
                });
                $("#datetimepicker2").on("change.datetimepicker", function (e) {
                    $('#datetimepicker1').datetimepicker('maxDate', e.date);
                });
            });
</script>

</script>