{% extends "base.html" %}

{% block content %}
<style>
    .chat-container {
        max-width: 800px;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .order-info {
        background: rgba(0, 0, 0, 0.3);
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .order-info h3 {
        color: #f5cba0;
        margin-bottom: 0.5rem;
    }
    
    .order-info p {
        color: white;
        margin: 0.3rem 0;
    }
    
    .order-info strong {
        color: #f5cba0;
    }
    
    .chat-messages {
        height: 400px;
        overflow-y: auto;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.2);
    }
    
    .message {
        margin-bottom: 0.8rem;
        padding: 0.6rem 1rem;
        border-radius: 12px;
        max-width: 80%;
    }
    
    .message-user {
        background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%);
        color: #2c1810;
        margin-left: auto;
        text-align: right;
    }
    
    .message-admin {
        background: rgba(44, 24, 16, 0.85);
        color: white;
    }
    
    .message-system {
        background: rgba(255, 255, 255, 0.2);
        color: #f5cba0;
        text-align: center;
        max-width: 100%;
        font-style: italic;
    }
    
    .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.3rem;
        font-size: 0.75rem;
    }
    
    .message-time {
        opacity: 0.7;
    }
    
    .chat-input {
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(0, 0, 0, 0.3);
    }
    
    .chat-input textarea {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.9);
        resize: vertical;
        font-family: inherit;
    }
    
    .chat-input button {
        margin-top: 0.5rem;
        width: 100%;
    }
    
    .status {
        padding: 0.2rem 0.6rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-block;
    }
    
    .status-pending { background: #ffc107; color: #856404; }
    .status-confirmed { background: #17a2b8; color: white; }
    .status-completed { background: #28a745; color: white; }
    .status-cancelled { background: #dc3545; color: white; }
    
    .btn-primary {
        background: linear-gradient(135deg, #f5cba0 0%, #d4a373 100%);
        color: #2c1810;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.2s ease;
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, #ffdd99 0%, #f5cba0 100%);
        transform: translateY(-2px);
    }
    
    @media (max-width: 768px) {
        .message {
            max-width: 95%;
        }
    }
</style>

<h2>Чат по заказу #{{ order.id }}</h2>

<div class="chat-container">
    <div class="order-info">
        <h3>Информация о заказе</h3>
        <p><strong>Услуга:</strong> {{ order.service_name }}</p>
        <p><strong>Дата:</strong> {{ order.date }} в {{ order.time }}</p>
        <p><strong>Количество человек:</strong> {{ order.persons }}</p>
        <p><strong>Цена:</strong> 
            {% if order.discount_applied %}
                <span style="text-decoration: line-through; color: #aaa;">{{ order.original_price }} руб.</span>
                <span style="color: #28a745;">{{ order.price }} руб.</span>
                <span style="background: #28a745; color: white; padding: 0.2rem 0.5rem; border-radius: 20px; font-size: 0.7rem; margin-left: 0.5rem;">Скидка 15%</span>
            {% else %}
                {{ order.price }} руб.
            {% endif %}
        </p>
        <p><strong>Статус:</strong> <span class="status status-{{ order.status }}">{{ order.status }}</span></p>
        {% if order.comment %}
        <p><strong>Ваш комментарий:</strong> {{ order.comment }}</p>
        {% endif %}
    </div>
    
    <div class="chat-messages" id="chatMessages">
        {% if messages %}
            {% for message in messages %}
            <div class="message {% if message.sender_type == 'system' %}message-system{% elif message.sender_type == 'admin' %}message-admin{% else %}message-user{% endif %}">
                <div class="message-header">
                    <strong>
                        {% if message.sender_type == 'system' %}
                            📢 Система
                        {% elif message.sender_type == 'admin' %}
                            👑 Администратор
                        {% else %}
                            👤 {{ message.sender_name }}
                        {% endif %}
                    </strong>
                    <span class="message-time">{{ message.created_at }}</span>
                </div>
                <div class="message-text">{{ message.message }}</div>
            </div>
            {% endfor %}
        {% else %}
            <div class="message message-system">
                <div class="message-text">Нет сообщений. Напишите что-нибудь...</div>
            </div>
        {% endif %}
    </div>
    
    <div class="chat-input">
        <form id="messageForm">
            <input type="hidden" id="order_id" value="{{ order.id }}">
            <textarea id="message" placeholder="Введите сообщение..." rows="3" required></textarea>
            <button type="submit" class="btn-primary">Отправить</button>
        </form>
    </div>
</div>

<script>
    // Отмечаем сообщения как прочитанные
    fetch('/api/mark_read', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ order_id: {{ order.id }} })
    });
    
    // Отправка сообщения
    document.getElementById('messageForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const orderId = document.getElementById('order_id').value;
        const message = document.getElementById('message').value.trim();
        
        if (!message) return;
        
        const formData = new FormData();
        formData.append('order_id', orderId);
        formData.append('message', message);
        
        const response = await fetch('/send_message', {
            method: 'POST',
            body: formData
        });
        
        if (response.ok) {
            document.getElementById('message').value = '';
            location.reload();
        } else {
            alert('Ошибка при отправке сообщения');
        }
    });
    
    // Автоскролл вниз
    const chatMessages = document.getElementById('chatMessages');
    chatMessages.scrollTop = chatMessages.scrollHeight;
    
    // Обновляем чат каждые 5 секунд
    setInterval(() => {
        location.reload();
    }, 100000);
</script>
{% endblock %}