{% load static %}

<!DOCTYPE html>
<html lang="fr"
    class="has-aside-left has-aside-mobile-transition has-navbar-fixed-top has-aside-expanded">

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %} ECOLUX CONNECT {% endblock  %}</title>

    {% load sass_tags %}
    
    <link href="{% sass_src  'assets/css/base.scss'   %}" rel="stylesheet" type="text/css" />
    <!-- Bulma is included -->

    <link rel="stylesheet" href='{% static "dashboard/assets/css/main.min.css" %}'>
    
    <!-- ECOLUX Dashboard Colors -->
  <link rel="stylesheet" href='{% static "css/ecolux-dashboard.css" %}'>
  <!-- Palette ECOLUX overrides for backoffice (replace blue by ECOLUX colors) -->
  <link rel="stylesheet" href='{% static "css/backoffice-ecolux.css" %}'>
    
    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito"
          rel="stylesheet"
          type="text/css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"
    integrity="sha512-X/RSQYxFb/tvuz6aNRTfKXDnQzmnzoawgEQ4X8nZNftzs8KFFH23p/BA6D2k0QCM4R0sY1DEy9MIY9b3fwi+bg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"
    integrity="sha512-f28cvdA4Bq3dC9X9wNmSx21rjWI+5piIW/uoc2LuQ67asKxfQjUow2MkcCNcfJiaLrHcGbed1wzYe3dlY4w9gA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />


    <!-- metas -->
    <link rel="canonical" href="https://www.test.com">
    
    <meta name="author" content="AZ">

    <!-- mobile responsive meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta property="og:url" content="https://www.test.com" />

    {% block metaseo %} 

        <meta name="robots" content="index, follow, ">
        <meta name="title" content="">

        <meta name="description"
        content="">

        <meta property="og:title" content="" />

        <meta name="keywords" content=''>
        
    {% endblock %}
    
   
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css" integrity="sha512-rBi1cGvEdd3NmSAQhPWId5Nd6QxE8To4ADjM2a6n0BrqQdisZ/RPUlm0YycDzvNL1HHAh1nKZqI0kSbif+5upQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>


    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bulma.min.css">
    
    
  </head>
  <body >
    <script src="
      https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js
      "></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script>

          

     </script>
    <div id="app">
  <nav id="navbar-main" class="navbar is-fixed-top">
        <div class="navbar-brand">
          <a onclick="asideToggle(event)" class="navbar-item is-hidden-desktop jb-aside-mobile-toggle">
            <span class="icon"><i class="mdi mdi-forwardburger mdi-24px"></i></span>
          </a>
          <div class="navbar-item has-control">
            
          </div>
        </div>
        <div class="navbar-brand is-right">
          <a onclick="navToggle(event)" class="navbar-item is-hidden-desktop jb-navbar-menu-toggle"
             data-target="navbar-menu">
            <span class="icon"><i class="mdi mdi-dots-vertical"></i></span>
          </a>
        </div>
        <div class="navbar-menu fadeIn animated faster" id="navbar-menu">
          <div class="navbar-end">

            {% comment %} <p id="" class="navbar-item " onclick="goTo('/') " style="cursor: pointer;" >
                
                    <span>Accueil</span>
            </p> {% endcomment %}
          
            <div style="color: unset;" class="navbar-item has-dropdown has-dropdown-with-icons has-divider has-user-avatar is-hoverable">
              <a class="navbar-link is-arrowless">
                <div class="is-user-avatar">

                  {% if cuser.image  %}
                  <img style="width: 50px;" src="{{cuser.image.url}}"
                       alt="John Doe">
                  {% else %}
                  <img src="https://api.dicebear.com/9.x/initials/svg?seed={{user.first_name}} {{user.last_name}}"
                       alt="{{user.first_name}} {{user.last_name}}">
                  {% endif %}
                  
                </div>
                <div class="is-user-name">
                  <span> {{cuser.user.first_name}} {{cuser.user.last_name}}</span>
                </div>
                <span class="icon"><i class="mdi mdi-chevron-down"></i></span>
              </a>
              <div class="navbar-dropdown">
                
                <hr class="navbar-divider">
                <a href="/auth/logout" class="navbar-item">
                  <span class="icon"><i class="mdi mdi-logout"></i></span>
                  <span style="color: #4a4a4a;">Se deconnecter</span>
                </a>
              </div>
            </div>
      
            <a href="/auth/logout" title="Log out" class="navbar-item is-desktop-icon-only is-hidden-touch">
              <span class="icon"><i class="mdi mdi-logout"></i></span>
              <span>Se deconnecter</span>
            </a>
          </div>
        </div>
      </nav>
    <aside class="aside is-placed-left is-expanded">
        
        

        <div class="aside-tools">
          <div class="aside-tools-label">
            <span  style="text-align: center !important;"><b>Ecolux</b> CONNECT</span>
          </div>
        </div>
        
        {% url 'app:dashboard_home' as dashboard_home_url %}
        {% url 'app:dashboard_projects_list' as dashboard_projects_url %}
        {% url 'app:dashboard_users_management' as dashboard_users_url %}
        {% url 'app:dashboard_profile' as dashboard_profile_url %}

        <style>
          /* Small improvements for the aside menu */
          .aside .menu {
            padding: 1rem;
          }
          .aside .menu-label {
            color: #4a4a4a;
            font-weight: 700;
            font-size: 0.85rem;
            margin-bottom: 0.5rem;
          }
          .aside .menu-list a {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .55rem .75rem;
            border-radius: 6px;
            color: #c0c2b6ff;
            transition: background-color .12s, color .12s, transform .06s;
          }
          .aside .menu-list a .icon { width: 1.4rem; text-align: center; }
          .aside .menu-list a:hover {
            background: rgba(208, 167, 62, 0.08);
            transform: translateY(-1px);
            }
            .aside .menu-list a.is-active {
            background: linear-gradient(90deg, rgba(74,74,74,0.12), rgba(74,74,74,0.06));
            color: #c3a11bff;
            box-shadow: inset 4px 0 0 0 #666;
            font-weight: 600;
            }
            .aside .menu-list .menu-badge {
            margin-left: auto;
            font-size: .75rem;
            background: #f5f7fa;
            color: #242424ff;
            padding: .15rem .4rem;
            border-radius: 999px;
            }
        </style>

        <div class="menu is-menu-main">
          <p class="menu-label has-text-white">Menu Principal</p>
          <ul class="menu-list">
            <li>
              <a href="{{ dashboard_home_url }}"
                 class="has-icon {% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_home' %}is-active{% endif %}"
                 aria-current="{% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_home' %}page{% endif %}">
                <span class="icon"><i class="fas fa-tachometer-alt"></i></span>
                <span class="menu-item-label">Tableau de bord</span>
              </a>
            </li>

            <li>
              <a href="{{ dashboard_projects_url }}"
                 class="has-icon {% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_projects_list' %}is-active{% endif %}"
                 aria-current="{% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_projects_list' %}page{% endif %}">
                <span class="icon"><i class="fas fa-project-diagram"></i></span>
                <span class="menu-item-label">
                  {% if user.cuser.type == 'CLIENT' %}Mes Projets{% else %}Projets{% endif %}
                </span>
              </a>
            </li>

            {% if user.cuser.type == 'DRH' %}
            <li>
              <a href="{{ dashboard_users_url }}"
                 class="has-icon {% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_users_management' %}is-active{% endif %}"
                 aria-current="{% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_users_management' %}page{% endif %}">
                <span class="icon"><i class="fas fa-users"></i></span>
                <span class="menu-item-label">Gestion des utilisateurs</span>
              </a>
            </li>
            {% endif %}

            <li>
              <a href="{{ dashboard_profile_url }}"
                 class="has-icon {% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_profile' %}is-active{% endif %}"
                 aria-current="{% if request and request.resolver_match and request.resolver_match.url_name == 'dashboard_profile' %}page{% endif %}">
                <span class="icon"><i class="fas fa-user-cog"></i></span>
                <span class="menu-item-label">Mon Compte</span>
              </a>
            </li>
          </ul>

          {% if user.is_superuser %}
          <!-- Section Admin - si l'ancien système existe encore -->
          <p class="menu-label">
            Administration
          </p>
          <ul class="menu-list">
            <li>
              <a href="/myecolux/" id="admin-panel" class="has-icon" target="_blank">
                <div class="container is-flex is-align-items-center">
                    <span class="icon"><i class="fas fa-cogs"></i></span>
                    <span class="menu-item-label">Panel Admin Django</span>
                </div>
              </a>
            </li>
          </ul>
          {% endif %}
        </div>
      </aside>
     
      {% include "backoffice/partials/notif.html" %}  
      
      {% block content %}

      {% endblock content %}
     
      <footer style="" class="footer">
        <div class="container-fluid">
          <div class="level">
            <div class="level-left">
              <div class="level-item">
                 2025, Ecolux BTP Sénégal. Tous droits réservés.
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    
  <!-- Scripts below are for demo only -->
  <script type="text/javascript"
    href="{% static 'dashboard/assets/js/main.min.js' %}"></script>
    <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

  <script 
  type="text/javascript"
    href="{% static 'dashboard/assets/js/chart.sample.min.js' %}">
  </script>

    <!-- Icons below are for demo only. Feel free to use any icon pack. Docs: https://bulma.io/documentation/elements/icon/ -->
    <link rel="stylesheet"
        href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">

    <script>
      function asideToggle(e) {
        var dropdownIcon = e.currentTarget.getElementsByClassName('icon')[0].getElementsByClassName('mdi')[0];
        document.documentElement.classList.toggle('has-aside-mobile-expanded');
        dropdownIcon.classList.toggle('mdi-forwardburger');
        dropdownIcon.classList.toggle('mdi-backburger');
      }

      function navToggle(e) {
            var dropdownIcon = e.currentTarget.getElementsByClassName('icon')[0].getElementsByClassName('mdi')[0];
            document.getElementById(e.currentTarget.getAttribute('data-target')).classList.toggle('is-active');
            dropdownIcon.classList.toggle('mdi-dots-vertical');
            dropdownIcon.classList.toggle('mdi-close');
          }
        function goTo(url) {
            window.location.href = url;
        }

        function goToTarget(url) {
            window.open(url, "_blank")
         }

         function printElement(elementId) {

            const  elts = document.getElementsByClassName("noprint");
            for (let i = 0; i < elts.length; i++) {
                elts[i].style.display = "none";
            }

            const originalContent = document.body.innerHTML;
            const printContent = document.getElementById(elementId).innerHTML;

            
            document.body.innerHTML = printContent;
            window.print();
            document.body.innerHTML = originalContent;
            
            for (let i = 0; i < elts.length; i++) {
                elts[i].style.display = "block";
            }
          } 

    </script>

    

    <script>
      function openPopup(idPopup) {
          document.getElementById(idPopup).className += " is-active"
      }


      function closePopup(idPopup) {

          var classes = document.getElementById(idPopup).classList.remove("is-active")

      }

      function confirmLink(link){
        Swal.fire({
          title: " Confirmation",
          text: " Voulez vous vraiment confirmer? ",
          
          showCancelButton: true,
          confirmButtonColor: "#3e8ed0",
          cancelButtonColor: "#d33",
          confirmButtonText: "Confirm",
          cancelButtonText: "Annuler",
          // preConfirm: (response) => {

          //     if (!response) {
          //         Swal.showValidationMessage("Tapez delete pour confirmer");
          //     }
          // },
      }).then((result) => {
          if (result.isConfirmed) {
              
              goTo(link);

          } else {


          }
      });
      }
    </script>
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bulma.min.js"></script>
    </body>

</html>