{% extends 'layout/template.twig' %}

{% block content %}
    <!-- barra superior titulo de pagina-->
    <div class="div-title bg-color-other">
        <div class="container">
            <div class="row">
                <div class="col-xs-10 col-sm-11">
                    <div class="row">
                        <div class="col-md-6" style="font-size:18px;">
                            {{ title }}: {{ conversation.subject }}  <br>
                           Estado: {{ conversation.state.ds }}
                        </div>
                        <div class="col-md-6"  style="font-size:18px;">
                           Día de contacto: {{ conversation.created_at|date("d/m/Y") }} <br>
                            Hora de contacto: {{ conversation.created_at|date("H:i:s") }}
                        </div>
                    </div>
                </div>
                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                </div>
            </div>
        </div>
    </div>
    <!--contenido-->

    <div class="container mt20 pb40" >
        <div class="col-container">

            {% for m in conversation.messages %}

                {% if loop.index % 2 != 0 %}

                {#// CLIENTE#}
                <div class="row">
                    {#contenido#}
                    <div class="col-xs-12 text-right">
                        <p>{{ m.message }}</p>
                        <p><i class="fa fa-calendar"></i> {{ m.created_at|date("d/m/Y H:i:s") }}</p>
                        {% if m.read == "S" %}
                            <p style="color: #7EBC00"><i class="fa fa-eye"></i> Leído </p>
                        {% else %}
                            <p style="color: #aa0000"><i class="fa fa-eye"></i> No Leído </p>
                        {% endif %}
                    </div>
                </div>

                {% else %}

                <!--respuesta NUTRICIONISTA -->
                <div class="row">
                    {#icono cliente#}
                    <div class="col-sm-2 text-center">
                        <img src="assets/img/consultas/nutricionista_sm.png" class="img-responsive-custom img-circle"/>
                        <p class="mt10">{{ m.auth_user.nombre ~ " " ~ m.auth_user.apellidos }}</p>
                    </div>
                    {#contenido#}
                    <div class="col-sm-10">
                        <p>{{ m.message }}</p>
                        <p><i class="fa fa-calendar"></i> {{ m.created_at|date("d/m/Y H:i:s") }}</p>
                        {% if m.read == "S" %}
                            <p style="color: #7EBC00"><i class="fa fa-eye"></i> Leído </p>
                        {% else %}
                            <p style="color: #aa0000"><i class="fa fa-eye"></i> No Leído </p>
                        {% endif %}
                    </div>
                </div>

                {% endif %}

                <hr>

            {% endfor %}

            {#**********************************************FORMULARIO RESPUESTA**********************************************#}

            {#Si la conversacion esta pendiente, respondida por cliente o cerrada no le dejamos seguir respondiendo#}
            {% if conversation.state_id != 1 and conversation.state_id != 2 and conversation.state_id != 4 %}

                <form action="{{ url("consultas-nutricionista/update") }}" method="post">

                    <input type="hidden" name="id" value="{{ conversation.id }}">

                    <div class="row">
                        <div class="col-sm-10 col-md-11">
                            <textarea rows="5"  class="form-control" name="message" placeholder="Responder..."></textarea>
                        </div>
                        <div class="col-sm-2  col-md-1">
                            <div class="mt20">
                                <button type="submit" class="btn btn-custom btn-other" title="Enviar"><i class="fa fa-send"></i></button>
                            </div>
                        </div>
                    </div>
                </form>

            {% endif %}
        </div>
    </div>
{% endblock %}




