{% extends '../base.html' %}
{% load static %}
{% block content %}
<style>
  a.disabled
  {
    pointer-events: none;
    cursor: not-allowed;
  }
  .filterBtn
  {
    font-size:16px;
    border:none;
    color:white;
  }
  .filterSidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1111;
    top: 0;
    right: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05);
  }
  
  .head {
     /* padding: 8px 8px 8px 15px;  */
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
  }
  
  .filterSidenav a:hover {
    color: #f1f1f1;
  }
  
  .filterSidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    background:transparent;
    border:none;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .horizontal-line
  {
    border:1px solid grey;
    margin:0px;
  }
  .main-content
  {
    padding:10px;
  }
  .btn-active
  {
    border:2px solid green !important;
    color:green;
    font-weight:600;
    margin-top:1rem;
  }
  .btn-passive
  {
    border:2px solid red !important;
    color:red;
    font-weight:600;
    margin-top:1rem;
  }
</style>
<div class="container-fluid py-4">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-xl-11 col-sm-10 col-8 mb-xl-0 mb-4">
          {% comment %} <div class="card"> {% endcomment %}
            {% comment %} <div class="card-body p-3"> {% endcomment %}
              <div class="row">
                <div class="col-md-1 col-3">
                  <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md">
                    <i class="ri-netease-cloud-music-line text-lg opacity-10" aria-hidden="true"></i>
                  </div>
                </div>
                <div class="col-md-11 col-9" style="display:flex; align-items:center;">
                  <div class="numbers">
                    <h5 class="font-weight-bolder mb-0">Exam Scheduling</h5>
                  </div>
                </div>
              </div>
            {% comment %} </div> {% endcomment %}
          {% comment %} </div> {% endcomment %}
        </div>
        <div class="col-xl-1 col-sm-1 mb-xl-0 mb-4">
          <div class="row">
            <div class="col-12 text-end">
              <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md" onclick="window.location.href='/addExam/'">
                <i class="ri-user-add-line text-lg opacity-10" aria-hidden="true"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card mt-4">
        {% comment %} <div class="card mb-4" style="border:none; background:none; box-shadow:none;"> {% endcomment %}
          {% comment %} <div class="card-header pb-0">
            <h6>Authors table</h6>
          </div> {% endcomment %}
          <div class="card-body">
          {% if messages %}
          <div class="form-group">
          <div class="col-12">
              {% for message in messages %}
              {% if message.tags == "error" %}
                  <div class="alert alert-danger alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                  {{ message }}
                  </div>
              {% elif message.tags == "success" %}
                  <div class="alert alert-success alert-dismissible fade show" role="alert" style="color:white; font-weight:600;">
                  {{ message }}
                  </div>
              {% endif %}
              {% endfor %}
            </div>
          </div>
          {% endif %}
          <div class="position-fixed bottom-0 end-0 p-3">
            <div id="toast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="d-flex">
                <div id="toast-body" class="toast-body"></div>
                {% comment %} <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button> {% endcomment %}
              </div>
            </div>
          </div>
          <div class="table-responsive p-0">
            {% comment %} table {% endcomment %}
            <div id="toolbar">
              <button class=" btn filterBtn bg-gradient-primary"onclick="openNav()"><i class="ri-filter-3-line"></i> Filters</button>
            </div>
            <table
              id="table"
              data-toolbar="#toolbar"
              data-search="true"
              data-show-refresh="true"
              data-show-toggle="true"
              {% comment %} data-show-fullscreen="true" {% endcomment %}
              data-show-columns="true"
              data-show-columns-toggle-all="true"
              data-detail-view="false"
              data-show-export="true"
              data-click-to-select="false"
              data-detail-formatter="detailFormatter"
              data-minimum-count-columns="2"
              data-show-pagination-switch="true"
              data-pagination="true"
              data-id-field="id"
              data-page-list="[10, 25, 50, 100, all]"
              {% comment %} data-show-footer="true" {% endcomment %}
              data-side-pagination="server"
              data-url="{% url 'letExam'  %}"
              data-response-handler="responseHandler"
              data-pagination-v-align="top">
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% comment %} delete reason  {% endcomment %}
  <div class="modal fade" id="delete" 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">Update Reason for Deletion: </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
    <form>
      <div class="modal-body">
        {% csrf_token %}
        <div class="form-group">
          <label for="message-text" class="col-form-label">Reason:</label>
          <textarea class="form-control" name="delete_reason"></textarea>
          <input type="hidden" class="form-control" name="delete_id">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn bg-gradient-primary" onclick="deleteFun()">Proceed</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  {% comment %} delete reason  {% endcomment %}
  {% comment %} FILTERS {% endcomment %}
  <div id="mySidenav" class=" filterSidenav">
    <div class=" container">
        <a href="javascript:void(0)"><p class="head"><i class="ri-filter-3-line"></i> Filters</p></a>
        <button class="closebtn" onclick="closeNav()">&times;</button>
      <hr class="horizontal-line">
      <div class="row">
        <div class="col-sm-12">
          <label class="col-form-label">Standard:</label>
          <div class="head">
            <select class="form-control family" onchange="changeStatusButton(this.value,'standard')">
              <option selected="yes" disabled="yes">--Select any Standard--</option>
              {% for standard in standard %}
              <option value="{{standard.standardName}}">{{standard.standardName}}</option>
              {% endfor%}
            </select>
            </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <label class="col-form-label">Training Type:</label>
          <div class="head">
            <select class="form-control family" onchange="changeStatusButton(this.value,'type')">
              <option selected="yes" disabled="yes">---Select option---</option> 
              <option value="CQI/IRCA">CQI/IRCA</option> 
              <option value="EG">EG</option> 
              <option value="PECB">PECB</option> 
              <option value="Un Accreditation">Un Accreditation</option>
            </select>
            </div>
        </div>
      </div>
        <div class="row">
          <div class="col-sm-6">
            <label class="col-form-label">Start Date:</label>
            <input type="date"class="form-control family" onchange="changeStatusButton(this.value,'start','date')">
          </div>
          <div class="col-sm-6">
            <label class="col-form-label">End Date:</label>
            <input type="date"class="form-control family" onchange="changeStatusButton(this.value,'end','date')">
          </div>
          <div>
    </div>
  </div>
    {% comment %} FILTERS {% endcomment %}
    <script>
      function openNav() {
        document.getElementById("mySidenav").style.width = "315px";
      }
      
      function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
      }
      </script>
  {% csrf_token %}
  <script>
    
    var $table = $('#table')
    var $remove = $('#remove')
    var selections = []
  // filters search
  var currentStatus = ''; // Initialize with an empty string
    var queryObject = {};
    function changeStatusButton(newStatus,queryName,def=null) 
    {
      currentStatus = newStatus;
      if (def == "date") {
        if (queryName == "end" && queryObject["start"]) {
            queryObject[queryName] = currentStatus;
            queryObject["start"] = queryObject["start"];
        } else if (queryName == "start" && !queryObject["end"]) {
            queryObject["end"] = new Date().toISOString().split('T')[0];
            queryObject[queryName] = currentStatus;
        } else {
            queryObject[queryName] = currentStatus;
        }
    } else {
        queryObject[queryName] = currentStatus;
    }
        $('#table').bootstrapTable('refresh', {
            query: queryObject
        });
    }
    function getIdSelections() {
      return $.map($table.bootstrapTable('getSelections'), function (row) {
        return row.id
      })
    }
  
    function responseHandler(res) {
      $.each(res.rows, function (i, row) {
        row.state = $.inArray(row.id, selections) !== -1
      })
      return res
    }
  
    function detailFormatter(index, row) {
      var html = []
      $.each(row, function (key, value) {
        html.push('<p><b>' + key + ':</b> ' + value + '</p>')
      })
      return html.join('')
    }
    function deleteFun() {
      let delete_reason = $('[name="delete_reason"]').val();
      let delete_id = $('[name="delete_id"]').val();
      var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
      $.ajax({
          url: '/delete_exam/',  
          method: 'POST',
          data: {
              "id": delete_id,
              "reason": delete_reason
          },
          headers: {"X-CSRFToken": csrf_token},
          success: function (response) {
              $("#delete").modal("hide");
              if (response.success) {
                  $table.bootstrapTable('remove', {
                      field: 'id',
                      values: [response.id]
                  });
                  snackbar("Successfully Deleted");
              } else {
                  snackbar('Failed to delete.');
              }
          },
          error: function () {
              console.log('Failed to delete row. Please try again later.');
          }
      });
  }
    function operateFormatter(value, row, index) {
      var userType = "{{ request.session.user_type }}";
      if (userType === 'Team') {
        return [
            '<a class="like" href="javascript:void(0)" title="Edit">',
            '<i class="ri-edit-line"></i>',
            '</a>  '
        ].join('');
    } else {
        return [
            '<a class="like" href="javascript:void(0)" title="Edit">',
            '<i class="ri-edit-line"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<i class="ri-delete-bin-5-line" style="color:red;"></i>',
            '</a>'
        ].join('');
    }
    }
  
    window.operateEvents = {
      'click .like': function (e, value, row, index) {
        window.location.href = "/edit_exam/?id="+row.id;
      },
      'click .remove': function (e, value, row, index) {
        var id= row.id;
        $('[name="delete_reason"]').val('');
        $('[name="delete_id"]').val(row.id);
        $("#delete").modal("show");
      }
    }
  
    function totalTextFormatter(data) {
      return 'Total'
    }
  
    function totalNameFormatter(data) {
      return data.length
    }
  
    function totalPriceFormatter(data) {
      var field = this.field
      return '$' + data.map(function (row) {
        return +row[field].substring(1)
      }).reduce(function (sum, i) {
        return sum + i
      }, 0)
    }
  
    function initTable() {
      $table.bootstrapTable('destroy').bootstrapTable({
        locale: $('#locale').val(),
        columns: 
          [ {
            title: 'S No.',
            field: 'sno',
            align: 'center',
            valign: 'middle',
          }, 
          {
            title: 'Trainer',
            field: 'trainer',
            align: 'center',
            valign: 'middle',
          }, 
          {
            title: 'Students',
            field: 'student',
            align: 'center',
            valign: 'middle',
          }, 
          {
            title: 'Exam Dates & Timing',
            field: 'startDate',
            align: 'center',
            valign: 'middle',
            formatter: function(value, row, index)
            {
                  return [
                  '<div><b>Starts on: </b>'+row.startDate+'</div>',
                  '<div><b>Starting at: </b>'+row.start_timing+'</div>',
                  '<div><b>End at: </b>'+row.end_timing+'</div>'
                ].join('')            
            }
          }, 
        //   {
        //     title: 'Exam Link',
        //     field: 'link',
        //     align: 'center',
        //     valign: 'middle',
        //   }, 
          {
            title: 'Standards',
            field: 'standard',
            align: 'center',
            valign: 'middle'
          }, 
          {
            title: 'Insert Date',
            field: 'created_at',
            align: 'center',
            valign: 'middle',
            sortable: true
          },
           {
            field: 'operate',
            title: 'Action',
            align: 'center',
            clickToSelect: false,
            events: window.operateEvents,
            formatter: operateFormatter
          }],
          showExport: true,
          exportTypes: ['excel', 'csv']
      })
      $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table',
      function () {
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
  
        // save your data, here just save the current page
        selections = getIdSelections()
        // push or splice the selections if you want to save all data selections
      })
      $table.on('all.bs.table', function (e, name, args) {
      })
      $remove.click(function () {
        var ids = getIdSelections()
        $table.bootstrapTable('remove', {
          field: 'id',
          values: ids
        })
        $remove.prop('disabled', true)
      })
    }
  
      initTable()
  
      $table.css('height', '65%');
    
      $(document).ready(function() {
        var $table = $('#table');
        
        var columnWidths = ['2%', '2%', '20%', '20%', '20%', '20%', '10%'];
      
        $table.find('thead th').each(function(index) {
          $(this).css('width', columnWidths[index]);
        });
      });  
  </script>
  {% endblock content %}