{% extends 'layouts/base_background.html' %}
{% load static %}

{% block css %}
.bg-gradient-primary {
    background-image: linear-gradient(195deg, #021750 0%, #021750 100%);
}
.text-gradient.text-primary {
    background-image: linear-gradient(195deg, #021750, #021750);
}
.btn-primary {
    --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-fluid">
  <div class="card card-body blur shadow-blur">
  <div class="row">
    

  <div class="d-flex justify-content-center mb-3">
    <div class="p-2"><div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio1">
  <label class="custom-control-label" for="customRadio1">Date Wise</label>
</div></div>
    <div class="p-2"><div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio2">
  <label class="custom-control-label" for="customRadio2">Gate Wise</label>
</div></div>
    <div class="p-2"><div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="customRadio3">
  <label class="custom-control-label" for="customRadio3">Employee Wise</label>
</div></div>
  </div>
  <div class="col-md-2">
  <div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Date</label>
  </div>
  <div class="col-auto input-group input-group-outline my-2">
    <input type="date" id="inputPassword6" class="form-control" >
  </div>
</div>
  </div>
  <div class="col-md-2">
     <label for="inputPassword6" class="col-form-label">Location</label>
    <div class="input-group input-group-outline is-valid my-2">
     
     <select class="form-control" id="exampleFormControlSelect1">
       
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
     </select>
   </div>
  </div>
  <div class="col-md-2">
     <label for="inputPassword6" class="col-form-label">Emp Code</label>
    <div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Emp Code</label>
        <input type="text" class="form-control">
      </div>
  </div>
  <div class="col-md-3">
     <label for="inputPassword6" class="col-form-label">Name</label>
        <div class="input-group input-group-outline is-valid my-2">
     <label class="form-label"></label>
     <select type="text" class="form-control" id="exampleFormControlSelect1">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
     </select>
   </div>
  </div>
  <div class="col-md-1">
      <br >
    <div class="input-group input-group-outline is-valid my-4">
    <button type="button" class="btn btn-warning">OK</button>
  </div>
  </div>
  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Current Status</b>
  </div>
  <div class="col-md-4"> Not Show</div>
  <div class="col-md-3"></div> -->

  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Employee Code</b>
  </div>
  <div class="col-md-4"><div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Emp Code</label>
        <input type="text" class="form-control">
      </div></div>
  <div class="col-md-3"></div> -->

  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Card No</b>
  </div>
  <div class="col-md-4"><div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Card No</label>
        <input type="text" class="form-control">
      </div></div>
  <div class="col-md-3"></div> -->

  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Name</b>
  </div>
  <div class="col-md-4"><div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Name</label>
        <input type="text" class="form-control">
      </div></div>
  <div class="col-md-3"></div> -->

  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Department</b>
  </div>
  <div class="col-md-4"><div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Department</label>
        <input type="text" class="form-control">
      </div></div>
  <div class="col-md-3"></div> -->

  <!-- <div class="col-md-3"></div>
  <div class="col-md-2">
    <b>Designation</b>
  </div>
  <div class="col-md-4"><div class="input-group input-group-outline is-valid my-2">
        <label class="form-label">Designation</label>
        <input type="text" class="form-control">
      </div></div>
  <div class="col-md-3"></div> -->
  <!--  -->
  <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>
  <!--  -->
 

</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>


<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 %}