{% extends "base.html" %}

{% block title %}Телефоны и службы - Домовой Бот{% endblock %}

{% block nav_phones %}active{% endblock %}

{% block extra_style %}
.service-image-preview { max-width: 200px; max-height: 200px; object-fit: contain; }
{% endblock %}

{% block content %}
<h2 class="mb-4" style="color: var(--matrix-green); text-shadow: 0 0 10px var(--matrix-green);">>_ ТЕЛЕФОНЫ_И_СЛУЖБЫ</h2>

<!-- Добавить службу -->
<div class="card mb-4 border-success">
    <div class="card-header border-success">
        <h5 class="mb-0"><i class="bi bi-plus-lg"></i> Добавить службу</h5>
    </div>
    <div class="card-body">
        <form id="addServiceForm" class="row g-3">
            <div class="col-md-3">
                <input type="text" class="form-control bg-black border-success text-success" id="serviceName" placeholder="Название" required>
            </div>
            <div class="col-md-2">
                <input type="text" class="form-control bg-black border-success text-success" id="servicePhone" placeholder="Телефон" required>
            </div>
            <div class="col-md-2">
                <select class="form-select bg-black border-success text-success" id="serviceCategory">
                    <option value="emergency">🚨 Экстренные</option>
                    <option value="utility">🔧 ЖКХ</option>
                    <option value="masters">👷 Мастера</option>
                    <option value="police">👮 Полиция</option>
                    <option value="other">📋 Другое</option>
                </select>
            </div>
            <div class="col-md-3">
                <input type="text" class="form-control bg-black border-success text-success" id="serviceDesc" placeholder="Описание">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-matrix w-100">Добавить</button>
            </div>
        </form>
    </div>
</div>

<!-- Загрузить картинку -->
<div class="card mb-4 border-success">
    <div class="card-header border-success">
        <h5 class="mb-0"><i class="bi bi-image"></i> Загрузить картинку для службы</h5>
    </div>
    <div class="card-body">
        <form id="uploadImageForm" class="row g-3" enctype="multipart/form-data">
            <div class="col-md-3">
                <select class="form-select bg-black border-success text-success" id="imageCategory" required>
                    <option value="emergency">🚨 Экстренные</option>
                    <option value="utility">🔧 ЖКХ</option>
                    <option value="masters">👷 Мастера</option>
                    <option value="police">👮 Полиция</option>
                    <option value="other">📋 Другое</option>
                </select>
            </div>
            <div class="col-md-4">
                <input type="file" class="form-control bg-black border-success text-success" id="imageFile" accept="image/*" required>
                <small class="text-muted">JPG, PNG до 5MB</small>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-matrix w-100">Загрузить</button>
            </div>
        </form>
        <div id="uploadResult" class="mt-3"></div>
    </div>
</div>

<!-- Список служб -->
<div class="card border-success">
    <div class="card-body">
        <h5 class="text-success opacity-75">СУЩЕСТВУЮЩИЕ СЛУЖБЫ:</h5>
        <table class="table table-dark table-hover mb-0">
            <thead>
                <tr>
                    <th>Категория</th>
                    <th>Название</th>
                    <th>Телефон</th>
                    <th>Описание</th>
                    <th>Картинка</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for service in services %}
                <tr>
                    <td>
                        {% if service.category == 'emergency' %}
                            <span class="badge bg-danger">🚨 Экстренные</span>
                        {% elif service.category == 'utility' %}
                            <span class="badge bg-info">🔧 ЖКХ</span>
                        {% elif service.category == 'masters' %}
                            <span class="badge bg-success">👷 Мастера</span>
                        {% elif service.category == 'police' %}
                            <span class="badge bg-warning text-dark">👮 Полиция</span>
                        {% else %}
                            <span class="badge bg-secondary">Другое</span>
                        {% endif %}
                    </td>
                    <td>{{ service.name }}</td>
                    <td><a href="tel:{{ service.phone }}">{{ service.phone }}</a></td>
                    <td>{{ service.description or '—' }}</td>
                    <td>
                        {% if service.image_path %}
                            <img src="/static/service_images/{{ service.image_path.split('/')[-1] }}"
                                 class="service-image-preview" alt="Картинка">
                            <br><small class="text-muted">✅</small>
                        {% else %}
                            <span class="text-muted">❌ Нет</span>
                        {% endif %}
                    </td>
                    <td>
                        <button class="btn btn-sm btn-danger" onclick="deleteService({{ service.service_id }})">
                            <i class="bi bi-trash"></i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if not services %}
        <p class="text-center text-muted">Служб нет</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_script %}
<script>
    // Добавление службы
    document.getElementById('addServiceForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const data = {
            name: document.getElementById('serviceName').value,
            phone: document.getElementById('servicePhone').value,
            category: document.getElementById('serviceCategory').value,
            description: document.getElementById('serviceDesc').value
        };
        const r = await fetch('/api/service/add', {
            method: 'POST', headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        const result = await r.json();
        if (result.success) { alert('✅ Служба добавлена'); location.reload(); }
        else { alert('❌ Ошибка: ' + (result.error || 'Неизвестная')); }
    });

    // Загрузка картинки
    document.getElementById('uploadImageForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData();
        formData.append('category', document.getElementById('imageCategory').value);
        formData.append('file', document.getElementById('imageFile').files[0]);

        const resultDiv = document.getElementById('uploadResult');
        resultDiv.innerHTML = '<div class="alert alert-info">Загрузка...</div>';

        try {
            const r = await fetch('/api/service/upload_image', {
                method: 'POST',
                body: formData
            });
            const result = await r.json();

            if (result.success) {
                resultDiv.innerHTML = `<div class="alert alert-success">✅ ${result.message}<br>Файл: ${result.file_path}</div>`;
            } else {
                resultDiv.innerHTML = `<div class="alert alert-danger">❌ Ошибка: ${result.error}</div>`;
            }
        } catch (err) {
            resultDiv.innerHTML = `<div class="alert alert-danger">❌ Ошибка: ${err.message}</div>`;
        }
    });

    async function deleteService(id) {
        if (!confirm('Удалить службу?')) return;
        const r = await fetch(`/api/service/${id}/delete`, { method: 'POST' });
        const result = await r.json();
        if (result.success) { alert('✅ Удалено'); location.reload(); }
    }
</script>
{% endblock %}