@extends('layouts.app')

@section('content')

 <!-- Content part -->
         <div class="admim-content-wrapper">
            <div class="wrapper">
               <div class="row ">
                  <div class="col-la-12">
                     <div class="admin-content-header admin-content-sky-header sky-bg">
                        <h1 class="float-left-sm">Add Leaves</h1>
                     </div>
                  </div>
                  <div class="clearfix"></div>


                  <div class="main-bg white-bg label-inline-block clearfix margin-bottom-la">
                     <?php echo show_flash_messages(); ?>
                     <div class="col-la-12">
                        <ul class="breadcrumb-slash">
                           <li><a href="{{url('/')}}"><i class="fas fa-home"></i></a></li>
                           <li><a href="#">Leaves </a></li>
                           <li class="active">Edit</li>
                        </ul>
                        <div class="inner-content-header">
                           <h3 class=" text-border">
                              Leave Information
                              <small>* Denotes required field</small>
                           </h3>
                        </div>
                     </div>
                     
                    
                     <form id="editleaveForm" class="form-horizontal" action="{{ route('leaves.update', $leave->i_id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                           <div id="formSections">
                              <div class="form-section row">
                                 <div class="col-me-6">
                                    <div class="form-panel">
                                       <label for="leave_date" class="col-sm-4 col-me-4">Leave Date<span> *</span></label>
                                       <div class="col-sm-7 col-me-7">
                                          <input type="text" class="input-panel leave-date datepicker" id="leave_date" name="leave_date[]" value="{{ $leave->leave_date }}">
                                          <span class="error-feedback text-danger" id="leave_dateError"></span>
                                       </div>
                                    </div>
                                 </div>

                                 <div class="col-me-6">
                                    <div class="form-panel">
                                        <label for="user_id" class="col-sm-4 col-me-4">Staff List<span> *</span></label>
                                        <div class="col-sm-7 col-me-7">
                                            <select id="user_id" name="user_id[]" class="input-panel">
                                                <option value="">Select User</option>
                                                @foreach ($userDetails as $user)
                                                    <option value="{{ $user->i_id }}" {{ $user->i_id == $leave->user_id ? 'selected' : '' }}>
                                                        {{ $user->s_first_name }} {{ $user->s_last_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="error-feedback text-danger" id="user_idError"></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-me-6">
                                    <div class="form-panel">
                                        <label for="leave_type_id" class="col-sm-4 col-me-4">Leave Type<span> *</span></label>
                                        <div class="col-sm-7 col-me-7">
                                            <select id="leave_type_id" name="leave_type_id[]" class="input-panel">
                                                <option value="">Select Leave Type</option>
                                                @foreach ($leavescategoryDetails as $leavescat)
                                                    <option value="{{ $leavescat->i_id }}" {{ $leavescat->i_id == $leave->leave_type_id ? 'selected' : '' }}>
                                                        {{ $leavescat->leave_type_title }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <span class="error-feedback text-danger" id="leave_type_idError"></span>
                                        </div>
                                    </div>
                                </div>
                                

                                 <div class="col-me-6">
                                    <div class="form-panel">
                                          <label for="leave_purpose" class="col-sm-4 col-me-4">Leave Purpose<span> *</span></label>
                                       <div class="col-sm-7 col-me-7">
                                          <textarea class="input-panel" id="leave_purpose" name="leave_purpose[]">{{ $leave->leave_purpose }}</textarea>
                                          <span class="error-feedback text-danger" id="leave_purposeError"></span>
                                       </div>
                                    </div>
                                 </div>
                                {{-- <div class="col-me-12">
                                    <button type="button" class="button button-la float-right button-danger remove-section"> <i class="fas fa-solid fa-minus"></i> Remove</button>  
                                </div> --}}
                              </div>
                           </div> 
                              <div class="col-me-12">
                                 <div class="form-panel submit-form">
                                       
                                       {{-- <button type="button" id="addleaves" class="button button-sucess button-la float-left"> <i class="fas fa-solid fa-plus"></i> Add More </button>    --}}         
                                       <button type="submit" id="submitleave" class="button button-la float-left"> Submit </button>   
                                       <a href="{{route('leaves.index')}}" class="button button-la button-gray float-left"><i class="fas fa-times"></i> Cancel</a>                      
                                 </div>
                              </div>
                            
                        </form>

                  </div>
               </div>
            </div>            
         </div>
         <!-- /Content part -->

            <script>
               $(document).ready(function () {
                  // Function to initialize datepicker
                  function initDatepicker(section) {
                     section.find('.datepicker').datepicker({
                           dateFormat: "yy-mm-dd",
                           changeMonth: true,
                           changeYear: true,
                           minDate: 0
                     });
                  }
               
                  // Add form section
                  $('#addleaves').on('click', function () {
                     var clone = $('.form-section:first').clone();
                     clone.find(':input').val('');
               
                     // Update IDs to make them unique
                     clone.find('.datepicker').each(function () {
                           var uniqueId = 'datepicker_' + (new Date()).getTime();
                           $(this).attr('id', uniqueId).removeClass('hasDatepicker');
                     });
               
                     $('#formSections').append(clone);
               
                     // Initialize datepicker for the new leave_date input
                     initDatepicker(clone);
                  });
               
                  // Remove form section
                  $('#formSections').on('click', '.remove-section', function () {
                     // Check if it's not the last form section before removing
                     if ($('#formSections .form-section').length > 1) {
                           alert('Are you confirm?');
                           $(this).closest('.form-section').remove();
                     } else {
                           alert('At least one section should remain.');
                     }
                  });
               
                  // Initialize datepicker for the first section
                  initDatepicker($('.form-section'));
               
               });
            
            </script>
            
@endsection