{% extends '../base.html' %}
{% load static %}
{% block content %}
<style>
  .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 {
    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;
    font-size:12px;
  }
  .btn-passive
  {
    border:2px solid red !important;
    color:red;
    font-weight:600;
    margin-top:1rem;
    font-size:12px;
  }
  .btn-process
  {
    border:2px solid blue !important;
    color:blue;
    font-weight:600;
    margin-top:1rem;
    font-size:12px;
  }
  @media screen and (max-height: 450px) {
    .filterSidenav {padding-top: 15px;}
    .filterSidenav a {font-size: 18px;}
  }
</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-presentation-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">List of Trainer's</h5>
                  </div>
                </div>
              </div>
            {% comment %} </div> {% endcomment %}
          {% comment %} </div> {% endcomment %}
        </div>
        <div class="col-xl-1 col-sm-2 col-4 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" data-toggle="modal" data-target="#addIP">
              {% comment %} <div class="icon icon-shape bg-gradient-primary shadow text-center border-radius-md" onclick="window.location.href='/addLead/'"> {% endcomment %}
                <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="true"
              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 'letTrainerList'  %}"
              data-response-handler="responseHandler"
              data-pagination-v-align="top"
              >
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% comment %} modal {% endcomment %}
  <div class="modal fade" id="addIP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Add New Trainer Details: </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="post" action="{% url 'addTrainer_save' %}">
        <div class="modal-body">
            {% csrf_token %}
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Name:</label>
                  <input type="text" class="form-control" name="name" placeholder="Enter Trainer's Name">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's E-Mail:</label>
                  <input type="text" class="form-control" name="email" placeholder="Enter Trainer's E-Mail">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Contact Number:</label>
                  <input type="text" class="form-control" name="phone" placeholder="Enter Trainer's Contact Number">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">From Where ? </label>
                  <input type="text" class="form-control" name="where" placeholder="From Where you get this lead ?">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Language:</label>
                  <select class="form-control" name="language">
                    <option selected="yes" disabled="yes">--Select--</option>
                    <option value="English">English</option>
                    <option value="Arabic">Arabic</option>
                    <option value="Spanish">Spanish</option>
                    <option value="Japnese">Japnese</option>
                    <option value="French">French</option>
                    <option value="German">German</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Country </label>
                  <select name="country" class="form-control" id="country">
                    <option selected="yes" disabled="yes">---Please Choose an option---</option>
                    {% for code, name in countries %}
                    <option value="{{ name }}" data-numeric="{{numeric}}" data-code="{{code}}">{{ name }}</option> 
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Currency:</label>
                  <select name="currency" class="form-control" >
                    <option selected="yes" disabled="yes">---Please Choose an option---</option>
                    {% for currency in currency %}
                    <option value="{{ currency.name }}">{{ currency.name }}</option> 
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Per Batch Rate</label>
                  <input type="text" class="form-control" name="rate" placeholder="Enter Per Batch Rate">
                </div>
              </div>
            </div>
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn bg-gradient-primary">Add</button>
          </div>
        </div>
    </form>
  </div>
  </div>
  <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Update Trainer Details: </h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form method="post" action="{% url 'edit_Trainer_save' %}">
          <div class="modal-body">
            {% csrf_token %}
            <input type="hidden" class="form-control" name="edit_id">
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Name:</label>
                  <input type="text" class="form-control" name="edit_name" placeholder="Enter Trainer's Name">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's E-Mail:</label>
                  <input type="text" class="form-control" name="edit_email" placeholder="Enter Trainer's E-Mail">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Contact Number:</label>
                  <input type="text" class="form-control" name="edit_phone" placeholder="Enter Trainer's Contact Number">
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">From Where ? </label>
                  <input type="text" class="form-control" name="edit_where" placeholder="From Where you get this lead ?">
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Language:</label>
                  <select class="form-control" name="edit_language">
                    <option selected="yes" disabled="yes">--Select--</option>
                    <option value="English">English</option>
                    <option value="Arabic">Arabic</option>
                    <option value="Spanish">Spanish</option>
                    <option value="Japnese">Japnese</option>
                    <option value="French">French</option>
                    <option value="German">German</option>
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Trainer's Country </label>
                  <select name="edit_country" class="form-control" id="country">
                    <option selected="yes" disabled="yes">---Please Choose an option---</option>
                    {% for code, name in countries %}
                    <option value="{{ name }}" data-numeric="{{numeric}}" data-code="{{code}}">{{ name }}</option> 
                    {% endfor %}
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Currency:</label>
                  <select name="edit_currency" class="form-control" >
                    <option selected="yes" disabled="yes">---Please Choose an option---</option>
                    {% for currency in currency %}
                    <option value="{{ currency.name }}">{{ currency.name }}</option> 
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="message-text" class="col-form-label">Per Batch Rate</label>
                  <input type="number" class="form-control" name="edit_rate" placeholder="Enter Per Batch Rate">
                </div>
              </div>
            </div>
          </div>
          {% comment %} </div> {% endcomment %}
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn bg-gradient-primary">Update</button>
          </div>
        </div>
      </form>
    </div>
  </div>

  {% 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">Documents:</label>
        <div class="head">
          <select class="form-control family" onchange="changeStatusButton(this.value,'document')">
            <option selected="yes" disabled="yes">--Select--</option>
            <option value="0">Pending</option>
            <option value="1">Complete</option>
          </select>
          </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-3">
        <button class="btn btn-active" onclick="changeStatusButton('1','status')">Active</button>
      </div>
      <div class="col-sm-3">
        <button class="btn btn-passive" onclick="changeStatusButton('0','status')">Passive</button>
      </div>
      <div class="col-sm-3">
        <button class="btn btn-process" onclick="changeStatusButton('2','status')">In Process</button>
      </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>
    
  <script>
    var $table = $('#table')
    var $remove = $('#remove')
    var selections = []

    var currentStatus = ''; // Initialize with an empty string
    var queryObject = {};

        function changeStatusButton(newStatus,queryName,def=null) 
        {
          
          // $("#orderTitle").html(buttonName);
          currentStatus = newStatus; // Change to the desired status value
          if(def=="date")
          {
            
          }
          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 StatusoperateFormatter(value, row, index) {
      let selectedText = "";
      let options = [
            { value: "2", text: "In Process" },
            { value: "1", text: "Active" },
            { value: "0", text: "Passive" }
        ];
        options.forEach(option => {
            if (option.value === value) {
                selectedText = option.text;
            }
        });
      return {
          display:`<select class="form-control form-select" onchange="changeStatus(this.value,'${row.id}')">
            <option selected="yes" disabled="yes">-Select-</option>
            <option value="2" ${row.status == "2" ?'selected':''}>In Process</option>
            <option value="1" ${row.status == "1" ?'selected':''}>Active</option>
            <option value="0" ${row.status == "0" ?'selected':''}>Passive</option>
          </select>`,
          export: selectedText
        };
    }
    function changeStatus(val,id)
    {
      var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
      $.ajax({
        url: '/updateStatus/',  // Replace '/deleteRow/' with your actual delete endpoint
        headers: {"X-CSRFToken": csrf_token},
        method:"POST",
        data:{
          "val":val,
          "id":id
        },
        success: function (response) {
          snackbar(response.message);
        },
        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) {
        var id= row.id;
        var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
        $.ajax({
          url: '/edit_Trainer/?id=' + id,  // Replace '/deleteRow/' with your actual delete endpoint
          headers: {"X-CSRFToken": csrf_token},
          success: function (response) {
            // Assuming response.success is true if the deletion is successful
            if (response.success) {
              $.each(response.data, function(key, value) {
                $('[name="' + key + '"]').val(value);
            });
            
              $("#edit").modal("show");
            } else {
              console.log('Failed to reach.');
            }
          },
          error: function () {
            console.log('Failed to delete row. Please try again later.');
          }
        });
        },
      'click .remove': function (e, value, row, index) {
        var id= row.id;
        var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
        var ans = confirm("Do you really want to delete?");
        if (ans == true){
            $.ajax({
              //url: '/delete_team/' + id,  // Replace '/deleteRow/' with your actual delete endpoint
              url: '/delete_Trainer/?id=' + id,  // Replace '/deleteRow/' with your actual delete endpoint
              type: 'DELETE',
              headers: {"X-CSRFToken": csrf_token},
              success: function (response) {
                // Assuming response.success is true if the deletion is successful
                if (response.success) {
                    $table.bootstrapTable('remove', {
                        field: 'id',
                        values: [id]
                    });
                } else {
                  console.log('Failed to delete row.');
                }
              },
              error: function () {
                console.log('Failed to delete row. Please try again later.');
              }
            });
        }
      }
    }
    function downloadFolder(formId) {
      // Make an Ajax request to generate the zip file
      $.ajax({
          url: '/zipfolder/',
          data: {
            folder_path: formId
          },
          success: function(response) {
              var zipPath = response.zip_path;
              var aElement = document.createElement('a');
              aElement.setAttribute('download', response.name);
              aElement.href = "/media/"+response.name;
              aElement.setAttribute('target', '_blank');
              aElement.click();

              setTimeout(function () {
                $.ajax({
                  url: `/delete_zip/`,
                  data:{
                    "zip":zipPath
                  },
                  method: 'GET',
                  success: function(deleteResponse) {
                      //if (deleteResponse.status === 'success') {
                      //    console.log('Zip file deleted successfully');
                      //} else {
                      //    console.log('Error deleting zip file:', deleteResponse);
                      //}
                  },
                  error: function(xhr, status, error) {
                      console.error('Error:', error);
                  }
              });
            }, 1000)

          },
          error: function(xhr, status, error) {
              console.error('Error:', error);
          }
      });
  }
  
    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 Name',
            field: 'name',
            valign: 'middle',
            align: 'center',
            sortable: true
          },
          {
            title: 'E-Mail',
            field: 'email',
            align: 'center',
            valign: 'middle',
          }, 
          {
            title: 'Contact Number',
            field: 'phone',
            align: 'center',
            valign: 'middle',
          }, 
          {
           title: 'From Where',
           field: 'where',
           valign: 'middle',
           align: 'center',
         },
          {
           title: 'Batch Rate',
           field: 'currency',
           valign: 'middle',
           align: 'center',
           formatter: function(value, row, index)
           {
            if(row.currency)
            {
              return [
              `<p><span style="font-weight:600;">${row.currency}</span> ${row.rate}</p>`
              ]
            }
            else
            {
              return [
              `<p><span style="font-weight:600;">-</span></p>`
              ]
            }
           }
         },
        {
              title: 'Working Status',
              field: 'status',
              align: 'center',
              valign: 'middle',
              clickToSelect: false,
              forceHide: true, // Exclude this column from export
              events: window.operateStatus,
              formatter: function(value, row, index) {
                  let formatted = StatusoperateFormatter(value, row, index);
                  row.status_text = formatted.export; // Assign selected status text to hidden export field
                  return formatted.display; // Show dropdown in table
              }
          },
          {
              title: 'Working Status',
              field: 'status_text',
              visible: false, // Hide this column in the table view
              forceExport: true, // Include this column in the export
              formatter: function(value, row, index) {
                  return value; // Return the status text for export
              }
          },
          {
           title: 'Documents',
           field: 'where',
           valign: 'middle',
           align: 'center',
           formatter: function(value, row, index)
           {
            return [
            `<a href="/verified_doc/?id=${row.id}"><button class="btn-action">View</button></a>`+`  `+
            `<button class="btn-action" onclick="downloadFolder('${row.formId}')" style="color:blue;"><i class="ri-download-cloud-2-line"></i></button>`
            ]
           }
         },
          {
           title: 'Send Mail',
           valign: 'middle',
           align: 'center',
           formatter: function(value, row, index)
           {
            return [
            `<button class="record btn bg-gradient-primary shadow text-center border-radius-md" 
                onclick="window.location.href = '/mailInbox/?id=${row.encryptedEmail}'">
                <i class="ri-mail-send-line"></i></button>`
            ]
           }
         },
          {
            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%', '2%', '20%', '20%', '20%', '10%'];
      
        $table.find('thead th').each(function(index) {
          $(this).css('width', columnWidths[index]);
        });
      });  
  </script>
  {% endblock content %}