{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="{% static 'utils/images/cloud.ico' %}">
  <link rel="icon" href="{% static 'utils/images/okira_logo.png' %}">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  {% if actual_institution != None %}
  <title>
  	 {{actual_institution}} | HubStation
  </title>
  {% else %}
  <title>
  	Osma | HubStation
  </title>
  {% endif %}
  <meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Ubuntu" />


  <!-- CSS Files -->
  <link href="{% static 'utils/alertify/alertify.min.css' %}" rel="stylesheet" />
  <link href="{% static 'utils/css/material-dashboard.css' %}" rel="stylesheet" />
  <!-- CSS Just for demo purpose, don't include it in your project -->
  <link href="{% static 'utils/css/demo.css' %}" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
		<style>
			body *{
				font-family:Poppins,Ubuntu,Corbel,sans-serif;
			}
		</style>
  <style type="text/css">
    /*.side_nav[data-show='0']{
      display: none;
      }*/
      #loader {
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: 999999;
        overflow: visible;
        background: rgba(250,250,250,0.8) url({% static 'utils/images/waiting.gif' %}) no-repeat center center;
      }
      .navo_si1[data-a='0'] a,.navo_si2[data-a='0'] a{
        color:#aaa;
      }
      .navbar-transparent p{
        color: #fff;
      }   
      @media (max-width:767px){
        .nav-item{
          color:white;
          display: none;
        }
      }
      .btn-primary2{
        background: #2a7fe4;
      }
      .text-primary2{
        color:#2a7fe4;
      }
      .text-warning2{
        color:#ff6600;
      }
      .btn-warning2{
        background: #ff6600;
      }
      .card-stats{
        min-height: 160px;
      }
      .card-stats .card-header{
        min-height: 85px;
      }
    </style>
    {% block style %}

    {% endblock %}
  </head>
  {% block body %}
  <body class="" style="background:#fff;">
    {% if loader != None %}<div id="loader"> </div>{% endif %}
    <div class="wrapper ">
      {% block sidebar %}
      <div class="sidebar" id="sidebar-menu" style="display:nosne;" data-color="purple" data-background-color="white">
        <div class="border-bottom border-secondary d-flex justify-content-between px-2">
          <div class="border-none logo" style="font-family:Ubuntu,Candara,Corbel,serif;">
            <b>
              <span href="/" style="text-transform:none;font-family:Ubuntu,Candara,Corbel,serif;" class="h4">{{actual_institution}}
              </span>
            </b> 
          </div>
          <div onclick="closeDiv('sidebar-menu')" class="py-3">
            <span class="badge btn-light" style="cursor:pointer;"> x </span>
          </div>
        </div>
        {% block menu_sidebar %}
        <div class="sidebar-wrapper">
          <ul  class="siNA nav side_nav">
            <li class="nav-item {% if link == 1 %}bg-primary{% endif %} ">
              <a class="nav-link {% if link == 1 %}text-white{% endif %}" href="/">
                <i class="{% if link == 1 %}text-white{% endif %} material-icons">dashboard</i>
                <p>Accueil</p>
              </a>
            </li>
            <li class="nav-item {% if link == 2 %}bg-primary{% endif %} ">
              <a class="nav-link {% if link == 2 %}text-white{% endif %}" href="/stock/">
                <i class="{% if link == 2 %}text-white{% endif %} material-icons">shopping_cart</i>
                <p>Stocks</p>
              </a>
            </li>
            <li class="nav-item  {% if link == 3 %}bg-primary{% endif %}">
              <a class="nav-link {% if link == 3 %}text-white{% endif %}" href="/RH/">
                <i class="material-icons {% if link == 3 %}text-white{% endif %}">groups</i>
                <p>Personnel</p>
              </a>
            </li>
            <li class="nav-item {% if link == 7 %}bg-primary{% endif %}">
              <a class="nav-link  {% if link == 7 %}text-white{% endif %}" href="/customers/">
                <i class="material-icons {% if link == 7 %}text-white{% endif %}">hub</i>
                <p>Clientèle</p>
              </a>
            </li>

            <li class="nav-item {% if link == 8 %}bg-primary{% endif %}">
              <a class="nav-link  {% if link == 8 %}text-white{% endif %}" href="/partners/">
                <i class="material-icons {% if link == 8 %}text-white{% endif %}">handshake</i>
                <p>Partenaires</p>
              </a>
            </li>
            <li class="nav-item {% if link == 6 %}bg-primary{% endif %}">
              <a class="nav-link  {% if link == 6 %}text-white{% endif %}" href="/solds/add/">
                <i class="material-icons {% if link == 6 %}text-white{% endif %}">local_offer</i>
                <p>Ventes</p>
              </a>
            </li>

	   <li class="nav-item {% if link == 16 %}bg-primary{% endif %}">
              <a class="nav-link  {% if link == 16 %}text-white{% endif %}" href="/ravit/">
                <i class="material-icons {% if link == 16 %}text-white{% endif %}">bubble_chart</i>
                <p>Ravitaillement</p>
              </a>
            </li>

<!--
<li class="nav-item {% if link == 9 %}bg-primary{% endif %}">
              <a class="nav-link  {% if link == 9 %}text-white{% endif %}" href="/stock/trans/">
                <i class="material-icons {% if link == 9 %}text-white{% endif %}">compress</i>
                <p>Transactions</p>
              </a>
            </li>
            -->

		<!--
            <li class="nav-item {% if link == 4 %}bg-primary{% endif %} ">
              <a class="nav-link {% if link == 4 %}text-white{% endif %}" href="/compta/">
                <i class="material-icons {% if link == 4 %}text-white{% endif %}">attach_money</i>
                <p>Comptabilité</p>
              </a>
            </li>
            -->
          <!--
          <li class="nav-item ">
            <a class="nav-link" href="/tasks/">
              <i class="material-icons">content_paste</i>
              <p>Planning</p>
            </a>
          </li>
        -->


        <li class="nav-item {% if link == 14 %}bg-primary{% endif %}">
          <a class="nav-link {% if link == 14 %}text-white{% endif %}" href="/enterprise/">
            <i class="material-icons {% if link == 14 %}text-white{% endif %}"><span class="material-icons ">
              smart_toy
            </span></i>
            <p>Mon Entreprise</p>
          </a>
        </li>

      </ul>
      {% block perso_sidebar %}

      {% endblock %}
    </div>
    {% endblock %}

  </div>
  {% endblock %}

  <div style="position:fixed;z-index:9990;width:100vw;" class="d-lg-none  btn-primary d-flex justify-content-between">
    <div class=" text-white"><b style="background:none;font-size:16px;" class="btn"><a href="/" style="color:#fff;text-transform:none;"  >
    
      <i class="material-icons">home</i> {{actual_institution}}
      
    </a></b></div>
    <div class="px-2 d-lg-none"> <span data-toggle="modal"  data-target="#MenuModal" class="btn text-secondary" style="background:#fff;">Menu</span></div>
  </div>

  <div class="main-panel">
    <!-- Navbar -->
    {% block navbar %}

    <nav class=" navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
      <div class="container-fluid">
        <div class="navbar-wrapper">
          <a class="navbar-brand" href="javascript:;"><b>&nbsp;</b></a>
        </div>

          <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
            <span class="navbar-toggler-icon icon-bar"></span>
          </button>-->
          <div class="collapse navbar-collapse justify-content-between">
            <!-- <div class="px-2"> 
        <small class="text-primary2 date_valer"></small>
      </div> -->
      <div>
        <span id='navigation_btn' onclick="openDiv('sidebar-menu')" style="display: none;" class="btn btn-white  text-primary2 "> Navigation </span>
      </div>
      <div class="d-flex">
        <form class="navbar-form">
          <div class="input-group no-border" style="">
            <input style="min-width:300px;" type="text" value="" class="form-control" placeholder="Recherche...">
            <button type="submit" class="btn btn-white btn-round btn-just-icon">
              <i class="material-icons">search</i>
              <div class="ripple-container"></div>
            </button>
          </div>
        </form>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a  class="nav-link" href="javascript:;">
              <i class="material-icons">manage_accounts</i>
              {% block role_user %}<span>{{role}}</span>{% endblock %}
              <p class="d-lg-none d-md-block">
                Roles
              </p>
            </a>
          </li> 
          <li class="nav-item dropdown"> 
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Mike John responded to your email</a>
              <a class="dropdown-item" href="#">You have 5 new tasks</a>
              <a class="dropdown-item" href="#">You're now friend with Andrew</a>
              <a class="dropdown-item" href="#">Another Notification</a>
              <a class="dropdown-item" href="#">Another One</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="javascript:;" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="material-icons">person</i>
              <span>{{user.username}}</span>
              <p class="d-lg-none d-md-block">
                Account
              </p>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
              <a class="dropdown-item" href="#">Profile</a>
              <a class="dropdown-item" href="#">Settings</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="/logout/">Log out</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>
<!-- End Navbar -->
{% endblock %}

<div class="content">
  {% block content %}

  {% endblock %}
</div>
<footer class="d-none d-md-block footer">
  <div class="container-fluid">
    <div class="copyright float-right">
      <small>&copy; Copyright <a href='http://okira.cm'>Okira 2024</a></small>
    </div>
  </div>
</footer>
</div>
</div>
<div class="modal fade" style="z-index:9999;padding-top:70px;" id="MenuModal"  role="dialog" > 
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header bg-white">
      <center class='w-100'><h3 class="modal-title">      <div class="logo"><b><a href="/" style="text-transform:none;" class="simple-text logo-normal text-dark">
        {% if actual_institution.m_logo != None %} <img style="max-width:100px;max-height:75px;" src="{{actual_institution.m_logo.url}}"> {% endif %} {{actual_institution}}
      </a></b></div></h3></center> 
      <button type="button" class="text-danger close" data-dismiss="modal" aria-label="Close" id="giLoClose"><span aria-hidden="true">&times;</span></button>
    </div>
    <div id="modal-menu-text" style="background:none;" class="modal-body"> 

    </div> 
  </div>
</div>

</div>
<div  class="modal fade" style="z-index:9999;padding-top:70px;" id="StructsModal"  role="dialog">
  <div class="modal-dialog" role="document">
   <div class="modal-content">
    <div class="modal-header bg-white">
      <div> Choix de la Structure </div>
    </div>
    <div class="modal-body d-flex flex-wrap">
      {% for str in structures %}
      <div class="py-2"><a class="btn btn-primary" href="/set_structure/{{str.id}}/">{{str}}</a></div>
      {% endfor %}
    </div>
  </div>
</div>    
</div>

{% block plugin %} 
{% endblock %}
</body>
{% endblock %}
<!--   Core JS Files   -->
<script src="{% static 'utils/alertify/alertify.min.js' %}"></script>
<script src="{% static 'utils/js/core/jquery.min.js' %}"></script>
<script src="{% static 'utils/js/core/popper.min.js' %}"></script>
<script src="{% static 'utils/js/core/bootstrap-material-design.min.js' %}"></script>
<script src="{% static 'utils/js/plugins/perfect-scrollbar.jquery.min.js' %}"></script>
<!-- Plugin for the momentJs  -->
<script src="{% static 'utils/js/plugins/moment.min.js' %}"></script>
<!--  Plugin for Sweet Alert -->
<script src="{% static 'utils/js/plugins/sweetalert2.js' %}"></script>
<!-- Forms Validations Plugin -->
<script src="{% static 'utils/js/plugins/jquery.validate.min.js' %}"></script>
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
<script src="{% static 'utils/js/plugins/jquery.bootstrap-wizard.js' %}"></script>
<!--  Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="{% static 'utils/js/plugins/bootstrap-selectpicker.js' %}"></script>
<!--  Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="{% static 'utils/js/plugins/bootstrap-datetimepicker.min.js' %}"></script>
<!--  DataTables.net Plugin, full documentation here: https://datatables.net/  -->
<script src="{% static 'utils/js/plugins/jquery.dataTables.min.js' %}"></script>
<!--  Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs  -->
<script src="{% static 'utils/js/plugins/bootstrap-tagsinput.js' %}"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="{% static 'utils/js/plugins/jasny-bootstrap.min.js' %}"></script>
<!--  Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar    -->
<script src="{% static 'utils/js/plugins/fullcalendar.min.js' %}"></script>
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/ -->
<script src="{% static 'utils/js/plugins/jquery-jvectormap.js' %}"></script>
<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="{% static 'utils/js/plugins/nouislider.min.js' %}"></script>
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
<!-- Library for adding dinamically elements -->
<script src="{% static 'utils/js/plugins/arrive.min.js' %}"></script>
<!-- Chartist JS --> 
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!--  Notifications Plugin    -->
<script src="{% static 'utils/js/plugins/bootstrap-notify.js' %}"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="{% static 'utils/js/material-dashboard.js' %}" type="text/javascript"></script>
<script type="text/javascript">
  function closeDiv(div){
    $("#"+div).hide('slow',function(){
      $(".main-panel").css("width","100%")
      $("#navigation_btn").slideDown('slow')
    });

  }

  function openDiv(div){
    $("#navigation_btn").slideUp('slow',function(){
      $(".main-panel").css("width","calc(100% - 260px)");
      $("#"+div).show('slow');
    });    
  }

  $(".actu_date").text((new Date()).toLocaleDateString('fr-FR'))

</script>
<script>
  $(document).ready(function() {
    $().ready(function() {

      $sidebar = $('.sidebar');

      $sidebar_img_container = $sidebar.find('.sidebar-background');

      $full_page = $('.full-page');

      $sidebar_responsive = $('body > .navbar-collapse');

      window_width = $(window).width();

      fixed_plugin_open = $('.sidebar .sidebar-wrapper .nav li.active a p').html();

      if (window_width > 767 && fixed_plugin_open == 'Dashboard') {
        if ($('.fixed-plugin .dropdown').hasClass('show-dropdown')) {
          $('.fixed-plugin .dropdown').addClass('open');
        }

      }

      $(".navo_si1").click(function(){
        $(this).attr('data-a','1');
        $(".navo_si2").attr('data-a','0');
        $(".siNA2").hide('fast',function(){
          $(".siNA").show('fast');
        });
      });
      $(".navo_si2").click(function(){
        $(this).attr('data-a','1');
        $(".navo_si1").attr('data-a','0');
        $(".siNA").hide('fast',function(){
          $(".siNA2").show('fast');
        });
      });

      $('.fixed-plugin a').click(function(event) {
          // Alex if we click on switch, stop propagation of the event, so the dropdown will not be hide, otherwise we set the  section active
          if ($(this).hasClass('switch-trigger')) {
            if (event.stopPropagation) {
              event.stopPropagation();
            } else if (window.event) {
              window.event.cancelBubble = true;
            }
          }
        });

      $('.fixed-plugin .active-color span').click(function() {
        $full_page_background = $('.full-page-background');

        $(this).siblings().removeClass('active');
        $(this).addClass('active');

        var new_color = $(this).data('color');

        if ($sidebar.length != 0) {
          $sidebar.attr('data-color', new_color);
        }

        if ($full_page.length != 0) {
          $full_page.attr('filter-color', new_color);
        }

        if ($sidebar_responsive.length != 0) {
          $sidebar_responsive.attr('data-color', new_color);
        }
      });

      $('.fixed-plugin .background-color .badge').click(function() {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');

        var new_color = $(this).data('background-color');

        if ($sidebar.length != 0) {
          $sidebar.attr('data-background-color', new_color);
        }
      });

      $('.fixed-plugin .img-holder').click(function() {
        $full_page_background = $('.full-page-background');

        $(this).parent('li').siblings().removeClass('active');
        $(this).parent('li').addClass('active');


        var new_image = $(this).find("img").attr('src');

        if ($sidebar_img_container.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
          $sidebar_img_container.fadeOut('fast', function() {
            $sidebar_img_container.css('background-image', 'url("' + new_image + '")');
            $sidebar_img_container.fadeIn('fast');
          });
        }

        if ($full_page_background.length != 0 && $('.switch-sidebar-image input:checked').length != 0) {
          var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

          $full_page_background.fadeOut('fast', function() {
            $full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
            $full_page_background.fadeIn('fast');
          });
        }

        if ($('.switch-sidebar-image input:checked').length == 0) {
          var new_image = $('.fixed-plugin li.active .img-holder').find("img").attr('src');
          var new_image_full_page = $('.fixed-plugin li.active .img-holder').find('img').data('src');

          $sidebar_img_container.css('background-image', 'url("' + new_image + '")');
          $full_page_background.css('background-image', 'url("' + new_image_full_page + '")');
        }

        if ($sidebar_responsive.length != 0) {
          $sidebar_responsive.css('background-image', 'url("' + new_image + '")');
        }
      });

      $('.switch-sidebar-image input').change(function() {
        $full_page_background = $('.full-page-background');

        $input = $(this);

        if ($input.is(':checked')) {
          if ($sidebar_img_container.length != 0) {
            $sidebar_img_container.fadeIn('fast');
            $sidebar.attr('data-image', '#');
          }

          if ($full_page_background.length != 0) {
            $full_page_background.fadeIn('fast');
            $full_page.attr('data-image', '#');
          }

          background_image = true;
        } else {
          if ($sidebar_img_container.length != 0) {
            $sidebar.removeAttr('data-image');
            $sidebar_img_container.fadeOut('fast');
          }

          if ($full_page_background.length != 0) {
            $full_page.removeAttr('data-image', '#');
            $full_page_background.fadeOut('fast');
          }

          background_image = false;
        }
      });

      $('.switch-sidebar-mini input').change(function() {
        $body = $('body');

        $input = $(this);

        if (md.misc.sidebar_mini_active == true) {
          $('body').removeClass('sidebar-mini');
          md.misc.sidebar_mini_active = false;

          $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

        } else {

          $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar('destroy');

          setTimeout(function() {
            $('body').addClass('sidebar-mini');

            md.misc.sidebar_mini_active = true;
          }, 300);
        }

          // we simulate the window Resize so the charts will get updated in realtime.
          var simulateWindowResize = setInterval(function() {
            window.dispatchEvent(new Event('resize'));
          }, 180);

          // we stop the simulation of Window Resize after the animations are completed
          setTimeout(function() {
            clearInterval(simulateWindowResize);
          }, 1000);

        });
    });
});
MM2 = document.getElementById("modal-menu-text");
MM2.innerHTML = "<div class='text-center py-2'> Mon Menu </div> <ul class='list-group'>" 
MM3 = document.getElementsByClassName("sidebar-wrapper")[0]; 
li_MM3 = MM3.getElementsByTagName("li")
for (var i=0;i<li_MM3.length;i++){
  elt = li_MM3[i].getElementsByTagName("p")[0].innerHTML
  icon= li_MM3[i].getElementsByTagName("i")[0].innerHTML
  ahref= li_MM3[i].getElementsByTagName("a")[0].href
  MM2.innerHTML += "<a style='text-align:left;' href='"+ahref+"'><li style='text-align:left;' class='list-group-item btn btn-primary2'>"+"<i class='material-icons'>"+icon+"</i>&nbsp;&nbsp;"+elt+"</li></a>"
} 
MM2.innerHTML += "</ul>"
</script>
<script>
  {% if loader != None %}
  $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
      var ast = setTimeout(function(){
        $("#loader").fadeOut('slow');
      },1000);
    });
  {% endif %}
</script>
{% block script %}

{% endblock %}
</html>
