{% extends 'base.html' %}
{% block title %}Nouvelle demande · RH Planète{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-8 col-xxl-7">
    <div class="mb-4">
      <div class="eyebrow">Espace Collaborateur</div>
      <h1 class="h2 mb-1 fw-bold">Demander un congé ou déclarer une absence</h1>
      <p class="text-secondary mb-0 small">Choisissez le type de demande et les dates, puis envoyez-la pour validation.</p>
    </div>

    <form method="post" enctype="multipart/form-data" class="card border shadow-sm">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      
      <div class="card-body p-4 p-md-5">
        <div class="mb-4">
          <label class="form-label small fw-bold text-uppercase" for="leave_type" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Type de demande</label>
          <select class="form-select" id="leave_type" name="leave_type" required>
            <option value="annual" {{ 'selected' if request.values.get('leave_type') == 'annual' }} {{ 'disabled' if annual_available <= 0 }}>Congé annuel planifié (CP) · {{ annual_available|round(1) }} j disponibles</option>
            <option value="unpaid" {{ 'selected' if request.values.get('leave_type') == 'unpaid' }}>Congé sans solde planifié</option>
            <option value="sick" {{ 'selected' if request.values.get('leave_type') == 'sick' }}>Sick / Arrêt maladie</option>
            <option value="unplanned" {{ 'selected' if request.values.get('leave_type') == 'unplanned' }}>Absence non planifiée</option>
            <option value="wfh" {{ 'selected' if request.values.get('leave_type') == 'wfh' }}>Demande de télétravail (WFH)</option>
            <option value="menstrual" {{ 'selected' if request.values.get('leave_type') == 'menstrual' }}>Congé menstruel · selon les conditions légales</option>
          </select>
          <p class="form-text">Les droits anticipés sont calculés automatiquement à partir de votre date d’entrée et des absences enregistrées. La maladie peut être déclarée même sans solde payé. Le congé sans solde reste soumis à validation.</p>
        </div>

        <div class="row g-3 mb-4">
          <div class="col-sm-6">
            <label class="form-label small fw-bold text-uppercase" for="start_date" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Date de début</label>
            <input class="form-control num-mono" type="text" data-date-fr inputmode="numeric" placeholder="JJ/MM/AAAA" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}" id="start_date" name="start_date" value="{{ request.form.get('start_date', '') }}" required>
          </div>
          <div class="col-sm-6">
            <label class="form-label small fw-bold text-uppercase" for="end_date" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Date de fin</label>
            <input class="form-control num-mono" type="text" data-date-fr inputmode="numeric" placeholder="JJ/MM/AAAA" pattern="[0-9]{2}/[0-9]{2}/[0-9]{4}" id="end_date" name="end_date" value="{{ request.form.get('end_date', '') }}" required>
          </div>
        </div>

        <div class="mb-4">
          <label class="form-label small fw-bold text-uppercase" for="day_fraction" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Fraction de journée</label>
          <select class="form-select" id="day_fraction" name="day_fraction">
            <option value="1">Journée(s) complète(s)</option>
            <option value="0.5" {{ 'selected' if request.form.get('day_fraction') == '0.5' }}>Demi-journée (sur une seule date)</option>
          </select>
        </div>

        <div class="mb-4">
          <label class="form-label small fw-bold text-uppercase" for="reason" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Motif / Commentaire</label>
          <textarea class="form-control" id="reason" name="reason" rows="3" maxlength="500" placeholder="Précisez tout élément utile pour votre responsable...">{{ request.form.get('reason', '') }}</textarea>
        </div>

        <div class="mb-4" id="medicalAttachmentSection" {{ 'hidden' if request.values.get('leave_type') != 'sick' }}>
          <label class="form-label small fw-bold text-uppercase" for="attachment" style="color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.08em;">Justificatif médical (PDF, PNG ou JPG)</label>
          <input class="form-control" type="file" id="attachment" name="attachment" accept=".pdf,.png,.jpg,.jpeg" aria-describedby="medicalAttachmentStatus medicalAttachmentHelp">
          <p id="medicalAttachmentStatus" class="form-text" aria-live="polite"></p>
          <div id="medicalAttachmentHelp" class="form-text small text-muted">PDF, PNG ou JPG · 10 Mo maximum. Pour un arrêt maladie dépassant 3 jours ouvrables, un certificat est requis. Après une erreur, sélectionnez à nouveau votre fichier.</div>
        </div>
        <script type="application/json" id="medicalHolidayRules">{{ medical_holiday_rules|tojson }}</script>

        <p class="form-summary small text-secondary" aria-live="polite"></p>
        <div class="d-flex flex-wrap gap-2 pt-2">
          <button class="btn btn-primary px-4 fw-bold">Envoyer la demande</button>
          <a class="btn btn-outline-secondary" href="{{ url_for('dashboard') }}">Annuler</a>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}