@extends('dashboard.layouts.app')
@section('css')
<style>
    .editor{
        margin-top:30px;
    }
    .mart-30{
        margin-top:30px;
    }
    textarea {
    height: auto !important;
}
    </style>
@endsection
@section('content')
<div class="page-titles">
  <div class="d-flex align-items-center">
      <h5 class="font-medium m-b-0">Leaves</h5>
      <div class="custom-breadcrumb ml-auto">
          <a href="{{url('/dashboard')}}" class="breadcrumb">Home</a>
          <a href="{{url('/dashboard/leave')}}" class="breadcrumb">Leaves</a>
      </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
      <div class="col s12 l12">
          <div class="card">
              <div class="card-content">
                    <h5 class="card-title activator">Edit</h5>
                    @if ($message = Session::get('success'))
                    <div class="success-alert-bar p-15 m-b-20 green white-text">
                    {{ $message }}
                    </div>
                    @endif
                    @if (count($errors) > 0)
                    <div class="error-alert-bar p-15 m-b-20 red white-text">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                     @endif
                    <form method="post" action="{{url('dashboard/leave/store')}}" enctype="multipart/form-data" class="mForm" id="mForm">
                    {{csrf_field()}}
                    <div class="row">
                            <div class="input-field col s6">
                                <select name="doctor" id="doctors" class="">
                                <option value="">Select</option>
                                @foreach($doctors as $c)
                                  <option value="{{$c->doctor_id}}"  @if($c->doctor_id==$row->doctor_id) selected="selected" @endif>{{$c->doctor_name}}</option>
                                  @endforeach
                                </select>
                                <label for="doctors">Doctors<span class="red-star">*</span></label>
                                <span class="image_error" role="alert" id="doctors_error"></span>
                            </div>
                        </div>
                    <div class="row">
                        <div class="input-field col s12">
                            <label for="schedule">Leave Dates</label>
                            <input type="text" name="schedule" class="form-control date" value="{{ $formattedDates }}" />
                            <!-- <input id="date_range" type="text" name="schedule" class=""> -->
                            <span class="error" role="alert" id="schedule_error"></span>
                        </div>
                    </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <div class="success-alert-bar p-15 m-b-20 green white-text status" style="display: none;"></div>
                                <div class="loading" style="display:none"><img src="{{asset('asset/images/loading.gif')}}"></div>
                                <button class="btn cyan waves-effect waves-light right sub-btn" type="submit" name="action">Submit
                                </button>
                            </div>
                        </div>
                </form>         
            </div>
        </div>
    </div>
</div>
</div>
@endsection
<style>
    .datepicker{
        position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 350px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    }
</style>
@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
  <script>
 $(document).ready(function() {
        $('.date').datepicker({
            multidate: true,
                format: 'dd-mm-yyyy'
            });
    });
$(document).ready(function(){
    var date = new Date();
        var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
    $('.datepicker1').datepicker({
        format:"dd-mm-yyyy",
        //minDate: today,
        showClearBtn:true,
    });
});
 $('.sub-btn').on('click', function (e) {
    $('#name, #phone, #eh_date, #slug').each(function() {
  if ($(this).val() == '') {
    $(this).siblings(".error").show();
  }
});
        $('.status').hide();
        $('.red').html('');
        $('#filesizeerror').html('');
         e.preventDefault();
         $.ajax({
                url: '{{ url("/dashboard/leave/store") }}',
                method: "post",
                data: new FormData($("#mForm")[0]),
                cache: false,
                contentType: false,
                processData: false,
                dataType:"json",
                beforeSend: function(){
       $('.loading').show();
   },
                success: function (response) {
                   $('.loading').hide();
                    var error = response.error;
                   if(error!=''){
                        //var errors = $.parseJSON(error);
                        //console.log(errors);
                    $.each(error, function (key, val) {
                        $("#" + key + "_error").text(val[0]);
                    });
                    }else{
                        $("#mForm")[0].reset();
                        $('.status').show();
                        $('.status').html(response.message);
                        window.location = site_url+'/dashboard/leave';
                    }
                    
                }
               
            });
    
     });
     $('#myFile').bind('change', function() {
  $('#image_error').html('');
if(this.files[0].size>500000){
  document.getElementById("filesizeerror").style.display = "block";
}
else{
  document.getElementById("filesizeerror").style.display = "none";
}
});
jQuery( document ).ready(function() {
    $('form input[type=text],input[type=date]').focus(function(){
    // get selected input error container
    $(this).siblings(".error").hide();
    });
});

jQuery( document ).ready(function() {
    $('form .category-field').focus(function(){
    // get selected input error container
    $(this).siblings(".error").hide();
    });
});
$('#slug').keyup(function() {
    $(this).val($(this).val().replace(/[^\w\s]+/g, ''));
});
</script>
@endsection