{% extends "base.html" %}
{% load i18n static compress iclock_tags common %}
{% block extrahead %}
  <!--suppress JSUnresolvedVariable -->
  {% compress css file admin_site_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/update-popup.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/rtl.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'layui/css/layui.css' %}?v=2.4.5"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/layui.widgets.min.css' %}?v=2.4.5"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/model.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/xadmin.main.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'multi-switch/multi-switch.min.css' %}?v=1.1.1"/>
    <link rel="stylesheet" type="text/css" href="{% static 'noty/noty.css' %}?v=3.1.4"/>
    <link rel="stylesheet" type="text/css" href="{% static 'spectrum/spectrum.min.css' %}?v=1.8.0"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/extension.css' %}?v=11.019"/>
    <!-- {#<link rel="stylesheet" type="text/css" href="{% static 'css/zTreeStyle/zTreeStyle.css' %}" />#} -->
    <!-- Use Awesome Style for zTree -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/awesomeStyle/awesome.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/awesomeStyle/awesome.extended.min.css' %}"/>
    <!-- Font-Awesome -->
    <link rel="stylesheet" type="text/css" href="{% static 'font-awesome/css/font-awesome.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/layui.admin.css' %}?v=1.3s"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-datepicker/css/datepicker.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-clockpicker/bootstrap-clockpicker.min.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/filters.css' %}?v=1.1.1"/>
  {% endcompress %}

{% endblock %}
{% block title %}{{ title|escape }} {% endblock %}

{% block extrastyle %}

{% endblock %}

{% block content %}
  {% autoescape off %}
    {% block north %}
      <div class="layui-layout layui-layout-admin">
        <div class="layui-header header">
          <ul class="layui-nav layui-layout-left layui-nav-menu" lay-filter="nav-menu" id="top_module_menu_nav">
            <li class="layui-nav-item layui-menu-logo-wdms" style="background: none;">
              <div class="layui-nav-logo top_logo{% if 'worktable' == current_app %}_focus{% endif %}">
                <div id="id_worktable" style="line-height: 55px;">
                </div>
              </div>
            </li>
          </ul>

          <ul class="layui-nav layui-layout-right" lay-filter="system-menu">
            {% if ''|thailand %}
              <li class="layui-nav-item">
                <a href="javascript:" ref="{% url 'biotime:emergency_button' %}" event="emergency_button"
                   title="{% trans 'convenient export' %}">
                  <i class="fa fa-warning (alias) fa-2x" style="vertical-align:middle;color: red"></i>
                  <!-- <img src="{{ MEDIA_URL }}images/emergency.gif" alt="" height="40" width="40"> -->
                </a>
              </li>
            {% endif %}
            {% if software_type != 9 %}
              <li class="layui-nav-item" style='top:-20px;right:-90px;'><span style='color: #7ac143' title=''>{{ request.user|separate_username_length }}</span>/{{ request.user|get_company_name }}</li>
              {% else %}
              <li class="layui-nav-item">{% trans 'system_welcome' %} {{ request.user|separate_username_length }}</li>
            {% endif %}
            <li class="layui-nav-item" style='top:10px;'>
              <a href="javascript:void(0);">
                <img border="0" align="top" alt="me" src="{{ MEDIA_URL }}img/att/me.png"
                     onmouseout="$(this).attr('src','{{ MEDIA_URL }}img/att/me.png')"
                     onmouseover="$(this).attr('src','{{ MEDIA_URL }}img/att/me1.png')"/>
              </a>
              <dl class="layui-nav-child system-user-menu">
                <dt class="user-popup-layer level-2">
                  <i class="desc-inner-arrow"></i>
                  <i class="desc-outer-arrow"></i>
                  <i class="desc-layer"></i> <span class="desc-header">
                  </span>
                </dt>
                {% if user.is_employee %}
                  <dd><a href="javascript:void(0);" ref='/staff/setLanguage/' event="changeLanguage"><i
                    class="fa fa-fw fa-globe"></i> {% trans 'system_userMenu_op_language' %}</a></dd>
                  <dd><a href="javascript:void(0);" ref='/staff/changePassword/' event="changePassword"><i
                    class="fa fa-fw fa-pencil-square-o"></i> {% trans 'system_userMenu_op_changePassword' %}</a></dd>
                {% else %}
                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:license' %}" event="license">
                    <i class="fa fa-fw fa-info-circle"></i>
                    {% trans 'system_userMenu_op_about' %}</a>
                    <hr>
                  </dd>
                  <dd><a href="{% url 'biotime:help_document_file' %}" target="_blank"><i
                    class="fa fa-fw fa-question"></i> {% trans 'system_userMenu_op_help' %}</a></dd>
                    {% if "Multi_company"|get_params:request == '1' %}
                        <dd><a href="javascript:void(0);" ref="{% url 'biotime:company_change' %}" event="changeCompany"><i
                          class="fa fa-fw fa-cog"></i> {% trans 'system_userMenu_op_company' %}</a>
                        </dd>
                    {% endif %}

                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:language_change' %}" event="changeLanguage"><i
                    class="fa fa-fw fa-globe"></i> {% trans 'system_userMenu_op_language' %}</a></dd>
                  <dd><a href="javascript:void(0);" ref="{% url 'biotime:password_change' %}" event="changePassword"><i
                    class="fa fa-fw fa-pencil-square-o"></i> {% trans 'system_userMenu_op_changePassword' %}</a></dd>
                 {% if user.is_superuser and platform == 'windows' %}
                  <dd><a href="javascript:void(0);"  event="update_info" class="notification-link">
                         <i class="fa fa-fw fa-bell"></i> {% trans 'Notification' %}<span class="notification-dot"></span></a>
                  </dd>
                {% endif %}
                {% endif %}
                <dd><a href="javascript:void(0);" ref="{% url 'biotime:logout' %}" event="logout"><i
                    class="fa fa-fw fa-sign-out"></i> {% trans 'system_userMenu_op_logout' %}</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item layui-hidden">
              <a href="javascript:void(0);" event="skin">
                <img border="0" align="top" alt="me" style="height: 25px; width: 25px;" class="layui-hide"
                     src="{{ MEDIA_URL }}img/att/skin_0.png"
                     onmouseout="$(this).attr('src','{{ MEDIA_URL }}img/att/skin_0.png')"
                     onmouseover="$(this).attr('src','{{ MEDIA_URL }}img/att/skin_1.png')"/>
              </a>
            </li>
          </ul>
          <div class="header-popup-layer level-2 layui-hide">
            <i class="desc-inner-arrow"></i>
            <i class="desc-outer-arrow"></i>
          </div>
        </div>
        {% block west %}
          <div class="layui-side layui-bg-black layui-hide" id="side_menu">
            <a href="javascript:void(0);" class="layui-hide-xs">
              <div class="zk-switch-menu align-right">
                <input type="text" style="display: none;" placeholder="...">
              </div>
            </a>
            <div class="layui-side-scroll">
              <ul class="layui-nav layui-nav-tree layui-inline" lay-filter="admin-nav" id="side_menu_nav"></ul>
            </div>
          </div>
        {% endblock west %}
        <div id="main_body" class="layui-body layui-hide">
          <div class="layui-progress" lay-filter="pace">
            <div class="layui-progress-bar layui-bg-orange" style="width: 0%;"></div>
          </div>
          <div class="layui-tab layui-tab-card" lay-allowclose="true" lay-filter="zkTab" id="zk-layui-tab">
            <ul class="layui-tab-title" id="zk-layui-tab-ul"></ul>
            <div class="layui-tab-content"></div>
          </div>
        </div>
        <div id="dashboard">{% block center %}{% endblock %}</div>
      </div>
    <div id="updatePopup" class="popup layui-layer-shade">
      <div class="popup-content">
        <span class="close">&times;</span>
        <p>An update is available. Please update the software.</p><p>&nbsp;</p>
        <pre id="combined_content" class="combine_contents"></pre><p>&nbsp;</p>
        <div class="checkbox_">
          <div class="form-check">
            <input class="form-check-input" onclick="dont_show_updates(0)" type="checkbox" value="" id="update_check_id">
            <label class="form-check-label" for="update_check_id">Don't show this again</label>
          </div>
          <div class="buttons">
            <button id="update_button" class="btn btn-primary">Update</button>
            <button id="close_button" class="btn btn-secondary" style="border: 1px solid #dedede;">Close</button>
          </div>
        </div>
      </div>
    </div>
    <div id="backdrop" class="layui-layer-shade" style="display:none;"></div>
    <div id="notificationPopup" class="notificationWindow"></div>
    {% endblock %}

    {% block init_menu %}
      <script>
        $(function () {
          window['set_session_storage']({
            'cached_actions_url': "{% url 'biotime:cached_actions' %}",
            'request_user': '{{ request.user }}',
            'request_user_id': '{{ request.user.pk }}'
          });
          $('body').adminSite({
            base_path: '{% static 'extends' %}/',
            menu: {{ menus|py_dict_to_js }},
            logout_url: "{% url 'biotime:logout' %}",
            pin_tab_url: "{% url 'biotime:pinned_tabs' %}",
            appearance_themes_url: "{% url 'biotime:appearance_themes' %}",
            column_order_url: "{% url 'biotime:column_order' %}"
          });
        });
      </script>
    {% endblock init_menu %}
    {% block extend_script %}
    {% endblock %}
  {% endautoescape %}

{% endblock content %}

{% block extrajs %}
  {{ block.super }}
  <script src="{% static 'layui/layui.js' %}?v=2.4.5" type="text/javascript"></script>
  {% compress js file admin_site_js %}
    <script src="{% static 'js/core.min.js' %}?v=0.5"></script>
    <script src="{% static 'js/base.js' %}?v=0.5"></script>
    <script src="{% static 'js/jquery/jquery.ztree.all-3.5.min.js' %}"></script>
    <script src="{% static 'js/jquery/jquery.ztree.exhide.min.js' %}"></script>
    <script src="{% static 'js/ztree.common.min.js' %}"></script>
    <script src="{% static 'noty/noty.min.js' %}?v3.1.4" type='text/javascript'></script>
    <script src="{% static 'spectrum/spectrum.min.js' %}?v1.8.0" type='text/javascript'></script>
    <script src="{% static 'multi-switch/multi-switch.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap-clockpicker/bootstrap-clockpicker.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'bootstrap-menu/BootstrapMenu.min.js' %}?v=1.1" type='text/javascript'></script>
    <script src="{% static 'bootstrap-datepicker/js/bootstrap-datepicker.min.js' %}" type='text/javascript'></script>
    <script src="{% static 'js/xadmin.plugin.filters_standalone.js' %}?v=1.8"></script>
    <script src="{% static 'js/actions.js' %}?v=1.7.4"></script>
    <script src="{% static 'js/data_grid.js' %}?v=1.7.5"></script>
    <script src="{% static 'js/admin_site.js' %}?v=1.5"></script>
    <script src="{% static 'js/ztree_select.js' %}?v=1.3"></script>
    <script src="{% static 'js/ztree_filter.js' %}?v=1.1"></script>
    <script src="{% static 'js/business_logic.js' %}?v=1.1"></script>
  {% endcompress %}
  {% block extension_js %}
    <script>
      //# sourceURL=dash_board_script.js
      var skin_css_background = window['get_local_storage']($.fn.adminSite.const.SKIN_CSS_BACKGROUND);
      if (skin_css_background) {
        $('.layui-layout-admin .layui-header').css({
          background: [skin_css_background]
        });
      } else {
        $('.layui-layout-admin .layui-header').css({
          // background: ["#7ac142"]
            background: ['#474b4f']
        });
        //{% if banner_url %}
        //  $('.layui-layout-admin .layui-header').css({
        //    background: interpolate('url(%s)', ['{{ MEDIA_URL }}img/banner/' + '{{ banner_url }}'])
        //  });
        //{% endif %}
      }
      $.fn.wdmsFillHead();
      function redirect(module_name) {
        $(interpolate('a[app=%s]', [module_name]), '#top_module_menu_nav').data('is_auto_triggered', true).trigger('click');
      }

      function wdms_index(e) {
          var per_lable;
          per_lable = $('#top_module_menu_nav > li:nth-child(3) > div > a');
          if (per_lable[0] === undefined){
            var initial_model = $('#top_module_menu_nav > li > div > a');
            for(var i=0; i<initial_model.length;i++){
                if (initial_model[i]){
                    per_lable = initial_model[i];
                    per_lable.click();
                    e.stopPropagation()
                }
            }
            setTimeout(wdms_index, 100);
        }else {
            per_lable.trigger('click');
            // $('#id_worktable').attr('onclick', redirect('iclock'))
        }
      }

      $(document).ready(function () {
          wdms_index()
      });
    </script>
      <script>
          // For Showing notification for the Upgradings
          var is_show_update={{ is_show_update }};
          const data = [];
          var upgrade = () => {
              $.ajax({
                  url: "/base/upgrade/"
                  ,type: "GET"
                  ,dataType: "json"
                  ,success: function(response, xhr){}
                  ,error: function(xhr, error, e){}
              });
          }

          var check_for_updates = () => {
            $.ajax({
              url: "/base/check_for_updates/",
              type: "GET",
              dataType: "json",
              success: function(response, xhr){
                if (response.update_available === true) {
                  const newItem = { id: 1, title: "Update", content: "An update is available. Please update the software." };
                  data.push(newItem);
                  showUpdatePopup(response.combined_lines);
                  $('.notification-dot').css('display', 'inline-block');
                }else {
                  $('#id_notification').addClass('layui-hide')
                }
              }
            });
          };

          {% if user.is_superuser and platform == 'windows' %}
              check_for_updates()
              user_update(0, is_show_update)
          {% endif %}

          function user_update(iflag, show_update) {
               if (show_update==1 || iflag==1){
                   $('#updatePopup').addClass('layui-hide')
               } else if (show_update==2){
                   $('#updatePopup').removeClass('layui-hide');
                   $('#updatePopup').addClass('show');
                   if (is_show_update==1){
                      $("#update_check_id").prop('checked',true)
                  } else {
                      $("#update_check_id").prop('checked',false)
                  }
               }else{
                   $('#updatePopup').removeClass('layui-hide')
                   $("#update_check_id").prop('checked',false)
               }
          }

          function showUpdatePopup(update_url) {
              var popup = document.getElementById("updatePopup");
              popup.style.display = "block";
              setTimeout(function() {
                  popup.classList.add("show");
              }, 100);

              var closeBtn = popup.querySelector(".close");
              closeBtn.addEventListener("click", function() {
                  popup.classList.remove("show");
                  setTimeout(function() {
                      popup.style.display = "none";
                  }, 300);
              });

              var closeButton = popup.querySelector("#close_button");
              if (closeButton) {
                  closeButton.addEventListener("click", function() {
                      popup.classList.remove("show");
                      setTimeout(function() {
                          popup.style.display = "none";
                      }, 300);
                  });
              }

              var updateButton = document.querySelector("#update_button");
              updateButton.addEventListener("click", function() {
                  upgrade();
                  popup.classList.remove("show");
                  setTimeout(function() {
                      popup.style.display = "none";
                  }, 300);
              });

              var combined_content = update_url.join('\n');
              document.getElementById('combined_content').innerText = combined_content;
          }

          function dont_show_updates(iflag) {
              var d = $('#update_check_id').prop('checked');
              var my_data;
              if (d == true) {
                  my_data = 1;
              } else {
                  my_data = 0;
              }
              is_show_update=my_data;
              if (iflag==0)
              {
              $.ajax({
                  type: "GET",
                  url: "/accounts/check_show_update/",
                  dataType: "json",
                  data: {'check_box_update_val': my_data},
                  success: function (response) {}
              });
          }else if (iflag==1){
              user_update(iflag);
           }
          }

          $(document).ready(function(){
              $('[event="update_info"]').on('click', function() {
                  $('.layui-layer-shade').css('display', 'block');
                  $('.layui-layer-shade').css('z-index', '9999');
                  $('.notificationWindow').css('right', '0');

                  const notificationWindow = document.getElementsByClassName("notificationWindow")[0];
                  if (notificationWindow) {
                      notificationWindow.innerHTML = "";

                      const closeButton = document.createElement("button");
                      closeButton.innerHTML = "&times;";
                      closeButton.classList.add("close");
                      closeButton.addEventListener("click", function() {
                          notificationWindow.style.right = "-400px";
                          $('.layui-layer-shade').css('display', 'none');
                      });
                      notificationWindow.appendChild(closeButton);

                      data.forEach(item => {
                          const notification = document.createElement("div");
                          notification.classList.add("notification");
                          notification.addEventListener("click", function() {
                              if (item.id === 1) {
                                  user_update(0, 2);
                              }
                              notificationWindow.style.right = "-400px";
                              $('.layui-layer-shade').css('display', 'none');
                          });
                          notification.innerHTML = `
                              <h3>${item.title}</h3>
                              <p>${item.content}</p>
                          `;
                          notificationWindow.appendChild(notification);
                      });
                  }
              });
          });
      </script>
  {% endblock extension_js %}
{% endblock extrajs %}