{% extends 'layouts/base_background.html' %}
{% load static %}
{% block css %}
.bg-gradient-primary {
    background-image: linear-gradient(195deg, #021750 0%, #021750 100%);
}
.btn-primary {
    --bs-btn-color: #000;
    --bs-btn-bg: #f37022;
    --bs-btn-border-color: #f37022;
  }
  .bg-warning{
   color:white;
  }

  .btn-padding {
    margin-top:30px
  }
 {% endblock css %}
{% block header %}

    {% include 'includes/navigation.html' %}

  {% endblock header %}

{% block title %} IOCL | Head Count System {% endblock title %}

{% block body %} class="index-page bg-gray-200" {% endblock body %}

{% block content %}

</div></div></div>
<header class="header-2">
  <div class="page-header min-vh-25 relative" style="background-image: url('{% static 'img/bg2.jpg' %}')">
    <span class="mask bg-gradient-primary opacity-4"></span>
    
  </div>
</header>
<div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
  <h3 class="text-center">{{ context }}</h3>
  <section class="pt-3 pb-4" id="count-stats">
    
  <div class="table-responsive">
    <table id="myTable" class="table data-table stripe hover nowrap align-items-center mb-0 display">
      <thead>
        <tr>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Function</th>
          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Technology</th>
          <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Employed</th>
          <th class="text-secondary opacity-7"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">John Michael</h6>
                <p class="text-xs text-secondary mb-0">john@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
            <p class="text-xs text-secondary mb-0">Organization</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">23/04/18</span>
          </td>
          <td class="align-middle">
            <a href="javascript:;" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Alexa Liras</h6>
                <p class="text-xs text-secondary mb-0">alexa@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programator</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">11/01/19</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Laurent Perrier</h6>
                <p class="text-xs text-secondary mb-0">laurent@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Executive</p>
            <p class="text-xs text-secondary mb-0">Projects</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">19/09/17</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Michael Levi</h6>
                <p class="text-xs text-secondary mb-0">michael@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programator</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-success">Online</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">24/12/08</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Richard Gran</h6>
                <p class="text-xs text-secondary mb-0">richard@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
            <p class="text-xs text-secondary mb-0">Executive</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">04/10/21</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>

        <tr>
          <td>
            <div class="d-flex px-2 py-1">
              <div>
                
              </div>
              <div class="d-flex flex-column justify-content-center">
                <h6 class="mb-0 text-xs">Miriam Eric</h6>
                <p class="text-xs text-secondary mb-0">miriam@creative-tim.com</p>
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programtor</p>
            <p class="text-xs text-secondary mb-0">Developer</p>
          </td>
          <td class="align-middle text-center text-sm">
            <span class="badge-sm badge-secondary">Offline</span>
          </td>
          <td class="align-middle text-center">
            <span class="text-secondary text-xs font-weight-normal">14/09/20</span>
          </td>
          <td class="align-middle">
            <a href="#!" class="text-secondary font-weight-normal text-xs" data-toggle="tooltip" data-original-title="Edit user">
              Edit
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  </section>
</div>
{% endblock content %}
{% block javascripts %}
<!--  Plugin for TypedJS, full documentation here: https://github.com/inorganik/CountUp.js -->
<script src="{% static 'js/plugins/countup.min.js' %}"></script>
<script src="{% static 'js/plugins/choices.min.js' %}"></script>
<script src="{% static 'js/plugins/prism.min.js' %}"></script>
<script src="{% static 'js/plugins/highlight.min.js' %}"></script>
<!--  Plugin for Parallax, full documentation here: https://github.com/dixonandmoe/rellax -->
<script src="{% static 'js/plugins/rellax.min.js' %}"></script>
<!--  Plugin for TiltJS, full documentation here: https://gijsroge.github.io/tilt.js/ -->
<script src="{% static 'js/plugins/tilt.min.js' %}"></script>
<!--  Plugin for Selectpicker - ChoicesJS, full documentation here: https://github.com/jshjohnson/Choices -->
<script src="{% static 'js/plugins/choices.min.js' %}"></script>
<script type="text/javascript">
   $(document).ready(function(e) {
        var table=$('.data-table').DataTable({
            scrollCollapse: true,
            autoWidth: false,
            responsive: true,
            dom: 'Bfrtip',
             buttons: [
                {
                    extend: 'collection',
                    className: 'btn btn-warning',
                    buttons: [
                      {
                          extend: 'pdf',
                          className: 'btn btn-danger btn-padding',
                          text: 'PDF'
                      },
                      {
                          extend: 'csv',
                          className: 'btn btn-success btn-padding',
                          text: 'CSV'
                      },
                      {
                          extend: 'excel',
                          className: 'btn btn-info btn-padding',
                          text: 'Excel'
                      }
                  ]
                }
            ],
            columnDefs: [{
                targets: "datatable-nosort",
                orderable: false,
            }],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "language": {
                "info": "_START_-_END_ of _TOTAL_ entries",
                searchPlaceholder: "Search"
            },
        });
        new $.fn.dataTable.FixedHeader( table );
         
        $('body').one('click','.delete',function(){
            var id = $(this).data('value');
            var prompt = confirm("Are you Sure you want to delete?");
            if(prompt){
                
                $.ajax({
                    url:"<?php echo base_url('admin/service/delete_service')?>",
                    method:"POST",
                    data:{id:id},
                    success:function(data){
                        if(data == 1){
                             swal("Deleted !", "You clicked the button!", "success");
                        }
                        else{
                            swal("Oops!", "Something Error!", "error");
                        }
                        
                        
                    }
                });
            }
        });
        
    });
</script>

<script type="text/javascript">

  if (document.getElementById('state1')) {
    const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo"));
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
  if (document.getElementById('state2')) {
    const countUp1 = new CountUp('state2', document.getElementById("state2").getAttribute("countTo"));
    if (!countUp1.error) {
      countUp1.start();
    } else {
      console.error(countUp1.error);
    }
  }
  if (document.getElementById('state3')) {
    const countUp2 = new CountUp('state3', document.getElementById("state3").getAttribute("countTo"));
    if (!countUp2.error) {
      countUp2.start();
    } else {
      console.error(countUp2.error);
    };
  }
</script>

{% endblock javascripts %}