@extends('layouts/layoutMaster')

@php $title = isset($leaveAccounting) ? 'Update Leave' : 'Add Leave'; @endphp
@section('title', $title)

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Vendor Styles -->
    @section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
        'resources/assets/vendor/libs/pickr/pickr-themes.scss',
        'resources/assets/vendor/libs/quill/katex.scss',
        'resources/assets/vendor/libs/quill/editor.scss',
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
        'resources/assets/vendor/libs/pickr/pickr.js',
        'resources/assets/vendor/libs/quill/katex.js',
        'resources/assets/vendor/libs/quill/quill.js',
    ])
@endsection

@section('page-script')
    @vite(['resources/assets/js/forms-pickers.js'])
@endsection

@section('content')
    <style>
        .light-style .ql-snow.ql-container {
            border: 1px solid #cfd0d6;
            height: fit-content;
            border-bottom-right-radius: 0.5rem;
            border-bottom-left-radius: 0.5rem;
        }
        .light-style .ql-snow .ql-editor { border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; }
        .ql-editor > p { margin-bottom: 4px; }
        .ql-editor { height: fit-content; }
    </style>
    <!-- Site List Table -->
    <div class="card mb-6">
      <h5 class="card-header">{{ isset($leaveAccounting) ? 'Update Leave' : 'Add Leave' }}</h5>
      <form class="card-body" id="leaveAccounting_form" action="{{ isset($leaveAccounting) ? route('leaveAccounting-list.update', $leaveAccounting->id) : route('leaveAccounting-list.store') }}" method="POST">
        @csrf
        @if(isset($leaveAccounting))
            @method('PUT')
        @endif
          <div class="row mb-4 g-6">
              <div class="col-md-4">
                <div class="form-floating form-floating-outline">
                  <input type="hidden" name="id" value="{{ old('id', $leaveAccounting->id ?? '') }}">
                  <select class="select2 form-select" id="leave_name" name="leave_name" data-placeholder="Select Leave Type" data-allow-clear="true" @if(isset($view) || (auth()->user()->hasRole('Employee') && isset($leaveAccounting->status))) disabled @endif>
                    <option value="" disabled {{ old('leave_name', $leaveAccounting->leave_name ?? '') == '' ? 'selected' : '' }}>Select Leave Type</option>
                    {{-- <option value="casual_leave" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'casual_leave' ? 'selected' : '' }}>Casual Leave</option> --}}
                    <option value="earned_leave" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'earned_leave' ? 'selected' : '' }}>Earned Leave</option>
                    <option value="leave_without_pay" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'leave_without_pay' ? 'selected' : '' }}>Leave Without Pay</option>
                    {{-- <option value="paternity_leave" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'paternity_leave' ? 'selected' : '' }}>Paternity Leave</option>
                    <option value="sick_leave" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'sick_leave' ? 'selected' : '' }}>Sick Leave</option>
                    <option value="sabbatical_leave" {{ old('leave_name', $leaveAccounting->leave_name ?? '') == 'sabbatical_leave' ? 'selected' : '' }}>Sabbatical Leave</option> --}}
                  </select>
                  <label for="leave_name">Leave Type</label>
                </div>
              </div>
              {{-- <div class="col-md-4">
                <div class="form-floating form-floating-outline">
                  <input type="date" id="start_date" name="start_date" class="form-control" placeholder="Date" value="{{ old('start_date', $leaveAccounting->start_date ?? '') }}" @if(isset($view) || (auth()->user()->hasRole('Employee') && isset($leaveAccounting->status))) disabled @endif>
                  <label for="start_date">Start Date</label>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-floating form-floating-outline">
                  <input type="date" id="end_date" name="end_date" class="form-control" placeholder="Date" value="{{ old('end_date', $leaveAccounting->end_date ?? '') }}" @if(isset($view) || (auth()->user()->hasRole('Employee') && isset($leaveAccounting->status))) disabled @endif>
                  <label for="end_date">End Date</label>
                </div>
              </div> --}}
          </div>

          @if(isset($leaveAccounting))
            @foreach ($leaves as $index => $leave)
              <div id="leave-container">
                <div class="row mb-4 g-6 leave-row">
                  <!-- Date Input -->
                  <div class="col-md-6">
                    <div class="form-floating form-floating-outline">
                      <input
                        type="date"
                        id="date_{{ $index }}"
                        name="date[{{ $index }}]"
                        class="form-control"
                        placeholder="Date"
                        value="{{ old('date.' . $index, $leave->date ?? '') }}"
                        @if(isset($view) || isset($leave->status)) disabled @endif>
                      <label for="date_{{ $index }}">Date</label>
                    </div>
                  </div>

                  <!-- Leave Status -->
                  <div class="col-md-6 d-flex">
                    <div class="d-flex align-items-center">
                      <div class="form-check me-3 mb-0">
                        <input
                          type="radio"
                          class="form-check-input"
                          id="full_day_{{ $index }}"
                          name="leave_status_{{ $index }}"
                          value="1"
                          {{ old('leave_status.' . $index, $leave->days ?? '') == 1 ? 'checked' : '' }}
                          @if(isset($view) || isset($leave->status)) disabled @endif>
                        <label class="form-check-label" for="full_day_{{ $index }}">Full Day</label>
                      </div>
                      <div class="form-check me-3 mb-0">
                        <input
                          type="radio"
                          class="form-check-input"
                          id="half_day_{{ $index }}"
                          name="leave_status_{{ $index }}"
                          value="0.5"
                          {{ old('leave_status.' . $index, $leave->days ?? '') == 0.5 ? 'checked' : '' }}
                          @if(isset($view) || isset($leave->status)) disabled @endif>
                        <label class="form-check-label" for="half_day_{{ $index }}">Half Day</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            @endforeach
          @else
          <div id="leave-container">
            <div class="row mb-4 g-6 leave-row">
              @php
                  $currentYear = date('Y');
                  $minDate = ($currentYear - 1) . '-01-01';
                  $maxDate = ($currentYear + 1) . '-12-31';
              @endphp
              <div class="col-md-4">
                <div class="form-floating form-floating-outline">
                  <input type="date"
                         id="date"
                         name="date[]"
                         class="form-control"
                         placeholder="Date"
                         value="{{ old('date', $leaveAccounting->date ?? '') }}"
                         min="{{ $minDate }}"
                         max="{{ $maxDate }}"
                         @if(isset($view) ||isset($leaveAccounting->status)) disabled @endif>
                  <label for="date">Date</label>
                </div>
              </div>
              <div class="col-md-5 d-flex">
                <div class="d-flex align-items-center">
                  <div class="form-check me-3 mb-0">
                    <input type="radio" class="form-check-input" name="leave_status_0" value="1" />
                    <label class="form-check-label" for="leave_status">Full Day</label>
                  </div>
                  <div class="form-check me-3 mb-0">
                    <input type="radio" class="form-check-input" name="leave_status_0" value="0.5" />
                    <label class="form-check-label" for="leave_status">Half Day</label>
                  </div>
                </div>
              </div>
              <div class="col-md-2">
              </div>
            </div>
          </div>
          <button type="button" id="add-button" class="btn btn-primary mb-4">Add</button>
          @endif
          {{-- @if(isset($leaveAccounting)) --}}
          {{-- @if($leaveAccounting->status == Null) --}}

          {{-- @endif
          @endif --}}

          <div class="row mb-4 g-6">
            <div class="col-md-12">
                {{-- <div class="card-body p-0"> --}}
                <div class="d-flex justify-content-start">
                    <div class="email-reply-toolbar w-100">
                        <span class="ql-formats me-0">
                            <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                            <button class="ql-list" value="ordered"></button>
                            <button class="ql-list" value="bullet"></button>
                            <button class="ql-link"></button>
                        </span>
                    </div>
                </div>
                <div class="email-reply-editor"></div>
                <textarea name="reason" id="reason" style="display: none;"></textarea>

                {{-- <textarea class="form-control" placeholder="Reason" name="reason" id="reason" rows="10" @if(isset($view) || (auth()->user()->hasRole('Employee') && isset($leaveAccounting->status))) disabled @endif>@if(isset($leaveAccounting)){{ $leaveAccounting->reason }}@endif</textarea> --}}
            </div>
          </div>

          @if(auth()->user()->hasRole('Company') || auth()->user()->hasRole('HR') || auth()->user()->hasRole('Super Admin'))
          <div class="row g-6">
            <div class="col-md-3">
              <div class="form-floating form-floating-outline">
                <select class="select2 form-select" id="status" name="status" data-placeholder="Select status" data-allow-clear="true">
                  <option></option>
                  <option value="" {{ old('status', $leaveAccounting->status ?? '') == '' ? 'selected' : '' }}>In Progress</option>
                  <option value="1" {{ old('status', $leaveAccounting->status ?? '') == '1' ? 'selected' : '' }}>Approved</option>
                  <option value="2" {{ old('status', $leaveAccounting->status ?? '') == '2' ? 'selected' : '' }}>Rejected</option>
                </select>
                <label for="status">Status</label>
              </div>
            </div>
            <div class="col-md-9" id="reject_reason_container" style="display: none;">
                <textarea class="form-control" placeholder="Reject Reason" name="reject_reason" id="reject_reason" rows="10">@if(isset($leaveAccounting)){{ $leaveAccounting->reject_reason }}@endif</textarea>
            </div>
          </div>
          @endif
        </div>

        <div class="pt-6">
            <button type="submit" class="btn btn-primary me-4 waves-effect waves-light" @if(auth()->user()->hasRole('Employee') && isset($leaveAccounting->status)) disabled @endif>{{ isset($leaveAccounting) ? 'Update' : 'Submit' }}</button>
            <a href="{{ route('leaveAccountingManage') }}" class="btn btn-outline-secondary waves-effect">Cancel</a>
        </div>
      </form>
    </div>

    <script>
      let rowIndex = 1; // To ensure unique radio button names

      // Get current year and calculate min/max dates
      const currentYear = new Date().getFullYear();
      const minDate = `${currentYear - 1}-01-01`;
      const maxDate = `${currentYear + 1}-12-31`;

      document.getElementById('add-button').addEventListener('click', function () {
        const leaveContainer = document.getElementById('leave-container');
        const newRow = document.createElement('div');
        // newRow.classList.add('row', 'g-6', 'leave-row');
        newRow.innerHTML = `
          <div class="row mb-4 g-6 leave-row" data-index="${rowIndex}">
            <div class="col-md-4">
              <div class="form-floating form-floating-outline">
                <input type="date" id="date_${rowIndex}" name="date[]" class="form-control" placeholder="Date" min="${minDate}" max="${maxDate}">
                <label for="date_${rowIndex}">Date</label>
              </div>
            </div>
            <div class="col-md-5 d-flex">
              <div class="d-flex align-items-center">
                <div class="form-check me-3 mb-0">
                  <input type="radio" class="form-check-input" name="leave_status_${rowIndex}" value="1" />
                  <label class="form-check-label">Full Day</label>
                </div>
                <div class="form-check me-3 mb-0">
                  <input type="radio" class="form-check-input" name="leave_status_${rowIndex}" value="0.5" />
                  <label class="form-check-label">Half Day</label>
                </div>
              </div>
            </div>
            <div class="col-md-2 d-flex align-items-center">
              <button type="button" class="btn btn-danger btn-sm remove-button">Remove</button>
            </div>
          </div>
        `;
        leaveContainer.appendChild(newRow);
        rowIndex++;
      });

      // Event delegation to handle dynamically added remove buttons
      document.getElementById('leave-container').addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-button')) {
          e.target.closest('.leave-row').remove();
        }
      });
    </script>

    <script>
        $(document).ready(function() {
          $('.select2').select2();
        });
        $(document).ready(function () {
            const quill = new Quill('.email-reply-editor', {
                modules: {
                    toolbar: '.email-reply-toolbar'
                },
                placeholder: 'Write your reason here...',
                theme: 'snow'
            });

            // Set existing content if available
            const existingReason = {!! json_encode($leaveAccounting->reason ?? '') !!};
            const isReadOnly = {{ isset($leaveAccounting) ? 'true' : 'false' }};
            if (existingReason) {
                quill.root.innerHTML = existingReason;
            }
            if (isReadOnly) {
                quill.enable(false); // disables user input
                $(quill.root).removeAttr('data-placeholder');
            }
            const $submitBtn = $(this).find('button[type="submit"]');
            $submitBtn.prop('disabled', false);

            $('#leaveAccounting_form').on('submit', function (e) {
                e.preventDefault();
                // alert(quill.root.innerHTML);
                $('#reason').val(quill.root.innerHTML);
                this.submit();
                $submitBtn.prop('disabled', true);
            });
        });
    </script>

    <script>
      $(document).ready(function () {
          toggleRejectReasonVisibility();

          $('#status').on('change', function () {
              toggleRejectReasonVisibility();
          });

          function toggleRejectReasonVisibility() {
              var status = $('#status').val();
              var $rejectReasonContainer = $('#reject_reason_container');

              if (status === '2') {
                  $rejectReasonContainer.show();
              } else {
                  $('#reject_reason').val('');
                  $rejectReasonContainer.hide();
              }
          }
      });
    </script>

    <script>
    document.addEventListener('DOMContentLoaded', function (e) {
      (function () {
        const formValidationExamples = document.getElementById('leaveAccounting_form'),
          formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
          formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
          formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
          formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('[name="formValidationHobbies"]'));

        const fv = FormValidation.formValidation(formValidationExamples, {
          fields: {
            leave_type: {
              validators: {
                notEmpty: {
                  message: 'Please select Leave Type'
                },
              }
            },
          },
          plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
              // Use this for enabling/changing valid/invalid class
              // eleInvalidClass: '',
              eleValidClass: '',
              rowSelector: function (field, ele) {
                return '.form-floating';
              }
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            // Submit the form when all fields are valid
            defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
            autoFocus: new FormValidation.plugins.AutoFocus()
          },
          init: instance => {
            instance.on('plugins.message.placed', function (e) {
              //* Move the error message out of the `input-leaveAccounting` element
              if (e.element.parentElement.classList.contains('input-leaveAccounting')) {
                // `e.field`: The field name
                // `e.messageElement`: The message element
                // `e.element`: The field element
                e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
              }
              //* Move the error message out of the `row` element for custom-options
              if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
                e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
              }
            });
          }
        });

        // Select2 (Country)
        if (formValidationSelect2Ele.length) {
          formValidationSelect2Ele.wrap('');
          formValidationSelect2Ele
            .select2({
              placeholder: 'Select country',
              dropdownParent: formValidationSelect2Ele.parent()
            })
            .on('change.select2', function () {
              // Revalidate the color field when an option is chosen
              fv.revalidateField('formValidationSelect2');
            });
        }

        //Bootstrap select
        formValidationTechEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
          fv.revalidateField('formValidationTech');
        });
        formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
          fv.revalidateField('formValidationHobbies');
        });
      })();
      });
    </script>
@endsection