templates/entreprise/details.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Consulter entreprise{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  8.     <style>
  9.         .pdl-details-container {
  10.             margin-bottom: 20px;
  11.         }
  12.         .pdl-select {
  13.             width: 100%;
  14.             padding: 8px;
  15.             border: 1px solid #ced4da;
  16.             border-radius: 4px;
  17.             margin-bottom: 15px;
  18.         }
  19.         .pdl-details-compact {
  20.             background: #f8f9fa;
  21.             border-radius: 4px;
  22.             padding: 10px;
  23.             margin-bottom: 15px;
  24.         }
  25.         .pdl-details-row {
  26.             display: flex;
  27.             flex-wrap: wrap;
  28.             gap: 20px;
  29.             margin-bottom: 5px;
  30.         }
  31.         .pdl-detail-item {
  32.             display: flex;
  33.             align-items: center;
  34.         }
  35.         .pdl-detail-label {
  36.             font-weight: bold;
  37.             margin-right: 8px;
  38.             color: #495057;
  39.         }
  40.         .pdl-detail-value {
  41.             color: #212529;
  42.         }
  43.         .pdl-actions {
  44.             margin-top: 10px;
  45.             display: flex;
  46.             gap: 10px;
  47.         }
  48.         .contracts-section {
  49.             margin-top: 20px;
  50.             border-top: 1px solid #dee2e6;
  51.             padding-top: 10px;
  52.         }
  53.         .related-contracts {
  54.             margin-top: 15px;
  55.             background: #fff;
  56.             border: 1px solid #dee2e6;
  57.             border-radius: 4px;
  58.         }
  59.         .related-contracts table {
  60.             width: 100%;
  61.             margin-bottom: 0;
  62.         }
  63.         .related-contracts th {
  64.             background: #f8f9fa;
  65.             padding: 8px;
  66.             border-bottom: 1px solid #dee2e6;
  67.         }
  68.         .related-contracts td {
  69.             padding: 8px;
  70.             border-bottom: 1px solid #dee2e6;
  71.         }
  72.         @keyframes fadeIn {
  73.             from { opacity: 0; }
  74.             to { opacity: 1; }
  75.         }
  76.         #pdl-details, #gas-pdl-details {
  77.             animation: fadeIn 0.5s ease-in-out;
  78.         }
  79.         .error-message {
  80.             color: #dc3545;
  81.             padding: 10px;
  82.             margin-top: 10px;
  83.             border-radius: 4px;
  84.             background-color: #f8d7da;
  85.             border: 1px solid #f5c6cb;
  86.         }
  87.     </style>
  88. {% endblock %}
  90. {% block body %}
  91. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
  92. <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  93. <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
  94. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  95. {{ include('_header.html.twig') }}
  96.     <a href="{{path('app_entreprise')}}" type="button" class="btn btn-lg btn-danger mt-2" id="backButton">Retour</a>
  97.     <a href="{{path('app_entreprise_edit',{'id':entreprise.id})}}" type="button" class="btn btn-lg btn-warning mt-2">Modifier</a>
  98.     <h1 class="h3 mb-3 font-weight-normal">Consultation d'une entreprise</h1>
  99.     <form>
  100.         <div class="form-group row">
  101.             <div class="col-sm-3">
  102.                 <label for="RaisonSociale">Raison sociale</label>
  103.                 <input type="texte" disabled class="form-control form-control-lg" id="RaisonSociale" value="{{entreprise.raison_sociale}}">
  104.             </div>
  105.             <div class="col-sm-3">
  106.                 <label for="Siret">Siret</label>
  107.                 <input type="texte" disabled class="form-control form-control-lg" id="Siret" value="{{entreprise.siret}}">
  108.             </div>
  109.             <div class="col-sm-3">
  110.                 <label for="Naf">Naf</label>
  111.                 <input type="texte" disabled class="form-control form-control-lg" id="Naf" value="{{entreprise.naf}}">
  112.             </div>
  113.             <div class="col-sm-3">
  114.                 <label for="rcs">Rcs</label>
  115.                 <input type="texte" disabled class="form-control form-control-lg" id="rcs" value="{{entreprise.rcs}}">
  116.             </div>
  117.         </div>
  118.         <div class="form-group row">
  119.             <div class="col-sm-3">
  120.                 <label for="num_voie">N° voie</label>
  121.                 <input type="texte" disabled class="form-control form-control-lg" id="num_voie" value="{{entreprise.num_voie}}">
  122.             </div>
  123.             <div class="col-sm-3">
  124.                 <label for="Adresse">Adresse</label>
  125.                 <input type="texte" disabled class="form-control form-control-lg" id="Adresse" value="{{entreprise.adresse}}">
  126.             </div>
  127.             <div class="col-sm-3">
  128.                 <label for="code_postal">Code Postal</label>
  129.                 <input type="texte" disabled class="form-control form-control-lg" id="code_postal" value="{{entreprise.code_postal}}">
  130.             </div>
  131.             <div class="col-sm-3">
  132.                 <label for="commune">Commune</label>
  133.                 <input type="texte" disabled class="form-control form-control-lg" id="commune" value="{{entreprise.commune}}">
  134.             </div>
  135.         </div>
  136.         <div class="form-group row">
  137.             <div class="col-sm-4">
  138.                 <label for="Code_Insee">Code Insee</label>
  139.                 <input type="texte" disabled class="form-control form-control-lg" id="Code_Insee" value="{{entreprise.code_insee}}">
  140.             </div>
  141.             <div class="col-sm-4">
  142.                 <label for="Statut">Statut</label>
  143.                 <input type="texte" disabled class="form-control form-control-lg" id="Statut" value="{{entreprise.statut}}">
  144.             </div>
  145.             <div class="col-sm-4">
  146.                 <label for="Utilisateur">Utilisateurs</label>
  147.                     <input type="texte" disabled class="form-control form-control-lg" id="Statut" value="{% if entreprise.utilisateur is not empty %}{% for username in entreprise.utilisateur %}{{ username }}, {% endfor %}{% else %}Aucun utilisateur{% endif %}">
  148.             </div>
  149.         </div>
  150.     </form>
  151.     <hr class="mt-2">
  152.     <div class="row">
  153.         <div class="col-2">
  154.             <div class="list-group" id="list-tab" role="tablist">
  155.                 <a class="list-group-item list-group-item-action" id="list-notes-list" data-toggle="list" href="#list-notes" role="tab" aria-controls="notes"><span class="badge badge-primary bg-black badge-pill">{{notes|length}}</span> Notes</a>
  156.                 <a class="list-group-item list-group-item-action" id="list-rappels-list" data-toggle="list" href="#list-rappels" role="tab" aria-controls="rappels"><span class="badge badge-primary bg-black badge-pill">{{rappels|length}}</span> Rappels</a>
  157.                 <a class="list-group-item list-group-item-action" id="list-electric-meters-list" data-toggle="list" href="#list-electric-meters" role="tab" aria-controls="electric-meters"><span class="badge badge-primary bg-black badge-pill">{{electric_meters|length}}</span> Electric Meters</a>
  158.                 <a class="list-group-item list-group-item-action" id="list-gas-meters-list" data-toggle="list" href="#list-gas-meters" role="tab" aria-controls="gas-meters"><span class="badge badge-primary bg-black badge-pill">{{gas_meters|length}}</span> Gas Meters</a>
  159.                 <a class="list-group-item list-group-item-action" id="list-cspes-list" data-toggle="list" href="#list-cspes" role="tab" aria-controls="cspes"><span class="badge badge-primary bg-black badge-pill">{{cspes|length}}</span> CSPE</a>
  160.                 <a class="list-group-item list-group-item-action" id="list-espace-clients-list" data-toggle="list" href="#list-espace-clients" role="tab" aria-controls="espace-clients"><span class="badge badge-primary bg-black badge-pill">{{espace_clients|length}}</span> Espaces Clients</a>
  161.                 <a class="list-group-item list-group-item-action" id="list-contacts-list" data-toggle="list" href="#list-contacts" role="tab" aria-controls="contacts"><span class="badge badge-primary bg-black badge-pill">{{contacts|length}}</span> Contacts</a>
  162.                 <a class="list-group-item list-group-item-action" id="list-contrats-list" data-toggle="list" href="#list-contrats" role="tab" aria-controls="contrats"><span class="badge badge-primary bg-black badge-pill">{{contrats|length}}</span> Contrats</a>
  163.                 <a class="list-group-item list-group-item-action" id="panel-docs-list" data-toggle="list" href="#panel-docs" role="tab" aria-controls="documents">Génération document</a>
  164.             </div>
  165.         </div>
  166.         <div class="col-10">
  167.             <div class="tab-content" id="nav-tabContent">
  168.                 <div class="tab-pane fade" id="list-notes" role="tabpanel" aria-labelledby="list-notes-list">
  169.                     <div class="row mb-3">
  170.                         <a type="button" href="{{path('app_note_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter une note</a>
  171.                     </div>
  172.                     <div id="notes-container">
  173.                         {% for note in notes %}
  174.                             <div class="card mb-3">
  175.                                 <div class="card-header d-flex justify-content-between align-items-center">
  176.                                     <span><strong>{{ note.user }}</strong> - {{ note.date_creation }}</span>
  177.                                     <div>
  178.                                         <a href="{{ note.edit_url }}" class="btn btn-sm btn-warning mb-1">Modifier</a>
  179.                                         <a href="{{ note.delete_url }}" class="btn btn-sm btn-danger ">Supprimer</a>
  180.                                     </div>
  181.                                 </div>
  182.                                 <div class="card-body">
  183.                                     <p class="card-text">{{ note.texte }}</p>
  184.                                 </div>
  185.                             </div>
  186.                         {% endfor %}
  187.                     </div>
  188.                 </div>
  189.                 <div class="tab-pane fade" id="list-rappels" role="tabpanel" aria-labelledby="list-rappels-list">
  190.                     <div class="row">
  191.                         <a type="button" href="{{path('app_rappel_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter un rappel</a>
  192.                     </div>
  193.                     <table id="rappels" class="text-center table table-light table-bordered table-striped" style="width:100%">
  194.                         <thead>
  195.                             <tr class="bg-dark">
  196.                                 <th>Titre</th>
  197.                                 <th>Description</th>
  198.                                 <th>Echeance</th>
  199.                                 <th>Compléter</th>
  200.                                 <th>Action</th>
  201.                             </tr>
  202.                         </thead>
  203.                     </table>
  204.                 </div>
  205.                 <div class="tab-pane fade" id="list-electric-meters" role="tabpanel" aria-labelledby="list-electric-meters-list">
  206.                     <div class="row">
  207.                         <a type="button" href="{{path('app_electric_meter_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter un Electric Meter</a>
  208.                     </div>
  209.                     <div class="pdl-details-container">
  210.                         <h4>Point de Livraison</h4>
  211.                         <select class="pdl-select" id="electric-pdl-select">
  212.                             <option value="">Sélectionnez un PDL</option>
  213.                             {% for meter in electric_meters %}
  214.                                 <option value="{{ meter.pdl }}" data-id="{{ meter.id }}">{{ meter.pdl }}</option>
  215.                             {% endfor %}
  216.                         </select>
  217.                         <div id="pdl-details" class="pdl-details-compact">
  218.                             Sélectionnez un PDL pour voir les détails
  219.                         </div>
  220.                     </div>
  221.                 </div>
  222.                 <div class="tab-pane fade" id="list-gas-meters" role="tabpanel" aria-labelledby="list-gas-meters-list">
  223.                     <div class="row">
  224.                         <a type="button" href="{{path('app_gas_meter_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter un Gas Meter</a>
  225.                     </div>
  226.                     <div class="pdl-details-container">
  227.                         <h4>Point de Livraison</h4>
  228.                         <select class="pdl-select" id="gas-pdl-select">
  229.                             <option value="">Sélectionnez un PDL</option>
  230.                             {% for meter in gas_meters %}
  231.                                 <option value="{{ meter.pdl }}" data-id="{{ meter.id }}">{{ meter.pdl }}</option>
  232.                             {% endfor %}
  233.                         </select>
  234.                         <div id="gas-pdl-details" class="pdl-details-compact">
  235.                             Sélectionnez un PDL pour voir les détails
  236.                         </div>
  237.                     </div>
  238.                 </div>
  239.                 <div class="tab-pane fade" id="list-cspes" role="tabpanel" aria-labelledby="list-cspes-list">
  240.                     <div class="row">
  241.                         <a type="button" href="{{path('app_cspe_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter une CSPE</a>
  242.                     </div>
  243.                     <table id="cspes" class="text-center table table-light table-bordered table-striped" style="width:100%">
  244.                         <thead>
  245.                             <tr class="bg-dark">
  246.                                 <th>Notes</th>
  247.                                 <th>Date</th>
  248.                                 <th>Valeur annuelle</th>
  249.                                 <th>Action</th>
  250.                             </tr>
  251.                         </thead>
  252.                     </table>
  253.                 </div>
  254.                 <div class="tab-pane fade" id="list-espace-clients" role="tabpanel" aria-labelledby="list-espace-clients-list">
  255.                     <div class="row">
  256.                         <a type="button" href="{{path('app_espace_client_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter un Espace Client</a>
  257.                     </div>
  258.                     <table id="espace_clients" class="text-center table table-light table-bordered table-striped" style="width:100%">
  259.                         <thead>
  260.                             <tr class="bg-dark">
  261.                                 <th>Fournisseur</th>
  262.                                 <th>Login</th>
  263.                                 <th>Mdp</th>
  264.                                 <th>Lien</th>
  265.                                 <th>Action</th>
  266.                             </tr>
  267.                         </thead>
  268.                     </table>
  269.                 </div>
  270.                 <div class="tab-pane fade" id="list-contacts" role="tabpanel" aria-labelledby="list-contacts-list">
  271.                     <div class="row">
  272.                         <a type="button" href="{{path('app_contact_add',{'id':entreprise.id})}}" class="btn btn-success">Ajouter un contact</a>
  273.                     </div>
  274.                     <table id="contacts" class="text-center table table-light table-bordered table-striped" style="width:100%">
  275.                         <thead>
  276.                             <tr class="bg-dark">
  277.                                 <th>Nom</th>
  278.                                 <th>Prénom</th>
  279.                                 <th>Civilite</th>
  280.                                 <th>Fonction</th>
  281.                                 <th>Téléphone</th>
  282.                                 <th>Mail</th>
  283.                                 <th>Mobile</th>
  284.                                 <th>Action</th>
  285.                             </tr>
  286.                         </thead>
  287.                         <tbody>
  288.                             {% for contact in contacts %}
  289.                                 <tr>
  290.                                     <td>{{ contact[0] }}</td>
  291.                                     <td>{{ contact[1] }}</td>
  292.                                     <td>{{ contact[2] }}</td>
  293.                                     <td>{{ contact[3] }}</td>
  294.                                     <td>{{ contact[4] }}</td>
  295.                                     <td>{{ contact[5] }}</td>
  296.                                     <td>{{ contact[6] }}</td>
  297.                                     <td>{{ contact[7]|raw }}</td>
  298.                                 </tr>
  299.                             {% endfor %}
  300.                         </tbody>
  301.                     </table>
  302.                 </div>
  303.                 <div class="tab-pane fade" id="list-contrats" role="tabpanel" aria-labelledby="list-contrats-list">
  304.                     <div class="row mb-3">
  305.                         <a type="button" href="{{path('app_entreprise_new_contrat', {'id': entreprise.id})}}" class="btn btn-success">Ajouter un contrat</a>
  306.                     </div>
  307.                     <table id="contrats" class="text-center table table-light table-bordered table-striped" style="width:100%">
  308.                         <thead>
  309.                             <tr class="bg-dark">
  310.                                 <th>Type</th>
  311.                                 <th>Durée (mois)</th>
  312.                                 <th>Valeur</th>
  313.                                 <th>PDL</th>
  314.                                 <th>CAR</th>
  315.                                 <th>Prix moyen</th>
  316.                                 <th>Fournisseur</th>
  317.                                 <th>Date de début</th>
  318.                                 <th>Date de fin</th>
  319.                                 <th>Date signature</th>
  320.                                 <th>Action</th>
  321.                             </tr>
  322.                         </thead>
  323.                         <tbody>
  324.                         {% for contrat in contrats %}
  325.                             <tr>
  326.                                 <td>
  327.                                     {% if contrat.pdl in electric_pdls|default([]) %}
  328.                                         Électricité
  329.                                     {% elseif contrat.pdl in gas_pdls|default([]) %}
  330.                                         Gaz
  331.                                     {% else %}
  332.                                         Non défini
  333.                                     {% endif %}
  334.                                 </td>
  335.                                 <td>{{ contrat.duree }}</td>
  336.                                 <td>{{ contrat.valeur }}</td>
  337.                                 <td>{{ contrat.pdl }}</td>
  338.                                 <td>{{ contrat.car }}</td>
  339.                                 <td>{{ contrat.prix_moyen }}</td>
  340.                                 <td>{{ contrat.fournisseur }}</td>
  341.                                 <td>{{ contrat.date_debut ? contrat.date_debut : 'N/A' }}</td>
  342.                                 <td>{{ contrat.date_fin ? contrat.date_fin : 'N/A' }}</td>
  343.                                 <td>{{ contrat.date_signature ? contrat.date_signature : 'N/A' }}</td>
  344.                                 <td>
  345.                                     <a href="{{ path('app_entreprise_edit_contrat', {'entrepriseId': entreprise.id, 'id': contrat.id}) }}" class="btn btn-sm btn-warning mb-1">Modifier</a>
  346.                                     <form method="post" action="{{ path('app_entreprise_delete_contrat', {'entrepriseId': entreprise.id, 'id': contrat.id}) }}" onsubmit="return confirmDelete(event);" style="display: inline-block;">
  347.                                         <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ contrat.id) }}">
  348.                                         <button type="submit" class="btn btn-sm btn-danger">Supprimer</button>
  349.                                     </form>
  350.                                 </td>
  351.                             </tr>
  352.                         {% endfor %}
  353.                         </tbody>
  354.                     </table>
  355.                 </div>
  356.             </div>
  357.         </div>
  358.     </div>
  359.     {{ include('_footer.html.twig') }}
  360. {% endblock %}
  362. {% block javascripts %}
  363.     <script>
  364.         // Back button handler
  365.         document.getElementById('backButton').addEventListener('click', function(e) {
  366.             e.preventDefault();
  367.             window.location.href = this.getAttribute('href');
  368.         });
  370.         function confirmDelete(event) {
  371.             event.preventDefault();
  372.             if (confirm('Êtes-vous sûr de vouloir supprimer ce contrat ?')) {
  373.                 event.target.submit();
  374.             }
  375.         }
  376.         
  377.         function formatPDLDetails(details, meterType) {
  378.             console.log('Formatting details:', details); // Debug log
  379.             let html = '<div class="pdl-details-compact">';
  380.             
  381.             // First row - PDL and dates
  382.             html += '<div class="pdl-details-row">';
  383.             if (details.PDL) {
  384.                 html += `
  385.                     <div class="pdl-detail-item">
  386.                         <i class="fas fa-fingerprint mr-2"></i>
  387.                         <span class="pdl-detail-label">PDL:</span>
  388.                         <span class="pdl-detail-value">${details.PDL}</span>
  389.                     </div>`;
  390.             }
  391.             /*if (details.dateDebut) {
  392.                 html += `
  393.                     <div class="pdl-detail-item">
  394.                         <i class="fas fa-calendar-alt mr-2"></i>
  395.                         <span class="pdl-detail-label">Date début:</span>
  396.                         <span class="pdl-detail-value">${details.dateDebut}</span>
  397.                     </div>`;
  398.             }
  399.             if (details.dateFin) {
  400.                 html += `
  401.                     <div class="pdl-detail-item">
  402.                         <i class="fas fa-calendar-check mr-2"></i>
  403.                         <span class="pdl-detail-label">Date fin:</span>
  404.                         <span class="pdl-detail-value">${details.dateFin}</span>
  405.                     </div>`;
  406.             }*/
  407.             html += '</div>';
  408.             
  409.             // Second row - Address and supplier
  410.             html += '<div class="pdl-details-row">';
  411.             if (details.adresseCompteur) {
  412.                 html += `
  413.                     <div class="pdl-detail-item">
  414.                         <i class="fas fa-map-marker-alt mr-2"></i>
  415.                         <span class="pdl-detail-label">Adresse:</span>
  416.                         <span class="pdl-detail-value">${details.adresseCompteur}</span>
  417.                     </div>`;
  418.             }
  419.             /*if (details.fournisseur) {
  420.                 html += `
  421.                     <div class="pdl-detail-item">
  422.                         <i class="fas fa-industry mr-2"></i>
  423.                         <span class="pdl-detail-label">Fournisseur:</span>
  424.                         <span class="pdl-detail-value">${details.fournisseur}</span>
  425.                     </div>`;
  426.             }*/
  427.             html += '</div>';
  428.             
  429.             // Third row - Technical details
  430.             html += '<div class="pdl-details-row">';
  431.             if (details.profil) {
  432.                 html += `
  433.                     <div class="pdl-detail-item">
  434.                         <i class="fas fa-chart-bar mr-2"></i>
  435.                         <span class="pdl-detail-label">Profil:</span>
  436.                         <span class="pdl-detail-value">${details.profil}</span>
  437.                     </div>`;
  438.             }
  439.             if (details.PS) {
  440.                 html += `
  441.                     <div class="pdl-detail-item">
  442.                         <i class="fas fa-bolt mr-2"></i>
  443.                         <span class="pdl-detail-label">PS:</span>
  444.                         <span class="pdl-detail-value">${details.PS}</span>
  445.                     </div>`;
  446.             }
  447.             if (details.CAR) {
  448.                 html += `
  449.                     <div class="pdl-detail-item">
  450.                         <i class="fas fa-chart-line mr-2"></i>
  451.                         <span class="pdl-detail-label">CAR:</span>
  452.                         <span class="pdl-detail-value">${details.CAR}</span>
  453.                     </div>`;
  454.             }
  455.             if (details.prix) {
  456.                 html += `
  457.                     <div class="pdl-detail-item">
  458.                         <i class="fas fa-euro-sign mr-2"></i>
  459.                         <span class="pdl-detail-label">Prix:</span>
  460.                         <span class="pdl-detail-value">${formatValue('prix', details.prix)}</span>
  461.                     </div>`;
  462.             }
  463.             html += '</div>';
  465.             // Add related contracts section
  466.             html += '<div class="contracts-section">';
  467.             html += '<h5>Contrats liés</h5>';
  468.             html += '<div class="related-contracts">';
  469.             html += '<table class="table">';
  470.             html += '<thead><tr>';
  471.             html += '<th>Date de début</th>';
  472.             html += '<th>Date de fin</th>';
  473.             html += '<th>Date signature</th>';
  474.             html += '<th>Fournisseur</th>';
  475.             html += '<th>Prix moyen</th>';
  476.             html += '</tr></thead>';
  477.             html += '<tbody>';
  478.             
  479.             // Filter contracts for this PDL
  480.             const relatedContracts = window.contrats.filter(c => c.pdl === details.PDL);
  481.             if (relatedContracts.length > 0) {
  482.                 relatedContracts.forEach(contract => {
  483.                     html += '<tr>';
  484.                     html += `<td>${contract.date_debut || ''}</td>`;
  485.                     html += `<td>${contract.date_fin || ''}</td>`;
  486.                     html += `<td>${contract.date_signature || ''}</td>`;
  487.                     html += `<td>${contract.fournisseur || ''}</td>`;
  488.                     html += `<td>${formatValue('prix', contract.prix_moyen)}</td>`;
  489.                     html += '</tr>';
  490.                 });
  491.             } else {
  492.                 html += '<tr><td colspan="5" class="text-center">Aucun contrat lié</td></tr>';
  493.             }
  494.             
  495.             html += '</tbody></table>';
  496.             html += '</div></div>';
  497.             
  498.             // Actions with meter type and ID
  499.             const meterId = meterType === 'gas' ? 
  500.                 $('#gas-pdl-select option:selected').data('id') : 
  501.                 $('#electric-pdl-select option:selected').data('id');
  503.             html += `
  504.                 <div class="pdl-actions">
  505.                     <a href="{{ path('app_entreprise_new_contrat', {'id': entreprise.id}) }}?meterId=${meterId}&meterType=${meterType}" class="btn btn-sm btn-success">Nouveau contrat</a>
  506.                     <button class="btn btn-sm btn-warning edit-pdl">Modifier</button>
  507.                     <button class="btn btn-sm btn-danger delete-pdl">Supprimer</button>`;
  508.             
  509.             // Add study generation buttons
  510.             if (meterType === 'electric') {
  511.                 const studyUrlC5 = "{{ path('app_electric_meter_generate_study', {'pdl': '__PDL__', 'type': 'C5'}) }}".replace('__PDL__', details.PDL);
  512.                 const studyUrlC4 = "{{ path('app_electric_meter_generate_study', {'pdl': '__PDL__', 'type': 'C4'}) }}".replace('__PDL__', details.PDL);
  513.                 
  514.                 html += `
  515.                     <a href="${studyUrlC5}" class="btn btn-sm btn-info">
  516.                         Générer étude C5
  517.                     </a>
  518.                     <a href="${studyUrlC4}" class="btn btn-sm btn-info">
  519.                         Générer étude C4/C3/C2
  520.                     </a>`;
  521.             } else if (meterType === 'gas') {
  522.                 const studyUrl = "{{ path('app_gas_meter_pre_etude_t2', {'pdl': '__PDL__'}) }}".replace('__PDL__', details.PDL);
  523.                 html += `
  524.                     <a href="${studyUrl}" class="btn btn-sm btn-info">
  525.                         Générer étude T2
  526.                     </a>`;
  527.             }
  528.             
  529.             html += `</div>`;
  530.             
  531.             html += '</div>';
  532.             return html;
  533.         }
  535.         function formatValue(key, value) {
  536.             if (key.toLowerCase().includes('prix') && !isNaN(value)) {
  537.                 return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value);
  538.             }
  539.             if (typeof value === 'boolean') {
  540.                 return value ? '<span class="text-success">Actif</span>' : '<span class="text-danger">Inactif</span>';
  541.             }
  542.             return value || '';
  543.         }
  545.         $(document).ready(function() {
  546.             // Store contracts data globally
  547.             window.contrats = {{ contrats|json_encode|raw }};
  549.             // Common DataTable configuration
  550.             const commonConfig = {
  551.                 "language": {
  552.                     "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
  553.                 },
  554.                 "pageLength": 10,
  555.                 "destroy": true
  556.             };
  558.             // Handle automatic PDL selection when tabs are clicked
  559.             $('#list-electric-meters-list').on('click', function() {
  560.                 const select = $('#electric-pdl-select');
  561.                 if (select.find('option').length === 2) { // 2 because there's always a default empty option
  562.                     select.val(select.find('option:last').val()).trigger('change');
  563.                 }
  564.             });
  566.             $('#list-gas-meters-list').on('click', function() {
  567.                 const select = $('#gas-pdl-select');
  568.                 if (select.find('option').length === 2) { // 2 because there's always a default empty option
  569.                     select.val(select.find('option:last').val()).trigger('change');
  570.                 }
  571.             });
  573.             // Initialize tables that have data in tbody
  574.             $('#contacts, #contrats').each(function() {
  575.                 if (!$.fn.DataTable.isDataTable(this)) {
  576.                     $(this).DataTable({
  577.                         ...commonConfig,
  578.                         "order": [[0, 'asc']]
  579.                     });
  580.                 }
  581.             });
  583.             // Initialize tables that need data from variables
  584.             const tableData = {
  585.                 rappels: {{ rappels|json_encode|raw }},
  586.                 cspes: {{ cspes|json_encode|raw }},
  587.                 espace_clients: {{ espace_clients|json_encode|raw }}
  588.             };
  590.             Object.entries(tableData).forEach(([tableId, data]) => {
  591.                 const table = $(`#${tableId}`);
  592.                 if (!$.fn.DataTable.isDataTable(table)) {
  593.                     table.DataTable({
  594.                         ...commonConfig,
  595.                         data: data
  596.                     });
  597.                 }
  598.             });
  600.             // Electric Meters PDL selection
  601.             $('#electric-pdl-select').change(function() {
  602.                 var pdl = $(this).val();
  603.                 if (!pdl) {
  604.                     $('#pdl-details').html('Sélectionnez un PDL pour voir les détails');
  605.                     return;
  606.                 }
  607.                 
  608.                 $.ajax({
  609.                     url: '{{ path('app_electric_meter_details', {'id': entreprise.id}) }}',
  610.                     method: 'GET',
  611.                     data: { pdl: pdl },
  612.                     success: function(response) {
  613.                         console.log('Electric meter response:', response);
  614.                         $('#pdl-details').html(formatPDLDetails(response, 'electric'));
  615.                         initializePDLActions('electric', $('#electric-pdl-select option:selected').data('id'));
  616.                     },
  617.                     error: function(xhr, status, error) {
  618.                         console.error('Error details:', {
  619.                             status: xhr.status,
  620.                             statusText: xhr.statusText,
  621.                             responseText: xhr.responseText
  622.                         });
  623.                         $('#pdl-details').html(`<div class="error-message">Erreur lors du chargement des détails: ${error}</div>`);
  624.                     }
  625.                 });
  626.             });
  628.             // Gas Meters PDL selection
  629.             $('#gas-pdl-select').change(function() {
  630.                 var pdl = $(this).val();
  631.                 if (!pdl) {
  632.                     $('#gas-pdl-details').html('Sélectionnez un PDL pour voir les détails');
  633.                     return;
  634.                 }
  635.                 
  636.                 $.ajax({
  637.                     url: '{{ path('app_gas_meter_details', {'id': entreprise.id}) }}',
  638.                     method: 'GET',
  639.                     data: { pdl: pdl },
  640.                     success: function(response) {
  641.                         console.log('Gas meter response:', response);
  642.                         $('#gas-pdl-details').html(formatPDLDetails(response, 'gas'));
  643.                         initializePDLActions('gas', $('#gas-pdl-select option:selected').data('id'));
  644.                     },
  645.                     error: function(xhr, status, error) {
  646.                         console.error('Error details:', {
  647.                             status: xhr.status,
  648.                             statusText: xhr.statusText,
  649.                             responseText: xhr.responseText
  650.                         });
  651.                         $('#gas-pdl-details').html(`<div class="error-message">Erreur lors du chargement des détails: ${error}</div>`);
  652.                     }
  653.                 });
  654.             });
  656.             function initializePDLActions(type, id) {
  657.                 // Handle edit PDL
  658.                 $('.edit-pdl').click(function() {
  659.                     var url = type === 'electric' 
  660.                         ? '{{ path('app_electric_meter_edit', {'id': 'METER_ID'}) }}'
  661.                         : '{{ path('app_gas_meter_edit', {'id': 'METER_ID'}) }}';
  662.                     url = url.replace('METER_ID', id);
  663.                     window.location.href = url;
  664.                 });
  666.                 // Handle delete PDL
  667.                 $('.delete-pdl').click(function() {
  668.                     if (confirm('Êtes-vous sûr de vouloir supprimer ce PDL ?')) {
  669.                         var url = type === 'electric' 
  670.                             ? '{{ path('app_electric_meter_suppr', {'id': 'METER_ID'}) }}'
  671.                             : '{{ path('app_gas_meter_suppr', {'id': 'METER_ID'}) }}';
  672.                         url = url.replace('METER_ID', id);
  673.                         
  674.                         $.ajax({
  675.                             url: url,
  676.                             method: 'POST',
  677.                             data: {
  678.                                 '_token': '{{ csrf_token('delete-meter') }}'
  679.                             },
  680.                             success: function() {
  681.                                 location.reload();
  682.                             },
  683.                             error: function(xhr, status, error) {
  684.                                 console.error('Error deleting meter:', error);
  685.                                 alert('Erreur lors de la suppression du compteur');
  686.                             }
  687.                         });
  688.                     }
  689.                 });
  690.             }
  691.         });
  692.     </script>
  693. {% endblock %}