{% 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="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
  <section class="pt-3 pb-4" id="count-stats">
  <div class="container">
    <div class="row">
        <div class="col-md-4 my-2">
             <h3 class="text-center">Add Designation</h3>
              <div class="input-group input-group-outline is-valid my-3">
        <!-- <label class="form-label">Select Department</label> -->
        <select name="department" class="form-control">
        	<option>operation</option>
        	<option>Developer</option>
        	<option>Mechnical</option>
        </select>
        </div>
     
              <div class="input-group input-group-outline is-valid my-3">
        <label class="form-label">Add Designation</label>
        <input type="text" name="designation" class="form-control">
        </div>
    <a href="{% url 'depart_master'%}" class="btn btn-warning w-100">Submit</a>
        </div> 
    <div class="col-md-8">
         <h3 class="text-center">Designation List</h3>
        <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  font-weight-bolder opacity-7">Id</th>
          <th class="text-uppercase text-secondary  font-weight-bolder opacity-7 ps-2">Department</th>
           <th class="text-uppercase text-secondary  font-weight-bolder opacity-7 ps-2">Designation</th>
          
          <th class="text-secondary opacity-7">Action</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">1</h6>
                
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </td>
           <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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">2</h6>
               
              </div>
            </div>
          </td>
          <td>
           
            <p class="text-xs font-weight-bold mb-0">Developer</p>
          </td>
         <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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">3</h6>
               
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Executive</p>
          
          </td>
           <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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">4</h6>
          
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programator</p>
          
          </td>
           <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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">5</h6>
               
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
            
          </td>
           <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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">6</h6>
              
              </div>
            </div>
          </td>
          <td>
            <p class="text-xs font-weight-bold mb-0">Programtor</p>
         
          </td>
           <td>
            <p class="text-xs font-weight-bold mb-0">Manager</p>
          
          </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>

  
   
    
      
    </div>
  </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: [
                        
                        '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 %}