@extends('admin.layouts.master')
@section('styles')
@endsection
@section('contents')
<div class="content-wrapper pb-0">
<div class="page-header flex-wrap">
  <h3 class="mb-0"> Attendance Record</h3>
  <div class="d-flex">
    <!-- <button type="button" class="btn btn-sm bg-white btn-icon-text border">
      <i class="mdi mdi-email btn-icon-prepend"></i> Email </button>
    <button type="button" class="btn btn-sm bg-white btn-icon-text border ml-3">
      <i class="mdi mdi-printer btn-icon-prepend"></i> Print </button>
    <button type="button" class="btn btn-sm ml-3 btn-success"> Add User </button> -->
  </div>
</div>
<div class="row">
  <div class="col-xl-12 col-sm-6 grid-margin stretch-card">
    <div class="card">
      <div class="card-body px-0 overflow-auto">
        <h4 class="card-title pl-4">Attendance Record {{date('M-Y')}}</h4>
        <div class="table-responsive">
          <table class="table">
            <thead class="bg-light">
              <tr>
                <th>Sno</th>
                <th>Name</th>
                <th>Total Days</th>
                <th>Total Present days</th>
              </tr>
            </thead>
            <tbody> 
              @foreach($employee as $key=>$value)
              <tr>
                <th>{{$key+1}}</th>
                <th>{{$value->name}}</th>
                <th>{{countDays($value->id)}}</th>
                <th>{{print_r(totalPresentDays($value->id))}}</th>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

</div>
<div class="modal modal-add fade show" id="modal-default" aria-modal="true" role="dialog" style="padding-right: 17px; display: none;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Attendence Info</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div id="data-inputs">
          <table>
            <tr>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div> 
@endsection
@section('scripts')
<script type="text/javascript">
  function getEmployeeDaySwipe(employee,date) {
    var reqData = '&employee=' + employee+'&date='+date;
    var reqUrl = '{{route('getEmployeeDaySwipe')}}';
    $.ajax({
        type: "get",
        url: reqUrl,
        data: reqData,
        dataType: "json",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        beforeSend: function() {
            

        },
        complete: function(response) {
            console.log(response);
            $('#data-inputs').html(response.responseText);
            $('.modal-add').modal('toggle');
        },
        success: function(response) {
            console.log(response);

            // var len = response.data.length;
            // $("#searchResult").empty();
            // for( var i = 0; i<len; i++){

            //     var id = response.data[i]['id'];
            //     var name = response.data[i]['name'];
            //     var ifsc = response.data[i]['ifsc'];
            //     $("#searchResult").append("<li value='"+id+"'>Account Holder Name-"+name+" Ifsc Code-"+ifsc+"</li>");

            // }
            // $("#searchResult li").bind("click",function(){
            //    setText(this);

            //    // alert($(this).val());
            // });
            
        }
    });
  }
</script>
@endsection