templates/admin/recette.html.twig line 1

Open in your IDE?
  1. {% extends 'sidebar.twig' %}
  3. {% block title %}
  4.     IMMMY BEAUTY - Recettes
  5. {% endblock %}
  6. {% block stylesheets %}
  7.     <link rel="stylesheet" href="{{ asset('css/style.css') }}">
  8.     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  9.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  10. {% endblock %}
  12. {% block page_emoji %}
  13.     đź“‹â€Ť
  14. {% endblock %}
  16. {% block page_titre %}
  17.     Recettes
  18. {% endblock %}
  20. {% block page_info %}
  21.     GĂ©rez vos recettes ici.
  22. {% endblock %}
  25. {% block admin_content %}
  26.     <div class="container">
  27.         <div class="flex flex-wrap justify-center mb-4"> <!-- Ajouter une marge infĂ©rieure -->
  28.             <div id="dateDisplay" class="text-3xl text-center font-bold cursor-pointer color-black" onclick="openCalendar()">
  29.             </div>
  30.             <label for="uniqueHiddenDateInput"></label><input type="text" id="uniqueHiddenDateInput" class="hidden" />
  31.         </div>
  32.         <div class="flex flex-wrap">
  33.             <div class="w-full lg:w-1/2 p-4 bg-white rounded shadow">
  34.                 <h2 class="text-xl font-bold mb-4 text-center">Ajouter une recette</h2>
  35.                 <form id="recetteForm" class="space-y-4">
  36.                     {% set urlDate = app.request.query.get('date') %}
  37.                     <input type="hidden" id="dateInput" name="date" value="{{ urlDate ? urlDate : "now"|date('d/m/Y') }}">
  38.                     <div id="prestationsContainer">
  39.                         <div class="prestation-group mb-4 flex items-center space-x-4">
  40.                             <div class="flex-grow">
  41.                                 <label for="categorie_0" class="block text-gray-700">CatĂ©gorie <span style="color: red;">*</span></label>
  42.                                 <select name="prestations[0][categorie_id]" id="categorie_0" class="categorie-select mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  43.                                     <option value="">SĂ©lectionnez une catĂ©gorie</option>
  44.                                     {% for categorie in categories %}
  45.                                         <option value="{{ categorie.id }}">{{ categorie.nom }}</option>
  46.                                     {% endfor %}
  47.                                 </select>
  48.                             </div>
  49.                             <div class="hidden prestation-select-group mt-4 flex-grow">
  50.                                 <label for="prestation_0" class="block text-gray-700">Prestation <span style="color: red;">*</span></label>
  51.                                 <select name="prestations[0][prestation_id]" id="prestation_0" class="prestation-select mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  52.                                     <option value="">SĂ©lectionnez une prestation</option>
  53.                                 </select>
  54.                             </div>
  55.                             <button type="button" class="remove-prestation ml-2 text-red-500 hover:text-red-700 hidden">
  56.                                 <i class="fas fa-times"></i>
  57.                             </button>
  58.                         </div>
  59.                     </div>
  60.                     <a href="#" id="addPrestationLink" class="mt-4 text-black-500 hover:text-gray-600-700">
  61.                         <i class="fas fa-plus"></i> Ajouter une prestation
  62.                     </a>
  63.                     <div>
  64.                         <label for="nomClient" class="block text-gray-700">Nom de la cliente <span style="color: red;">*</span></label>
  65.                         <input type="text" id="nomClient" name="nom_client" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  66.                     </div>
  67.                     <div>
  68.                         <label for="acompte" class="block text-gray-700">Acompte</label>
  69.                         <input type="number" step="0.01" min="0" id="acompte" name="acompte" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
  70.                     </div>
  72.                     <div>
  73.                         <a href="#"
  74.                            id="discountLabel"
  75.                            class="mt-4 text-black-500 hover:text-gray-600-700"
  76.                            onclick="showDiscountInput()"
  77.                         >
  78.                             <i class="fas fa-percent"></i> RĂ©duction ?
  79.                         </a>
  80.                     </div>
  83.                     <div id="discountInputContainer" class="flex items-center space-x-4" style="display:none;">
  84.                         <label for="prixPayeSurPlace" class="block text-gray-700 flex-grow">Prix payĂ© sur place</label>
  85.                         <div class="flex items-center space-x-2 flex-grow">
  86.                             <input type="number" id="prixPayeSurPlace" step="0.01" min="0" name="prix_paye_sur_place" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
  87.                             <button type="button" id="removeDiscountInput" class="ml-2 text-red-500 hover:text-red-700">
  88.                                 <i class="fas fa-times"></i>
  89.                             </button>
  90.                         </div>
  91.                     </div>
  94.                     <div>
  95.                         <label for="typePaiement" class="block text-gray-700">Type de paiement <span style="color: red;">*</span></label>
  96.                         <select name="type_paiement_id" id="typePaiement" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  97.                             <option value="">SĂ©lectionnez un type de paiement</option>
  98.                             <option value="1">Espèce</option>
  99.                             <option value="2">Carte Bancaire</option>
  100.                             <option value="3">Espèce & Carte bancaire</option>
  101.                         </select>
  102.                     </div>
  104.                     <div id="paiementDetails" class="mt-4" style="display: none;">
  105.                         <div id="especeContainer" class="flex items-center space-x-4" style="display: none;">
  106.                             <div class="flex-grow">
  107.                                 <label for="montantEspece" class="block text-gray-700">Montant Espèce <span style="color: red;">*</span></label>
  108.                                 <input type="number" id="montantEspece" name="montant_espece" step="0.01" min="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  109.                             </div>
  110.                         </div>
  111.                         <div id="carteBancaireContainer" class="flex items-center space-x-4" style="display: none;">
  112.                             <div class="flex-grow">
  113.                                 <label for="montantCarteBancaire" class="block text-gray-700">Montant Carte Bancaire <span style="color: red;">*</span></label>
  114.                                 <input type="number" id="montantCarteBancaire" name="montant_carte_bancaire" step="0.01" min="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  115.                             </div>
  116.                         </div>
  117.                     </div>
  120.                     <div class="text-center">
  121.                         <button class="inline-flex items-center px-4 py-2 btn btn-primary rounded-lg shadow-md transition duration-300 ease-in-out">
  122.                             Ajouter
  123.                         </button>
  124.                     </div>
  125.                 </form>
  126.             </div>
  127.             <div class="w-full lg:w-1/2 p-4 bg-white rounded shadow" id="recettesContainer" style="{{ recettes ? 'display:block;' : 'display:none;' }}">
  128.                 <h2 class="text-xl font-bold mb-4 text-center">Recette du jour</h2>
  129.                 <div class="overflow-x-auto">
  130.                     <table class="min-w-full divide-y divide-gray-200" id="recettesTable">
  131.                         <thead class="bg-gray-50">
  132.                         <tr>
  133.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cliente</th>
  134.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prestation</th>
  135.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acompte</th>
  136.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">PayĂ©</th>
  137.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type de règlement</th>
  138.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
  139.                             <th></th>
  140.                         </tr>
  141.                         </thead>
  142.                         <tbody class="bg-white divide-y divide-gray-200">
  143.                         {% for recette in recettes %}
  144.                             <tr data-id="{{ recette.id }}">
  145.                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ recette.nomClient }}</td>
  146.                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  147.                                     <ul>
  148.                                         {% for prestation in recette.prestations %}
  149.                                             <li>{{ prestation.nom }} <strong>({{ prestation.prix}} â‚¬)</strong></li>
  150.                                         {% endfor %}
  151.                                     </ul>
  152.                                 </td>
  153.                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  154.                                     {% if recette.acompte %} {{ recette.acompte }} â‚¬ {% else %} - {% endif %}
  155.                                 </td>
  156.                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  157.                                     <ul>
  158.                                         {% for paiement in recette.paiements %}
  159.                                             <li>{% if paiement.sommePayee %} {{ paiement.sommePayee }} â‚¬ {% else %} - {% endif %}</li>
  160.                                         {% endfor %}
  161.                                     </ul>
  162.                                 </td>
  163.                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  164.                                     <ul>
  165.                                         {% for paiement in recette.paiements %}
  166.                                             <li>{{ paiement.typePaiement.nom }}</li>
  167.                                         {% endfor %}
  168.                                     </ul>
  169.                                 </td>
  170.                                 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
  171.                                     {% set totalPaye = 0 %}
  172.                                     {% if recette.acompte %}
  173.                                         {% set totalPaye = totalPaye + recette.acompte %}
  174.                                     {% endif %}
  175.                                     {% for paiement in recette.paiements %}
  176.                                         {% if paiement.sommePayee %}
  177.                                             {% set totalPaye = totalPaye + paiement.sommePayee %}
  178.                                         {% endif %}
  179.                                     {% endfor %}
  180.                                     {{ totalPaye }} â‚¬
  181.                                 </td>
  182.                                 <td>
  183.                                     <button
  184.                                             class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none rounded-lg
  185.                          bg-gray-900 text-center align-middle font-sans text-xs font-medium uppercase
  186.                           text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg
  187.                            hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none
  188.                             active:opacity-[0.85] active:shadow-none disabled:pointer-events-none
  189.                              disabled:opacity-50 disabled:shadow-none"
  190.                                             type="button"
  191.                                             data-ripple-light="true"
  192.                                             data-modal-target="deleteModal"
  193.                                             data-modal-toggle="deleteModal"
  194.                                             onclick="showDeleteModal({{ recette.id }})"
  195.                                     >
  196.                 <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
  197.                     <i class="fas fa-trash" aria-hidden="true"></i>
  198.                 </span>
  199.                                     </button>
  200.                                 </td>
  201.                             </tr>
  202.                         {% endfor %}
  203.                         </tbody>
  204.                     </table>
  205.                 </div>
  206.                 <div class="overflow-x-auto mt-8">
  207.                     <table class="min-w-full divide-y divide-gray-200">
  208.                         <thead class="bg-gray-50">
  209.                         <tr>
  210.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Espece</th>
  211.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Carte Bancaire</th>
  212.                             <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Planity</th>
  213.                         </tr>
  214.                         </thead>
  215.                         <tbody class="bg-white divide-y divide-gray-200">
  216.                         <tr>
  217.                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" id="totalEspece">{{ totalEspece }} â‚¬</td>
  218.                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" id="totalCarteBancaire">{{ totalCarteBancaire }} â‚¬</td>
  219.                             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" id="totalAcompte">{{ totalAcompte }} â‚¬</td>
  220.                         </tr>
  221.                         </tbody>
  222.                     </table>
  223.                 </div>
  224.                 <div class="px-6 py-4 bg-gray-50 sm:px-6">
  225.                     <div class="flex items-center justify-between">
  226.                         <dl class="flex items-baseline">
  227.                             <dt class="sr-only">Total</dt>
  228.                             <dd class="text-lg font-bold text-gray-900" id="totalJour">Total : {{ totalJour }} â‚¬</dd>
  229.                         </dl>
  230.                         <button id="sendRecette"
  231.                                 class="inline-flex items-center px-4 py-2 btn btn-primary rounded-lg shadow-md transition duration-300 ease-in-out text-sm sm:text-base">
  232.                             <svg class="w-6 h-6 mr-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  233.                                 <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.562 8.131l-1.844 8.688c-.137.646-.518.816-1.05.508l-2.904-2.14-1.402 1.35c-.156.156-.285.285-.588.285l.209-2.963 5.396-4.875c.234-.205-.052-.32-.363-.115l-6.674 4.201-2.877-.9c-.625-.195-.637-.624.131-.924l11.223-4.328c.521-.193.974.121.742 1.213z"/>
  234.                             </svg>
  235.                             Envoyer la recette
  236.                         </button>
  237.                     </div>
  238.                 </div>
  239.             </div>
  242.             <div id="deleteModal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed inset-0 z-50 w-full h-full flex justify-center items-center">
  243.                 <div class="relative p-4 w-full max-w-md mx-auto">
  244.                     <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
  245.                         <button type="button" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="deleteModal">
  246.                             <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
  247.                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
  248.                             </svg>
  249.                             <span class="sr-only">Fermer</span>
  250.                         </button>
  251.                         <div class="p-4 md:p-5 text-center">
  252.                             <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
  253.                                 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
  254.                             </svg>
  255.                             <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">ĂŠtes-vous sĂ»r de vouloir supprimer cette prestation ?</h3>
  256.                             <button id="confirmDelete" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
  257.                                 Oui, je suis sĂ»r
  258.                             </button>
  259.                             <button data-modal-hide="deleteModal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Non, annuler</button>
  260.                         </div>
  261.                     </div>
  262.                 </div>
  263.             </div>
  264.     </div>
  265. {% endblock %}
  268. {% block javascripts %}
  269.     {{ parent() }}
  270.     <script src="https://unpkg.com/@material-tailwind/html@latest/scripts/ripple.js"></script>
  271.     <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
  272.     <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  273.     <script>
  274.         document.addEventListener('DOMContentLoaded', function () {
  275.             initDatePicker();
  276.             initCategorieSelect();
  277.             initRecetteForm();
  278.             document.getElementById('addPrestationLink').addEventListener('click', addPrestation);
  279.             document.getElementById('removeDiscountInput').addEventListener('click', removeDiscountInput);
  280.             document.getElementById('typePaiement').addEventListener('change', handleTypePaiementChange);
  281.         });
  283.         function handleTypePaiementChange() {
  284.             const typePaiement = this.value;
  285.             const montantEspece = document.getElementById('montantEspece');
  286.             const montantCarteBancaire = document.getElementById('montantCarteBancaire');
  287.             const paiementDetails = document.getElementById('paiementDetails');
  288.             const especeContainer = document.getElementById('especeContainer');
  289.             const carteBancaireContainer = document.getElementById('carteBancaireContainer');
  291.             if (typePaiement === '3') {
  292.                 paiementDetails.style.display = 'block';
  293.                 especeContainer.style.display = 'flex';
  294.                 carteBancaireContainer.style.display = 'flex';
  295.                 montantEspece.required = true;
  296.                 montantCarteBancaire.required = true;
  297.             } else {
  298.                 paiementDetails.style.display = 'none';
  299.                 especeContainer.style.display = 'none';
  300.                 carteBancaireContainer.style.display = 'none';
  301.                 montantEspece.required = false;
  302.                 montantCarteBancaire.required = false;
  303.                 montantEspece.value = ''; // RĂ©initialiser la valeur
  304.                 montantCarteBancaire.value = ''; // RĂ©initialiser la valeur
  305.             }
  306.         }
  308.         let prestationIndex = 1;
  310.         function addPrestation(event) {
  311.             event.preventDefault();
  312.             const prestationsContainer = document.getElementById('prestationsContainer');
  313.             const newPrestationGroup = document.createElement('div');
  314.             newPrestationGroup.classList.add('prestation-group', 'mb-4', 'flex', 'items-center');
  315.             newPrestationGroup.innerHTML = `
  316.                 <div class="flex-grow">
  317.                     <label for="categorie_${prestationIndex}" class="block text-gray-700">CatĂ©gorie <span style="color: red;">*</span></label>
  318.                     <select name="prestations[${prestationIndex}][categorie_id]" id="categorie_${prestationIndex}" class="categorie-select mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  319.                         <option value="">SĂ©lectionnez une catĂ©gorie</option>
  320.                         {% for categorie in categories %}
  321.                             <option value="{{ categorie.id }}">{{ categorie.nom }}</option>
  322.                         {% endfor %}
  323.                     </select>
  324.                 </div>
  325.                 <div class="hidden prestation-select-group mt-4 flex-grow">
  326.                     <label for="prestation_${prestationIndex}" class="block text-gray-700">Prestation <span style="color: red;">*</span></label>
  327.                     <select name="prestations[${prestationIndex}][prestation_id]" id="prestation_${prestationIndex}" class="prestation-select mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required>
  328.                         <option value="">SĂ©lectionnez une prestation</option>
  329.                     </select>
  330.                 </div>
  331.                 <button type="button" class="remove-prestation ml-2 text-red-500 hover:text-red-700">
  332.                     <i class="fas fa-times"></i>
  333.                 </button>
  334.             `;
  335.             prestationsContainer.appendChild(newPrestationGroup);
  336.             prestationIndex++;
  337.             initCategorieSelect();
  338.             initRemovePrestation();
  339.         }
  341.         document.getElementById('sendRecette').addEventListener('click', function() {
  342.             const sendButton = document.getElementById('sendRecette');
  343.             sendButton.disabled = true;
  345.             fetch('/admin/recette/send', {
  346.                 method: 'POST',
  347.                 headers: {
  348.                     'Content-Type': 'application/json',
  349.                 },
  350.                 body: JSON.stringify({
  351.                     date: document.getElementById('dateInput').value
  352.                 })
  353.             })
  354.                 .then(response => response.json())
  355.                 .then(data => {
  356.                     if (data.status === 'Message envoyĂ©') {
  357.                         toastr.success('La recette a bien Ă©tĂ© envoyĂ©e', 'Succès');
  358.                     } else {
  359.                         toastr.error('Erreur lors de l\'envoi de la recette', 'Erreur');
  360.                     }
  361.                 })
  362.                 .catch(error => {
  363.                     console.error('Erreur:', error);
  364.                     toastr.error('Erreur lors de l\'envoi de la recette', 'Erreur');
  365.                 })
  366.                 .finally(() => {
  367.                     sendButton.disabled = false;
  368.                 });
  369.         });
  372.         let recetteIdToDelete;
  374.         function showDeleteModal(id) {
  375.             recetteIdToDelete = id;
  376.             const modal = document.getElementById('deleteModal');
  377.             modal.classList.remove('hidden');
  378.             modal.classList.add('flex');
  379.         }
  381.         function hideDeleteModal() {
  382.             const modal = document.getElementById('deleteModal');
  383.             modal.classList.add('hidden');
  384.             modal.classList.remove('flex');
  385.         }
  387.         function deleteRecette() {
  388.             fetch(`/admin/delete/recette/${recetteIdToDelete}`, {
  389.                 method: 'DELETE'
  390.             }).then(response => {
  391.                 console.log('RĂ©ponse brute:', response);
  392.                 return response.text();
  393.             }).then(text => {
  394.                 console.log('Texte de la rĂ©ponse:', text);
  395.                 return JSON.parse(text);
  396.             }).then(data => {
  397.                 if (data.status === 'success') {
  398.                     const row = document.querySelector(`tr[data-id="${recetteIdToDelete}"]`);
  399.                     if (row) row.remove();
  400.                     hideDeleteModal();
  401.                     updateTotals(data.totals);
  402.                     checkTableEmpty();
  403.                 } else {
  404.                     throw new Error(data.error || 'Erreur inconnue');
  405.                 }
  406.             }).catch(error => {
  407.                 console.error('Erreur:', error);
  408.                 alert('Une erreur est survenue lors de la suppression');
  409.             });
  410.         }
  415.         document.addEventListener('DOMContentLoaded', function() {
  416.             document.getElementById('confirmDelete').addEventListener('click', deleteRecette);
  417.             document.querySelectorAll('[data-modal-hide="deleteModal"]').forEach(button => {
  418.                 button.addEventListener('click', hideDeleteModal);
  419.             });
  420.         });
  423.         document.addEventListener('DOMContentLoaded', function() {
  424.             document.getElementById('confirmDelete').addEventListener('click', deleteRecette);
  425.         });
  427.         function updateTotals(totals) {
  428.             document.getElementById('totalJour').textContent = `Total : ${totals.totalJour} â‚¬`;
  429.             document.getElementById('totalEspece').textContent = `${totals.totalEspece} â‚¬`;
  430.             document.getElementById('totalCarteBancaire').textContent = `${totals.totalCarteBancaire} â‚¬`;
  431.             document.getElementById('totalAcompte').textContent = `${totals.totalAcompte} â‚¬`;
  432.         }
  434.         function checkTableEmpty() {
  435.             const table = document.getElementById('recettesTable').getElementsByTagName('tbody')[0];
  436.             if (table.rows.length === 0) {
  437.                 document.getElementById('recettesContainer').style.display = 'none';
  438.             }
  439.         }
  442.         function initCategorieSelect() {
  443.             document.querySelectorAll('.categorie-select').forEach(select => {
  444.                 select.addEventListener('change', function () {
  445.                     const selectedCategoryId = parseInt(this.value);
  446.                     const prestationSelectGroup = this.closest('.prestation-group').querySelector('.prestation-select-group');
  447.                     const prestationSelect = prestationSelectGroup.querySelector('.prestation-select');
  449.                     prestationSelect.innerHTML = '<option value="">SĂ©lectionnez une prestation</option>';
  451.                     fetch(`/admin/prestations/${selectedCategoryId}`)
  452.                         .then(response => response.json())
  453.                         .then(data => {
  454.                             if (data.length > 0) {
  455.                                 prestationSelectGroup.classList.remove('hidden');
  456.                                 data.forEach(prestation => {
  457.                                     const option = document.createElement('option');
  458.                                     option.value = prestation.id;
  459.                                     option.textContent = `${prestation.nom} (${prestation.prix}€)`;
  460.                                     prestationSelect.appendChild(option);
  461.                                 });
  462.                             } else {
  463.                                 prestationSelectGroup.classList.add('hidden');
  464.                             }
  465.                         })
  466.                         .catch(error => console.error('Erreur lors de la rĂ©cupĂ©ration des prestations:', error));
  467.                 });
  468.             });
  469.         }
  471.         function initRemovePrestation() {
  472.             document.querySelectorAll('.remove-prestation').forEach(button => {
  473.                 button.addEventListener('click', function () {
  474.                     this.closest('.prestation-group').remove();
  475.                 });
  476.             });
  477.         }
  479.         function removeDiscountInput() {
  480.             document.getElementById('discountInputContainer').style.display = 'none';
  481.         }
  482.         function initRemovePaiement() {
  483.             document.querySelectorAll('.remove-paiement').forEach(button => {
  484.                 button.addEventListener('click', function () {
  485.                     this.closest('.paiement-group').remove();
  486.                 });
  487.             });
  488.         }
  490.         function initRecetteForm() {
  491.             document.getElementById('recetteForm').addEventListener('submit', function(event) {
  492.                 event.preventDefault();
  494.                 const formData = new FormData(this);
  495.                 const nomClient = formData.get('nom_client');
  496.                 const acompte = parseFloat(formData.get('acompte'));
  497.                 const prixPayeSurPlace = parseFloat(formData.get('prix_paye_sur_place'));
  498.                 const date = formData.get('date');
  500.                 const prestations = [];
  501.                 document.querySelectorAll('.prestation-group').forEach((group, index) => {
  502.                     const categorieId = group.querySelector('.categorie-select').value;
  503.                     const prestationId = group.querySelector('.prestation-select').value;
  504.                     prestations.push({ categorie_id: categorieId, prestation_id: prestationId });
  505.                 });
  507.                 const typePaiementId = formData.get('type_paiement_id');
  508.                 const resteAPayer = parseFloat(formData.get('reste_a_payer'));
  509.                 const montantEspece = parseFloat(formData.get('montant_espece'));
  510.                 const montantCarteBancaire = parseFloat(formData.get('montant_carte_bancaire'));
  512.                 const data = {
  513.                     nomClient: nomClient,
  514.                     date: date,
  515.                     prestations: prestations,
  516.                     typePaiementId: typePaiementId,
  517.                 };
  519.                 if (acompte) {
  520.                     data.acompte = acompte;
  521.                 }
  523.                 if (prixPayeSurPlace) {
  524.                     data.prixPayeSurPlace = prixPayeSurPlace;
  525.                 }
  527.                 if (resteAPayer) {
  528.                     data.resteAPayer = resteAPayer;
  529.                     data.sommePayee = resteAPayer;
  530.                 }
  532.                 if (typePaiementId === '3') {
  533.                     if (!montantEspece && !montantCarteBancaire) {
  534.                         toastr.error('Veuillez renseigner les montants pour les paiements en espèce et carte bancaire', 'Erreur');
  535.                         return;
  536.                     }
  538.                     if (resteAPayer && montantEspece + montantCarteBancaire !== resteAPayer) {
  539.                         toastr.error('La somme des montants des paiements en espèce et carte bancaire doit ĂŞtre Ă©gale au montant payĂ© sur place', 'Erreur');
  540.                         return;
  541.                     }
  543.                     data.montantEspece = montantEspece || 0;
  544.                     data.montantCarteBancaire = montantCarteBancaire || 0;
  545.                     data.sommePayee = (montantEspece || 0) + (montantCarteBancaire || 0) + (acompte || 0);
  546.                 }
  548.                 fetch('/admin/recette/ajax', {
  549.                     method: 'POST',
  550.                     headers: {
  551.                         'Content-Type': 'application/json',
  552.                     },
  553.                     body: JSON.stringify(data)
  554.                 })
  555.                     .then(response => response.json())
  556.                     .then(data => {
  557.                         if (data.status === 'success') {
  558.                             updateTable(data.recette, data.totals);
  559.                         } else {
  560.                             console.error('Erreur: ', data.message);
  561.                         }
  562.                     })
  563.                     .catch(error => console.error('Erreur:', error));
  564.             });
  565.         }
  567.         function updateTable(recette, totals) {
  568.             const table = document.getElementById('recettesTable').getElementsByTagName('tbody')[0];
  569.             const newRow = table.insertRow(table.rows.length);
  570.             newRow.setAttribute('data-id', recette.id);
  571.             newRow.innerHTML = `
  572.         <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${recette.nomClient}</td>
  573.         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  574.             <ul>
  575.                 ${recette.prestations.map(prestation => `<li>${prestation.nom}</li>`).join('')}
  576.             </ul>
  577.         </td>
  578.         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${recette.acompte ? recette.acompte + ' â‚¬' : '-'}</td>
  579.         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  580.             <ul>
  581.                 ${recette.paiements.map(paiement => `<li>${paiement.sommePayee ? paiement.sommePayee + ' â‚¬' : '-'}</li>`).join('')}
  582.             </ul>
  583.         </td>
  584.         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
  585.             <ul>
  586.                 ${recette.paiements.map(paiement => `<li>${paiement.typePaiement.nom}</li>`).join('')}
  587.             </ul>
  588.         </td>
  589.         <td>
  590.             <button
  591.                 class="relative h-10 max-h-[40px] w-10 max-w-[40px] select-none
  592.                 rounded-lg bg-gray-900 text-center align-middle font-sans text-xs font-medium
  593.                 uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg
  594.                 hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none
  595.                 active:opacity-[0.85] active:shadow-none disabled:pointer-events-none
  596.                 disabled:opacity-50 disabled:shadow-none"
  597.                 type="button"
  598.                 data-ripple-light="true"
  599.                 data-modal-target="deleteModal"
  600.                 data-modal-toggle="deleteModal"
  601.                 onclick="showDeleteModal(${recette.id})"
  602.             >
  603.                 <span class="absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2">
  604.                     <i class="fas fa-trash" aria-hidden="true"></i>
  605.                 </span>
  606.             </button>
  607.         </td>`;
  609.             document.getElementById('totalJour').textContent = `Total : ${totals.totalJour} â‚¬`;
  610.             document.getElementById('totalEspece').textContent = `${totals.totalEspece} â‚¬`;
  611.             document.getElementById('totalCarteBancaire').textContent = `${totals.totalCarteBancaire} â‚¬`;
  612.             document.getElementById('totalAcompte').textContent = `${totals.totalAcompte} â‚¬`;
  613.             document.getElementById('recettesContainer').style.display = 'block';
  614.         }
  616.         function showDiscountInput() {
  617.             var discountInputContainer = document.getElementById('discountInputContainer');
  618.             discountInputContainer.style.display = 'block';
  619.         }
  621.         function initDatePicker() {
  622.             const urlDate = new URLSearchParams(window.location.search).get('date');
  623.             const parsedDate = urlDate ? flatpickr.parseDate(urlDate, "d/m/Y") : new Date();
  625.             const fp = flatpickr("#dateDisplay", {
  626.                 enableTime: false,
  627.                 dateFormat: "d/m/Y",
  628.                 defaultDate: parsedDate,
  629.                 locale: {
  630.                     firstDayOfWeek: 1,
  631.                     weekdays: {
  632.                         shorthand: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
  633.                         longhand: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  634.                     },
  635.                     months: {
  636.                         shorthand: ['Jan', 'FĂ©v', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'AoĂ»', 'Sep', 'Oct', 'Nov', 'DĂ©c'],
  637.                         longhand: ['Janvier', 'FĂ©vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'AoĂ»t', 'Septembre', 'Octobre', 'Novembre', 'DĂ©cembre'],
  638.                     },
  639.                 },
  640.                 onClose: function(selectedDates, dateStr, instance) {
  641.                     window.location.href = `${window.location.pathname}?date=${dateStr}`;
  642.                 },
  643.                 disableMobile: true // DĂ©sactive l'interface mobile de Flatpickr
  644.             });
  646.             const months = ['Janvier', 'FĂ©vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'AoĂ»t', 'Septembre', 'Octobre', 'Novembre', 'DĂ©cembre'];
  647.             const day = parsedDate.getDate();
  648.             const month = months[parsedDate.getMonth()];
  649.             const year = parsedDate.getFullYear();
  650.             document.getElementById('dateDisplay').innerText = `${day} ${month} ${year}`;
  651.         }
  654.         function openCalendar() {
  655.             document.querySelector('#dateDisplay').click(); // Correction : Utilisez l'ID unique pour ouvrir le calendrier
  656.         }
  658.         function initClientAutocomplete() {
  659.             const nomClientInput = document.getElementById('nomClient');
  660.             let timeoutId;
  662.             nomClientInput.addEventListener('input', function(e) {
  663.                 clearTimeout(timeoutId);
  664.                 const searchValue = e.target.value;
  666.                 timeoutId = setTimeout(() => {
  667.                     if (searchValue.length >= 1) {
  668.                         fetch(`/admin/search-clients-planity?q=${encodeURIComponent(searchValue)}`)
  669.                             .then(response => response.json())
  670.                             .then(data => {
  671.                                 showSuggestions(data.hits || []);
  672.                             })
  673.                             .catch(error => console.error('Erreur:', error));
  674.                     } else {
  675.                         hideSuggestions();
  676.                     }
  677.                 }, 300);
  678.             });
  679.             // CrĂ©er et ajouter le conteneur de suggestions
  680.             const suggestionsContainer = document.createElement('div');
  681.             suggestionsContainer.id = 'clientSuggestions';
  682.             suggestionsContainer.className = 'absolute z-10 w-full bg-white border border-gray-300 rounded-md shadow-lg hidden';
  683.             nomClientInput.parentNode.style.position = 'relative';
  684.             nomClientInput.parentNode.appendChild(suggestionsContainer);
  686.             function showSuggestions(suggestions) {
  687.                 const container = document.getElementById('clientSuggestions');
  688.                 container.innerHTML = '';
  690.                 if (suggestions.length > 0) {
  691.                     suggestions.forEach(suggestion => {
  692.                         const div = document.createElement('div');
  693.                         div.className = 'p-2 hover:bg-gray-100 cursor-pointer';
  694.                         div.textContent = suggestion.name;
  695.                         div.onclick = () => {
  696.                             nomClientInput.value = suggestion.name;
  697.                             hideSuggestions();
  698.                         };
  699.                         container.appendChild(div);
  700.                     });
  701.                     container.classList.remove('hidden');
  702.                 } else {
  703.                     hideSuggestions();
  704.                 }
  705.             }
  707.             function hideSuggestions() {
  708.                 const container = document.getElementById('clientSuggestions');
  709.                 container.classList.add('hidden');
  710.             }
  712.             // Cacher les suggestions quand on clique ailleurs
  713.             document.addEventListener('click', function(e) {
  714.                 if (!nomClientInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
  715.                     hideSuggestions();
  716.                 }
  717.             });
  718.         }
  720.         // Ajouter l'appel Ă  initClientAutocomplete dans le DOMContentLoaded
  721.         document.addEventListener('DOMContentLoaded', function() {
  722.             // ... autres initialisations ...
  723.             initClientAutocomplete();
  724.         });
  726.     </script>
  727. {% endblock %}