{% extends "base.html" %}

{% block title %}Админ-панель{% endblock %}

{% block extra_head %}
<!-- Chart.js для статистики -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
/* Фикс прыганья модального окна */
body.modal-open {
    padding-right: 0 !important;
    overflow: auto !important;
}
.modal {
    padding-right: 0 !important;
}
.modal-backdrop {
    width: 100% !important;
}
</style>
{% endblock %}

{% block content %}
<!-- Заголовок -->
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <h3 class="mb-0">👑 Админ-панель</h3>
    <div class="d-flex gap-2">
        <a href="{{ url_for('admin_users') }}" class="btn btn-outline-primary btn-sm">
            👥 Пользователи
        </a>
        {{ADMIN_PRODUCT_BUTTONS}}
        {{ADMIN_SERVICE_BUTTONS}}
    </div>
</div>

<!-- Статистика -->
<div class="row g-3 mb-4">
    {% for status, count in stats.items() %}
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-primary">{{ count }}</div>
                <small class="text-muted">{{ status }}</small>
            </div>
        </div>
    </div>
    {% endfor %}
    <div class="col-6 col-md-3">
        <div class="card text-center border-0 shadow-sm h-100">
            <div class="card-body py-3">
                <div class="fs-2 fw-bold text-dark">{{ total }}</div>
                <small class="text-muted">Всего (с фильтром)</small>
            </div>
        </div>
    </div>
</div>

<!-- График -->
<div class="row mb-4">
    <div class="col-md-5">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="card-title">Распределение по статусам</h6>
                <canvas id="statusChart" height="200"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-7">
        <!-- Фильтры и поиск -->
        <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
                <h6 class="card-title">Фильтры</h6>
                <form method="GET" action="{{ url_for('admin') }}" class="row g-2">
                    <div class="col-sm-6">
                        <input type="text" class="form-control form-control-sm" name="search"
                               placeholder="Поиск по описанию/услуге"
                               value="{{ search_query }}">
                    </div>
                    <div class="col-sm-6">
                        <select class="form-select form-select-sm" name="status">
                            <option value="all" {% if status_filter == 'all' %}selected{% endif %}>Все статусы</option>
                            {% for s in status_list %}
                            <option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ s }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <input type="date" class="form-control form-control-sm" name="date_from"
                               value="{{ date_from }}" placeholder="Дата от">
                    </div>
                    <div class="col-sm-4">
                        <input type="date" class="form-control form-control-sm" name="date_to"
                               value="{{ date_to }}" placeholder="Дата до">
                    </div>
                    <div class="col-sm-4">
                        <select class="form-select form-select-sm" name="per_page">
                            {% for n in [10, 25, 50] %}
                            <option value="{{ n }}" {% if per_page == n %}selected{% endif %}>{{ n }} на стр.</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">🔍 Применить</button>
                        <a href="{{ url_for('admin') }}" class="btn btn-outline-secondary btn-sm">Сбросить</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Массовое изменение статуса -->
<form method="POST" action="{{ url_for('bulk_status') }}" id="bulkForm">
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h5 class="mb-0">Все заявки</h5>
            <div class="d-flex gap-2 align-items-center flex-wrap">
                <span class="text-white-50 small">Выбрано: <span id="selectedCount">0</span></span>
                <select class="form-select form-select-sm" name="bulk_status" style="width:auto;">
                    {% for s in status_list %}
                    <option value="{{ s }}">{{ s }}</option>
                    {% endfor %}
                </select>
                <button type="submit" class="btn btn-warning btn-sm"
                        onclick="return document.querySelectorAll('.req-check:checked').length > 0 || (alert('Выберите заявки') && false)">
                    Изменить статус
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width:40px;">
                                <input type="checkbox" id="selectAll" class="form-check-input">
                            </th>
                            <th>#</th>
                            <th>Пользователь</th>
                            <th>Дата</th>
                            <th>Услуга</th>
                            {{ADMIN_REQUEST_TABLE_HEADERS}}
                            <th>Статус</th>
                            <th>Действия</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for req in requests %}
                        <tr>
                            <td>
                                <input type="checkbox" name="request_ids" value="{{ req.id }}"
                                       class="form-check-input req-check">
                            </td>
                            <td class="text-muted">{{ req.id }}</td>
                            <td>
                                <strong>{{ req.user.login }}</strong>
                                {% if req.user.full_name is defined and req.user.full_name %}
                                    <br><small class="text-muted">{{ req.user.full_name }}</small>
                                {% endif %}
                            </td>
                            <td>
                                {{ req.created_at.strftime('%d.%m.%Y') }}<br>
                                <small class="text-muted">{{ req.created_at.strftime('%H:%M') }}</small>
                            </td>
                            <td>
                                {% if req.service is defined and req.service %}
                                    {{ req.service.name }}
                                {% elif req.service_name is defined and req.service_name %}
                                    {{ req.service_name }}
                                {% else %}
                                    <span class="text-muted">—</span>
                                {% endif %}
                            </td>
                            {{ADMIN_REQUEST_TABLE_CELLS}}
                            <td>
                                {% set status_colors = {'Новая': 'warning', 'В работе': 'info', 'Завершена': 'success'} %}
                                <span class="badge bg-{{ status_colors.get(req.status, 'secondary') }}
                                      {% if req.status == 'Новая' %}text-dark{% endif %}">
                                    {{ req.status }}
                                </span>
                            </td>
                            <td>
                                <div class="d-flex gap-1 flex-wrap">
                                    <!-- Детали -->
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            data-bs-toggle="modal" data-bs-target="#details{{ req.id }}">
                                        👁
                                    </button>
                                    <!-- Изменить статус -->
                                    <button type="button" class="btn btn-sm btn-outline-primary"
                                            data-bs-toggle="modal" data-bs-target="#statusModal{{ req.id }}">
                                        ✏️
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</form>

<!-- Кнопки удаления (вне формы bulkForm) -->
{% for req in requests %}
<form method="POST" action="{{ url_for('admin_delete_request', req_id=req.id) }}"
      onsubmit="return confirm('Удалить заявку #{{ req.id }}?')" class="d-none" id="deleteForm{{ req.id }}">
</form>
{% endfor %}

<!-- Модальные окна вынесены за пределы таблицы и формы -->
{% for req in requests %}
<!-- Модал: детали -->
<div class="modal fade" id="details{{ req.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Заявка #{{ req.id }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <dl class="row mb-0">
                    <dt class="col-sm-5">Пользователь:</dt>
                    <dd class="col-sm-7">{{ req.user.login }}</dd>
                    <dt class="col-sm-5">Дата создания:</dt>
                    <dd class="col-sm-7">{{ req.created_at.strftime('%d.%m.%Y %H:%M') }}</dd>
                    <dt class="col-sm-5">Статус:</dt>
                    <dd class="col-sm-7">{{ req.status }}</dd>
                    {% if req.service is defined and req.service %}
                        <dt class="col-sm-5">Услуга:</dt>
                        <dd class="col-sm-7">{{ req.service.name }}</dd>
                    {% elif req.service_name is defined and req.service_name %}
                        <dt class="col-sm-5">Услуга:</dt>
                        <dd class="col-sm-7">{{ req.service_name }}</dd>
                    {% endif %}
                    {{REQUEST_MODAL_FIELDS}}
                </dl>
                {{ADMIN_PHOTO_MODAL}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-danger btn-sm"
                        onclick="document.getElementById('deleteForm{{ req.id }}').submit()">
                    🗑 Удалить заявку
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модал: изменить статус -->
<div class="modal fade" id="statusModal{{ req.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Статус заявки #{{ req.id }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('change_status', req_id=req.id) }}"
                  enctype="multipart/form-data">
                <div class="modal-body">
                    <label class="form-label">Новый статус:</label>
                    <select class="form-select" name="new_status">
                        {% for s in status_list %}
                        <option value="{{ s }}" {% if s == req.status %}selected{% endif %}>
                            {{ s }}
                        </option>
                        {% endfor %}
                    </select>
                    {{PHOTO_AFTER_FIELD}}
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary btn-sm">Сохранить</button>
                    <button type="button" class="btn btn-secondary btn-sm"
                            data-bs-dismiss="modal">Отмена</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endfor %}

<!-- Пагинация -->
{{ADMIN_SERVICE_MODAL}}

{% if total_pages > 1 %}
<nav aria-label="Пагинация">
    <ul class="pagination justify-content-center flex-wrap">
        <li class="page-item {% if page == 1 %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('admin', page=page-1, per_page=per_page, status=status_filter, search=search_query, date_from=date_from, date_to=date_to) }}">
                ‹
            </a>
        </li>
        {% for p in range(1, total_pages + 1) %}
            {% if p == page or p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
            <li class="page-item {% if p == page %}active{% endif %}">
                <a class="page-link" href="{{ url_for('admin', page=p, per_page=per_page, status=status_filter, search=search_query, date_from=date_from, date_to=date_to) }}">
                    {{ p }}
                </a>
            </li>
            {% elif p == page - 3 or p == page + 3 %}
            <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
        {% endfor %}
        <li class="page-item {% if page == total_pages %}disabled{% endif %}">
            <a class="page-link" href="{{ url_for('admin', page=page+1, per_page=per_page, status=status_filter, search=search_query, date_from=date_from, date_to=date_to) }}">
                ›
            </a>
        </li>
    </ul>
</nav>
<p class="text-center text-muted small">
    Показано {{ requests|length }} из {{ total }} заявок
</p>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
// ─── Выбор всех чекбоксов ────────────────────────────────────────
const selectAll = document.getElementById('selectAll');
const checkboxes = document.querySelectorAll('.req-check');
const countEl = document.getElementById('selectedCount');

function updateCount() {
    const checked = document.querySelectorAll('.req-check:checked').length;
    countEl.textContent = checked;
}

selectAll.addEventListener('change', function() {
    checkboxes.forEach(cb => { cb.checked = this.checked; });
    updateCount();
});

checkboxes.forEach(cb => cb.addEventListener('change', updateCount));

// ─── График Chart.js ─────────────────────────────────────────────
const ctx = document.getElementById('statusChart');
if (ctx) {
    const statsData = {{ stats | tojson }};
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: Object.keys(statsData),
            datasets: [{
                data: Object.values(statsData),
                backgroundColor: [
                    '#ffc107', '#0dcaf0', '#198754', '#dc3545', '#6c757d',
                    '#0d6efd', '#fd7e14', '#20c997'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom' }
            }
        }
    });
}
</script>
{% endblock %}