{% extends 'layouts/base.twig' %}

{% block title %}{{ deal.title }}{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{{ site_url('/crm/deals') }}" class="text-muted text-decoration-none">
        <i class="fa-solid fa-arrow-left me-2"></i>К списку сделок
    </a>
</div>

<div class="row">
    {# Основная информация #}
    <div class="col-lg-8">
        {# Заголовок и статус #}
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-4">
                    <div>
                        <span class="badge mb-2"
                              style="background-color: {{ deal.stage_color }}20; color: {{ deal.stage_color }}; border: 1px solid {{ deal.stage_color }}40;">
                            {{ deal.stage_name|default('Без этапа') }}
                        </span>
                        <h1 class="h3 mb-0">{{ deal.title }}</h1>
                    </div>
                    <div class="text-end">
                        <div class="h4 mb-0">{{ deal.amount|number_format(0, ',', ' ') }} {{ deal.currency }}</div>
                        <small class="text-muted">Сумма сделки</small>
                    </div>
                </div>

                {% if deal.description %}
                <div class="mb-4">
                    <h6 class="text-muted mb-2">Описание</h6>
                    <p class="mb-0" style="white-space: pre-wrap;">{{ deal.description }}</p>
                </div>
                {% endif %}

                <div class="row text-sm">
                    <div class="col-md-6">
                        <span class="text-muted">Дата создания:</span>
                        <span class="ms-2">{{ deal.created_at|date('d.m.Y H:i') }}</span>
                    </div>
                    <div class="col-md-6">
                        <span class="text-muted">Ожидаемое закрытие:</span>
                        <span class="ms-2 {{ deal.is_overdue ? 'text-danger fw-bold' : '' }}">
                            {{ deal.expected_close_date ? deal.expected_close_date|date('d.m.Y') : '—' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {# История изменений #}
        <div class="card shadow-sm">
            <div class="card-header bg-white">
                <h5 class="mb-0">История изменений</h5>
            </div>
            <div class="card-body">
                {% if history is defined and history|length > 0 %}
                <div class="timeline">
                    {% for item in history %}
                    <div class="timeline-item d-flex gap-3 pb-3 {{ not loop.last ? 'border-bottom' : '' }}">
                        <div class="timeline-icon bg-secondary rounded-circle d-flex align-items-center justify-content-center"
                             style="width: 32px; height: 32px; min-width: 32px;">
                            <span class="text-white small">{{ item.user_name|default('С')|slice(0, 2) }}</span>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <span class="fw-medium">{{ item.user_name|default('Система') }}</span>
                                    <small class="text-muted ms-2">{{ item.created_at|date('d.m.Y H:i') }}</small>
                                </div>
                            </div>
                            <p class="mb-0 mt-1">
                                <span class="{{ item.action_class }}">{{ item.action_label }}</span>
                                {% if item.change_description %}
                                — {{ item.change_description }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-muted text-center py-4 mb-0">Нет записей в истории</p>
                {% endif %}
            </div>
        </div>
    </div>

    {# Боковая панель #}
    <div class="col-lg-4">
        {# Клиент #}
        <div class="card shadow-sm mb-3">
            <div class="card-header bg-white">
                <h6 class="mb-0">Клиент</h6>
            </div>
            <div class="card-body">
                {% if deal.contact_name %}
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center"
                         style="width: 40px; height: 40px; min-width: 40px;">
                        <span class="text-white">{{ deal.contact_name|slice(0, 2) }}</span>
                    </div>
                    <div>
                        <a href="#" class="fw-medium text-decoration-none">{{ deal.contact_name }}</a>
                        {% if deal.contact_email %}
                        <small class="d-block text-muted">{{ deal.contact_email }}</small>
                        {% endif %}
                    </div>
                </div>
                {% elseif deal.client_name %}
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center"
                         style="width: 40px; height: 40px; min-width: 40px;">
                        <span class="text-white">{{ deal.client_name|slice(0, 2) }}</span>
                    </div>
                    <div>
                        <a href="#" class="fw-medium text-decoration-none">{{ deal.client_name }}</a>
                    </div>
                </div>
                {% else %}
                <p class="text-muted mb-0">Клиент не указан</p>
                {% endif %}
            </div>
        </div>

        {# Ответственный #}
        <div class="card shadow-sm mb-3">
            <div class="card-header bg-white">
                <h6 class="mb-0">Ответственный</h6>
            </div>
            <div class="card-body">
                {% if deal.assigned_user_name %}
                <div class="d-flex align-items-center gap-3">
                    <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center"
                         style="width: 40px; height: 40px; min-width: 40px;">
                        <span class="text-white">{{ deal.assigned_user_name|slice(0, 2) }}</span>
                    </div>
                    <div>
                        <div class="fw-medium">{{ deal.assigned_user_name }}</div>
                        {% if deal.assigned_user_email %}
                        <small class="text-muted">{{ deal.assigned_user_email }}</small>
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <p class="text-muted mb-0">Не назначен</p>
                {% endif %}
            </div>
        </div>

        {# Вероятность #}
        {% if deal.stage_probability is defined and deal.stage_probability > 0 %}
        <div class="card shadow-sm mb-3">
            <div class="card-header bg-white">
                <h6 class="mb-0">Вероятность закрытия</h6>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center gap-2">
                    <div class="progress flex-grow-1" style="height: 8px;">
                        <div class="progress-bar bg-primary"
                             role="progressbar"
                             style="width: {{ deal.stage_probability }}%"></div>
                    </div>
                    <span class="fw-medium">{{ deal.stage_probability }}%</span>
                </div>
            </div>
        </div>
        {% endif %}

        {# Действия #}
        <div class="card shadow-sm">
            <div class="card-body d-flex gap-2">
                <a href="{{ site_url('/crm/deals/' ~ deal.id ~ '/edit') }}" class="btn btn-outline-primary flex-grow-1">
                    <i class="fa-solid fa-pen me-1"></i>Редактировать
                </a>
                <form action="{{ site_url('/crm/deals/' ~ deal.id) }}" method="POST" class="flex-grow-1">
                    {{ csrf_field()|raw }}
                    <input type="hidden" name="_method" value="DELETE">
                    <button type="submit" class="btn btn-outline-danger w-100"
                            onclick="return confirm('Удалить сделку?')">
                        <i class="fa-solid fa-trash me-1"></i>Удалить
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
.timeline {
    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0 !important;
}
</style>
{% endblock %}