new_raffles/Modules/Leave/resources/views/leave/partials/action.blade.php

<div class="row">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body">
        <div class="row g-2">
          <div class="col-md-6">
            {{ html()->label('Employee')->class('form-label') }}
            {{ html()->select('employee_id', $employeeList)->class('form-select select2')->placeholder('Select Employee')->required() }}
            {{ html()->div('Please Select Employee')->class('invalid-feedback') }}
          </div>

          <div class="col-md-6">
            {{ html()->label('Leave Type')->class('form-label') }}
            {{ html()->select('leave_type_id', $leaveTypeList)->class('form-select select2')->attributes(['id' => 'leave_type_id'])->placeholder('Select Leave Type')->required() }}
            {{ html()->div('Please Select Leave Type')->class('invalid-feedback') }}
          </div>

          <div class="col-md-12">
            {{ html()->label('Selet Duration')->class('form-label') }}
            <div>
              @foreach ($duration as $durationKey => $durationItem)
                <div class="form-check form-check-inline">
                  {{ html()->radio('duration')->class('form-check-input duration')->checked(old('duration', isset($leave) && $leave->duration === $durationKey))->attributes(['id' => $durationKey])->value($durationKey)->required() }}
                  {{ html()->label($durationItem)->class('form-check-label')->for($durationKey) }}
                </div>
              @endforeach
            </div>
          </div>

          <div class="col-md-12">
            {{ html()->label('Choose Date')->class('form-label') }}
            {{ html()->text('start_date')->class('form-control start-date')->placeholder('Select Start Date')->attributes([
                    // 'data-provider' => 'flatpickr',
                    // 'data-date-format' => 'd M, Y',
                    // 'data-multiple-date' => 'true',
                ])->required() }}
            {{ html()->div('Please Select Start Date')->class('invalid-feedback') }}
          </div>

          <div class="col-md-8 leave-note">
            <ul class="list-group">
            </ul>
          </div>

          {{-- <div class="col-md-6 end-date d-none">
            {{ html()->label('End Date')->class('form-label') }}
            {{ html()->date('end_date')->class('form-control')->placeholder('Select End Date') }}
            {{ html()->div('Please Select End Date')->class('invalid-feedback') }}
          </div> --}}

          <div class="col-md-12">
            {{ html()->label('Description')->class('form-label') }}
            {{ html()->textarea('description')->class('form-control')->placeholder('Write Reason for Leave') }}
          </div>
        </div>
      </div>
    </div>
    <div class="mb-3 text-end">
      {{-- <a href="{{ route('leave.index') }}" class="btn btn-danger w-sm">Cancel</a> --}}
      {{ html()->button($editable ? 'Update' : 'Save', 'submit')->class('btn btn-success btn-save d-none') }}
    </div>
  </div>

  <div class="col-lg-4">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title mb-0">Leave Remaining</h5>
      </div>
      <div class="card-body p-2">
        <div class="table-responsive">
          <table class="table-nowrap table-sm mb-0 table align-middle">
            <thead class="table-dark text-white">
              <tr>
                <th scope="col" style="width: 62;">Leave Type</th>
                <th scope="col">Total</th>
                <th scope="col">Remain</th>
              </tr>
            </thead>
            <tbody id="leaveRemainTable">
            </tbody><!-- end tbody -->
          </table><!-- end table -->
        </div>
      </div>
      <!-- end card body -->
    </div>
    <!-- end card -->
    @can('leave.updateStatus')
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">Leave Status</h5>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-md-12">
              {{ html()->label('Status')->class('form-label') }}
              {{ html()->select('status', $status)->class('form-control select2')->required() }}
            </div>
          </div>
        </div>
        <!-- end card body -->
      </div>
      <!-- end card -->
    @endcan
  </div>
</div>

@push('js')
  <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
  <script>
    let startDatePicker = initializeFlatpickr('single');
    let appendError = $('.leave-note').find('.list-group');

    $('input[name=duration]').on('click', function() {
      if ($(this).is(":checked")) {
        var checked = $(this).prop("checked", true).val();
        startDatePicker.destroy();
        appendError.html('')
        if (checked == 3) {
          startDatePicker = initializeFlatpickr('multiple');
        } else {
          startDatePicker = initializeFlatpickr('single');
        }
        $(".start-date").val('');
      }
    })

    $('select[name=employee_id]').on('change', function() {
      leave_type_id = $(this).val();
      fetchLeaveRemain()
    })

    function initializeFlatpickr(mode) {
      return $(".start-date").flatpickr({
        enableTime: false,
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "Y-m-d",
        defaultDate: "",
        mode: mode,
        onChange: function(selectedDates, dateStr, instance) {
          checkEmpLeaveDates(dateStr)
        },
      });
    }

    const checkEmpLeaveDates = async (dates) => {
      appendError.html('')

      $('.btn-save').addClass('d-none')
      try {
        const request = new Request("{{ route('leave.checkEmpLeaveDates') }}", {
          method: "POST",
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
          },
          body: JSON.stringify({
            employee_id: $('select[name=employee_id]').val(),
            leave_type_id: $('select[name=leave_type_id]').val(),
            duration: $('input[name=duration]:checked').val(),
            dates: dates
          }),
        });

        const response = await fetch(request);

        if (!response.ok) {
          throw new Error('Network response was not ok ' + response);
        }
        const data = await response.json();

        if (data.status == false) {
          if (data.errors) {
            Object.keys(data.errors).forEach(key => {
              const errorMessage = data.errors[key];
              appendError.append(
                `<li class="list-group-item text-danger"><i class="ri-close-line"></i> ${errorMessage}</li>`);
            })
          }
        } else {
          appendError.html(data.html)
          if (data.btnFlag == true) {
            $('.btn-save').removeClass('d-none')
          }
        }
      } catch (error) {

        console.error('Fetch Error:', error);

      }
    }

    const fetchLeaveRemain = () => {
      const params = {
        employee_id: $('select[name=employee_id]').val(),
      };
      const urlParams = new URLSearchParams(params);
      appendError.html('')

      fetch(`{{ route('leave.getRemainingEmpLeave') }}?${urlParams.toString()}`, {
          method: 'GET',
        })
        .then(response => response.json())
        .then(data => {
          $('#leaveRemainTable').html(data.view)
        })
        .catch(error => {
          console.error('Fetch Error:', error);
        });
    }
  </script>

  @isset($editable)
    <script>
      $(document).ready(function() {
        $("input[name=duration]:checked").trigger("click");
      })
    </script>
  @endisset
@endpush