{% extends 'domaincontroll/menu.html' %}
{% load static %}

{% block menuOpen %}
  <li class="nav-item has-treeview">
{% endblock %}

{% block jsCode %}


  let menuItem = document.getElementById('mainItem3');
  menuItem.classList.add("active");

  document.title = "Группы";

  let arrTabs = document.getElementsByName('tbs');
  arrTabs[0].classList.add("active");
  arrTabs[0].style.color="#fff";

  let boxElems = document.getElementsByName('smallBox');
  let maxHeight = 0;

  for (let box of boxElems) {
    if (box.clientHeight > maxHeight) maxHeight = box.clientHeight;
  }

  for (let box of boxElems) {
    if (box.clientHeight <= maxHeight) {
      box.style.paddingBottom = maxHeight - box.clientHeight + "px";
    }
  }


 $(function () {

  let arrUniqueVal = [];// array of unique dates of finishing jobs
  let arrEnd = [];// array of dates of finishing jobs
  let arrStatus = [];// array of 1 and 0
  let jobsTable = document.getElementById('jobsTable');// data table

  // a loop for filling in the array of unique dates for creating an x axis at the chart
  for(let row of jobsTable.children) {
    if (!(arrUniqueVal.includes(row.lastElementChild.innerHTML, 0)==1)) {
      arrUniqueVal.push(row.lastElementChild.innerHTML);
    }
  }


  for (let i=0; i < arrUniqueVal.length; i++) {
    for (let j=i+1; j < arrUniqueVal.length; j++) {
      if (arrUniqueVal[i] > arrUniqueVal[j]) {
        let buf=0;
        buf = arrUniqueVal[i];
        arrUniqueVal[i] = arrUniqueVal[j];
        arrUniqueVal[j] = buf;
      }
    }
  }


  var completedJobs = []; // an array for creating a chart - succeed jobs
  var failedJobs = [];// an array for creating a chart - failed jobs
  var completedJobs2 = [];
  var failedJobs2 = [];
  let counter = -1;

  let arrCountr=1;
  let a;
  let b;

  let newArr = [];

  for (let j=0; j < jobsTable.children.length; j++) {
    if (j == 0) {newArr.push([jobsTable.children[j].lastElementChild.innerHTML, 1, jobsTable.children[j].children[3].innerHTML]); continue;}
    for (let i = Object.keys(newArr).length-1; i >= 0; i--) {
      if (newArr[i][0] == jobsTable.children[j].lastElementChild.innerHTML) {
        newArr[i][1] = Number(newArr[i][1]) + 1;
        break;
      }
      else {
        newArr.push([jobsTable.children[j].lastElementChild.innerHTML, 1, jobsTable.children[j].children[3].innerHTML]);
        break;
      }
    }
  }

  for (let i=0; i < Object.keys(newArr).length; i++) {
    for (let j=i+1; j < Object.keys(newArr).length; j++) {
      let buf=0;
      if (Number(newArr[i][0].slice(0,2)) > Number(newArr[j][0].slice(0,2))) {
      /*  buf = newArr[i][0];
        newArr[i][0] = newArr[j][0];
        newArr[j][0] = buf;*/

        buf = newArr[i];
        newArr[i] = newArr[j];
        newArr[j] = buf;

      }
    }
  }


    for (let i = 0; i < Object.keys(newArr).length; i++) {
      if (Number(newArr[i][2]) == 1) {
        completedJobs.push({x:String(i), y:Number(newArr[i][1])});
        failedJobs.push({x:String(i), y:0});
      }
      else {
        failedJobs.push({x:String(i), y:Number(newArr[i][1])});
        completedJobs.push({x:String(i), y:0});
      }
    }


 $("#chart").shieldChart({
 theme: "light",
 exportOptions: {
 image: false,
 print: false
 },
 primaryHeader: {
 text: ""
 },
 chartLegend: {
 align: 'right',
 verticalAlign: 'top',
 renderDirection: 'vertical'
 },
 seriesSettings: {
 line: {
 enablePointSelection: true,
 pointMark: {
 activeSettings: {
 pointSelectedState: {
 drawWidth: 4,
 drawRadius: 4
 }
 }
 }
 }
 },
 axisY: {
 min: 0,
 max: 5,
 title: {
 text: "ЗАДАНИЯ",
 style: {
 color: '#000'
 }
 }
 },
 axisX: {
 categoricalValues: arrUniqueVal,
 title: {
 text: "ВРЕМЯ",
 style: {
 color: '#000',
 fontSize: '16px'
 }
 }
 },
 dataSeries: [{
 seriesType: 'line',
 collectionAlias: "ВЫПОЛНЕНО",
 data: completedJobs
 }, {
 seriesType: 'line',
 color: '#dc3545',
 collectionAlias: "НЕ ВЫПОЛНЕНО",
 data: failedJobs
 }]
 });
 });


{% endblock %}


{% block mainHeader %}
        {% include 'playbooks/includes/inc_menu_ansible.html' %}
{% endblock %}


{% block wrapper %}

{% include "playbooks/_modal.html" %}
<div class="content-wrapper">
  <div class="content-header">
      <div class="container-fluid">
  </div><!-- /.container-fluid -->
</div>

    <div class="modal_win">
    {% if messages %}
      {% for message in messages %}
        <div style="border-radius:0; position: absolute; z-index: 100000; width: 100%" {% if message.tags %} class="alert alert-icon alert-{{ message.tags }} alert-dismissible fade show mb-0" role="alert" {% endif %}>
          {{ message }}
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      {% endfor %}
    {% endif %}

        

 </div>
        <div style="border-radius:0; display: none; z-index: 100000; position: absolute;" class="delalert_group alert alert-icon alert-success alert-dismissible fade show mb-0" role="alert">
            Группа удалена
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

<!--    этот код разместить в base.html-->
<section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body">
            <div class="nav-tabs-custom">
              <div class="tab-content">
<!--    этот код разместить в base.html-->
         <div class="tab-pane active" id="tab_4" name="pane">
                <div>
                  <div class="mb-2">
                      <ul class="nav nav-pills ml-auto p-2" style="float:left;">
                       <li class="nav-item"><a class="nav-link active" href="#tab_4" data-toggle="tab" name="groupTabs" style="background: #6c757d;" onclick="highlightGroupTab2(this)">Созданные</a></li>
                      <li class="nav-item"><a class="nav-link list_domain_group" href="#tab_6" data-toggle="tab" name="groupTabs" onclick="highlightGroupTab2(this)">Доменные</a></li>

                    </ul>
                    <div class="float-right">
                      <ul class="nav nav-pills ml-auto p-2">
                      {% if permissions.1.1 or is_admin %}
                        <li class="nav-item" style="margin-right:5px"><button id="add_hosts" class="btn btn-block bg-gradient-secondary" type="button" name="button">Добавить</button></li>
                      {% endif %}
                      {% if permissions.1.3 or is_admin %}
                        <li class="nav-item" style="margin-right:5px"><button type="button" class="target_delete btn btn-block bg-gradient-secondary" data-toggle="modal" data-target="#deleteModel" disabled="disabled">Удалить</button></li>
                      {% endif %}
                      </ul>
                    </div>
                  </div>
                </div>

            <div class="box-body">
            <table class="table table-bordered table-hover">
              <thead>
              <tr>
                <th width="3%"></th>
                <th>Имя группы</th>
                <th>Описание</th>
                <th>Количество машин</th>
                <th></th>
              </tr>

              </thead>


                    {% for object in object_list %}
                        <tr>
                            <td width="3%"><div class="custom-control custom-checkbox" style="transform: translateX(15%)"><input class="groups_check custom-control-input" type="checkbox" id="groups{{object.id}}"><label for="groups{{object.id}}" class="custom-control-label" style="cursor: pointer"></label><div></td>

                            <td id="name{{object.pk}}">{{object.name}}</td>
                               <td>{{object.description}}</td>
                            <td>{{object.quantity}}</td>
                             <td>
                            {% if permissions.1.2 or is_admin %}
                             <button type="button" class="update-group btn btn-sm btn-primary" data-form-url="{% url 'playbooks:group_update' object.pk %}">
                                    <span class="fa fa-pencil"></span>
                             </button>
                            {% endif %}
                                <button type="button" class="read-group btn btn-sm btn-primary" data-form-url="{% url 'playbooks:group_read' object.pk %}">
                                    <span class="fa fa-eye"></span>
                                </button>
                             </td>
                        </tr>
                    {% endfor %}

              <tfoot>
              <tr>
                <th></th>
                <th>Имя группы</th>
                <th>Описание</th>
                <th>Количество машин</th>
                  <th></th>
              </tr>
              </tfoot>
            </table>
                        <ul class="pagination">

            {% if page_obj.has_previous %}
                 <li class="page-item">
                    <a class="page-link" href="?page=1">&laquo;</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}"><</a>
                </li>

            {% endif %}

             <li class="page-item">
                <span class="page-link"  class="current">
                    Стр. {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}.
                </span>
             </li>

            {% if page_obj.has_next %}
                <li class="page-item">

                    <a class="page-link"  href="?page={{ page_obj.next_page_number }}">></a>
                </li>
                <li class="page-item">
                    <a class="page-link"  href="?page={{ page_obj.paginator.num_pages }}">&raquo;</a>
                </li>
            {% endif %}

            </ul>

          </div>
          </div>

           <div class="tab-pane" id="tab_6" name="pane">
                <div>
                  <div class="mb-2">
                      <ul class="nav nav-pills ml-auto p-2" style="float:left;">
                      <li class="nav-item"><a class="nav-link" href="#tab_4" data-toggle="tab" onclick="highlightGroupTab2(this)">Созданные</a></li>
                      <li class="nav-item"><a class="nav-link active" href="#tab_6" data-toggle="tab" style="background: #6c757d;" onclick="highlightGroupTab2(this)">Доменные</a></li>

                    </ul>

                  </div>
                </div>

            <div class="box-body">
            <table class="table table-bordered table-hover table-domain">
              <thead>
              <tr>
                <th width="3%"></th>
                <th>Имя группы</th>
                <th>Описание</th>
                <th>Количество машин</th>
                <th></th>
              </tr>

              </thead>



              <tfoot>
              <tr>
                <th></th>
                <th>Имя группы</th>
                <th>Описание</th>
                <th>Количество машин</th>
                  <th></th>
              </tr>
              </tfoot>
            </table>
          </div>
          </div>

                        <!--    этот код разместить в base.html-->
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- форма групп AD-->
                   <form enctype="multipart/form-data" id="clean" method="post" action="">
                      <div class="modal fade" id="modal4" style="display: none" aria-modal="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h4 class="modal-title">Группа</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                      <span aria-hidden="true">×</span>
                                    </button>
                                  </div>
                                  <div class="modal-body">
                                      <div class="name_group">
                                            <h4>Название: <span id="name_group"></span></h4>

                                          </div>
                                            <div class="description">
                                            <h4>Описание:  <span id="description_group"></span></h4>

                                          </div>
                                            <div class="count_pc">
                                            <h4>Количество хостов:<span id="count_pc"></span></h4>

                                          </div>
                                            <div class="hosts">
                                                <h4>Хосты:</h4>
                                                <ul id="hosts_pc" class="">

                                                </ul>
                                              </div>
                                    <div class="modal-footer">
                                      <button type="button" id="close_clean" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                              </div>
                              <!-- /.modal-dialog -->
                            </div>
                            </div>
                          </form>


</section>

<!-- Modal -->
<div class="modal fade" id="deleteModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Удаление группы</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <b>Удалить группу(ы)</b><span class="text_template"></span><b>?</b>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button class="groups_delete_all btn btn-danger">Удалить</button>
      </div>
    </div>
  </div>
</div>



<!--    этот код разместить в base.html-->
<script src="{% static 'assets/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'assets/js/popper.min.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>


<script type="text/javascript">


<!--        Показ доменных групп на ajax-->

        $(window).ready(function(){

            $.ajax({
                    type: 'POST',
                    url: "{% url 'playbooks:list_domain' %}",
                    headers:{"X-CSRFToken":"{{ csrf_token }}"},

                    dataType: "json",

                    success: function(data){

                         for (let i= 0; i < data.group.length; i++){

                            $('.table-domain').append(`

                                            <tr>
                                            <td></td>
                                            <td class="name_group">`+data.group[i].name+`</td>
                                            <td>`+data.group[i].description+`</td>
                                            <td>`+data.group[i].count+`</td>
                                            <td>
                                                <button type="button" class="group-ad btn btn-sm btn-primary" data-toggle="modal" data-target="#modal4" data-form-url="">
                                                            <span class="fa fa-eye"></span>
                                                </button>
                                            </td>
                                        </tr>
                                `)


                         }
                    }
                })
        })



        <!--удаление checkbox-->
        var list_box = []

        $('.groups_check').on('click', function(){
            let check_temp = $('.groups_check:checked')

            let local_list_box = []
            for (let i = 0; i < check_temp.length; i++){
                let id_template = check_temp[i].id

                let id_res = id_template.slice(6)
                local_list_box.push(id_res)

            }
            list_box = local_list_box



            if (list_box.length > 0){
                $('.target_delete').prop('disabled', false);
            }
            else{

                $('.target_delete').prop('disabled', true);

            }

        $('.target_delete').on('click', function(){

            let str_template = ' '
            for (let i = 0; i < list_box.length; i++){

                let groups = $(`#name`+ list_box[i]).text()

                str_template += groups + ', '
            }
            let res_str = str_template.slice(0, -2) + ' '
            $('.text_template').text(res_str)


        })


        })

        $('.groups_delete_all').on('click', function(){


            if (list_box.length > 0){
                $.ajax({
                    type: 'POST',
                    url: "{% url 'playbooks:groups_deletebox' %}",
                    headers:{"X-CSRFToken":"{{ csrf_token }}"},

                    dataType: "json",

                    data: {'result': JSON.stringify(list_box)},

                    success: function(data){
                         $('.delalert_group').css('display', 'block')

                            window.location.reload()




                    }

                })

            }
        })




        function highlightGroupTab2(tab) {
          let tabID=tab.href.substr(-5, 5);
          let activeTAB=document.getElementById(tabID);
          ulEl=activeTAB.firstElementChild.firstElementChild.firstElementChild.children;

          if (tabID=="tab_4") {
           for (let li of ulEl) {
              li.firstElementChild.classList.remove("active");
              li.firstElementChild.style.background = "";
              li.firstElementChild.style.color = "";
            }
            ulEl[0].innerHTML='<a class="nav-link active" href="#tab_4" data-toggle="tab" name="groupTabs" style="background: #6c757d; font-color:#fff" onclick="highlightGroupTab(this)">Созданные</a>';

          }

          if (tabID=="tab_6") {
            for (let li of ulEl) {
              li.firstElementChild.classList.remove("active");
              li.firstElementChild.style.background = "";
              li.firstElementChild.style.color = "";
            }
            ulEl[1].innerHTML='<a class="nav-link active" href="#tab_6" data-toggle="tab" style="background: #6c757d; font-color:#fff" onclick="highlightGroupTab(this)">Доменные</a>';

          }
        }


        function close_clean(){
            $('#close_clean').on('click', function () {


            $('.clean').html('');
            $('#hosts_pc').html('')
            })

            $('.close').on('click', function () {


                $('.clean').html('');
                $('#hosts_pc').html('')
                })

            $(document).click( function(e){
                if ( $(e.target).closest('#clean').length ) {
                    // клик внутри элемента
                    return;
                }
                // клик снаружи элемента
                 $('.clean').html('');
                $('#hosts_pc').html('')
            });

        }

        close_clean();


        $(document).on('click', '.group-ad', function () {

                let target_href = event.target;

                let name_gr = $(this).closest('td').siblings('.name_group').html()


                    $.ajax({
                        type: "POST",
                        headers:{"X-CSRFToken":"{{ csrf_token }}"},
                        url: '{% url 'playbooks:group_ad_read' %}',

                        dataType: "json",

                        data: {'name_gr': name_gr},
                        success: function(data){

                            let name_group = data.result.name
                            let group_description = data.result.description
                            let count_pc = data.result.count
                            let computers = data.result.computers

                            $("#name_group").text(name_group);
                            $("#description_group").text(group_description);
                            $("#count_pc").text(count_pc);


                            for (let i=0; i< computers.length; i++){

                                $("#hosts_pc").append(`<li> `+computers[i]+`</li>`);

                            }


                        }

                    })


            })


        function close_modal(){
            $('.modal_win').fadeOut()
        }

        setTimeout(close_modal, 1000)


        if (localStorage.getItem('message'))
        {
            $('.modal_win').append(
            `<div style="border-radius:0; position: absolute; z-index: 100000; width: 100%"  class="alert alert-icon alert-success alert-dismissible fade show mb-0" role="alert">`
             + localStorage.getItem('message')+
              `<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>`)
            localStorage.removeItem('message');
        }
<!--        UPDATE-->
        $(document).ready(function () {

            let my_modal = $("#create-modal");


            $(".update-group").click(function () {

              const url_form = $(this).attr('data-form-url')
              my_modal.load(url_form, function () {
                  my_modal.modal("show"); // Open Modal
                  $("#updateForm").submit(function (e) {
                      e.preventDefault(); // Cancel the default action
                      $.ajax({
                          method: "POST",
                          data: $(this).serialize(),
                          dataType: "json",
                          url: url_form,
                          success: function (response) {
                              if (response.message == 'success'){
                                    console.log(response.message_alert)
                                    document.location.href = "{% url 'playbooks:groups' %}";
                                    my_modal.modal('hide');

                                    localStorage.setItem('message', response.message_alert);
                              }
                              if (response.message == 'error'){
                                console.log(response)
                                    $('.error_name').empty()
                                    $('.error_description').empty()
                                    $('.error_error_model_host').empty()
                                    $('.error_hosts_choice').empty()
                                    let data = JSON.parse(response.errors)
                                    console.log(data)
                                    Object.keys(data).forEach(function(key) {
                                       if ('error_name'.search(key) > 0){
                                            $('.error_name').empty()
                                            $('.error_name').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                       }
                                       if ('error_description'.search(key) > 0){
                                            $('.error_description').empty()
                                            $('.error_description').append(`<p class="help-block">{data[key][0]['message']}</p>`)
                                       }
                                       if ('error_model_host'.search(key) > 0){
                                            $('.error_error_model_host').empty()
                                            $('.error_error_model_host').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                       }
                                       if ('error_hosts_choice'.search(key) > 0){
                                            $('.error_hosts_choice').empty()
                                            $('.error_hosts_choice').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                       }

                                    });



                              }




                          },
                          error: function (response) {
                                console.log(response)
                          },});
                      });
                  });
              });
          });

<!--        CREATE  -->
        $(document).ready(function () {

                    let my_modal = $("#create-modal");
                    const url_form = "{% url 'playbooks:grouphosts_add'%}";

                    $("#add_hosts").click(function () {
                      my_modal.load(url_form, function () {
                          my_modal.modal("show"); // Open Modal
                          $("#addGroup").submit(function (e) {
                              e.preventDefault(); // Cancel the default action
                              $.ajax({
                                  method: "POST",
                                  data: $(this).serialize(),
                                  dataType: "json",
                                  url: "{% url 'playbooks:grouphosts_add' %}",
                                  success: function (response) {
                                      if (response.message == 'success'){
                                            document.location.href = "{% url 'playbooks:groups' %}";
                                            my_modal.modal('hide');
                                            localStorage.setItem('message', response.message_alert);
                                      }
                                      if (response.message == 'error'){
                                        console.log(response)
                                            $('.error_name').empty()
                                            $('.error_description').empty()
                                            $('.error_error_model_host').empty()
                                            $('.error_hosts_choice').empty()
                                            let data = JSON.parse(response.errors)
                                            console.log(data)
                                            Object.keys(data).forEach(function(key) {
                                               if ('error_name'.search(key) > 0){
                                                    $('.error_name').empty()
                                                    $('.error_name').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                               }
                                               if ('error_description'.search(key) > 0){
                                                    $('.error_description').empty()
                                                    $('.error_description').append(`<p class="help-block">{data[key][0]['message']}</p>`)
                                               }
                                               if ('error_model_host'.search(key) > 0){
                                                    $('.error_error_model_host').empty()
                                                    $('.error_error_model_host').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                               }
                                               if ('error_hosts_choice'.search(key) > 0){
                                                    $('.error_hosts_choice').empty()
                                                    $('.error_hosts_choice').append(`<p class="help-block">${data[key][0]['message']}</p>`)
                                               }

                                            });



                                      }




                                  },
                                  error: function (response) {
                                        console.log(response)
                                  },});
                              });
                          });
                      });
                  });
      $(function () {




           // Create grouphosts synchronous

   // Delete group buttons - formURL is retrieved from the data of the element
          $(".delete-group").each(function () {
              $(this).modalForm({formURL: $(this).data("form-url"), isDeleteForm: true});
          });




          var asyncSuccessMessageUpdate = [
            "<div ",
            "style='position:fixed;top:0;z-index:10000;width:100%;border-radius:0;' ",
            "class='alert alert-icon alert-success alert-dismissible fade show mb-0' role='alert'>",
            "Success: Book was updated.",
            "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>",
            "<span aria-hidden='true'>&times;</span>",
            "</button>",
            "</div>",
            "<script>",
            "$('.alert').fadeTo(2000, 500).slideUp(500, function () {$('.alert').slideUp(500).remove();});",
            "<\/script>"
          ].join("");



         // modal form






          function readGroupModalForm() {
            $(".read-group").each(function () {
                $(this).modalForm({formURL: $(this).data("form-url")});
            });
          }
          readGroupModalForm();



        function reinstantiateModalForms() {
            createBookAsyncModalForm();
            readBookModalForm();
            deleteBookModalForm();
          }


        });










 </script>
{% endblock %}