<% layout('layouts/main') %>
<% const adminBase = typeof adminBaseUrl !== 'undefined' ? adminBaseUrl : '/admin'; %>
<% const typeLabels = absenceTypes || hr.typeLabels || {}; %>
<% const statusLabels = absenceStatuses || hr.statusLabels || {}; %>
<% const employeeName = (employee) => [employee.first_name, employee.last_name].filter(Boolean).join(' ') || employee.email || 'Collaborateur'; %>
<% const absenceClass = (type) => `absence-type-${String(type || 'other').replace(/[^a-z0-9-]/gi, '')}`; %>
<% const currentMonth = hr.month || new Date().toISOString().slice(0, 7); %>
<div class="app-shell">
  <%- partial('partials/admin-nav') %>
  <section class="content hr-center-page">
    <div class="page-head">
      <div>
        <p class="eyebrow">Centre RH</p>
        <h1>Planning RH, absences et suivi collaborateurs.</h1>
        <p class="muted">Vacances, maladie, accident, congés spéciaux, certificats, remplacements, soldes et validation RH.</p>
      </div>
      <div class="actions">
        <a class="button secondary" href="<%= adminBase %>/employes">Équipe</a>
        <a class="button secondary" href="<%= adminBase %>/suite#rh">Documents RH</a>
      </div>
    </div>

    <section class="stat-grid hr-stat-grid">
      <article class="stat"><strong><%= hr.stats.activeEmployees %></strong><span>Collaborateurs actifs</span></article>
      <article class="stat alert-stat"><strong><%= hr.stats.requested %></strong><span>Demandes à valider</span></article>
      <article class="stat"><strong><%= hr.stats.approved %></strong><span>Absences validées ce mois</span></article>
      <article class="stat"><strong><%= Number(hr.stats.vacation || 0).toFixed(1) %> j</strong><span>Vacances ce mois</span></article>
      <article class="stat"><strong><%= Number(hr.stats.sickness || 0).toFixed(1) %> j</strong><span>Maladie ce mois</span></article>
      <article class="stat <%= hr.stats.missingCertificates ? 'alert-stat' : '' %>"><strong><%= hr.stats.missingCertificates %></strong><span>Certificats à obtenir</span></article>
    </section>

    <details id="pilotage-rh" class="panel hr-entry-panel hr-section-drawer">
      <summary class="premium-drawer-summary">
        <span><strong>Pilotage RH</strong><small>Filtrer le planning et créer une absence.</small></span>
        <span class="badge">Gestion</span>
      </summary>
      <form method="get" action="<%= adminBase %>/rh" class="hr-filter-bar">
        <label>Mois<input type="month" name="month" value="<%= currentMonth %>"></label>
        <label>Collaborateur<select name="user_id">
          <option value="0">Toute l’équipe</option>
          <% hr.activeEmployees.forEach((employee) => { %>
            <option value="<%= employee.user_id %>" <%= Number(hr.filters.user_id || 0) === Number(employee.user_id) ? 'selected' : '' %>><%= employeeName(employee) %></option>
          <% }) %>
        </select></label>
        <label>Type<select name="type">
          <option value="">Tous les types</option>
          <% Object.entries(typeLabels).forEach(([key, label]) => { %><option value="<%= key %>" <%= hr.filters.type === key ? 'selected' : '' %>><%= label %></option><% }) %>
        </select></label>
        <label>Statut<select name="status">
          <option value="">Tous les statuts</option>
          <% Object.entries(statusLabels).forEach(([key, label]) => { %><option value="<%= key %>" <%= hr.filters.status === key ? 'selected' : '' %>><%= label %></option><% }) %>
        </select></label>
        <button class="secondary">Actualiser</button>
      </form>

      <form method="post" action="<%= adminBase %>/rh/absences" enctype="multipart/form-data" class="form-grid hr-absence-create">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <input type="hidden" name="return_to" value="rh">
        <input type="hidden" name="month" value="<%= currentMonth %>">
        <div class="form-grid four">
          <label>Collaborateur<select name="user_id" required>
            <option value="">Sélectionner</option>
            <% hr.activeEmployees.forEach((employee) => { %><option value="<%= employee.user_id %>"><%= employeeName(employee) %></option><% }) %>
          </select></label>
          <label>Type<select name="type">
            <% Object.entries(typeLabels).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>
        </div>
        <div class="form-grid four">
          <label>Journée<select name="half_day">
            <option value="full">Journée complète</option>
            <option value="morning">Matin uniquement</option>
            <option value="afternoon">Après-midi uniquement</option>
          </select></label>
          <label>Heures concernées<input type="number" step="0.01" name="hours" value="0"></label>
          <label>Taux reconnu<input type="number" step="0.01" name="paid_percent" value="100"></label>
          <label>Statut<select name="status">
            <option value="approved">Approuvée</option>
            <option value="requested">Demandée</option>
          </select></label>
        </div>
        <div class="form-grid three">
          <label>Remplaçant<select name="replacement_user_id">
            <option value="">Aucun</option>
            <% hr.activeEmployees.forEach((employee) => { %><option value="<%= employee.user_id %>"><%= employeeName(employee) %></option><% }) %>
          </select></label>
          <label class="check premium-check"><input type="checkbox" name="certificate_required" value="1"><span><strong>Certificat requis</strong><small>Maladie/accident ou règle interne.</small></span></label>
          <label class="check premium-check"><input type="checkbox" name="certificate_received" value="1"><span><strong>Certificat reçu</strong><small>Pièce déjà contrôlée.</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>Note RH<textarea name="note" rows="3" placeholder="Motif, certificat, organisation du remplacement, commentaire collaborateur"></textarea></label>
        <button>Ajouter au planning RH</button>
      </form>
    </details>

    <details id="planning-rh" class="panel hr-calendar-panel hr-section-drawer">
      <summary class="premium-drawer-summary">
        <span><strong>Planning mensuel</strong><small><%= currentMonth %></small></span>
        <span class="badge"><%= hr.absences.length %> événement(s)</span>
      </summary>
      <div class="hr-calendar-weekdays"><span>Lun</span><span>Mar</span><span>Mer</span><span>Jeu</span><span>Ven</span><span>Sam</span><span>Dim</span></div>
      <div class="hr-calendar-grid">
        <% hr.calendarDays.forEach((day) => { %>
          <article class="<%= day.inMonth ? '' : 'muted-day' %> <%= day.isToday ? 'today' : '' %>">
            <strong><%= day.day %></strong>
            <div>
              <% day.items.slice(0, 4).forEach((absence) => { %>
                <span class="absence-pill <%= absenceClass(absence.type) %>"><%= employeeName(absence) %> · <%= typeLabels[absence.type] || absence.type %></span>
              <% }) %>
              <% if (day.items.length > 4) { %><small>+<%= day.items.length - 4 %></small><% } %>
            </div>
          </article>
        <% }) %>
      </div>
    </details>

    <details id="demandes-rh" class="panel hr-section-drawer">
      <summary class="premium-drawer-summary">
        <span><strong>Demandes & certificats</strong><small>Validation, remplacements et pièces justificatives.</small></span>
        <span class="badge"><%= hr.stats.requested %> à valider</span>
      </summary>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Collaborateur</th><th>Type</th><th>Période</th><th>Certificat</th><th>Remplacement</th><th>Statut</th><th>Décision</th></tr></thead>
          <tbody>
            <% hr.absences.forEach((absence) => { %>
              <tr>
                <td><strong><%= employeeName(absence) %></strong><br><span class="muted"><%= absence.note || 'Aucune note' %></span></td>
                <td><span class="absence-pill <%= absenceClass(absence.type) %>"><%= typeLabels[absence.type] || absence.type %></span></td>
                <td><%= ui.date(absence.starts_on) %> - <%= ui.date(absence.ends_on) %><br><span class="muted"><%= Number(absence.hours || 0).toFixed(2) %> h · <%= absence.half_day === 'morning' ? 'matin' : absence.half_day === 'afternoon' ? 'après-midi' : 'journée' %></span></td>
                <td>
                  <% if (absence.certificate_required) { %>
                    <span class="badge <%= absence.certificate_received ? '' : 'warning' %>"><%= absence.certificate_received ? 'Reçu' : 'À obtenir' %></span>
                  <% } else { %>
                    <span class="muted">Non requis</span>
                  <% } %>
                  <% if (absence.certificate_file_path) { %>
                    <a class="text-link certificate-link" href="<%= adminBase %>/rh/absences/<%= absence.id %>/certificat" target="_blank" rel="noopener">Voir la pièce</a>
                  <% } %>
                </td>
                <td><%= [absence.replacement_first_name, absence.replacement_last_name].filter(Boolean).join(' ') || 'Aucun' %></td>
                <td><span class="badge"><%= statusLabels[absence.status] || absence.status %></span></td>
                <td>
                  <form method="post" action="<%= adminBase %>/rh/absences/<%= absence.id %>/statut" enctype="multipart/form-data" class="hr-decision-form">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <input type="hidden" name="return_to" value="rh">
                    <input type="hidden" name="month" value="<%= currentMonth %>">
                    <input type="hidden" name="certificate_received_present" value="1">
                    <select name="status">
                      <% Object.entries(statusLabels).forEach(([key, label]) => { %><option value="<%= key %>" <%= absence.status === key ? 'selected' : '' %>><%= label %></option><% }) %>
                    </select>
                    <select name="replacement_user_id">
                      <option value="">Remplaçant</option>
                      <% hr.activeEmployees.forEach((employee) => { %><option value="<%= employee.user_id %>" <%= Number(absence.replacement_user_id || 0) === Number(employee.user_id) ? 'selected' : '' %>><%= employeeName(employee) %></option><% }) %>
                    </select>
                    <label><input type="checkbox" name="certificate_received" value="1" <%= absence.certificate_received ? 'checked' : '' %>> Certificat reçu</label>
                    <input type="file" name="certificate" accept=".pdf,image/jpeg,image/png,image/webp,application/pdf">
                    <input name="decision_note" value="<%= absence.decision_note || '' %>" placeholder="Note décision">
                    <button class="secondary small">Enregistrer</button>
                  </form>
                </td>
              </tr>
            <% }) %>
            <% if (!hr.absences.length) { %><tr><td colspan="7">Aucune absence sur la période sélectionnée.</td></tr><% } %>
          </tbody>
        </table>
      </div>
    </details>

    <details id="soldes-rh" class="panel hr-section-drawer">
      <summary class="premium-drawer-summary">
        <span><strong>Soldes et dossiers RH</strong><small>Vacances, maladie et profils collaborateurs.</small></span>
        <span class="badge"><%= hr.balances.length %></span>
      </summary>
      <section class="hr-two-column">
      <article class="panel">
        <div class="compact-heading">
          <div>
            <p class="eyebrow">Soldes</p>
            <h2>Vacances et maladie <%= currentMonth.slice(0, 4) %></h2>
          </div>
        </div>
        <div class="hr-balance-list">
          <% hr.balances.forEach((employee) => { %>
            <article>
              <div><strong><%= employeeName(employee) %></strong><span><%= Number(employee.working_percentage || 100).toFixed(0) %>% · <%= employee.canton || 'canton à compléter' %></span></div>
              <form method="post" action="<%= adminBase %>/rh/employes/<%= employee.user_id %>/vacances" class="hr-entitlement-form">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <input type="hidden" name="month" value="<%= currentMonth %>">
                <label><span>Droit annuel</span><input type="number" step="0.5" min="0" name="vacation_entitlement_days" value="<%= Number(employee.vacationEntitlement || 0).toFixed(1) %>"></label>
                <button class="secondary small">OK</button>
              </form>
              <div><b><%= Number(employee.vacationUsed || 0).toFixed(1) %> j</b><span>pris vacances</span></div>
              <div><b><%= Number(employee.vacationRemaining || 0).toFixed(1) %> j</b><span>reste vacances</span></div>
              <div><b><%= Number(employee.sicknessDays || 0).toFixed(1) %> j</b><span>maladie année</span></div>
            </article>
          <% }) %>
        </div>
      </article>

      <article class="panel">
        <div class="compact-heading">
          <div>
            <p class="eyebrow">Dossiers collaborateurs</p>
            <h2>Profils RH à compléter</h2>
          </div>
          <a class="text-link" href="<%= adminBase %>/employes">Équipe</a>
        </div>
        <div class="hr-profile-list">
          <% employees.forEach((employee) => { %>
            <a href="<%= adminBase %>/employes/<%= employee.user_id %>">
              <strong><%= employeeName(employee) %></strong>
              <span>Dossier RH, accès et suivi collaborateur</span>
              <em><%= Number(employee.working_percentage || 100).toFixed(0) %>%</em>
            </a>
          <% }) %>
        </div>
      </article>
      </section>
    </details>
    <script>
      (() => {
        const openFromHash = () => {
          const id = decodeURIComponent(window.location.hash || '').replace('#', '');
          if (!id) return;
          const panel = document.getElementById(id);
          if (panel && panel.tagName === 'DETAILS') panel.open = true;
        };
        window.addEventListener('hashchange', openFromHash);
        openFromHash();
      })();
    </script>
  </section>
</div>
