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