@extends('layouts.app')

@section('title', 'Request a leave')

@section('content')

<!-- Page Content -->
   <div class="content container-fluid">
				
			<!-- Page Header -->
			<div class="page-header">
				<div class="row align-items-center">
					<div class="col">
						<h3 class="page-title">Request a Leave</h3>
						
					</div>
					<div class="col-auto float-right ml-auto">
						
					</div>
				</div>
			</div>
			<!-- /Page Header -->
					
		<!-- Leave Statistics -->
		<div class="row">
			<div class="col-md-3">
				<div class="stats-info">
					<h6 class="text-info">Annual Leave</h6>
					<h4 class="text-info">12</h4>
				</div>
			</div>
			<div class="col-md-3">
				<div class="stats-info">
					<h6>Available Leave <small class="text-purple">(Till {{date('M, Y')}})</small></h6>
					<h4>@if(date('M') =='Apr') 4 @endif</h4>
				</div>
			</div>
			<div class="col-md-3">
				<div class="stats-info">
					<h6 class="text-danger">Taken Leave</h6>
					<h4 class="text-danger">{{$takenLeave}}</h4>
				</div>
			</div>
			
			<div class="col-md-3">
				<div class="stats-info">
					<h6 class="text-success">Remaining Leave</h6>
					<h4 class="text-success">0</h4>
				</div>
			</div>
		</div>
		<!-- /Leave Statistics -->
		
		<div class="row">
			<div class="col-md-12">							

				{{ Form::open(array('url' => 'requestLeave', 'name' => 'requestNew', 'files' => true)) }}

                  <div class="col-sm-8 offset-sm-2">                    
                  <div class="" style="padding: 18px 0; ">
                  <h3 class=" text-center">Request a Leave </h3>
                  <!-- row -->
                  <div class="row" >                    
                    <div class="col-sm-6" >
                      <div class="form-group" >
                        <label>Type <span class="text-danger">*</span></label>
                        <select class="select form-control leaveType" name="type">
                          <option value="">-Select-</option>
                          <option value="halfday">Short Leave / Half Day</option>
                          <option value="singleday">Single Day</option>                          
                          <option value="multipleday">Multiple Day</option>
                        </select>
                        <small class="text-muted">Select leave type - Single day, Short leave, Multiple days.</small>
                        <span class="text-warning"></span>
                      </div>
                    </div>                    
                  </div>
                  <!-- end row --> 
                  <!--  row -->
                  <div class="row ifShortLeave hide">
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label>Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control  datepickerFormToday"  type="text" name="halfday_date" value="{{old('from_date')}}">
                          @if ($errors->has('from_date')) <p class="text-danger">{{ $errors->first('from_date') }}</p> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6 ">
                      <div class="form-group" style="margin-top: 32px; margin-bottom: 5px;">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="time_slot" id="time_slot_morning" value="morning" >
                            <label class="form-check-label" for="time_slot_morning">
                            Morning 
                            </label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="time_slot" id="time_slot_evening" value="evening" >
                            <label class="form-check-label" for="time_slot_evening">
                            Evening 
                            </label>
                          </div>
                      </div>
                      <span id="time_slot_error"></span>
                    </div>                  
                  </div>
                  <!--  row -->                             
                  <!--  row -->
                  <div class="row ifSingleDayLeave hide">
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label>Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control  datepickerFormToday"  type="text" name="single_day_date" value="{{old('single_day_date')}}">
                          @if ($errors->has('single_day_date')) <p class="text-danger">{{ $errors->first('single_day_date') }}</p> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-6 ">
                      <div class="form-group">
                        <label>Total Day</label>                        
                          <input class="form-control " type="text" value="1" readonly>
                      </div>
                      
                    </div>                  
                  </div>
                  <!--  row -->                              
                  <!--  row -->
                  <div class="row multipledays hide">
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label> From Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control  from_date" id="from_date" type="text" name="from_date" value="{{old('from_date')}}">
                          @if ($errors->has('from_date')) <p class="text-danger">{{ $errors->first('from_date') }}</p> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4 ifMultipleRequired">
                      <div class="form-group">
                        <label>To Date <span class="text-danger">*</span></label>
                        <div class="cal-icon">
                          <input class="form-control  to_date" id="to_date" type="text" name="to_date" value="{{old('to_date')}}">
                          @if ($errors->has('to_date')) <p class="text-danger">{{ $errors->first('to_date') }}</p> @endif
                        </div>
                      </div>
                    </div>
                    <div class="col-sm-4">
                      <div class="form-group">
                        <label>Total Days</label>                        
                          <input class="form-control total_days" type="text" name="total_days" value="" readonly>
                      </div>
                    </div>
                  </div>               
                    <!-- row -->
                    <div class="row" >
                      <div class="col-sm-12">
                        <div class="form-group ">
                          <label>Subject/Reason <span class="text-danger">*</span></label>
                          <input class="form-control " type="text" name="reason" value="{{old('reason')}}">
                          @if ($errors->has('reason')) <p class="text-danger">{{ $errors->first('reason') }}</p> @endif
                        </div>
                      </div>                    
                    </div>
                    <!-- row end -->
                    <!-- row -->
                    <div class="row" data-select2-id="35">
                      <div class="col-sm-12">
                        <div class="form-group">
                          <label>Mesage</label>
                          {!! Form::textarea('message', null, ['class' => 'form-control summernote', 'placeholder' => 'Please brief message here...']) !!}
                          @if ($errors->has('message')) <p class="text-danger">{{ $errors->first('message') }}</p> @endif
                        </div>
                      </div>                    
                    </div>
                    <!-- row end -->
                                                 
                  <div class="submit-section">
                    <button class="btn btn-primary submit-btn">Submit</button>
                  </div>
                  
                  {!! Form::close() !!}

						</div>
					</div>
        </div>
	<!-- /Page Content -->


<script type = "text/javascript" > 

$(document).ready(function() {

$( ".datepickerFormToday" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd-mm-yyyy',
startDate:'today'
});
// 
$( "#from_date,#to_date" ).datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
autoclose:true,
todayHighlight: true,
format: 'dd-mm-yyyy',
startDate:'today'
});
//
$(document).on('change','#to_date',function() {

var fromDate = moment($('#from_date').val(), 'DD-MM-YYYY'); 
var toDate   =  moment($('#to_date').val(), 'DD-MM-YYYY'); 

// console.log(fromDate);
if(fromDate != "" || toDate !=""){ 

if (fromDate.isValid() && toDate.isValid()) {
      var duration  = moment.duration(toDate.diff(fromDate));
      var countDays = duration.days();
    } /*else {

      alert('Invalid date(s).')    
    }*/
if (fromDate < toDate) {  
  var days   = (toDate - fromDate)/1000/60/60/24+(1);
  $('.total_days').val(countDays);
}

if (countDays == 0 || countDays < 0 ) {
  alert ("Please select appropriate date for multiple days");
  $('#to_date').val("");
  $('.total_days').val("");
 }
}
});

//
$(document).on('change','#from_date',function() {

var fromDate = moment($('#from_date').val(), 'DD-MM-YYYY'); 
var toDate   =  moment($('#to_date').val(), 'DD-MM-YYYY'); 

// console.log(fromDate);
if(fromDate != "" || toDate !=""){ 

if (fromDate.isValid() && toDate.isValid()) {
      var duration  = moment.duration(toDate.diff(fromDate));
      var countDays = duration.days();
    } /*else {

      alert('Invalid date(s).')    
    }*/
if (fromDate < toDate) {  
  var days   = (toDate - fromDate)/1000/60/60/24+(1);
  $('.total_days').val(countDays);
}
if (countDays == 0 || countDays < 0 ) {
  alert ("Please select appropriate date for multiple days");
  $('#from_date').val("");
  $('#to_date').val("");
  $('.total_days').val("");
 }
}
});

//
$(document).on('change','.leaveType',function(){
  var type = $('.leaveType option:selected').val();
  if(type == 'halfday')
  {
    $('.ifShortLeave').css('display','flex');    
    $('.multipledays').css('display','none');
    $('.ifSingleDayLeave').css('display','none');    
  }
  if(type == 'multipleday')
  {
    $('.ifShortLeave').css('display','none');    
    $('.ifSingleDayLeave').css('display','none');    
    $('.multipledays').css('display','flex');
    
    //clear val
    $('.ifSingleRemove').text('From');
    $('.total_days').val('');
  }
  if(type == 'singleday')
  {
    $('.ifShortLeave').css('display','none');    
    $('.multipledays').css('display','none');    
    $('.ifSingleDayLeave').css('display','flex');    
    //set value for single day
    $('.total_days').val('1');
  }
});

// It has the name attribute "registration"
  $("form[name='requestNew']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute      
      type: "required",
      reason: "required",
      message:"required",
      from_date: {
          required:{
              depends: function(){
                  return $(".leaveType option:selected").val() == 'multipleday';
              }
          }
      },
      to_date: {
          required:{
              depends: function(){
                  return $(".leaveType option:selected").val() == 'multipleday';
              }
          }
      },
      halfday_date: {
          required:{
              depends: function(){
                  return $(".leaveType option:selected").val() == 'halfday';
              }
          }
      },
       single_day_date: {
          required:{
              depends: function(){
                  return $(".leaveType option:selected").val() == 'singleday';
              }
          }
      },
       time_slot: {
          required:{
              depends: function(){
                  return $(".leaveType option:selected").val() == 'halfday';
              }
          }
      },
          
    },
    errorPlacement: function(error, element) {
            //Custom position: first name
            if (element.attr("name") == "type" ) {
                $(".text-warning").html(error);
            }
            //Custom position: second name
            else if (element.attr("name") == "terminateDate" ) {
                $("#terminatedateError").html(error);
            }
            //Custom position: second name
            else if (element.attr("name") == "time_slot" ) {
                $("#time_slot_error").html(error);
            }
            // Default position: if no match is met (other fields)
            else {
                  element.after(error); // default error placement
            }
        },
    // Specify validation error messages
    messages: {
      action_type: "Please select an action",
      rehireDate: "Please select date",    
      terminateDate: "Please select date"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid  
  });

});

//
  
</script> 


@endsection