{% extends 'base.html.twig' %}

{% block title %}Detalle de Consulta Web #{{ consulta.id }}{% endblock %}

{% block body %}
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Consulta Web #{{ consulta.id }}</h5>
                    <span>{{ consulta.createdAt|date('d/m/Y H:i') }}</span>
                </div>
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Origen:</div>
                        <div class="col-sm-9">
                            {% if consulta.origen == 'whatsapp' %}
                                <span class="badge badge-success"><span class="fab fa-whatsapp"></span> WhatsApp</span>
                            {% elseif consulta.origen == 'llamada_telefonica' %}
                                <span class="badge badge-warning text-dark"><span class="fa fa-phone"></span> Teléfono</span>
                            {% else %}
                                <span class="badge badge-primary"><span class="fa fa-envelope"></span> Formulario Web</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Nombre:</div>
                        <div class="col-sm-9">{{ consulta.nombre|default('-') }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Email:</div>
                        <div class="col-sm-9">
                            {% if consulta.email %}
                                <a href="mailto:{{ consulta.email }}">{{ consulta.email }}</a>
                            {% else %}
                                -
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Teléfono:</div>
                        <div class="col-sm-9">{{ consulta.telefono|default('-') }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Estado:</div>
                        <div class="col-sm-9">
                            {% if consulta.procesado %}
                                <span class="badge badge-success"><span class="fa fa-check"></span> Procesado</span>
                            {% else %}
                                <span class="badge badge-danger"><span class="fa fa-clock"></span> Pendiente</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Dirección IP:</div>
                        <div class="col-sm-9">{{ consulta.ip|default('-') }}</div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-sm-3 font-weight-bold">Dispositivo:</div>
                        <div class="col-sm-9">
                            {% if consulta.dispositivo %}
                                <span class="badge badge-secondary">{{ consulta.dispositivo }}</span>
                            {% else %}
                                -
                            {% endif %}
                        </div>
                    </div>

                    {% if consulta.origen != 'whatsapp' and consulta.origen != 'llamada_telefonica' %}
                        <hr>
                        <div class="mb-3">
                            <div class="font-weight-bold mb-2">Mensaje:</div>
                            <div class="p-3 bg-light border rounded" style="white-space: pre-wrap; min-height: 100px;">{{ consulta.mensaje|nl2br }}</div>
                        </div>
                    {% endif %}
                </div>
                <div class="card-footer d-flex justify-content-between">
                    <a class="btn btn-secondary" href="{{ path('consulta_web_index') }}">
                        <span class="fa fa-arrow-left"></span> Volver al listado
                    </a>

                    <form action="{{ path('consulta_web_toggle_procesado', {'id': consulta.id}) }}" method="post">
                        <input type="hidden" name="_token" value="{{ csrf_token('toggle-procesado' ~ consulta.id) }}">
                        {% if consulta.procesado %}
                            <button class="btn btn-warning" type="submit">
                                <span class="fa fa-undo"></span> Marcar como Pendiente
                            </button>
                        {% else %}
                            <button class="btn btn-success" type="submit">
                                <span class="fa fa-check"></span> Marcar como Procesado
                            </button>
                        {% endif %}
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}