@extends('layouts.mainlayout')
@section('title', 'Apply Comp Off Leave Balance')
@section('main')
<!-- Form validation -->

<div class="card">

    <div class="card-header header-elements-inline">
        <h5 class="card-title icon-calculator font-weight-bold"> 
        Apply comp Off Leave Balance
        </h5>
       
    </div>
    <div class="card-body">
  
        @if(isset($leave))
        <form class="form-validate-jquery" id="leaveForm" action="{{ route('apply-comp-off-leave.update',$leave->id) }}" method="POST">
            <input type="hidden" name="_method" value="PATCH" />
            @else
            <form class="form-validate-jquery" id="leaveForm" action="{{ route('apply-comp-off-leave.store') }}" method="POST">

                @endif
                @csrf
                <fieldset class="mb-3">
                    <!-- Basic text input -->
                    
                    
                    <div class="form-group row">
                        <label class="col-form-label col-md-3">Date <span class="text-danger">*</span></label>
                        <div class="col-md-9">
                            <input type="text" name="date" data-date-format="{{ config('settings.date_format') }}" id="date" readonly="readonly" class="form-control calculateDay @error('date') is-invalid @enderror" />
                            @error('date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    
                    <!-- /basic text input -->
                </fieldset>
                <div class="d-flex justify-content-end align-items-center">
                    <button type="submit" id="applyleave" class="btn btn-primary ml-3">Apply<i class="icon-paperplane ml-2"></i></button>
                    <a class="btn btn-default btn-close btn-danger ml-3" href="{{ route('apply-comp-off-leave.create') }}">Reset</a>
                </div>
            </form>
    </div>
</div>
<!-- /form validation -->


@endsection
@section('js')
<script>

    $(document).ready(function() {

      

               
    });
 
    
    var startDate = new Date(new Date().getFullYear(), 0, 1);
    var allFutureDate = '{{$all_future_date}}';
    var futureRequestsTillDays = '{{$future_requests_till_days}}';
       
    if(allFutureDate == 'yes' && futureRequestsTillDays != ''){
       var date = new Date();
       var endDate = new Date(Date.now()+futureRequestsTillDays*24*60*60*1000);
        
    }else{
        var endDate = new Date();
    }
    
    $("#date").datepicker({
        // format: "dd-mm-yyyy", 
        autoclose: true,
        startDate: startDate,
        endDate : endDate,
        orientation: "bottom left",
        maxDate: "+1M +1D"
    });



    $('#date').on('change', function() {
        var date = $("#date").val();
           
            var baseurl =  document.getElementById('baseurl').value;
            $.ajax({
                type: 'GET',
                url: baseurl+'/check-comp-off-leave-exists',
                data: {date:date},
                success: function(data) {
                    console.log(data);
                    if(data.status == '100')
                    {
                        var notice = new PNotify({
                                    title: 'Error',
                                    text: data.message,
                                    delay:1500,
                                    hide: true,
                                });

                        $('#applyleave').attr('disabled', true);        
                    }else{
                        $('#applyleave').attr('disabled', false);
                    }
                },
                error: function(data) {
                    //alert(data.responseText);
                }
            });
        
        
    });
    
</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