{{View::make('layout.header')}}
<style>
.fc-right .fc-state:hover{
     background-color:#fff !important;
    
}
.fc-right .fc-button{
     padding: 0.438rem 0.5rem !important;
     background:transparent;
   
    height: 100%;
}
.fc-right .fc-state-active {
    
    z-index: 1 !important;
}
.fc-next-button, .fc-prev-button{
    background: transparent !important;
}
.fc-month-button, .fc-agendaWeek-button{
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }
.fc-agendaWeek-button, .fc-agendaDay-button{
    border-top-left-radius: 0 !important;
`   border-bottom-left-radius: 0 !important;

}
.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {
    top:-10% !important;
}
.fc-icon-left-single-arrow:after{
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e900" !important;
}
.fc-icon-right-single-arrow:after {
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e901" !important;
}
.fc-state-default {
    box-shadow: none !important;
}
.fc-content .fc-title{
    color:#fff;
    font-size:9px;
    white-space: break-spaces !important;
}

.fc-right .fc-button-group{
    width: 60% !important;
    float: right !important;
}
@media only screen and (min-width: 768px) {
.fc-left, .fc-right{
    width:50% !important;
}
.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}
}
@media only screen and (max-width: 768px) {
.fc-left, .fc-right{
    width:100% !important;
}
.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}
}

</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">E-Leave</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">Employee
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">Request for Rl</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                <div class="col-12 col-md-4">
                    <div class="card">
                      <div class="card-header">
                        <h4 class="card-title">Apply Leave</h4>
                      </div>
                      <div class="card-body" style="padding-top:0px;">             
                          <form  id="all-filter11" method="post" enctype="multipart/form-data">
                               <input type="hidden" name="year" id="year" class="form-control"  style="" value="{{ date('Y') }}" placeholder="">
                      
                          <div class="row" id="leave">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                <input type="hidden" name="user_id" value="{{Auth::id()}}">
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment-date">Approver :</label>
                                        <select class="form-control" name="approver_" id="approver" disabled>
                                        </select>
                                        <input type="hidden" name="approver" id="approver_val" />
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment-date">Work Date :</label>
                                        
                                        <input type="date" name="lstartdate" id="lstartdate" class="form-control flatpickr-basic"  style="padding-left: 10px;" autocomplete="off" value="" placeholder="DD-MM-YYYY" readonly >
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label>No. of Leave Granted</label>
                                        <select name="grandays" id="grandays" class="form-control">
                                            <option value="0.5">0.5</option>
                                            <option value="1">1</option>
                                        </select>
                                    </div> 
                                </div>  
                                <div class="col-md-12 col-12">   
                                    <div class="form-group">
                                        <label>Reason</label>
                                        <textarea class="form-control" name="rl_reason" id="rl_reason" placeholder="Type here" ></textarea>
                                        @if ($errors->has('reason'))<em class="required" style="font-size: 14px; font-style: italic;color: #dc3545!important;">{!!$errors->first('reason')!!}</em>@endif
                                    </div>
                                </div>
                               
                                <div class="col-md-12 col-12 mb-1">
                                    <div id="msg"></div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <div class="form-group d-flex flex-wrap mb-0">
                                        <button type="button" onclick="apply_Leave()" class="btn btn-info mr-1" id="apply" style="width: 30%;">Apply</button>
                                        <button type="button" onclick="clear_form('#leave')" class="btn btn-outline-secondary" data-dismiss="modal" style="width: 30%;">Cancel</button>
                                    </div>
                                </div>
                          </div>
                          </form>
                      </div>
                    </div>
                  </div>
                  <div class="app-calendar col-12 col-md-8">
                    <div class="card">
                      <div class="card-header">
                        <h4 class="card-title">Leave</h4>
                      </div>
                      <div class="card-body" style="padding:0px; ">
                          <div class="row" style="margin:0px;">
                            <div class="position-relative">
                                <div class="card shadow-none border-0 mb-0 rounded-0">
                                    <div class="card-body " style="padding-top:0px;">
                                        <div id="calendar"></div>
                                    </div>
                                </div>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
    
    <script>
    var currentMonth = (new Date).getMonth();



    var today = new Date();

    var dd = today.getDate();

    var mm = today.getMonth()+1;

    var yyyy = today.getFullYear();

    var pastemp = 0;

    var pastleavepermission = '';

    var max_noof_pastleave = 0;

    var nextStepAllowed = 1;
    var currentYear = (new Date).getFullYear();
    var rlpendingVal = '';
    var calender ;
    if(dd<10){dd='0'+dd} if(mm<10){mm='0'+mm} today = dd+'-'+mm+'-'+yyyy;
    

        function getApprover(){
            $.ajax({
                type:'get',
                url:'{{ route('getRL_Approvers')}}',
                success:function(resObj) {
                    var html = '';
                    for(var i = 0; i < resObj.length; i++){
                        if(resObj[i].name!='' && resObj[i].name!=null){
                            if(i==0){
                                $("#approver_val").val(resObj[i].username);
                                html += '<option value="'+resObj[i].username+'" selected="selected">'+resObj[i].name+'</option>';
                            }else{
                                html += '<option value="'+resObj[i].username+'" >'+resObj[i].name+'</option>';
                            }
                        }
                    }
                    $("#approver").html(html);
                }
            });	
        }
      $(document).ready(function() {
        getApprover();
          $("#leave_type").change();
            calender = $('#calendar').fullCalendar({
                height: 780,
                initialView: 'dayGridMonth',
                initialView: 'listMonth',
                dragScroll: true,
                left:   'title',
            dayMaxEvents: 1,
            
            eventResizableFromStart: true,
            customButtons: {
            sidebarToggle: {
                text: 'Sidebar'
            }
            },
            header: {
            left: 'prev,next, title',
            right: 'month,agendaWeek,agendaDay,listMonth'
        },
            initialDate: new Date(),
            navLinks: true,
            eventClassNames: function ({ event: calendarEvent }) {
     
    },
    dateClick: function (info) {
      var date = moment(info.date).format('YYYY-MM-DD');
      resetValues();
      sidebar.modal('show');
      addEventBtn.removeClass('d-none');
      updateEventBtn.addClass('d-none');
      btnDeleteEvent.addClass('d-none');
      startDate.val(date);
      endDate.val(date);
    },
    eventClick: function (info) {
      eventClick(info);
    },
    datesSet: function () {
      modifyToggler();
    },
    viewDidMount: function () {
      modifyToggler();
    },
  
                eventLimit: false,
               
                events: null,
           
                eventRender: function (event, element) {
                    element.css("background", event.color);
                    element.css("color", event.text_color);
                    element.css("font-size", '12PX');

                },
            });
      
        });

  
        function apply_Leave()
        {	
         
            if(validate()){
            var url = "controller/leave.php";
            var noday = 0;
            
            $.ajax({
                type:'post',
                url:'{{ route('addRLeave')}}',
                data:{
                    _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/E-Leave/request-for-rl2.blade.php:303
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/E-Leave/request-for-rl2.blade.php</b> on line <b>303</b><br />