<% layout('layouts/main') %>
<% const staffBase = typeof staffBaseUrl !== 'undefined' ? staffBaseUrl : '/agenda'; %>
<% const labels = { vacation: 'Vacances', sickness: 'Maladie', accident: 'Accident', unpaid: 'Sans solde', maternity: 'Maternité', paternity: 'Paternité', military: 'Service / protection civile', care: 'Proche aidant', training: 'Formation', remote: 'Télétravail / administratif', other: 'Autre' }; %>
<% const statuses = { requested: 'Demandée', approved: 'Approuvée', rejected: 'Refusée', cancelled: 'Annulée' }; %>
<div class="app-shell">
  <%- partial('partials/staff-nav') %>
  <section class="content">
    <div class="page-head">
      <div>
        <p class="eyebrow">Portail employé</p>
        <h1>Mes absences</h1>
        <p class="muted">Vacances, maladie, accident ou sans solde. Les demandes validées sont transmises au centre RH.</p>
      </div>
    </div>

    <form method="post" action="<%= staffBase %>/absences" enctype="multipart/form-data" class="panel form-grid">
      <h2>Nouvelle demande</h2>
      <input type="hidden" name="_csrf" value="<%= csrfToken %>">
      <div class="form-grid four">
        <label>Type<select name="type">
          <% Object.entries(labels).forEach(([key, label]) => { %><option value="<%= key %>"><%= label %></option><% }) %>
        </select></label>
        <label>Début<input type="date" name="starts_on" required></label>
        <label>Fin<input type="date" name="ends_on" required></label>
        <label>Journée<select name="half_day"><option value="full">Journée complète</option><option value="morning">Matin</option><option value="afternoon">Après-midi</option></select></label>
      </div>
      <div class="form-grid two">
        <label>Heures concernées<input type="number" step="0.01" name="hours" value="0"></label>
        <label class="check premium-check"><input type="checkbox" name="certificate_received" value="1"><span><strong>Certificat joint ou transmis</strong><small>Pour maladie, accident ou demande RH spécifique.</small></span></label>
      </div>
      <label>Certificat médical / justificatif<input type="file" name="certificate" accept=".pdf,image/jpeg,image/png,image/webp,application/pdf"></label>
      <label>Message RH<textarea name="note" placeholder="Contexte, certificat ou remarque utile"></textarea></label>
      <button>Envoyer la demande</button>
    </form>

    <section class="panel">
      <h2>Historique</h2>
      <div class="mobile-list">
        <% absences.forEach((absence) => { %>
          <article class="list-card">
            <div class="list-card-head">
              <div>
                <strong><%= labels[absence.type] || absence.type %></strong>
                <span><%= ui.date(absence.starts_on) %> - <%= ui.date(absence.ends_on) %></span>
              </div>
              <span class="badge"><%= statuses[absence.status] || absence.status %></span>
            </div>
            <div class="detail-grid compact">
              <div class="detail-item"><span>Taux reconnu</span><strong><%= Number(absence.paid_percent || 0).toFixed(2) %>%</strong></div>
              <div class="detail-item"><span>Heures</span><strong><%= Number(absence.hours || 0).toFixed(2) %></strong></div>
              <div class="detail-item"><span>Certificat</span><strong><%= absence.certificate_file_path ? 'Joint' : (absence.certificate_required ? 'Demandé' : 'Non requis') %></strong></div>
            </div>
            <% if (absence.certificate_file_path) { %><a class="text-link certificate-link" href="<%= staffBase %>/absences/<%= absence.id %>/certificat" target="_blank" rel="noopener">Voir le justificatif</a><% } %>
            <% if (absence.note) { %><p class="muted"><%= absence.note %></p><% } %>
          </article>
        <% }) %>
        <% if (!absences.length) { %>
          <p class="empty-state"><strong>Aucune absence</strong><span>Vos demandes apparaîtront ici après envoi.</span></p>
        <% } %>
      </div>
    </section>
  </section>
</div>
