@extends('layouts.mainlayout')
@section('title', 'Apply Leave')
@section('main')
<!-- Form validation -->
<style>
    /* Modal Styles */
    /* Modal Styles */
    #confirmationModal{
    z-index: 999;
}
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-title{
font-size: 20px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;

}
.modal-body2{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: #0055B9;
}
.modal-body2 h5{
    color: #FFFFFF;
    padding-top: 13px;

}
.modal-content {
  border-radius:25px;
  background-color: #fefefe;
  margin: 15% auto;
  border: 1px solid #888;
  width: 60%;
  text-align: center;
}

/* Style the "Apply" button inside the modal */

.custom-button {
    width: 84px;
    height: 32px;
}
#confirmsecondLeave{
    width: 84px;
    margin: auto;
    height: 32px;
}
.modal-main-body{
  display: flex; 
  align-items: center; 
  margin: auto; 
  padding: 25px 0;
}
.footer{
  padding: 15px 0;
}
.tooltips {
  position: relative;
  display: inline-block;
}
.tooltips .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #2a3140;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltips:hover .tooltiptext {
  visibility: visible;

}

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}
@media screen and (max-width: 890px) {
    .modal-main-body{
        display: inline-block !important;
}
 
.s_text{
    width: 100% !important;
}

.spoken_to{
    margin:auto;
    width:100% !important;
} 

}

@media screen and (max-width: 365px) {
    #confirmLeave{
        margin-right:11px !important;
    
   }

} 
.disabled-button {
    /* background-color: #eee; */
    /* color: #aaa; */
    cursor: not-allowed;
    pointer-events: none;
}

</style>

<div class="card">

    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-calculator font-weight-bold"> 
        @if(auth()->user()->can('View Self Leave Balance'))
        Leave Balance
        @else
        Apply Leave
        @endif
        </h5>
       
    </div>
    <div class="card-body">
    @if(auth()->user()->can('View Self Leave Balance'))
    <div class="row" id="topFourSection" style="margin-bottom: -0.998rem;">
                            
    @foreach ($leaveBalances as $key => $leaveBalance)                     
   <div class="col-md-3 ">
      <!-- Members online -->
      <div class="card text-center @if(++$count%2) bg-teal-400 @else bg-indigo-400 @endif  " style="width: 13rem;">
           <div class="card-body">
            <div>
                
               <h3 class="font-weight-semibold mb-0" >
               @if(strlen($leaveBalance['name']) > 17)
               {!!  substr(strip_tags($leaveBalance['name']), 0, 16) !!}..
               @else
               {{ $leaveBalance['name'] }}
               @endif
               </h3>
            </div>
            <div>
               
               <div class="font-size-sm opacity-75">
               @if($leaveBalance['n_days'] == 0 && $leaveBalance['leave_allocation_type'] != 'no_application')
                   <i class="icon-infinite"></i>
                   @else
                   {{ $leaveBalance['leave_balance'] }}
                   @endif
                </div>
            </div>
         </div>
      </div>
      <!-- /members online -->
   </div>
   @endforeach
   </div>
   @endif

        @if(isset($leave))
        <form class="form-validate-jquery" id="leaveForm" action="{{ route('apply-leave.update',$leave->id) }}" method="POST">
            <input type="hidden" name="_method" value="PATCH" />
            @else
            <form class="form-validate-jquery" id="leaveForm" action="{{ route('apply-leave.store') }}" method="POST">

                @endif
                @csrf
                <fieldset class="mb-3">
                    <legend class="text-uppercase font-size-sm font-weight-bold"> Apply Leave</legend>
                    <!-- 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 value="" selected>Please Select Type</option>
                                    @foreach ( $leaves as $leave)
                                        @if($leave->status === '0')
                                            <option value="{{ $leave->id}}">{{ $leave->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <label class="col-form-label col-lg-2" id="leaveBalanceLabel">Leave Balance</label>
                        <div class="col-md-4" id="leaveBalanceDiv">
                            <div class="form-group">
                                <input type="text" name="leaveBalance" id="leaveBalance" class="form-control required" readonly="readonly" value="" />
                            </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">
                            <select type="text" name="leavetype" id="leavetype" class="form-control form-control-select2 required" @if(isset($leave)) value="{{$leave->leave_type}}" data-fouc @endif>
                                <option value="" selected>Please Select Leave Type</option>
                                <option value="full_day">Full Day</option>
                                <option value="half_day">Half Day</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row fullday halfday1" style="display:none;">
                        <label class="col-form-label col-md-3">From <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <input type="text" name="from_date" placeholder="dd/mm/yyyy" data-date-format="{{ config('settings.date_format') }}" id="from_date" readonly="readonly" class="form-control calculateDay @error('from_date') is-invalid @enderror" @if(isset($leave)) value="{{Carbon\Carbon::parse($leave->from_date)->format(config('settings.php_date_format'))}}" autofocus @endif />
                            @error('from_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row fullday" id="to__date" style="display:none;">
                        <label class="col-form-label col-md-3">To <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <input type="text" name="to_date" placeholder="dd/mm/yyyy" data-date-format="{{ config('settings.date_format') }}" id="to_date" readonly="readonly" class="form-control calculateDay @error('to_date') is-invalid @enderror" @if(isset($leave)) value="{{Carbon\Carbon::parse($leave->to_date)->format(config('settings.php_date_format'))}}" autofocus @endif />
                            @error('to_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row fullday halfday " id="leave-duration">
                        <label class="col-form-label col-lg-3">Leave Duration <span class="text-danger"></span></label>
                        <div class="col-lg-9">
                            <input type="text" name="leave_length" id="result" class="form-control" readonly="readonly" value="" />
                        </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 value="" selected>Please select Half Day Type</option>
                                <option value="first_half">First Half</option>
                                <option value="second_half">Second Half</option>
                            </select>
                            
                        </div>
                    </div>
                    <div class="form-group row fullday halfday1" style="display:none;">
                        <label class="col-form-label col-lg-3">Reason <span class="text-danger">*</span></label>
                        <div class="col-lg-9">
                            <textarea rows="" cols="3" maxlength="240" class="form-control required @error('reason') is-invalid @enderror" name="reason" id="reason" placeholder="Enter Description" required @if(isset($leave)){{$leave->reason}} @endif>
                        </textarea>
                        <span id="msg" style="color: #f44336;"></span>
                            @error('reason')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <input style="margin: auto; width: 40%;" type="hidden" name="spoken_to" id="sponen_to" class="form-control"  value="">
                    <!-- /basic text input -->
                </fieldset>
                <div class="d-flex justify-content-end align-items-center">
                    <a class="btn bg-transparent text-primary border-primary ml-3" href="{{ route('apply-leave.create') }}">Clear</a>
                    <button type="submit" id="applyleave" class="btn btn-primary ml-3">Apply<i class="icon-paperplane ml-2"></i></button> 
                </div>
            </form>
    </div>
</div>
<!-- /form validation -->
<div id="confirmationModal" class="modal">
  <div class="modal-content">
    <div class="modal-body2">
        <h5 class="f-size">Have you discussed this leave before applying?</h5>
    </div>
    <div class="modal-main-body row p-0">
        <div class="col-12">
            <div class="d-flex align-items-center modal-main-body">
                    <h6 class="s_text mr-2 mb-0" style="width: 80%;">Mention the name of the manager’s with whom you discussed</h6>
                    <div class="autocomplete"><input type="text" name="spoken_to" id="spoken" class="form-control spoken_to " style="width: 100%;" value="" autocomplete="off"></div>
            </div>
        </div>
    </div>
    <div class="footer d-flex justify-content-end">
        <button id="CancelLeave" class="btn btn-primary custom-button bg-danger mr-2">Cancel</button>
        <button id="confirmLeave" class="btn btn-primary custom-button bg-primary mr-4" disabled>Apply</button>
    </div>
   
  </div>
</div>
@if(session('hideModal'))
@else
<div id="secondModal" style="z-index: 999;" class="modal">
  <div class="modal-content" style="padding: 43px 0; width:45%">
    <h5 class="header" style="margin: auto; width: 60%;">Kindly ensure your leave is approved before proceeding with this leave</h5>
    <div class="mt-2"></div>  
      <button id="confirmsecondLeave" class="btn btn-primary yes-button-align">Okay</button>
  </div>
</div>
@endif
@endsection
@section('js')
<script>
function autocomplete(inp, arr) {
  var currentFocus;
  var inputValBeforeSpace = "";

  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();

      // Check for both space and comma at the end
      if (!val || val.match(/[ ,]+$/)) {
        inputValBeforeSpace = "";
        return false;
      }

      if (!val) { return false;}

      // Check for space or comma anywhere in the input
      if (val.match(/[ ,]/)) {
        var lastSpaceOrComma = val.match(/[ ,][^, ]*$/)[0];
        inputValBeforeSpace = val.substring(0, val.lastIndexOf(lastSpaceOrComma)).trim();
        val = lastSpaceOrComma.replace(/[, ]/g, '').trim();
      } else {
        inputValBeforeSpace = "";
      }

      currentFocus = -1;
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
             inp.value = inputValBeforeSpace + (inputValBeforeSpace === "" ? "" : ", ") + this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
      if (a.children.length > 0) {
        a.style.display = "block";
      }
  });

  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
          closeAllLists();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
}

function checkLeaveConflict(fromDate, toDate) {
    var baseurl = document.getElementById('baseurl').value;

    if (!fromDate) return;

    // if toDate not present → use fromDate
    if (!toDate) {
        toDate = fromDate;
    }

    $.ajax({
        type: 'GET',
        url: baseurl + '/apply-leave/check-leave-exists',  
        data: {
            userId: '{{ auth()->user()->id }}',  
            from_date: fromDate,
            to_date: toDate,
            halfdaytype: $('#halfdaytype').val()
        },
        success: function(response) {
            console.log(response);

            if (response.status == '100') {
                new PNotify({
                    title: 'Conflict',
                    text: 'Leave already applied for selected date',
                    type: 'error',
                    delay: 2000
                });

                $("#applyleave").attr('disabled', true);
                $("#reason").attr('disabled', true);
            } else {
                // Only enable if other conditions are met
                if ($('#reason').val().trim().length >= 10) {
                    $("#applyleave").removeAttr('disabled');
                }
                $("#reason").removeAttr('disabled');
            }
        },
        error: function(xhr, status, error) {
            console.error('Error checking leave conflict:', error);
        }
    });
}

    var names = ;
    autocomplete(document.getElementById("spoken"), names);

 $(document).ready(function() {
        $("#spoken").on("input", function() {
          if ($(this).val().trim() !== "") {
            $("#confirmLeave").removeAttr("disabled");
          } else {
            $("#confirmLeave").attr("disabled", "disabled");
          }
          
        });
        $("#CancelLeave").click(function() {
            $("#confirmationModal").hide();
        });
        $(".modal .close").click(function() {
            $("#confirmationModal").show();
        });

        $("#leaveForm").on("submit", function(event) {
            event.preventDefault();   

            var from_date = $("#from_date").val();
            var to_date = $("#to_date").val();
            var baseurl = document.getElementById('baseurl').value;

            if (!from_date) return;

            if (!to_date) {
                to_date = from_date;
            }

            $.ajax({
                type: 'GET',
                url: baseurl + '/apply-leave/check-leave-exists',
                data: {
                    userId: '{{ auth()->user()->id }}',
                    from_date: from_date,
                    to_date: to_date,
                    halfdaytype: $('#halfdaytype').val()
                },
                success: function(data) {

                    if (data.status == '100') {

                        new PNotify({
                            title: 'Error',
                            text: data.message,
                            delay: 1500,
                            type: 'error'
                        });

                        return; 

                    } else {

                        $("#confirmationModal").show(); 
                    }
                }
            });
        });

        $("#confirmLeave").click(function() {
                var spokenValue = $("#spoken").val();
                
                if (spokenValue) {
                    $("#sponen_to").val(spokenValue);
                    localStorage.setItem("formSubmitted", "true");
                    
                    $("#confirmationModal").hide();
                    $("#leaveForm").off("submit").submit();
                }
                else{
                    $("#spoken").prop('required', true);
                    return;
                }
        });
        $(document).ready(function() {
            var beforeDayNumber = null;
            var beforeDayId = null;
            var LeaveName = null;
            var appliedBeforeDays = null;
            var formSubmitted = localStorage.getItem("formSubmitted");
            
            if (formSubmitted === "true") {
                
                $("#secondModal").show();
                
                localStorage.removeItem("formSubmitted");
            }
        });
        $("#confirmsecondLeave").click(function() {
            window.location.href = "/apply-leave";

        });
        $('#leavetype').attr('disabled','true');
        $("#leave-duration").attr('style','display:none');

        $('#leaveName').on('change', function() {
            var leaveId = $('#leaveName').val();
            if ($(this).val() === '') {
            $('#leaveBalance').val('');
            }
            if(leaveId != null && leaveId !=""){
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                console.log(leaveId);
                var formData = new FormData();
                formData.append('leaveId', leaveId);
                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) {
                      
                        $(data).each(function(key, value) {
                            console.log(value);
                            if (value.totalLeaves == 0 && value.leave_allocation_type != 'no_application') {
                                console.log(value.totalLeaves);
                                $('#leaveBalanceLabel').hide();
                                $('#leaveBalanceDiv').hide();
                            }else{
                            if (value.leaveBalance == 0) {
                                $("#leaveBalance").val(0);
                            } else {
                                if (value.leaveBalance != "" && value.leaveBalance != null) {
                                    $("#leaveBalance").val(value.leaveBalance.toFixed(2));
                                }
                            }    
                                if (value.leaveBalance == "0") {
                                    var notice = new PNotify({
                                        title: 'Not enough leave balance',
                                        text: 'You do not have enough leave balance',
                                        delay:1500,
                                        hide: true,
                                    });
                                    $("#leavetype,#applyleave").attr('disabled', 'true');
                                    $('#leavetype option[value=""]').prop('selected', 'selected').change();
                                    $("#applyleave").attr('disabled', 'true');
                                }else{
                                    $("#leavetype,#applyleave").removeAttr('disabled');
                                    $('#leavetype option[value=""]').prop('selected', 'selected').change();
                                }
                            
                            }
                        });
                     
                    $("#applyleave").on('click', function() {
                    var reason = $("#reason").val().replace(/\s/g, '').length;
                    if (reason < 10) {
                        $("#msg").html("Reason cannot be less than 10 characters.");
                        $("#applyleave").prop("disabled", true);
                    } else {
                        $("#leavetype, #leaveName").removeAttr('disabled', 'false');
                    }
                    });

                    },
                    error: function(data) {}
                });
            }else{
                $("#leavetype,#applyleave").attr('disabled', 'true');
                $('#leavetype option[value=""]').prop('selected', 'selected').change(); 
            }
        });

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

        $('#leavetype').on('change', function() {
            var leavetype = $('#leavetype').val();
            if(leavetype != null && leavetype != ""){
                $('#status').fadeIn(); 
                $('#preloader').fadeIn();
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                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');
                            $(".halfdaytype").attr('style','display:none;');
                            $("#leave-duration").css('display','flex')
                        } else {
                            $(".halfday").addClass('intro');
                            $(".halfdaytype").removeAttr('style');
                            $(".halfday1").removeAttr('style');
                            $("#to__date").attr('style', "display:none;");
                            $("#leave-duration").removeAttr('style')
                           
                        }
                       
                        $("#applyleave").on('click', function() {
                        var reason = $("#reason").val().replace(/\s/g, '').length;
                        if (reason < 10) {
                            $("#msg").html("Reason cannot be less than 10 characters.");
                            $("#applyleave").prop("disabled", true);
                        } else {
                            $("#leavetype, #leaveName").removeAttr('disabled', 'false');
                        }
                        });
                        $('#status').fadeOut(); 
                        $('#preloader').fadeOut();
                    },
                    error: function(data) {
                        alert(data.responseText);
                        $('#status').fadeOut(); 
                        $('#preloader').fadeOut();
                    }
                });
            }else{
                $(".fullday").attr('style','display:none');
                $(".halfday").removeClass('intro');
                $(".halfdaytype").attr('style','display:none');
                $(".halfday1").attr('style','display:none');
                $("#applyleave").attr('disabled', 'true');
            }
        });

    });
    
    $('textarea').each(function() {
        $(this).val($(this).val().trimLeft());
    });

    $("#reason").keyup(function() {
        $('#reason').val($('#reason').val().trimLeft());
        if ($('#reason').val() == "") {
            console.log('disabletrue');
            $('#applyleave').attr('disabled', true);
        } else if ($('#leaveName').val() != "" && $('#leavetype').val() == "full_day" &&
            $('#result').val() != "" && $('#reason').val() != "") {
            console.log('disablefalse');
            $('#applyleave').attr('disabled', false);
        }
        if ($('#leavetype').val() == "half_day") {

            if ($('#halfdaytype').val() != null && $('#leaveName').val() != "" && $('#leavetype').val() != "" &&
                $('#reason').val() != "") {

                console.log('if');
                $('#applyleave').attr('disabled', false);
            } else {
                console.log('else');
                $('#applyleave').attr('disabled', true);
            }
        }

    });



    $("#halfdaytype").change(function() {

        if ($('#halfdaytype').val() == null) {
            console.log('disabletrue');
            $('#applyleave').attr('disabled', true);
        } else if ($('#leaveName').val() != "" && $('#leavetype').val() != "" && $('#from_date').val() != "" &&
            $('#halfdaytype').val() != null && $('#reason').val() != "") {
            console.log('disablefalse');
            $('#applyleave').attr('disabled', false);
        }

        var fromDate = moment($('#from_date').datepicker('getDate')).format('YYYY-MM-DD');
        checkLeaveConflict(fromDate, fromDate);
    });

    var beforeDayNumber = null;
    var beforeDayId = null;
    var LeaveName = null;
    var appliedBeforeDays = null;
    $('#leaveName').on('change', function(){
        var LeaveName = $('#leaveName').val();
    
    $("#from_date").datepicker("destroy");

    var appliedBeforeDays = null;

    for (var i = 0; i < beforeDayId.length; i++) {
        if (LeaveName == beforeDayId[i]['id']) {
            appliedBeforeDays = beforeDayId[i]['number'];
            break;
        }
    }
    
    var startDate = new Date(new Date().getFullYear(), 0, 1);
    var endDate = new Date(new Date().getFullYear(), 12, 0);

    var startDate = new Date();
    startDate.setDate(startDate.getDate() + appliedBeforeDays);

    $("#from_date").datepicker({
        // format: "dd-mm-yyyy", 
        autoclose: true,
        startDate: startDate,
        //endDate : endDate
    }).on('changeDate', function(selected) {
        if ($('#leavetype').val() == "full_day") {
            var minDate = new Date(selected.date.valueOf());

            //end date's minimum date is start date
            $('#to_date').datepicker('setStartDate', minDate);

            var to_date = $('#to_date').datepicker('getDate');

            //if start date is greater than end date
            if ($(this).datepicker('getDate') > to_date) {
                console.log('reset end date');
                $('#to_date').datepicker('setDate', null);
                $('#applyleave').attr('disabled', true);

            } else if ($(this).datepicker('getDate') != null && $('#reason').val() != "") {
                $('#applyleave').attr('disabled', false);
            }
        } else {
            if ($(this).datepicker('getDate') != null && $('#reason').val() != "" && $('#halfdaytype').val() != null) {
                $('#applyleave').attr('disabled', false);
            } else {
                $('#applyleave').attr('disabled', true);
            }
        }

        var fromDate = moment(selected.date).format('YYYY-MM-DD');
        var toDate = $('#to_date').datepicker('getDate') 
            ? moment($('#to_date').datepicker('getDate')).format('YYYY-MM-DD') 
            : null;

        checkLeaveConflict(fromDate, toDate);

    });

    if ($("#from_date").val() != '') {
        var to_startDate = $("#from_date").val();
    } else {
        var to_startDate = new Date(new Date().getFullYear(), 0, 1);
    }

    $("#to_date").datepicker({
        // format: "dd-mm-yyyy", 
        autoclose: true,
        startDate: to_startDate,
        //endDate : endDate
    }).on('changeDate', function(selected) {
        if ($(this).datepicker('getDate') != null && $('#reason').val() != "") {
            $('#applyleave').attr('disabled', false);
        }

        var fromDate = moment($('#from_date').datepicker('getDate')).format('YYYY-MM-DD');
        var toDate = moment($(this).datepicker('getDate')).format('YYYY-MM-DD');

        checkLeaveConflict(fromDate, toDate);
    });


    function leavebalance()
    {
        var from_date = $("#from_date").val();
        var to_date = $("#to_date").val();
        var leave_type = $("#leavetype").val();
        var leave_id = $("#leaveName").val();

        if(leave_type == "half_day"){
            to_date = from_date;
        }

        if(!from_date || !leave_type || !leave_id){
            return;
        }

        var baseurl = document.getElementById('baseurl').value;

        $.ajax({
            type: "POST",
            url: baseurl + "/apply-leave/calculate-leave-duration",
            data: {
                from_date: from_date,
                to_date: to_date,
                leave_type: leave_type,
                leave_id: leave_id,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(res)
            {
                $("#result").val(res.duration);
            }
        });
    }


    $("#leavetype").change(function() {
    if ($(this).val() === "full_day" || $(this).val() === "half_day") {
        leavebalance();
    }
    });     //$('#result').val(1);
    $('#from_date,#to_date,#halfdaytype').on('change', function() {
        leavebalance();
    });

    $('#showLeaveBalance').on('click', function(e) {
        e.preventDefault();
        $('#showLeaveBalanceModal').modal({
            show: true
        });
    });
});    

</script>

<style>
    .intro {
        display: none;
    }

    #reason {
        border: 0.1px solid lightgrey; 
        border-top: 0.1px solid lightgrey !important;
    }
    .modal .modal-body {
    height: 274px;
    overflow-y: auto;
    }
</style>
@endsection