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

{% block body %}
    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('dossier_index') }}">Dossiers</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>{{ dossier.numDossier }}</span>
            </li>
        </ul>
    </div>

    <br/>

    <!-- Header Section -->
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-folder-open font-green"></i>
                <span class="caption-subject bold uppercase">{{ dossier.numDossier }} - {{ dossier.titre }}</span>
                <span class="badge badge-{{ dossier.status|status_class }}" style="margin-left:15px;">{{ dossier.status }}</span>
                {% if dossier.priorite in ['URGENTE', 'CRITIQUE'] %}
                <span class="badge badge-danger" style="margin-left:10px;">
                    <i class="fa fa-exclamation-triangle"></i> {{ dossier.priorite }}
                </span>
                {% endif %}
            </div>
            <div class="actions">
                {% if app.user.aDroit('dossier_modification') %}
                <a href="{{ path('dossier_edit', {'id': dossier.id}) }}" class="btn btn-sm green">
                    <i class="fa fa-edit"></i> Modifier
                </a>
                {% endif %}
                {% if app.user.aDroit('dossier_impression') %}
                <a href="{{ path('dossier_print_timeline', {'id': dossier.id}) }}" class="btn btn-sm blue" target="_blank">
                    <i class="fa fa-print"></i> Timeline
                </a>
                <a href="{{ path('dossier_print_bon_sortie', {'id': dossier.id}) }}" class="btn btn-sm default" target="_blank">
                    <i class="fa fa-file-pdf-o"></i> Bon de sortie
                </a>
                {% endif %}
                {% if app.user.aDroit('dossier_modification') %}
                <button class="btn btn-sm yellow" data-toggle="modal" data-target="#change-status-modal">
                    <i class="fa fa-exchange"></i> Changer statut
                </button>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left Column -->
        <div class="col-md-6">
            <!-- Informations Générales -->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-info-circle"></i>
                        <span class="caption-subject">Informations générales</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <table class="table table-striped table-hover">
                        <tbody>
                            <tr>
                                <th style="width:40%">Client</th>
                                <td>
                                    <a href="{{ path('client_show', {'id': dossier.client.id}) }}">
                                        {{ dossier.client.raisonSociale }}
                                    </a>
                                    {% if dossier.client.telephone %}
                                    <br><small class="text-muted"><i class="fa fa-phone"></i> {{ dossier.client.telephone }}</small>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Véhicule</th>
                                <td>
                                    <a href="{{ path('vehicule_show', {'id': dossier.vehicule.id}) }}">
                                        {% if dossier.vehicule.brand %}{{ dossier.vehicule.brand.name }}{% endif %}
                                        {% if dossier.vehicule.brandModele %}{{ dossier.vehicule.brandModele.nom }}{% endif %}
                                        <br><strong>{{ dossier.vehicule.immatriculation }}</strong>
                                    </a>
                                </td>
                            </tr>
                            {% if dossier.assurance %}
                            <tr>
                                <th>Assurance</th>
                                <td>{{ dossier.assurance.raisonSociale }}</td>
                            </tr>
                            {% endif %}
                            <tr>
                                <th>Date ouverture</th>
                                <td>{{ dossier.dateDossier|date('d/m/Y') }}</td>
                            </tr>
                            {% if dossier.dateCloture %}
                            <tr>
                                <th>Date clôture</th>
                                <td>{{ dossier.dateCloture|date('d/m/Y') }}</td>
                            </tr>
                            {% endif %}
                            <tr>
                                <th>Montant estimé</th>
                                <td><strong>{{ dossier.montantEstime|number_format(2, ',', ' ') }} DH</strong></td>
                            </tr>
                            {% if dossier.montantFinal %}
                            <tr>
                                <th>Montant final</th>
                                <td><strong class="text-success">{{ dossier.montantFinal|number_format(2, ',', ' ') }} DH</strong></td>
                            </tr>
                            {% endif %}
                            {% if dossier.observations %}
                            <tr>
                                <th>Observations</th>
                                <td>{{ dossier.observations|nl2br }}</td>
                            </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Experts Panel -->
            {% if dossier.expert1 or dossier.expert2 or dossier.expert3 %}
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-user-md"></i>
                        <span class="caption-subject">Validations Experts</span>
                    </div>
                </div>
                <div class="portlet-body">
                    {% for expertNum in 1..3 %}
                        {% set expertGetter = 'expert' ~ expertNum %}
                        {% set statusGetter = 'expert' ~ expertNum ~ 'Status' %}
                        {% set notesGetter = 'expert' ~ expertNum ~ 'Notes' %}
                        
                        {% if attribute(dossier, expertGetter) is not null %}
                        <div class="expert-validation-row" style="margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #eee;">
                            <h4>Expert {{ expertNum }}: {{ attribute(dossier, expertGetter).raisonSociale }}</h4>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    {% if attribute(dossier, statusGetter) %}
                                    <div class="form-group">
                                        <label>Statut:</label>
                                        <span class="badge badge-{{ attribute(dossier, statusGetter)|lower }}">
                                            {{ attribute(dossier, statusGetter) }}
                                        </span>
                                    </div>
                                    {% endif %}
                                    
                                    {% if attribute(dossier, notesGetter) %}
                                    <div class="form-group">
                                        <label>Notes:</label>
                                        <p>{{ attribute(dossier, notesGetter)|nl2br }}</p>
                                    </div>
                                    {% endif %}
                                </div>
                                
                                <div class="col-md-6">
                                    <label>Documents de validation:</label>
                                    
                                    <div class="expert-documents" id="expert-{{ expertNum }}-documents">
                                        {% for doc in dossier.documents %}
                                            {% if doc.categorie == 'VALIDATION_EXPERT' ~ expertNum %}
                                            <div class="document-item" style="margin-bottom:5px;">
                                                <a href="{{ asset(doc.cheminFichier) }}" target="_blank">
                                                    <i class="fa fa-file-pdf-o"></i> {{ doc.nom }}
                                                </a>
                                                {% if app.user.aDroit('dossier_modification') %}
                                                <button class="btn btn-xs red js-delete-document" data-doc-id="{{ doc.id }}">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                                {% endif %}
                                            </div>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    
                                    {% if app.user.aDroit('dossier_modification') %}
                                    <div class="form-group" style="margin-top:10px;">
                                        <button type="button" class="btn btn-sm blue js-upload-expert-doc" 
                                                data-expert="{{ expertNum }}" 
                                                data-dossier="{{ dossier.id }}">
                                            <i class="fa fa-upload"></i> Ajouter document
                                        </button>
                                        <input type="file" id="expert-{{ expertNum }}-file" style="display:none;" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx">
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    
                    {% if dossier.expertValidationFinale %}
                    <div class="alert alert-success">
                        <i class="fa fa-check-circle"></i> Validation finale accordée
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Right Column -->
        <div class="col-md-6">
            <!-- Devis Panel -->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-file-text-o"></i>
                        <span class="caption-subject">Devis ({{ dossier.devis|length }})</span>
                    </div>
                    <div class="actions">
                        {% if app.user.aDroit('devis_ajout') %}
                        <a href="{{ path('devis_new', {'dossierId': dossier.id}) }}" class="btn btn-sm green">
                            <i class="fa fa-plus"></i> Nouveau
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="portlet-body">
                    {% if dossier.devis is not empty %}
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>N° Devis</th>
                                <th>Date</th>
                                <th>Montant</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for devis in dossier.devis %}
                            <tr>
                                <td>{{ devis.numDevis }}</td>
                                <td>{{ devis.dateDevis|date('d/m/Y') }}</td>
                                <td>{{ devis.totalTtc|number_format(2, ',', ' ') }} DH</td>
                                <td>
                                    <a href="{{ path('devis_show', {'id': devis.id}) }}" class="btn btn-xs blue">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">Aucun devis associé</p>
                    {% endif %}
                </div>
            </div>

            <!-- Réparations Panel -->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-wrench"></i>
                        <span class="caption-subject">Réparations ({{ dossier.reparations|length }})</span>
                    </div>
                    <div class="actions">
                        {% if app.user.aDroit('reparation_ajout') %}
                        <a href="{{ path('reparation_new', {'dossierId': dossier.id}) }}" class="btn btn-sm green">
                            <i class="fa fa-plus"></i> Nouvelle
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="portlet-body">
                    {% if dossier.reparations is not empty %}
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>N° O.R</th>
                                <th>Type</th>
                                <th>Statut</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for reparation in dossier.reparations %}
                            <tr>
                                <td>{{ reparation.numReparation }}</td>
                                <td>{{ reparation.reparationType ? reparation.reparationType.titre : '-' }}</td>
                                <td>
                                    {% if reparation.estCloturee %}
                                        <span class="badge badge-success">Clôturée</span>
                                    {% else %}
                                        <span class="badge badge-warning">En cours</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ path('reparation_show', {'id': reparation.id}) }}" class="btn btn-xs blue">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">Aucune réparation associée</p>
                    {% endif %}
                </div>
            </div>

            <!-- Factures Panel -->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-money"></i>
                        <span class="caption-subject">Factures ({{ dossier.ventes|length }})</span>
                    </div>
                    <div class="actions">
                        {% if app.user.aDroit('vente_ajout') %}
                        <a href="{{ path('vente_new', {'dossierId': dossier.id}) }}" class="btn btn-sm green">
                            <i class="fa fa-plus"></i> Nouvelle
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="portlet-body">
                    {% if dossier.ventes is not empty %}
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>N° Facture</th>
                                <th>Date</th>
                                <th>Montant</th>
                                <th>Reliquat</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for vente in dossier.ventes %}
                            <tr>
                                <td>{{ vente.numVente }}</td>
                                <td>{{ vente.dateVente|date('d/m/Y') }}</td>
                                <td>{{ vente.totalTtc|number_format(2, ',', ' ') }} DH</td>
                                <td>
                                    {% if vente.reliquat > 0 %}
                                        <span class="text-danger">{{ vente.reliquat|number_format(2, ',', ' ') }} DH</span>
                                    {% else %}
                                        <span class="text-success">Payé</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="{{ path('vente_show', {'id': vente.id}) }}" class="btn btn-xs blue">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    {% else %}
                    <p class="text-muted">Aucune facture associée</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Documents Panel (Full Width) -->
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-files-o"></i>
                <span class="caption-subject">Documents</span>
            </div>
            <div class="actions">
                {% if app.user.aDroit('dossier_modification') %}
                <button class="btn btn-sm green" data-toggle="modal" data-target="#upload-document-modal">
                    <i class="fa fa-upload"></i> Ajouter document
                </button>
                {% endif %}
            </div>
        </div>
        <div class="portlet-body">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#photos-avant" data-toggle="tab">Photos Avant</a></li>
                <li><a href="#photos-apres" data-toggle="tab">Photos Après</a></li>
                <li><a href="#photos-degats" data-toggle="tab">Photos Dégâts</a></li>
                <li><a href="#docs-assurance" data-toggle="tab">Documents Assurance</a></li>
                <li><a href="#docs-expert" data-toggle="tab">Documents Expert</a></li>
                <li><a href="#docs-autres" data-toggle="tab">Autres</a></li>
            </ul>
            
            <div class="tab-content">
                {% for category in ['PHOTO_AVANT', 'PHOTO_APRES', 'PHOTO_DEGATS', 'DOCUMENT_ASSURANCE', 'DOCUMENT_EXPERT', 'AUTRE'] %}
                <div class="tab-pane {{ loop.first ? 'active' : '' }}" id="{{ category|lower|replace({'_': '-'}) }}">
                    {% set docs = dossier.documents|filter(d => d.categorie == category) %}
                    {% if docs is not empty %}
                    <div class="row" style="margin-top:15px;">
                        {% for doc in docs %}
                        <div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom:15px;">
                            <div class="thumbnail">
                                {% if doc.mimeType starts with 'image/' %}
                                <a href="{{ asset(doc.cheminFichier) }}" data-lightbox="dossier-{{ category }}">
                                    <img src="{{ asset(doc.cheminFichier) }}" alt="{{ doc.nom }}" style="width:100%; height:150px; object-fit:cover;">
                                </a>
                                {% else %}
                                <a href="{{ asset(doc.cheminFichier) }}" target="_blank" style="display:block; text-align:center; padding:40px 10px;">
                                    <i class="fa fa-file-pdf-o" style="font-size:48px;"></i>
                                    <p style="margin-top:10px; font-size:12px;">{{ doc.nom }}</p>
                                </a>
                                {% endif %}
                                <div class="caption">
                                    <p style="font-size:11px; margin:5px 0;">{{ doc.nom|slice(0, 30) }}...</p>
                                    {% if app.user.aDroit('dossier_modification') %}
                                    <button class="btn btn-xs red js-delete-document" data-doc-id="{{ doc.id }}">
                                        <i class="fa fa-trash"></i> Supprimer
                                    </button>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-muted" style="margin-top:15px;">Aucun document dans cette catégorie</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Change Status Modal -->
    <div class="modal fade" id="change-status-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Changer le statut du dossier</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nouveau statut:</label>
                        <select id="new-status" class="form-control">
                            <option value="EN_PREPARATION">En préparation</option>
                            <option value="DEVIS">Devis</option>
                            <option value="EN_ATTENTE_EXPERT">En attente expert</option>
                            <option value="EN_ATTENTE_PIECES">En attente pièces</option>
                            <option value="EN_REPARATION">En réparation</option>
                            <option value="EN_FINALISATION">En finalisation</option>
                            <option value="EN_ATTENTE_FACTURATION">En attente facturation</option>
                            <option value="FACTURE">Facturé</option>
                            <option value="CLOTURE">Clôturé</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Annuler</button>
                    <button type="button" class="btn green" id="btn-confirm-status">Confirmer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload Document Modal -->
    <div class="modal fade" id="upload-document-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Ajouter un document</h4>
                </div>
                <form id="upload-document-form" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Catégorie:</label>
                            <select name="categorie" class="form-control" required>
                                <option value="PHOTO_AVANT">Photo avant réparation</option>
                                <option value="PHOTO_APRES">Photo après réparation</option>
                                <option value="PHOTO_DEGATS">Photo des dégâts</option>
                                <option value="DOCUMENT_ASSURANCE">Document assurance</option>
                                <option value="DOCUMENT_EXPERT">Document expert</option>
                                <option value="AUTRE">Autre</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Description (optionnel):</label>
                            <input type="text" name="description" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>Fichier:</label>
                            <input type="file" name="document" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn default" data-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn green">Télécharger</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        var dossierId = {{ dossier.id }};
        var base_url = '{{ path('homepage') }}';
    </script>
    <script src="{{ asset('assets/global/scripts/dossiers.js') }}"></script>
{% endblock %}