@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12">
        <h4>Attendance System</h4>
    </div>
</div>
<div class="row">
    <div class="col-xl-3 col-lg-6 col-12">
        <div class="card bg-success" style="height: 145.6px;">
          <div class="card-body">
            <div class="px-3 py-3">
              <div class="row text-white">
                <div class="col-4">
                  <h1><i class="fa fa-check background-round text-white p-2 font-medium-3"></i></h1>
                </div>
                <div class="col-8 text-right pl-0">
                  <h5 class="text-white mb-2">Mark Attendance</h5>
                  <form id="markAttendance">
                      <input type="hidden" name="user_id" value="{{auth()->user()->id}}">
                      <a href="javascript:;" id="saveBtn" class="text-white"><span>Mark</span></a>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div class="col-xl-3 col-lg-6 col-12">
        <div class="card bg-danger" style="height: 145.6px;">
          <div class="card-body">
            <div class="px-3 py-3">
              <div class="row text-white">
                  <div class="col-4">
                    <h1><i class="fa fa-clock-o background-round text-white p-2 font-medium-3"></i></h1>
                  </div>
                  <div class="col-8 text-right pl-0">
                    <h5 class="text-white mb-2">Apply for Leave</h5>
                    <a href="#apply_leave" data-toggle="modal" class="text-white"><span>Add New</span></a>
                  </div>
                </div>
            </div>
          </div>
        </div>
    </div> 
</div>

<div class="modal fade text-left" id="apply_leave" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header gradient-green-tea">
                <h3 class="modal-title text-white" id="myModalLabel3">Apply for Leave</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" id="leaveForm">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="start_date"> Start  Date: </label>
                                <input type="date" class="form-control border-primary" name="start_date">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="end_date"> End Date: </label>
                                <input type="date" class="form-control border-primary" name="end_date">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label class="text-bold-500" for="reason"> Reason: </label>
                                <input type="text" class="form-control border-primary" name="reason">
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pt-2">
                        <a href="javascript:;" data-dismiss="modal">
                            <button type="button" class="btn btn-danger mr-1">
                                <i class="icon-trash"></i> Cancel
                            </button>
                        </a>
                        <button type="button" class="btn btn-raised btn-success" id="leaveBtn">
                            <i class="icon-note"></i> Save
                        </button>
                    </div>
                </form>    
            </div>
        </div>
    </div>
</div>
    
@endsection

@section('afterScript')
    <script>
         $(document).on('click',"#saveBtn", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#markAttendance")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('attendance.store') }}",
                    type: "POST",
                    data : form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        var status =  res.code==200 ? 'success' : 'warning';
                        swal("Alert!", res.message, status);
                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });


         $(document).on('click',"#leaveBtn", function(e){
                e.preventDefault();
            
                var form_data = new FormData($("#leaveForm")[0]);
                $.ajaxSetup({
                    headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url : "{{ route('apply_leave.store') }}",
                    type: "POST",
                    data : form_data,
                    async: false,
                    cache: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (res) {
                        swal('Inserted!','Leave application has been Submitted','success');
                        $('#apply_leave').modal('hide');

                    },
                    error: function(err) {
                        swal('Not Valid',err.responseJSON.message,'error');
                        // setTimeout(function() { 
                        //     location.reload();
                        // }, 1000);
                    
                    }
                });
            });
    </script>
@endsection