{% extends 'layouts/base.html' %}
{% load static %}
{% block css %}

.bg-gradient-dark {
    --bs-btn-color: #000;
    --bs-btn-bg: #f37022;
    --bs-btn-border-color: #f37022;
  }
  
 {% endblock css %}

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

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

{% block content %}

</div></div></div>
<div class="container py-4">
	<div class="row">
		    <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                <i class="material-icons opacity-10">weekend</i>
              </div>
              <div class="text-end pt-1">
                <p class="text-sm mb-0 text-capitalize">Total Employee</p>
                <h4 class="mb-0">53</h4>
              </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-3">
              <p class="mb-0"><span class="text-success text-sm font-weight-bolder">55 </span>than last week</p>
            </div>
          </div>
        </div>
         <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div class="icon icon-lg icon-shape bg-gradient-warning shadow-warning text-center border-radius-xl mt-n4 position-absolute">
                <i class="material-icons opacity-10">weekend</i>
              </div>
              <div class="text-end pt-1">
                <p class="text-sm mb-0 text-capitalize">Total Department</p>
                <h4 class="mb-0">53</h4>
              </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-3">
              <p class="mb-0"><span class="text-success text-sm font-weight-bolder">55 </span>than last week</p>
            </div>
          </div>
        </div>
         <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
          <div class="card">
            <div class="card-header p-3 pt-2">
              <div class="icon icon-lg icon-shape bg-gradient-secondary shadow-dark text-center border-radius-xl mt-n4 position-absolute">
                <i class="material-icons opacity-10">weekend</i>
              </div>
              <div class="text-end pt-1">
                <p class="text-sm mb-0 text-capitalize">Total Designation</p>
                <h4 class="mb-0">53</h4>
              </div>
            </div>
            <hr class="dark horizontal my-0">
            <div class="card-footer p-3">
              <p class="mb-0"><span class="text-success text-sm font-weight-bolder">55</span>than last week</p>
            </div>
          </div>
        </div>
	</div>
</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: [
                        
                        'pdf',
                        'csv',
                        '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>
{% endblock javascripts %}