templates/basee.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta content="width=device-width, initial-scale=1.0" name="viewport">
  8.     <title>
  9.         Gestion Stock -TuferGroupe-
  10.         {% block title %}{% endblock %}
  11.     </title>
  12.     <meta content="" name="description">
  13.     <meta content="" name="keywords">
  15.     <link href={{asset ('assets/img/ls.png')}} rel="icon">
  16.     <link href={{asset ('assets/img/ls.png')}} rel="apple-touch-icon">
  18.     <link href="https://fonts.gstatic.com" rel="preconnect">
  19.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  21.     <link href={{asset ("assets/vendor/bootstrap/css/bootstrap.min.css")}} rel="stylesheet">
  22.     <link href={{asset ("assets/vendor/bootstrap-icons/bootstrap-icons.css")}} rel="stylesheet">
  23.     <link href={{asset ("assets/vendor/boxicons/css/boxicons.min.css")}} rel="stylesheet">
  24.     <link href={{asset ("assets/vendor/quill/quill.snow.css")}} rel="stylesheet">
  25.     <link href={{asset ("assets/vendor/quill/quill.bubble.css")}} rel="stylesheet">
  26.     <link href={{asset ("assets/vendor/remixicon/remixicon.css")}} rel="stylesheet">
  27.     <link href={{asset ("assets/vendor/simple-datatables/style.css")}} rel="stylesheet">
  29.     <link href={{asset ("assets/css/style.css")}} rel="stylesheet">
  30.     {% block stylesheets %}{% endblock %}
  31.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  33.     <style>
  34.         /* Styles pour la recherche et responsive */
  35.         .search-container {
  36.             position: relative;
  37.             width: 100%;
  38.             max-width: 500px;
  39.         }
  41.         .form-control.is-invalid:focus {
  42.             border-color: #dc3545;
  43.             box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  44.         }
  46.         #search-error-message {
  47.             color: #dc3545;
  48.             font-size: 0.875em;
  49.             margin-top: 5px;
  50.             animation: fadeIn 0.3s ease-in;
  51.         }
  53.         @keyframes fadeIn {
  54.             from {
  55.                 opacity: 0;
  56.                 transform: translateY(-10px);
  57.             }
  58.             to {
  59.                 opacity: 1;
  60.                 transform: translateY(0);
  61.             }
  62.         }
  64.         .autocomplete-results {
  65.             position: absolute;
  66.             z-index: 1050;
  67.             width: 100%;
  68.             max-height: 300px;
  69.             overflow-y: auto;
  70.             background-color: white;
  71.             border: 1px solid #ced4da;
  72.             border-radius: 0 0 0.375rem 0.375rem;
  73.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  74.             display: none;
  75.             top: 100%;
  76.             left: 0;
  77.             margin-top: -1px;
  78.         }
  80.         .autocomplete-item {
  81.             padding: 0.75rem 1rem;
  82.             cursor: pointer;
  83.             border-bottom: 1px solid #f0f0f0;
  84.             display: flex;
  85.             align-items: center;
  86.             transition: background-color 0.15s ease-in-out;
  87.         }
  89.         .autocomplete-item:last-child {
  90.             border-bottom: none;
  91.         }
  93.         .autocomplete-item:hover {
  94.             background-color: #f8f9fa;
  95.         }
  97.         .autocomplete-item i {
  98.             color: #6c757d;
  99.             width: 18px;
  100.             text-align: center;
  101.             margin-right: 10px;
  102.         }
  104.         #advancedSearchMenu {
  105.             width: 320px !important;
  106.             padding: 1.25rem;
  107.             border-radius: 0.5rem;
  108.             border: none;
  109.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  110.         }
  112.         #searchForm {
  113.             position: relative;
  114.             flex: 1;
  115.             max-width: 500px;
  116.         }
  118.         #activeFilters {
  119.             margin-top: 0.5rem;
  120.             font-size: 0.85rem;
  121.             color: #6c757d;
  122.             padding: 0.375rem 0.75rem;
  123.             background-color: #f8f9fa;
  124.             border-radius: 0.375rem;
  125.             display: inline-block;
  126.             border: 1px solid #e9ecef;
  127.         }
  129.         .filter-tag {
  130.             display: inline-block;
  131.             padding: 0.25rem 0.5rem;
  132.             margin-right: 0.25rem;
  133.             background-color: #e9ecef;
  134.             border-radius: 1rem;
  135.             font-size: 0.8rem;
  136.             color: #495057;
  137.         }
  139.         .filter-tag i {
  140.             margin-left: 0.25rem;
  141.             cursor: pointer;
  142.             color: #6c757d;
  143.         }
  145.         .filter-tag i:hover {
  146.             color: #dc3545;
  147.         }
  149.         /* Header responsif */
  150.         .header {
  151.             padding: 0.75rem 1rem;
  152.         }
  154.         .header .logo img {
  155.             height: 40px;
  156.             width: auto;
  157.         }
  159.         .header-nav {
  160.             align-items: center;
  161.         }
  163.         /* Sidebar responsive */
  164.         .sidebar {
  165.             transition: all 0.3s ease;
  166.         }
  168.         .nav-item .nav-link {
  169.             padding: 0.75rem 1rem;
  170.             border-radius: 0.375rem;
  171.             margin: 0.125rem 0;
  172.             transition: all 0.15s ease-in-out;
  173.         }
  175.         .nav-item .nav-link:hover {
  176.             background-color: rgba(13, 110, 253, 0.1);
  177.             color: #0d6efd;
  178.         }
  180.         .nav-item .nav-link.active {
  181.             background-color: #0d6efd;
  182.             color: white;
  183.         }
  185.         /* Panier badge */
  186.         .badge-number {
  187.             position: absolute;
  188.             top: -8px;
  189.             right: -8px;
  190.             min-width: 18px;
  191.             height: 18px;
  192.             border-radius: 50%;
  193.             font-size: 0.75rem;
  194.             display: flex;
  195.             align-items: center;
  196.             justify-content: center;
  197.         }
  199.         /* Avatar responsive */
  200.         .avatar {
  201.             width: 38px;
  202.             height: 38px;
  203.             border-radius: 50%;
  204.             display: flex;
  205.             align-items: center;
  206.             justify-content: center;
  207.             font-weight: 600;
  208.             font-size: 0.9rem;
  209.         }
  211.         /* Responsive adjustments */
  212.         @media (max-width: 992px) {
  213.             .search-container {
  214.                 max-width: 100%;
  215.             }
  216.             
  217.             #advancedSearchMenu {
  218.                 width: 280px !important;
  219.                 padding: 1rem;
  220.             }
  221.             
  222.             .header .logo img {
  223.                 height: 35px;
  224.             }
  225.             
  226.             .avatar {
  227.                 width: 34px;
  228.                 height: 34px;
  229.                 font-size: 0.8rem;
  230.             }
  231.         }
  233.         @media (max-width: 768px) {
  234.             .header {
  235.                 padding: 0.5rem 0.75rem;
  236.             }
  237.             
  238.             .search-container {
  239.                 margin: 0.5rem 0;
  240.             }
  241.             
  242.             #advancedSearchMenu {
  243.                 width: 100% !important;
  244.                 max-width: 300px;
  245.                 left: 0 !important;
  246.                 right: 0 !important;
  247.                 margin: 0 auto;
  248.             }
  249.             
  250.             .header-nav ul {
  251.                 gap: 0.5rem;
  252.             }
  253.             
  254.             .nav-item .nav-link {
  255.                 padding: 0.5rem;
  256.             }
  257.         }
  259.         @media (max-width: 576px) {
  260.             .header .logo img {
  261.                 height: 30px;
  262.             }
  263.             
  264.             .avatar {
  265.                 width: 30px;
  266.                 height: 30px;
  267.                 font-size: 0.75rem;
  268.             }
  269.             
  270.             .search-container .input-group .form-control {
  271.                 font-size: 0.9rem;
  272.             }
  273.             
  274.             .autocomplete-item {
  275.                 padding: 0.5rem 0.75rem;
  276.                 font-size: 0.9rem;
  277.             }
  278.         }
  280.         /* Animation pour la sidebar sur mobile */
  281.         @media (max-width: 1199px) {
  282.             .sidebar {
  283.                 left: -300px;
  284.             }
  285.             
  286.             .sidebar.open {
  287.                 left: 0;
  288.             }
  289.             
  290.             .main {
  291.                 margin-left: 0;
  292.             }
  293.         }
  295.         /* Amélioration du dropdown menu */
  296.         .dropdown-menu {
  297.             border: none;
  298.             box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  299.             border-radius: 0.5rem;
  300.         }
  302.         .dropdown-item {
  303.             padding: 0.5rem 1rem;
  304.             transition: all 0.15s ease-in-out;
  305.         }
  307.         .dropdown-item:hover {
  308.             background-color: #f8f9fa;
  309.             color: #0d6efd;
  310.         }
  312.         /* Style pour les formulaires dans le menu avancé */
  313.         #advancedSearchMenu .form-label {
  314.             font-weight: 600;
  315.             color: #495057;
  316.             margin-bottom: 0.5rem;
  317.         }
  319.         #advancedSearchMenu .form-select,
  320.         #advancedSearchMenu .form-control {
  321.             border-radius: 0.375rem;
  322.             border: 1px solid #ced4da;
  323.             transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  324.         }
  326.         #advancedSearchMenu .form-select:focus,
  327.         #advancedSearchMenu .form-control:focus {
  328.             border-color: #86b7fe;
  329.             box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  330.         }
  332.         /* Footer responsive */
  333.         .footer {
  334.             padding: 1rem;
  335.             text-align: center;
  336.         }
  338.         .footer .copyright,
  339.         .footer .credits {
  340.             margin: 0.5rem 0;
  341.         }
  343.         @media (max-width: 576px) {
  344.             .footer {
  345.                 font-size: 0.875rem;
  346.             }
  347.         }
  348.     </style>
  349. </head>
  351. <body>
  352.     <!-- ======= Header ======= -->
  353.     <header id="header" class="header fixed-top d-flex align-items-center">
  354.         {% if not is_granted('ROLE_LIVREUR') %}
  355.         <div class="d-flex align-items-center justify-content-between">
  356.             <a href="{{ path('app_dashboard') }}" class="logo d-flex align-items-center">
  357.                 <img src="{{ asset('assets/img/ls.png') }}" alt="logo" class="img-fluid">
  358.             </a>
  359.             <i class="bi bi-list toggle-sidebar-btn d-xl-none ms-3"></i>
  360.         </div>
  361.         {% endif %}
  362.         
  363.         {% if is_granted('ROLE_LIVREUR') %}
  364.         <div class="d-flex align-items-center justify-content-between">
  365.             <a href="{{ path('app_livreur_dashboard') }}" class="logo d-flex align-items-center">
  366.                 <img src="{{ asset('assets/img/ls.png') }}" alt="logo" class="img-fluid">
  367.             </a>
  368.             <i class="bi bi-list toggle-sidebar-btn d-xl-none ms-3"></i>
  369.         </div>
  370.         {% endif %}
  372.         <div class="d-flex justify-content-center flex-grow-1 mx-2 mx-md-3">
  373.             {% if not is_granted('ROLE_LIVREUR') %}
  374.             <div class="search-container">
  375.                 <form class="d-flex align-items-center w-100" method="GET" action="{{ path('produit_search') }}" id="searchForm">
  376.                     <div class="input-group">
  377.                         <input type="text" 
  378.                                name="search" 
  379.                                id="searchInput" 
  380.                                class="form-control" 
  381.                                placeholder="Rechercher..." 
  382.                                value="{{ app.request.query.get('search') }}" 
  383.                                autocomplete="off">
  384.                         <button class="btn btn-outline-primary" type="submit" aria-label="Rechercher">
  385.                             <i class="bi bi-search"></i>
  386.                         </button>
  387.                         <button class="btn btn-outline-secondary dropdown-toggle" 
  388.                                 type="button" 
  389.                                 id="advancedSearchButton" 
  390.                                 data-bs-toggle="dropdown" 
  391.                                 aria-expanded="false"
  392.                                 aria-label="Filtres avancés">
  393.                             <i class="bi bi-sliders"></i>
  394.                         </button>
  395.                         <div class="dropdown-menu dropdown-menu-end" id="advancedSearchMenu">
  396.                             <h6 class="dropdown-header fw-bold">Filtres avancés</h6>
  397.                             <div class="mb-3">
  398.                                 <label class="form-label">Type de recherche</label>
  399.                                 <select name="search_type" class="form-select form-select-sm">
  400.                                     <option value="all" selected>Tous</option>
  401.                                     <option value="produits">Produits</option>
  402.                                     <option value="clients">Clients</option>
  403.                                     <option value="vendeurs">Vendeurs</option>
  404.                                     <option value="boutiques">Boutiques</option>
  405.                                 </select>
  406.                             </div>
  407.                             <div class="mb-3">
  408.                                 <label class="form-label">Trier par</label>
  409.                                 <select name="sort" class="form-select form-select-sm">
  410.                                     <option value="nom">Nom</option>
  411.                                     <option value="prix_asc">Prix (croissant)</option>
  412.                                     <option value="prix_desc">Prix (décroissant)</option>
  413.                                     <option value="stock">Stock disponible</option>
  414.                                 </select>
  415.                             </div>
  416.                             <button type="submit" class="btn btn-primary btn-sm w-100">
  417.                                 <i class="bi bi-check2"></i> Appliquer
  418.                             </button>
  419.                         </div>
  420.                     </div>
  421.                 </form>
  422.                 <div id="autocompleteResults" class="autocomplete-results"></div>
  423.             </div>
  424.             {% endif %}
  425.         </div>
  427.         <nav class="header-nav ms-auto">
  428.             <ul class="d-flex align-items-center mb-0 list-unstyled">
  429.                 <li class="nav-item me-2">
  430.                     <a class="nav-link nav-icon position-relative" href="{{ path('app_panier') }}" aria-label="Panier">
  431.                         <i class="bi bi-cart-fill fs-5"></i>
  432.                         <span id="panier-badge" class="badge bg-primary badge-number"></span>
  433.                     </a>
  434.                 </li>
  436.                 {% if app.user %}
  437.                 <li class="nav-item dropdown">
  438.                     <a class="nav-link nav-profile d-flex align-items-center" 
  439.                        href="#" 
  440.                        data-bs-toggle="dropdown"
  441.                        aria-expanded="false">
  442.                         {% set firstLetter = firstLetter(app.user) %}
  443.                         <div class="avatar btn-primary d-flex align-items-center justify-content-center">
  444.                             {{ firstLetter }}
  445.                         </div>
  446.                     </a>
  447.                     <ul class="dropdown-menu dropdown-menu-end profile">
  448.                         <li class="dropdown-header text-center py-2">
  449.                             <h6 class="mb-1">{{ app.user.fullName }}</h6>
  450.                             <small class="text-muted">{{ app.user.roles[0] }}</small>
  451.                         </li>
  452.                         <li><hr class="dropdown-divider"></li>
  453.                         <li>
  454.                             <a class="dropdown-item d-flex align-items-center" href="{{ path('app_logout') }}">
  455.                                 <i class="bi bi-box-arrow-right me-2"></i>
  456.                                 <span>Déconnexion</span>
  457.                             </a>
  458.                         </li>
  459.                     </ul>
  460.                 </li>
  461.                 {% endif %}
  462.             </ul>
  463.         </nav>
  464.     </header>
  465.     <!-- End Header -->
  467.     <!-- ======= Sidebar ======= -->
  468.     {% if not is_granted('ROLE_LIVREUR') %}
  469.     <aside id="sidebar" class="sidebar">
  470.         <ul class="sidebar-nav" id="sidebar-nav">
  471.             {% if is_granted('ROLE_SUPER_ADMIN') or is_granted('ROLE_ADMIN') %}
  472.             <li class="nav-item">
  473.                 <a class="nav-link collapsed" href="{{ path('app_dashboard') }}">
  474.                     <i class="bi bi-grid me-2"></i>
  475.                     <span>Dashboard</span>
  476.                 </a>
  477.             </li>
  478.             <li class="nav-item">
  479.                 <a class="nav-link collapsed" href="{{ path('app_boutique_index') }}">
  480.                     <i class="bi bi-shop me-2"></i>
  481.                     <span>Boutiques</span>
  482.                 </a>
  483.             </li>
  484.             <li class="nav-item">
  485.                 <a class="nav-link collapsed" href="{{ path('app_entree_stock_index') }}">
  486.                     <i class="bi bi-box-arrow-in-down me-2"></i>
  487.                     <span>Entrées</span>
  488.                 </a>
  489.             </li>
  490.             <li class="nav-item">
  491.                 <a class="nav-link collapsed" href="{{ path('app_sortie_stock_index') }}">
  492.                     <i class="bi bi-box-arrow-up me-2"></i>
  493.                     <span>Sorties</span>
  494.                 </a>
  495.             </li>
  496.             <li class="nav-item">
  497.                 <a class="nav-link collapsed" href="{{ path('app_client_index') }}">
  498.                     <i class="bi bi-people me-2"></i>
  499.                     <span>Clients</span>
  500.                 </a>
  501.             </li>
  502.             <li class="nav-item">
  503.                 <a class="nav-link collapsed" href="{{ path('app_user_index') }}">
  504.                     <i class="bi bi-person-gear me-2"></i>
  505.                     <span>Utilisateurs</span>
  506.                 </a>
  507.             </li>
  508.             {% endif %}
  510.             <li class="nav-item">
  511.                 <a class="nav-link collapsed" href="{{ path('app_dashboard') }}">
  512.                     <i class="bi bi-grid me-2"></i>
  513.                     <span>Dashboard</span>
  514.                 </a>
  515.             </li>
  516.             <li class="nav-item">
  517.                 <a class="nav-link collapsed" href="{{ path('app_categorie_index') }}">
  518.                     <i class="bi bi-tags me-2"></i>
  519.                     <span>Catégories</span>
  520.                 </a>
  521.             </li>
  522.             <li class="nav-item">
  523.                 <a class="nav-link collapsed" href="{{ path('app_produit_index') }}">
  524.                     <i class="bi bi-box-seam me-2"></i>
  525.                     <span>Produits</span>
  526.                 </a>
  527.             </li>
  528.             <li class="nav-item">
  529.                 <a class="nav-link collapsed" href="{{ path('app_vente_index') }}">
  530.                     <i class="bi bi-cart me-2"></i>
  531.                     <span>Ventes</span>
  532.                 </a>
  533.             </li>
  534.             <li class="nav-item">
  535.                 <a class="nav-link collapsed" href="{{ path('app_facture_index') }}">
  536.                     <i class="bi bi-receipt me-2"></i>
  537.                     <span>Factures</span>
  538.                 </a>
  539.             </li>
  540.             <li class="nav-item">
  541.                 <a class="nav-link collapsed" href="{{ path('app_service_index') }}">
  542.                     <i class="bi bi-gear me-2"></i>
  543.                     <span>Services</span>
  544.                 </a>
  545.             </li>
  546.             <li class="nav-item">
  547.                 <a class="nav-link collapsed" href="{{ path('app_facture_service_index') }}">
  548.                     <i class="bi bi-file-earmark-text me-2"></i>
  549.                     <span>Factures Services</span>
  550.                 </a>
  551.             </li>
  553.             {% if is_granted('ROLE_SUPER_ADMIN') %}
  554.             <li class="nav-item">
  555.                 <a class="nav-link collapsed" href="{{ path('app_client_echeances') }}">
  556.                     <i class="bi bi-cash-stack me-2"></i>
  557.                     <span>Dettes Clients</span>
  558.                 </a>
  559.             </li>
  560.             <li class="nav-item">
  561.                 <a class="nav-link collapsed" href="{{ path('app_recettes') }}">
  562.                     <i class="bi bi-cash-coin me-2"></i>
  563.                     <span>Recettes</span>
  564.                 </a>
  565.             </li>
  566.             <li class="nav-item">
  567.                 <a class="nav-link collapsed" href="{{ path('app_action_log_index') }}">
  568.                     <i class="bi bi-activity me-2"></i>
  569.                     <span>Historique</span>
  570.                 </a>
  571.             </li>
  572.             {% endif %}
  573.         </ul>
  574.     </aside>
  575.     {% endif %}
  576.     <!-- End Sidebar-->
  578.     <main id="main" class="main">
  579.         <div class="pagetitle">
  580.             <h1 class="mb-2">
  581.                 {% block subtitle %}{% endblock %}
  582.             </h1>
  583.             <nav aria-label="breadcrumb">
  584.                 <ol class="breadcrumb">
  585.                     <li class="breadcrumb-item">
  586.                         <a href="{{ path('app_dashboard') }}">
  587.                             {% block subtitle2 %}Accueil{% endblock %}
  588.                         </a>
  589.                     </li>
  590.                 </ol>
  591.             </nav>
  592.         </div>
  594.         {% block body %}{% endblock %}
  595.     </main>
  597.     <!-- ======= Footer ======= -->
  598.     <footer id="footer" class="footer bg-light border-top">
  599.         <div class="container-fluid">
  600.             <div class="row">
  601.                 <div class="col-md-6">
  602.                     <div class="copyright">
  603.                         &copy; Copyright <strong><span>GestStock TuferGroupe</span></strong>. 
  604.                         Tous droits réservés
  605.                     </div>
  606.                 </div>
  607.                 <div class="col-md-6">
  608.                     <div class="credits text-md-end">
  609.                         Développé par <a href="mailto:jsias288@gmail.com" class="text-decoration-none">jsias288@gmail.com</a>
  610.                     </div>
  611.                 </div>
  612.             </div>
  613.         </div>
  614.     </footer>
  615.     <!-- End Footer -->
  617.     <a href="#" class="back-to-top d-flex align-items-center justify-content-center rounded-circle">
  618.         <i class="bi bi-arrow-up-short"></i>
  619.     </a>
  621.     <!-- Vendor JS Files -->
  622.     <script src={{asset ("assets/vendor/apexcharts/apexcharts.min.js")}}></script>
  623.     <script src={{asset ("assets/vendor/bootstrap/js/bootstrap.bundle.min.js")}}></script>
  624.     <script src={{asset ("assets/vendor/chart.js/chart.umd.js")}}></script>
  625.     <script src={{asset ("assets/vendor/echarts/echarts.min.js")}}></script>
  626.     <script src={{asset ("assets/vendor/quill/quill.min.js")}}></script>
  627.     <script src={{asset ("assets/vendor/simple-datatables/simple-datatables.js")}}></script>
  628.     <script src={{asset ("assets/vendor/tinymce/tinymce.min.js")}}></script>
  629.     <script src={{asset ("assets/vendor/php-email-form/validate.js")}}></script>
  630.     <script src={{asset ("assets/js/main.js")}}></script>
  632.     <script>
  633.         document.addEventListener('DOMContentLoaded', function() {
  634.             // Récupération des éléments
  635.             const searchInput = document.getElementById('searchInput');
  636.             const searchForm = document.getElementById('searchForm');
  637.             const advancedSearchButton = document.getElementById('advancedSearchButton');
  638.             const advancedSearchMenu = document.getElementById('advancedSearchMenu');
  639.             const autocompleteContainer = document.getElementById('autocompleteResults');
  640.             const AUTOCOMPLETE_URL = "{{ path('produit_autocomplete') }}";
  641.             
  642.             let debounceTimer;
  643.             
  644.             // VALIDATION DE LA RECHERCHE
  645.             searchForm?.addEventListener('submit', function(e) {
  646.                 const searchValue = searchInput.value.trim();
  647.                 
  648.                 if (searchValue === '' || searchValue.length < 2) {
  649.                     e.preventDefault();
  650.                     searchInput.classList.add('is-invalid');
  651.                     searchInput.focus();
  652.                     showSearchError('Veuillez saisir au moins 2 caractères pour effectuer une recherche.');
  653.                     return false;
  654.                 }
  655.                 
  656.                 searchInput.classList.remove('is-invalid');
  657.             });
  658.             
  659.             // Fonction pour afficher un message d'erreur
  660.             function showSearchError(message) {
  661.                 const existingError = document.getElementById('search-error-message');
  662.                 if (existingError) {
  663.                     existingError.remove();
  664.                 }
  665.                 
  666.                 const errorDiv = document.createElement('div');
  667.                 errorDiv.id = 'search-error-message';
  668.                 errorDiv.className = 'invalid-feedback d-block';
  669.                 errorDiv.textContent = message;
  670.                 
  671.                 searchInput.parentNode.insertBefore(errorDiv, searchInput.nextSibling);
  672.                 
  673.                 setTimeout(() => {
  674.                     if (errorDiv && errorDiv.parentNode) {
  675.                         errorDiv.remove();
  676.                     }
  677.                 }, 3000);
  678.             }
  679.             
  680.             // Autocomplétion
  681.             searchInput?.addEventListener('input', function() {
  682.                 const searchValue = this.value.trim();
  683.                 
  684.                 if (searchValue.length >= 2) {
  685.                     this.classList.remove('is-invalid');
  686.                     const errorMessage = document.getElementById('search-error-message');
  687.                     if (errorMessage) {
  688.                         errorMessage.remove();
  689.                     }
  690.                 }
  691.                 
  692.                 clearTimeout(debounceTimer);
  693.                 
  694.                 if (this.value.length < 2) {
  695.                     autocompleteContainer.innerHTML = '';
  696.                     autocompleteContainer.style.display = 'none';
  697.                     return;
  698.                 }
  699.                 
  700.                 debounceTimer = setTimeout(() => {
  701.                     fetch(`${AUTOCOMPLETE_URL}?q=${encodeURIComponent(this.value)}`)
  702.                         .then(response => response.json())
  703.                         .then(data => {
  704.                             autocompleteContainer.innerHTML = '';
  705.                             
  706.                             if (data.length > 0) {
  707.                                 autocompleteContainer.style.display = 'block';
  708.                                 
  709.                                 data.forEach(item => {
  710.                                     const suggestionElement = document.createElement('div');
  711.                                     suggestionElement.className = 'autocomplete-item';
  712.                                     
  713.                                     let icon = '';
  714.                                     switch(item.type) {
  715.                                         case 'produit':
  716.                                             icon = '<i class="bi bi-box me-2"></i>';
  717.                                             break;
  718.                                         case 'client':
  719.                                             icon = '<i class="bi bi-person me-2"></i>';
  720.                                             break;
  721.                                         case 'vendeur':
  722.                                             icon = '<i class="bi bi-person-badge me-2"></i>';
  723.                                             break;
  724.                                         case 'boutique':
  725.                                             icon = '<i class="bi bi-shop me-2"></i>';
  726.                                             break;
  727.                                     }
  728.                                     
  729.                                     suggestionElement.innerHTML = `${icon} <span>${item.value}</span>`;
  730.                                     
  731.                                     suggestionElement.addEventListener('click', function() {
  732.                                         searchInput.value = item.value;
  733.                                         autocompleteContainer.style.display = 'none';
  734.                                         searchInput.classList.remove('is-invalid');
  735.                                         
  736.                                         const searchTypeSelect = document.querySelector('select[name="search_type"]');
  737.                                         if (searchTypeSelect && item.type) {
  738.                                             let filterType;
  739.                                             switch(item.type) {
  740.                                                 case 'produit': filterType = 'produits'; break;
  741.                                                 case 'client': filterType = 'clients'; break;
  742.                                                 case 'vendeur': filterType = 'vendeurs'; break;
  743.                                                 case 'boutique': filterType = 'boutiques'; break;
  744.                                                 default: filterType = 'all';
  745.                                             }
  746.                                             searchTypeSelect.value = filterType;
  747.                                         }
  748.                                         
  749.                                         searchForm.submit();
  750.                                     });
  751.                                     
  752.                                     autocompleteContainer.appendChild(suggestionElement);
  753.                                 });
  754.                             } else {
  755.                                 autocompleteContainer.style.display = 'none';
  756.                             }
  757.                         })
  758.                         .catch(error => {
  759.                             console.error('Erreur lors de la récupération des suggestions:', error);
  760.                         });
  761.                 }, 300);
  762.             });
  763.             
  764.             // Masquer les résultats d'autocomplétion lors d'un clic ailleurs
  765.             document.addEventListener('click', function(e) {
  766.                 if (e.target !== searchInput && !autocompleteContainer.contains(e.target)) {
  767.                     autocompleteContainer.style.display = 'none';
  768.                 }
  769.             });
  770.             
  771.             // Empêcher la fermeture du menu avancé lors d'un clic à l'intérieur
  772.             advancedSearchMenu?.addEventListener('click', function(e) {
  773.                 e.stopPropagation();
  774.             });
  775.         });
  777.         // Fonctions existantes pour le panier et les données
  778.         $(document).ready(function() {
  779.             $(".add-to-cart").click(function(e) {
  780.                 e.preventDefault();
  781.                 var url = $(this).attr("href");
  782.                 $.ajax({
  783.                     url: url,
  784.                     method: "GET",
  785.                     success: function(response) {
  786.                         if (response === 'error') {
  787.                             alert('La quantité en stock est inférieure ou égale à la quantité d\'alerte. Impossible d\'ajouter le produit.');
  788.                         } else {
  789.                             $("#panier-content").html(response);
  790.                             updatePanierBadge();
  791.                         }
  792.                     }
  793.                 });
  794.             });
  795.         });
  797.         function updatePanierBadge() {
  798. $.ajax({
  799. url: "{{ path('count_panier') }}",
  800. method: "GET",
  801. success: function (response) {
  802. $("#panier-badge").text(response.panierSize);
  803. }
  804. });
  805. }
  807. updatePanierBadge();
  808. document.addEventListener('DOMContentLoaded', function () {
  809. function updateSalesData(filter) {
  810. fetch('{{ path('app_dashboard_data') }}?filter=' + filter).then(response => response.json()).then(data => {
  811. const salesCountElement = document.querySelector('#sales-count');
  812. const salesTitleElement = document.querySelector('#sales-title');
  813. salesCountElement.textContent = data.nombreVentes;
  815. switch (filter) {
  816. case 'today': salesTitleElement.textContent = 'Ventes | Aujourd\'hui';
  817. break;
  818. case 'month': salesTitleElement.textContent = 'Ventes | Ce mois-ci';
  819. break;
  820. case 'year': salesTitleElement.textContent = 'Ventes | Cette année';
  821. break;
  822. default: salesTitleElement.textContent = 'Ventes | Aujourd\'hui';
  823. break;
  824. }
  825. }).catch(error => console.error('Error:', error));
  826. }
  828. const dropdownItems = document.querySelectorAll('.sales-dropdown-item');
  829. dropdownItems.forEach(item => {
  830. item.addEventListener('click', function (event) {
  831. event.preventDefault();
  832. const filter = this.getAttribute('data-filter');
  833. updateSalesData(filter);
  834. });
  835. });
  837. updateSalesData('today');
  839. function updateRevenueData(filter) {
  840. fetch('{{ path('app_dashboard_data2') }}?filter=' + filter).then(response => response.json()).then(data => {
  841. const revenueCountElement = document.querySelector('#revenue-count');
  842. const revenueTitleElement = document.querySelector('#revenue-title');
  843. revenueCountElement.textContent = data.totalRevenue.toFixed(2);
  845. switch (filter) {
  846. case 'today': revenueTitleElement.textContent = 'Revenue |  Aujourd\'hui';
  847. break;
  848. case 'month': revenueTitleElement.textContent = 'Revenue | Ce mois-ci';
  849. break;
  850. case 'year': revenueTitleElement.textContent = 'Revenue | Cette année';
  851. break;
  852. default: revenueTitleElement.textContent = 'Revenue |  Aujourd\'hui';
  853. break;
  854. }
  855. }).catch(error => console.error('Error:', error));
  856. }
  858. const revenueDropdownItems = document.querySelectorAll('.revenue-dropdown-item');
  859. revenueDropdownItems.forEach(item => {
  860. item.addEventListener('click', function (event) {
  861. event.preventDefault();
  862. const filter = this.getAttribute('data-filter');
  863. updateRevenueData(filter);
  864. });
  865. });
  867. updateRevenueData('today');
  868. });
  869.             </script>
  871.         {% block javascripts %}{% endblock %}
  873.         </body>
  875.     </html>