@extends('layouts.mainlayout')
@section('title', 'Apply Leave')
    @section('main')
    <!-- Form validation -->
    <div class="card">
        <div class="card-header header-elements-inline">
            <h5>User Name: {{$name}}</h5>
        </div>
        <div class="card-body">

       
            
                <form class="form-validate-jquery"  id ="leaveForm" action="#">
                <input type="hidden" name="_method" value="PATCH"/>
           
            @csrf
            <fieldset class="mb-3">
                <input type="hidden" name="leaveId" id="leaveId" value="{{$applyleave->id}}">
                <!-- Basic text input -->
                <div class="form-group row">
                    <label class="col-form-label col-lg-3">Type <span class="text-danger">*</span></label>
                    <div class="col-md-3">
                        <div class="form-group">
                            <select name="leave_id" id= "leaveName" class="form-control required">
                                <option disabled selected>Please Select Type</option>
                                @foreach ( $leaves as  $leave)
                                    @if($applyleave->leave_id == $leave->id)
                                    <option  value="{{ $leave->id}}" selected="">{{$leave->name}}</option>
                                    @else
                                    <option  value="{{ $leave->id}}">{{  $leave->name }}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>
                    </div>
                    
                </div>
                <div class="form-group row">
                    <label class="col-form-label col-md-3">Leave Type <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        
                            
                            @if($applyleave->leave_type == 'full_day')
                                    <label class="col-form-label">Full Day</label>
                                    @else
                                    <label class= "col-form-label">Half Day</label>
                                @endif
                           
                            
                      
                    </div>
                </div>
                <div class="form-group row fullday halfday1">
                    <label class="col-form-label col-md-3">From <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                       <label class= "col-form-label">{{ Carbon\Carbon::parse($applyleave->from_date)->format(config('settings.php_date_format')) }}</label>
                    </div>
                </div>
                <div class="form-group row fullday">
                    <label class="col-form-label col-md-3">To <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <label class= "col-form-label">{{ Carbon\Carbon::parse($applyleave->to_date)->format(config('settings.php_date_format')) }}</label>
                    </div>
                </div>
                <div class="form-group row fullday halfday">
                    <label class="col-form-label col-lg-3">Leave Duration <span class="text-danger"></span></label>
                    <div class="col-lg-9">
                        <label class= "col-form-label">{{$applyleave->leave_length}}</label>
                        
                    </div>
                </div>
                <div class="form-group row halfdaytype"  style="display:none;">
                    <label class="col-form-label col-md-3">Half Day Type <span class="text-danger">*</span></label>
                    <div class="col-md-9">
                        <select type="text" name="halfDayType" id="halfdaytype" class="form-control form-control-select2 required" @if(isset($leave)) value="{{$leave->half_day_type}}" data-fouc @endif>
                            <option disabled selected>Please select Half Day Type</option>
                            <option value="first_half">First Half</option>
                            <option value="second_half">Second Half</option>
                        </select>
                    </div>
                </div>
                <input type="hidden" name="user_id" id="user_id" value="{{$applyleave->user_id}}">
                <div class="form-group row fullday halfday1">
                    <label class="col-form-label col-lg-3">Reason <span class="text-danger">*</span></label>
                    <div class="col-lg-9">
                        <label class= "col-form-label">{{$applyleave->reason}}</label>
                        
                    </div>
                </div>
                <!-- /basic text input -->
            </fieldset>
            <div class="d-flex align-items-center">
                
                <a class="btn btn-default btn-primary ml-3" href="#" id="approvebtn" onclick="manageleave('1');">Approve</a>
                <a class="btn btn-default btn-danger ml-3" href="#" id="rejectbtn" onclick="manageleave('0');">Reject</a>
            </div>
            </form>
        </div>
    </div>
<!-- /form validation -->
<!-- reject leve model -->

<div class="modal fade" id="leaveRejectModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <form  id="leave-reject-modal-form" method="Post">   
    
    @csrf 
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Enter Comment</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="text" name="approver_comments" class="form-control" required value="" placeholder="Enter Comment"/>
            <input type="hidden" name="leavestatus" value="0">
            <input type="hidden" name="leaveId"  value="{{$applyleave->id}}">
            <input type="hidden" name="leaveName" id="rejectLeaveName">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
     </form>
    </div>
  </div>
<!-- /reject leave model -->
@endsection
@section('js')
    <script>

        $(document).ready(function(){
        $('#leaveName').on('change',function(){
        $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        var leaveId = $('#leaveName').val();
        var user_id = $('#user_id').val();
        var formData = new FormData();
        formData.append('leaveId', leaveId);
        formData.append('user_id', user_id);
        var baseurl =  document.getElementById('baseurl').value;
            $.ajax({
            type: 'POST',
            url: baseurl+'/apply-leave/get-leave-count',
            processData:false,
            contentType: false,
            data: formData,
            success: function(data)
            {
                if(leaveId !="")
                {
                    //$("#leaveName").attr('disabled', 'true');
                }
                $(data).each(function(key,value){
                    
                    if(value.leaveBalance =="0" && value.totalLeaves != 0)
                    {
                        var notice =  new PNotify({
                                    title: 'Not enough leave balance',
                                        text: 'User not have enough leave balance',
                                        delay:1500,
                                        hide: true,
                                    });

                        //$("#leavetype,#applyleave").attr('disabled', 'true');
                    }
                });
                $("#applyleave").on('click',function(){
                    $("#leavetype,#leaveName").removeAttr('disabled','false');
                });
            },
            error: function (data) {
            }
          });
        });

         /*
        //ajax for getting leave count when we select leave//
        */

        $('#leavetype').on('change',function(){
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        var leavetype = $('#leavetype').val();
        var formData = new FormData();
        formData.append('leavetype', leavetype);
        var baseurl =  document.getElementById('baseurl').value;
          $.ajax({
          type: 'POST',
          url: baseurl+'/apply-leave',
          processData:false,
          contentType: false,
          data: formData,
          success: function(data)
          {
            if(leavetype =='full_day'){
                $(".fullday").removeAttr('style');
            }
            else
            {
                $(".halfday").addClass('intro');
                $(".halfdaytype").removeAttr('style');
                $(".halfday1").removeAttr('style');
            }
            if(leavetype !="")
            {
                $("#leavetype").attr('disabled', 'true');
            }
            $("#applyleave").on('click',function(){
                $("#leavetype").removeAttr('disabled','false');
            });
        },
        error: function (data) {
            alert(data.responseText);
        }
        });
        });

    });
    
    function manageleave(id)
    {
        //console.log(id);
        if(id == 0){
            $('#leaveRejectModal').modal({
                show: true
            });
            var baseurl =  document.getElementById('baseurl').value;
            $('#leave-reject-modal-form').attr('action', baseurl+"/updatemanageleave");
           // console.log($('#leaveName').val());
            $('#rejectLeaveName').val($('#leaveName').val());
        }else{
         $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        var leaveId = $('#leaveId').val();
        var leaveName = $('#leaveName').val();
        var formData = new FormData();
        formData.append('leaveId', leaveId);
        formData.append('leaveName', leaveName);
        formData.append('leavestatus', id);
        var baseurl =  document.getElementById('baseurl').value;
          $.ajax({
          type: 'POST',
          url: baseurl+'/updatemanageleave',
          processData:false,
          contentType: false,
          data: formData,
          success: function(data)
          {
              console.log(data);
            if(data.leaveBalance =="0")
                    {
                        var notice =  new PNotify({
                                    title: 'Not enough leave balance',
                                        text: 'User not have enough leave balance',
                                        delay:1500,
                                        hide: true,
                                    });

                        //$("#leavetype,#applyleave").attr('disabled', 'true');
                    }else{
                        window.location.href = "{{ url('/home') }}";
                    }
        },
        error: function (data) {
            alert(data.responseText);
        }
        });
        }
    }
        
       
        
        
    </script>
    <style>
        .intro{
          display: none;
        }
        #reason{
            border: 0.1px solid lightgrey;
            border-top: 0.1px solid lightgrey!important;
        }
    </style>
@endsection