{% 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">
    <div class="card-body">
      <div class="row g-3">
        <!-- Leave Type -->
        <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 }}">{{ lt.name or lt.code }}</option>
            {% endfor %}
          </select>
          <div class="form-text" id="type_hint">
            Choose RH for Optional/Restricted Holiday dates.
          </div>
        </div>

        <!-- Start Date -->
        <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>

        <!-- End Date -->
        <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>

        <!-- Half Day -->
        <div class="col-md-2 d-flex 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>

        <!-- RH eligible dates toggle -->
        <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>

        <!-- RH eligible dates panel -->
        <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">
              <!-- chips will be injected -->
            </div>
            <small class="text-muted">Tip: click a date chip to set it quickly.</small>
          </div>
        </div>

        <!-- Reason -->
        <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>

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

        <!-- Submit -->
        <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>

  <!-- Leave Balance Summary -->
  <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>

<style>
  /* Subtle UI polish */
  #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 () {
  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 halfDayCheckbox  = document.getElementById('half_day');
  const halfDayContainer = document.getElementById('half_day_container');
  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();

  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 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 updateTotalDaysDisplay() {
    const days = computeDays();
    if (days === null) {
      totalDaysField.value = '';
      return;
    }
    if (halfDayCheckbox.checked) {
      totalDaysField.value = '0.5 day(s)';
    } else {
      totalDaysField.value = days + ' day(s)';
    }
  }

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

  function updateUI() {
    if (rhMode) {
      // RH: single-day enforced; half-day allowed and visible
      lockEndToStart(true);
      halfDayContainer.style.display = 'flex';
      rhHelp.classList.remove('d-none');
      rhToggleBtn.style.display = 'inline-block';
      rhQuickHint.classList.remove('d-none');

      // Validate selected date is in whitelist
      if (startInput.value) {
        const ok = rhAllowedDates.has(startInput.value);
        setCustomError(startInput, ok ? '' : 'For RH, pick an Optional Holiday date only.');
        if (!ok) startInput.reportValidity();
        endInput.value = startInput.value;
      } else {
        setCustomError(startInput, '');
      }
    } else {
      // Non-RH: allow multi-day; half-day only when single-day
      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) {
        halfDayContainer.style.display = 'none';
        halfDayCheckbox.checked = false;
      } else {
        halfDayContainer.style.display = 'flex';
      }
      setCustomError(startInput, '');
    }

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

    // simple formatter: "10 Nov 2025"
    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 => {
        // Support both new shape ({date,name}) and legacy (string) just in case
        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);
    }
  }

  async function onLeaveTypeChange() {
    const opt  = leaveTypeSelect.options[leaveTypeSelect.selectedIndex];
    const code = (opt?.dataset?.code || '').toUpperCase();
    rhMode = (code === 'RH');

    if (rhMode) {
      await fetchEligibleRhDates();
      // Reset invalid selections for RH
      if (startInput.value && !rhAllowedDates.has(startInput.value)) {
        startInput.value = '';
      }
      endInput.value = startInput.value || '';
    } else {
      setCustomError(startInput, '');
    }
    updateUI();
  }

  // Handlers
  leaveTypeSelect.addEventListener('change', onLeaveTypeChange);

  startInput.addEventListener('change', function () {
    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 () {
    if (!rhMode) ensureEndAfterStart();
    updateUI();
  });

  halfDayCheckbox.addEventListener('change', 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';
  });

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