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

{% block stylesheets %}
<style type="text/css">
.timeline {
    position: relative;
    padding: 20px 0;
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    padding-bottom: 30px;
    border-left: 2px solid #e0e0e0;
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
}

.timeline-icon {
    position: absolute;
    left: -12px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #3498db;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #3498db;
}

.timeline-icon.success {
    border-color: #27ae60;
    color: #27ae60;
}

.timeline-icon.warning {
    border-color: #f39c12;
    color: #f39c12;
}

.timeline-icon.danger {
    border-color: #e74c3c;
    color: #e74c3c;
}

.timeline-content {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

.timeline-date {
    font-weight: bold;
    color: #7f8c8d;
    font-size: 12px;
    margin-bottom: 5px;
}

.timeline-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.timeline-description {
    font-size: 12px;
    color: #555;
}

.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: white;
}

.status-en_preparation { background: #95a5a6; }
.status-devis { background: #3498db; }
.status-en_attente_expert { background: #f39c12; }
.status-en_attente_pieces { background: #e67e22; }
.status-en_reparation { background: #9b59b6; }
.status-en_finalisation { background: #16a085; }
.status-facture { background: #27ae60; }
.status-cloture { background: #2c3e50; }
</style>
{% endblock %}

{% block body %}
<div style="text-align:center;width:100%;margin:auto;">
    
    <table width="100%">
        <tr>
            <td width="40%" valign="top">
                <div style='border:1px solid;padding:5px 10px;text-align:left; border-radius: 10px;'>
                    <b style="font-size:18px;">{{ dossier.getMagasin().titre }}</b><br>
                    {% if dossier.getMagasin().getAdresse() %}{{ dossier.getMagasin().adresse }}<br>{% endif %}
                    {% if dossier.getMagasin().getTelephone() %}Téléphone: {{ dossier.getMagasin().telephone }}<br>{% endif %}
                    {% if dossier.getMagasin().getFax() %}Télécopie: {{ dossier.getMagasin().fax }}<br>{% endif %}
                    {% if dossier.getMagasin().getEmail() %}{{ dossier.getMagasin().email }}<br>{% endif %}
                </div>
            </td>
            <td width="60%" style='text-align:center;'>
                <div style="text-align:right;">
                    {% if dossier.getMagasin().photo %}
                        <img src="{{ asset('uploads/magasins/' ~ dossier.getMagasin().photo) }}" height="80px">
                    {% endif %}
                </div>
                <div style="margin-top:10px;">
                    <h2 style="margin:5px 0;">CHRONOLOGIE DU DOSSIER</h2>
                    <b style="font-size:20px;">{{ dossier.numDossier }}</b>
                </div>
            </td>
        </tr>
    </table>

    <br>

    <table width="100%" class="table-produits" style="text-align:left;">
        <tr>
            <th colspan="2">Informations Générales</th>
        </tr>
        <tr>
            <td width="50%">
                <b>Titre:</b> {{ dossier.titre }}<br>
                <b>Client:</b> {{ dossier.getClient().getRaisonSociale() }}<br>
                {% if dossier.getClient().getTelephone() %}<b>Téléphone:</b> {{ dossier.getClient().getTelephone() }}<br>{% endif %}
            </td>
            <td width="50%">
                <b>Véhicule:</b> {{ dossier.getVehicule().getMarque() }} {{ dossier.getVehicule().getModele() }}<br>
                <b>Immatriculation:</b> {{ dossier.getVehicule().getImmatriculation() }}<br>
                <b>Statut:</b> <span class="status-badge status-{{ dossier.status|lower }}">{{ dossier.status }}</span>
            </td>
        </tr>
        {% if dossier.getAssurance() %}
        <tr>
            <td colspan="2">
                <b>Assurance:</b> {{ dossier.getAssurance().getRaisonSociale() }}
            </td>
        </tr>
        {% endif %}
        <tr>
            <td>
                <b>Date d'ouverture:</b> {{ dossier.dateDossier|date("d/m/Y H:i") }}
            </td>
            <td>
                {% if dossier.dateCloture %}
                    <b>Date de clôture:</b> {{ dossier.dateCloture|date("d/m/Y H:i") }}
                {% else %}
                    <b>Dossier en cours</b>
                {% endif %}
            </td>
        </tr>
    </table>

    <br>

    <table width="100%" style="text-align:left;">
        <tr>
            <th>Chronologie des événements</th>
        </tr>
    </table>

    <div class="timeline">
        {# Dossier creation #}
        <div class="timeline-item">
            <div class="timeline-icon">
                <i class="fa fa-folder-open"></i>
            </div>
            <div class="timeline-content">
                <div class="timeline-date">{{ dossier.dateTimeCreation|date("d/m/Y H:i") }}</div>
                <div class="timeline-title">Création du dossier</div>
                <div class="timeline-description">
                    Dossier créé par {{ dossier.getUtilisateur() }}
                    {% if dossier.priorite and dossier.priorite != 'NORMALE' %}
                        - Priorité: <b>{{ dossier.priorite }}</b>
                    {% endif %}
                </div>
            </div>
        </div>

        {# Devis events #}
        {% for devis in dossier.getDevis() %}
            <div class="timeline-item">
                <div class="timeline-icon {% if devis.getEstValide() %}success{% endif %}">
                    <i class="fa fa-file-text"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ devis.getDateDevis()|date("d/m/Y") }}</div>
                    <div class="timeline-title">Devis {{ devis.getNumDevis() }}</div>
                    <div class="timeline-description">
                        Montant: {{ devis.getTotalTtc()|number_format(2, ',', ' ') }} DH
                        {% if devis.getEstValide() %} - ✓ Validé{% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}

        {# Expert approvals #}
        {% for expertNum in 1..3 %}
            {% set expertGetter = 'getExpert' ~ expertNum %}
            {% set statusGetter = 'getExpert' ~ expertNum ~ 'Status' %}
            {% set notesGetter = 'getExpert' ~ expertNum ~ 'Notes' %}
            
            {% if attribute(dossier, expertGetter) is not null and attribute(dossier, statusGetter) %}
                <div class="timeline-item">
                    <div class="timeline-icon {% if attribute(dossier, statusGetter) == 'APPROUVE' %}success{% elseif attribute(dossier, statusGetter) == 'REFUSE' %}danger{% else %}warning{% endif %}">
                        <i class="fa fa-user-md"></i>
                    </div>
                    <div class="timeline-content">
                        <div class="timeline-date">{{ dossier.dateTimeModification|date("d/m/Y H:i") }}</div>
                        <div class="timeline-title">Expert {{ expertNum }}: {{ attribute(dossier, expertGetter).getRaisonSociale() }}</div>
                        <div class="timeline-description">
                            Statut: <b>{{ attribute(dossier, statusGetter) }}</b>
                            {% if attribute(dossier, notesGetter) %}<br>Notes: {{ attribute(dossier, notesGetter) }}{% endif %}
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}

        {# Commandes events #}
        {% for commande in dossier.getCommandes() %}
            <div class="timeline-item">
                <div class="timeline-icon">
                    <i class="fa fa-shopping-cart"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ commande.getDateCommande()|date("d/m/Y") }}</div>
                    <div class="timeline-title">Commande {{ commande.getNumCommande() }}</div>
                    <div class="timeline-description">
                        Fournisseur: {{ commande.getFournisseur().getRaisonSociale() }} - 
                        Montant: {{ commande.getTotalTtc()|number_format(2, ',', ' ') }} DH
                    </div>
                </div>
            </div>
        {% endfor %}

        {# Achats events #}
        {% for achat in dossier.getAchats() %}
            <div class="timeline-item">
                <div class="timeline-icon success">
                    <i class="fa fa-truck"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ achat.getDateAchat()|date("d/m/Y") }}</div>
                    <div class="timeline-title">Réception Achat {{ achat.getNumAchat() }}</div>
                    <div class="timeline-description">
                        Fournisseur: {{ achat.getFournisseur().getRaisonSociale() }} - 
                        Montant: {{ achat.getTotalTtc()|number_format(2, ',', ' ') }} DH
                    </div>
                </div>
            </div>
        {% endfor %}

        {# Reparations events #}
        {% for reparation in dossier.getReparations() %}
            <div class="timeline-item">
                <div class="timeline-icon {% if reparation.getEstCloturee() %}success{% else %}warning{% endif %}">
                    <i class="fa fa-wrench"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ reparation.getDateTimeEntree()|date("d/m/Y H:i") }}</div>
                    <div class="timeline-title">Réparation {{ reparation.numReparation() }}</div>
                    <div class="timeline-description">
                        Entrée: {{ reparation.getDateTimeEntree()|date("d/m/Y") }}
                        {% if reparation.getDateTimeSortie() %}
                            - Sortie: {{ reparation.getDateTimeSortie()|date("d/m/Y") }}
                        {% elseif reparation.getDateTimePrevueSortie() %}
                            - Sortie prévue: {{ reparation.getDateTimePrevueSortie()|date("d/m/Y") }}
                        {% endif %}
                        {% if reparation.getEstCloturee() %} - ✓ Clôturée{% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}

        {# Ventes/Factures events #}
        {% for vente in dossier.getVentes() %}
            <div class="timeline-item">
                <div class="timeline-icon {% if vente.getReliquat() == 0 %}success{% endif %}">
                    <i class="fa fa-file-text-o"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ vente.getDateVente()|date("d/m/Y") }}</div>
                    <div class="timeline-title">Facture {{ vente.getNumVente() }}</div>
                    <div class="timeline-description">
                        Montant: {{ vente.getTotalTtc()|number_format(2, ',', ' ') }} DH
                        {% if vente.getReliquat() > 0 %}
                            - Reste à payer: {{ vente.getReliquat()|number_format(2, ',', ' ') }} DH
                        {% else %}
                            - ✓ Payée intégralement
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}

        {# Closure event #}
        {% if dossier.dateCloture %}
            <div class="timeline-item">
                <div class="timeline-icon success">
                    <i class="fa fa-check-circle"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-date">{{ dossier.dateCloture|date("d/m/Y H:i") }}</div>
                    <div class="timeline-title">Dossier clôturé</div>
                    <div class="timeline-description">
                        {% if dossier.montantFinal %}
                            Montant final: {{ dossier.montantFinal|number_format(2, ',', ' ') }} DH
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <br>

    {% if dossier.observations %}
    <table width="100%" class="table-produits" style="text-align:left;">
        <tr>
            <th>Observations</th>
        </tr>
        <tr>
            <td>{{ dossier.observations|nl2br|raw }}</td>
        </tr>
    </table>
    {% endif %}

    <br><br>

    <table width="100%" class="table-produits borderless" style="text-align:left;font-size:12px;">
        <tr>
            <td width="50%">
                <b>Document généré le:</b> {{ "now"|date("d/m/Y à H:i") }}
            </td>
            <td width="50%" style="text-align:right;">
                <b>Imprimé par:</b> {{ app.user }}
            </td>
        </tr>
    </table>
</div>
{% endblock %}