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

{% block body %}


<!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('prospect_index') }}">Prospects</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Details</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>


    <div class="row">
        <div class="col-lg-5 col-xs-12 col-sm-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings"></i>
                        <span class="caption-subject">Fiche du prospect</span>
                    </div>
                </div>

                <div class="portlet-body form">
                    <div class="form-body">
                        <table width="100%">
                            <tbody>
                                <tr>
                                    <th>Nom</th>
                                    <td>{{ prospect.nom }}</td>
                                </tr>
                                <tr>
                                    <th>Prenom</th>
                                    <td>{{ prospect.prenom }}</td>
                                </tr>
                                {% if prospect.cin %}
                                <tr>
                                    <th>CIN</th>
                                    <td>{{ prospect.cin }}</td>
                                </tr>
                                {% endif %}
                                {% if prospect.adresse %}
                                <tr>
                                    <th>Adresse</th>
                                    <td>{{ prospect.adresse }}</td>
                                </tr>
                                {% endif %}

                                {% if prospect.email %}
                                <tr>
                                    <th>Email</th>
                                    <td>{{ prospect.email }}</td>
                                </tr>
                                {% endif %}

                                {% if prospect.email %}
                                <tr>
                                    <th>Tel</th>
                                    <td>{{ prospect.telephone }}</td>
                                </tr>
                                {% endif %}

                            </tbody>
                        </table>
                    </div>

                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-9">
                                <a href="{{ path('prospect_index') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
                                {% if app.user.aDroit('client_modification') %}
                                    <a href="{{ path('prospect_edit', { 'id': prospect.id }) }}" class="btn green"><i class="fa fa-edit"></i> Modifier</a>
                                {% endif %}

                                {% if app.user.aDroit('client_suppression') %}
                                    <button type="submit" value="Supprimer" class="btn red hidden-print" onClick="document.form.submit();">
                                        <i class="fa fa-remove"></i> Supprimer
                                    </button>
                                    {{ form_start(delete_form) }}
                                    {{ form_end(delete_form) }}
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    

                </div>
            </div>
        </div>


        <div class="col-lg-7 col-xs-12 col-sm-12">
            <div class="portlet light portlet-fit bg-inverse ">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-microphone font-red"></i>
                        <span class="caption-subject bold font-red uppercase">Evenements</span>
                        <span class="caption-helper">Avec le prospect</span>
                    </div>
                </div>

                <div class="portlet-body">
                    <div class="form-body">
                        <form method=post>
                            <div class="form-group">
                                <select name="type" class="bs-select form-control" data-show-subtext="true">
                                    <option value="Visite" data-icon="fa-map-pin">Visite</option>
                                    <option value="Appel entrant" data-icon="fa-fax">Appel entrant</option>
                                    <option value="Appel sortant" data-icon="fa-phone">Appel sortant</option>
                                    <option value="Email reçus" data-icon="fa-envelope">Email reçus</option>
                                    <option value="Email envoyé" data-icon="fa-send">Email envoyé</option>
                                    <option value="Devis" data-icon="fa-file-o">Devis</option>
                                    <option value="Autre" data-icon="fa-commenting-o">Autre</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <textarea name="description" class="form-control" placeholder="Details de l'evenement"></textarea>
                            </div>
                            <button type="submit" value="Enregistrer" class="btn green"><i class="fa fa-plus"></i> Enregistrer</button>
                            
                        </form>
                    </div>
                    <hr>

                    <div class="timeline white-bg">
                        {% for event in prospect.getEvenements() %}

                            <!-- TIMELINE ITEM -->
                            <div class="timeline-item">
                                <div class="timeline-badge">
                                    <div class="timeline-icon">
                                        <i class="icon-user font-green-haze"></i>
                                    </div>
                                </div>
                                <div class="timeline-body">
                                    <div class="timeline-body-arrow"> </div>
                                    <div class="timeline-body-head">
                                        <div class="timeline-body-head-caption">
                                            <a href="javascript:;" class="timeline-body-title font-blue-madison">
                                                {{ event.type }}
                                            </a>
                                            <span class="timeline-body-time font-grey-cascade">
                                                {% if event.dateEvenement %}le {{ event.dateEvenement|date('d-m-Y H:s') }}{% endif %}
                                            </span>
                                        </div>
                                        
                                    </div>
                                    <div class="timeline-body-content">
                                        <span class="font-grey-cascade">
                                            <b>{{ event.utilisateur }}</b>
                                            {% if event.description %} / {{ event.description }}{% endif %}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- END TIMELINE ITEM -->

                        {% endfor %}

                        <!-- TIMELINE ITEM -->
                        <div class="timeline-item">
                            <div class="timeline-badge">
                                <div class="timeline-icon">
                                    <i class="icon-user font-green-haze"></i>
                                </div>
                            </div>
                            <div class="timeline-body">
                                <div class="timeline-body-arrow"> </div>
                                <div class="timeline-body-head">
                                    <div class="timeline-body-head-caption">
                                        <a href="javascript:;" class="timeline-body-title font-blue-madison">
                                            Création de la fiche prospect
                                        </a>
                                        <span class="timeline-body-time font-grey-cascade">
                                            {% if prospect.dateInscription %}le {{ prospect.dateInscription|date('d-m-Y H:s') }}{% endif %}
                                        </span>
                                    </div>
                                    
                                </div>
                                <div class="timeline-body-content">
                                    <span class="font-grey-cascade">
                                        {{ prospect.utilisateur }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- END TIMELINE ITEM -->


                    </div>
                </div>
            </div>
        </div>
    </div>


    
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".bs-select").selectpicker({ iconBase: "fa", tickIcon: "fa-check" });
    })
    </script>
{% endblock %}