{% extends 'base.html' %}
{% block content %}
<div class="container mt-4">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h3 class="text-primary m-0">Apply for Leave</h3>
    {% if rh_remaining is not none %}
      <span class="badge rounded-pill text-bg-info">
        RH Remaining: <strong>{{ rh_remaining }}</strong> / {{ max_rh }}
      </span>
    {% endif %}
  </div>

  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <form method="POST" action="{{ url_for('leave.apply_leave') }}" class="card shadow-sm mb-4" id="leave_form">
    <input type="hidden" name="confirm_excess_as_lwp" id="confirm_excess_as_lwp" value="">

    <div class="card-body">
      <div class="row g-3">

        <div class="col-md-4">
          <label class="form-label fw-semibold">Leave Type</label>
          <select class="form-select" name="leave_type_id" id="leave_type" required>
            <option value="">-- Select Leave Type --</option>
            {% for lt in leave_types %}
              <option
                value="{{ lt.id }}"
                data-code="{{ lt.code }}"
                data-max-consecutive-days="{{ leave_policy_map.get(lt.id, {}).get('max_consecutive_days') or '' }}">
                {{ lt.name or lt.code }}
              </option>
            {% endfor %}
          </select>
          <div class="form-text" id="type_hint">
            Choose RH for Optional/Restricted Holiday dates.
          </div>
        </div>

        <div class="col-12">
          <label class="form-label fw-semibold">Inform To (optional)</label>
          <select name="inform_to_ids" id="inform_to_ids" class="form-select" multiple>
            {% for e in informable_emps %}
              <option value="{{ e.id }}">
                {{ e.full_name }}
                {% if e.employee_code %} ({{ e.employee_code }}){% endif %}
                {% if e.department and e.department.name %} - {{ e.department.name }}{% endif %}
              </option>
            {% endfor %}
          </select>
          <small class="text-muted">
            Start typing to search by name / code / department. You can select multiple people.
          </small>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">From Date</label>
          <div class="input-group">
            <span class="input-group-text">📅</span>
            <input type="date" name="start_date" id="start_date" class="form-control" required>
          </div>
        </div>

        <div class="col-md-3">
          <label class="form-label fw-semibold">To Date</label>
          <div class="input-group">
            <span class="input-group-text">📅</span>
            <input type="date" name="end_date" id="end_date" class="form-control" required>
          </div>
          <div id="rh_help" class="form-text d-none">
            RH must be applied for an Optional Holiday date. Single-day enforced.
          </div>
        </div>

        <div class="col-md-2 align-items-end" id="half_day_container" style="display:none;">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" name="half_day" id="half_day">
            <label class="form-check-label fw-semibold" for="half_day">Half Day</label>
          </div>
        </div>

        <div class="col-md-4 d-none" id="half_session_block">
          <label class="form-label fw-semibold">Leave Session</label>
          <select class="form-select" name="half_day_session" id="half_day_session">
            <option value="FH">First Half</option>
            <option value="SH">Second Half</option>
          </select>
          <div class="form-text">
            Select which half is leave. The other half will be computed automatically (biometric/DeskTime/manual).
          </div>
        </div>

        <div class="col-12 d-flex gap-2 align-items-center">
          <button class="btn btn-outline-secondary btn-sm" type="button" id="toggle_rh_panel" style="display:none;">
            Show RH Eligible Dates
          </button>
          <small id="rh_quick_hint" class="text-muted d-none">
            RH dates are location-sensitive. Only Optional holidays are eligible.
          </small>
        </div>

        <div class="col-12 d-none" id="rh_panel">
          <div class="border rounded p-3 bg-light">
            <div class="d-flex align-items-center justify-content-between mb-2">
              <span class="fw-semibold">Eligible RH Dates (Optional Holidays)</span>
              <button class="btn btn-sm btn-outline-secondary" type="button" id="hide_rh_panel">Hide</button>
            </div>
            <div id="rh_dates_container" class="d-flex flex-wrap gap-2"></div>
            <small class="text-muted">Tip: click a date chip to set it quickly.</small>
          </div>
        </div>

        <div class="col-12">
          <label class="form-label fw-semibold">Reason</label>
          <textarea name="reason" class="form-control" rows="3" placeholder="Provide a brief reason..." required></textarea>
        </div>

        <div class="col-md-4">
          <label class="form-label fw-semibold">Total Days</label>
          <input type="text" id="total_days" class="form-control" disabled>
        </div>

        <div class="col-md-8 d-flex justify-content-end align-items-end">
          <button type="submit" class="btn btn-primary px-4">Submit Leave Request</button>
        </div>
      </div>
    </div>
  </form>

  <div class="card shadow-sm">
    <div class="card-header bg-light fw-bold">Available Balance {{ current_year }}</div>
    <div class="table-responsive">
      <table class="table table-bordered m-0 align-middle">
        <thead class="table-light">
          <tr>
            <th>Leave Type</th>
            <th class="text-end">Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for bal in balances %}
            {% set is_rh = rh_type_id and (bal.leave_type_id == rh_type_id) %}
            <tr>
              <td>
                {% if is_rh %}
                  <span class="badge rounded-pill text-bg-warning text-dark">Restricted Holiday (RH)</span>
                {% else %}
                  {{ bal.leave_type.name if bal.leave_type else '—' }}
                {% endif %}
              </td>
              <td class="text-end">
                {% if is_rh %}
                  {{ rh_remaining }}
                {% else %}
                  {{ bal.balance }}
                {% endif %}
              </td>
            </tr>
          {% endfor %}
          {% if not balances %}
            <tr><td colspan="2" class="text-center text-muted">No balances found.</td></tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<style>
  .select2-container--default .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: .375rem;
    min-height: calc(2.5rem + 2px);
  }
  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: .25rem .5rem;
  }

  #rh_dates_container .chip {
    border: 1px solid rgba(0,0,0,.1);
    background: #fff;
    padding: .25rem .6rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: transform .05s ease-in-out, background .2s;
    font-size: .9rem;
  }
  #rh_dates_container .chip:hover {
    transform: translateY(-1px);
    background: #f8f9fa;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
  $('#inform_to_ids').select2({
    placeholder: 'Search & select employees to inform',
    allowClear: true,
    width: '100%',
    closeOnSelect: false
  });

  const form             = document.getElementById('leave_form');
  const leaveTypeSelect  = document.getElementById('leave_type');
  const startInput       = document.getElementById('start_date');
  const endInput         = document.getElementById('end_date');
  const totalDaysField   = document.getElementById('total_days');
  const confirmField     = document.getElementById('confirm_excess_as_lwp');

  const halfDayCheckbox  = document.getElementById('half_day');
  const halfDayContainer = document.getElementById('half_day_container');
  const halfSessionBlock = document.getElementById('half_session_block');

  const rhHelp           = document.getElementById('rh_help');
  const rhToggleBtn      = document.getElementById('toggle_rh_panel');
  const rhHideBtn        = document.getElementById('hide_rh_panel');
  const rhPanel          = document.getElementById('rh_panel');
  const rhDatesContainer = document.getElementById('rh_dates_container');
  const rhQuickHint      = document.getElementById('rh_quick_hint');

  let rhMode = false;
  let rhAllowedDates = new Set();
  let skipPopupOnce = false;

  function setCustomError(input, msg) {
    if (!input) return;
    input.setCustomValidity(msg || '');
  }

  function lockEndToStart(lock) {
    if (!endInput) return;
    if (lock) {
      endInput.value = startInput.value || '';
      endInput.readOnly = true;
      endInput.classList.add('bg-light');
    } else {
      endInput.readOnly = false;
      endInput.classList.remove('bg-light');
    }
  }

  function ensureEndAfterStart() {
    if (startInput.value && endInput.value && endInput.value < startInput.value) {
      endInput.value = startInput.value;
    }
  }

  function computeDays() {
    if (!startInput.value || !endInput.value) return null;
    const s = new Date(startInput.value);
    const e = new Date(endInput.value);
    if (isNaN(s) || isNaN(e)) return null;
    const msPerDay = 24 * 60 * 60 * 1000;
    return Math.floor((e - s) / msPerDay) + 1;
  }

  function getSelectedMaxConsecutiveDays() {
    const opt = leaveTypeSelect.options[leaveTypeSelect.selectedIndex];
    const raw = opt?.dataset?.maxConsecutiveDays || '';
    const n = parseFloat(raw);
    return isNaN(n) ? null : n;
  }

  function getSelectedLeaveCode() {
    const opt = leaveTypeSelect.options[leaveTypeSelect.selectedIndex];
    return (opt?.dataset?.code || '').toUpperCase();
  }

  function updateTotalDaysDisplay() {
    const days = computeDays();
    if (days === null) {
      totalDaysField.value = '';
      return;
    }
    totalDaysField.value = halfDayCheckbox.checked ? '0.5 day(s)' : (days + ' day(s)');
  }

  function toggleHalfSessionUI() {
    const on = !!halfDayCheckbox.checked;
    halfSessionBlock.classList.toggle('d-none', !on);
  }

  async function fetchEligibleRhDates() {
    rhAllowedDates = new Set();
    rhDatesContainer.innerHTML = '<span class="text-muted">Loading…</span>';

    const pretty = (iso) => {
      const d = new Date(iso);
      if (isNaN(d)) return iso;
      return d.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' });
    };

    try {
      const res = await fetch('{{ url_for("leave.eligible_dates") }}?type=rh', { credentials: 'same-origin' });
      if (!res.ok) throw new Error('Failed to fetch eligible RH dates');
      const data = await res.json();
      rhDatesContainer.innerHTML = '';

      (data.dates || []).forEach(item => {
        const d = (typeof item === 'string') ? item : item.date;
        const name = (typeof item === 'object' && item) ? (item.name || '') : '';

        rhAllowedDates.add(d);

        const chip = document.createElement('span');
        chip.className = 'chip';
        chip.innerHTML = `<strong>${pretty(d)}</strong>${name ? ' &middot; ' + name : ''}`;

        chip.addEventListener('click', () => {
          startInput.value = d;
          endInput.value = d;
          updateUI();
        });
        rhDatesContainer.appendChild(chip);
      });

      if (!rhAllowedDates.size) {
        rhDatesContainer.innerHTML = '<span class="text-muted">No eligible RH dates available.</span>';
      }
    } catch (e) {
      rhDatesContainer.innerHTML = '<span class="text-danger">Could not load RH dates.</span>';
      console.warn(e);
    }
  }

  function updateUI() {
    if (rhMode) {
      lockEndToStart(true);
      halfDayContainer.style.display = 'flex';
      rhHelp.classList.remove('d-none');
      rhToggleBtn.style.display = 'inline-block';
      rhQuickHint.classList.remove('d-none');

      if (startInput.value) {
        const ok = rhAllowedDates.has(startInput.value);
        setCustomError(startInput, ok ? '' : 'For RH, pick an Optional Holiday date only.');
        endInput.value = startInput.value;
      } else {
        setCustomError(startInput, '');
      }
    } else {
      lockEndToStart(false);
      rhHelp.classList.add('d-none');
      rhToggleBtn.style.display = 'none';
      rhQuickHint.classList.add('d-none');
      rhPanel.classList.add('d-none');

      const days = computeDays();

      if (days && days > 1) {
        halfDayCheckbox.checked = false;
        halfDayCheckbox.disabled = true;
        halfDayContainer.style.display = 'none';
      } else {
        halfDayCheckbox.disabled = false;
        halfDayContainer.style.display = 'flex';
      }

      setCustomError(startInput, '');
    }

    if (halfDayContainer.style.display === 'none') {
      halfDayCheckbox.checked = false;
      halfDayCheckbox.disabled = true;
    } else {
      halfDayCheckbox.disabled = false;
    }

    ensureEndAfterStart();
    toggleHalfSessionUI();
    updateTotalDaysDisplay();
  }

  async function onLeaveTypeChange() {
    const code = getSelectedLeaveCode();
    rhMode = (code === 'RH');

    confirmField.value = '';
    skipPopupOnce = false;

    if (rhMode) {
      await fetchEligibleRhDates();
      if (startInput.value && !rhAllowedDates.has(startInput.value)) startInput.value = '';
      endInput.value = startInput.value || '';
    } else {
      setCustomError(startInput, '');
    }

    updateUI();
  }

  leaveTypeSelect.addEventListener('change', onLeaveTypeChange);

  startInput.addEventListener('change', function () {
    confirmField.value = '';
    skipPopupOnce = false;

    if (rhMode) {
      endInput.value = startInput.value || '';
      if (startInput.value && !rhAllowedDates.has(startInput.value)) {
        setCustomError(startInput, 'For RH, pick an Optional Holiday date only.');
        startInput.reportValidity();
      } else {
        setCustomError(startInput, '');
      }
    } else {
      ensureEndAfterStart();
    }
    updateUI();
  });

  endInput.addEventListener('change', function () {
    confirmField.value = '';
    skipPopupOnce = false;

    if (!rhMode) ensureEndAfterStart();
    updateUI();
  });

  halfDayCheckbox.addEventListener('change', function () {
    confirmField.value = '';
    skipPopupOnce = false;
    updateUI();
  });

  rhToggleBtn.addEventListener('click', function () {
    rhPanel.classList.toggle('d-none');
    if (!rhPanel.classList.contains('d-none')) {
      fetchEligibleRhDates();
      rhToggleBtn.textContent = 'Hide RH Eligible Dates';
    } else {
      rhToggleBtn.textContent = 'Show RH Eligible Dates';
    }
  });

  rhHideBtn?.addEventListener('click', function () {
    rhPanel.classList.add('d-none');
    rhToggleBtn.textContent = 'Show RH Eligible Dates';
  });

  form.addEventListener('submit', function (e) {
    if (halfDayContainer.style.display === 'none') {
      halfDayCheckbox.checked = false;
      halfDayCheckbox.disabled = true;
    }

    if (!halfDayCheckbox.checked) {
      const sessionField = document.getElementById('half_day_session');
      if (sessionField) sessionField.value = 'FH';
    }

    if (skipPopupOnce) return;

    const leaveCode = getSelectedLeaveCode();
    if (!leaveCode || leaveCode === 'RH') {
      confirmField.value = '';
      return;
    }

    const maxDays = getSelectedMaxConsecutiveDays();
    if (!maxDays) {
      confirmField.value = '';
      return;
    }

    const days = computeDays();
    if (days === null) {
      confirmField.value = '';
      return;
    }

    const totalDays = halfDayCheckbox.checked ? 0.5 : days;

    if (totalDays > maxDays && totalDays !== 0.5) {
      e.preventDefault();

      const extraDays = totalDays - maxDays;
      const yes = window.confirm(
        `Maximum allowed leave is ${maxDays} day(s). Extra ${extraDays} day(s) will be marked as LWP. Do you want to continue?`
      );

      if (yes) {
        confirmField.value = 'yes';
        skipPopupOnce = true;
        form.submit();
      } else {
        confirmField.value = '';
      }
      return;
    }

    confirmField.value = '';
  });

  onLeaveTypeChange();
});
</script>
{% endblock %}