@extends('employee.layouts.master')
@section('styles')
  <link rel="stylesheet" href="{{asset('admin/plugins/select2/css/select2.min.css')}}">
  <link rel="stylesheet" href="{{asset('admin/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css')}}">
@endsection
@section('contents')
<div class="content-wrapper pb-0">
<div class="page-header flex-wrap">
  <h3 class="mb-0"> Apply for Leave</h3>
  <!-- <div class="d-flex">
    <button type="button" class="btn btn-sm bg-white btn-icon-text border">
      <i class="mdi mdi-email btn-icon-prepend"></i> Email </button>
    <button type="button" class="btn btn-sm bg-white btn-icon-text border ml-3">
      <i class="mdi mdi-printer btn-icon-prepend"></i> Print </button>
    <button type="button" class="btn btn-sm ml-3 btn-success"> Add User </button>
  </div> -->
</div>
<div class="row">
  <div class="col-md-12 stretch-card grid-margin">
    <div class="card">
        <div class="card-body">
          <form action="{{route('apply-for-leave')}}" id="sub-admin-form" method="post" enctype="multipart/form-data">
          @csrf
           <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Leave Type*:</label>
            <input type="hidden" name="id" value="{{session('employeeDetail')->id}}">
            <select class="form-control all-clean" id="in_out" name="in_out" required>
              <option value="">Please select Leave Type</option>
              <option value="Leave Without Pay">Leave Without Pay</option>
              <option value="Comp - off">Comp - off</option>
              <option value="Paid Leave">Paid Leave</option>
            </select>
          </div>
          <div class="row">
          <div class="col-md-6">
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Date from *:</label>
            <input type="date" class="form-control" id="from_date" name="from_date" required>
          </div>
          </div>
          <div class="col-md-6">
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Session *:</label>
            <select class="form-control all-clean" id="from_session" name="from_session" required>
              <option value="">Please select Session</option>
              <option value="Session 1">Session 1</option>
              <option value="Session 2">Session 2</option>
            </select>
          </div>
        </div>
        </div>
        <div class="row">
          <div class="col-md-6">
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Date to *:</label>
            <input type="date" class="form-control" id="to_date" name="to_date" required>
          </div>
          </div>
          <div class="col-md-6">
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Session *:</label>
            <select class="form-control all-clean" id="to_session" name="to_session" required>
              <option value="">Please select Session</option>
              <option value="Session 1">Session 1</option>
              <option value="Session 2">Session 2</option>
            </select>
          </div>
        </div>
        </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Reporting to *:</label>
            <input type="text" class="form-control" id="reporting" name="reporting" value="Khushika Sharma" >
          </div>
          <div class="form-group">
              <label>Please add CC*:</label>
              <select class="select2" multiple="multiple" id="reference" name ="cc" data-placeholder="Select a Reporting Person" style="width: 100%;">
                
              </select>
            </div>
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Contact Details *:</label>
            <input type="text" class="form-control" id="contact_details" name="contact_details" value="" >
          </div>
          <div class="form-group Apply-to">
            <label for="recipient-name" class="control-label mb-10">Reason :</label>
            <input type="text" class="form-control all-clean" id="reason" name="reason" value="{{old('reason')}}" placeholder="Please Enter Reason" required>
          </div>
          
              
          <div class="form-group">
            <label for="recipient-name" class="control-label mb-10">Attach File :</label>
            <input type="file" class="form-control all-clean" id="file" name="file" value="{{old('file')}}" placeholder="Please select file" >
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary" onclick="$('#sub-admin-form').submit()"><spam id="title-button">Submit</spam></button>
          </div>
        </form>
        </div>
      </div>
  </div>

</div>

</div>
@endsection
@section('scripts')

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.0.0/index.global.min.js'></script>
<script src="{{asset('admin/plugins/select2/js/select2.full.min.js')}}"></script>
<script type="text/javascript">
  $(document).ready(function(){

     $( "#reference" ).select2({
        ajax: { 
          url: "{{route('getTeamEmployee')}}",
          type: "get",
          dataType: 'json',
          delay: 250,
          data: function (params) {
            return {
               search: params.term // search term
            };
          },
          processResults: function (response) {
            return {
              results: response
            };
          },
          cache: true
        }

     });

   });
  
  function getTheMember() {
    member = $('#member').val();
    if(member.length > 3 ) 
      {
        $.ajax({
          type: "get",
          url: reqUrl,
          data: reqData,
          dataType: "json",
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
          beforeSend: function() {
              

          },
          complete: function() {

          },
          success: function(response) {
              console.log(response);
              // var len = response.data.length;
              // $("#searchResult").empty();
              // for( var i = 0; i<len; i++){

              //     var id = response.data[i]['id'];
              //     var name = response.data[i]['name'];
              //     var ifsc = response.data[i]['ifsc'];
              //     $("#searchResult").append("<li value='"+id+"'>Account Holder Name-"+name+" Ifsc Code-"+ifsc+"</li>");

              // }
              // $("#searchResult li").bind("click",function(){
              //    setText(this);

              //    // alert($(this).val());
              // });
              
          }
        });
      }
  }
  $(document).ready(function(){
    updateTime();
    setInterval(function(){ 
    updateTime();    
    }, 1000);
     });
  function updateTime(){
    // alert('working');
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_min = d.getMinutes();

    var curr_sec = d.getSeconds();
    $('#time-change').html(curr_hour + ":" + curr_min + ":" + curr_sec);
  }
  function swipeCall(){
   $('#title-button').html('