<%- include('partials/header') %>

<div class="head-row">
  <h1><%= bien ? 'Modifier le bien' : 'Ajouter un bien' %></h1>
  <a class="link" href="/admin/biens">← Retour</a>
</div>

<form class="adm-form" method="post" enctype="multipart/form-data"
      action="<%= bien ? '/admin/biens/' + bien.id : '/admin/biens' %>">

  <label>Titre *
    <input name="titre" required value="<%= bien ? bien.titre : '' %>" placeholder="Ex : Le duplex équipé">
  </label>

  <div class="grid2">
    <label>Catégorie *
      <select name="categorie">
        <option value="residence" <%= (bien && bien.categorie === 'villa') ? '' : 'selected' %>>Résidence (appartement)</option>
        <option value="villa" <%= (bien && bien.categorie === 'villa') ? 'selected' : '' %>>Villa</option>
      </select>
    </label>
    <label>Typologie
      <input name="typologie" value="<%= bien ? (bien.typologie || '') : '' %>" placeholder="Ex : F4, Duplex, Villa F5">
    </label>
  </div>

  <label>Lieu / sous-titre
    <input name="lieu" value="<%= bien ? bien.lieu : '' %>" placeholder="Ex : Appartement · F4">
  </label>

  <label>Adresse <span class="muted small">(pour la carte / géolocalisation)</span>
    <input name="adresse" value="<%= bien ? (bien.adresse || '') : '' %>" placeholder="Ex : Boulevard Millénium, Oran">
  </label>

  <div class="grid2">
    <label>Nombre de logements / villas
      <input name="unites" value="<%= bien ? (bien.unites || '') : '' %>" placeholder="Ex : 188 logements">
    </label>
    <label>État d'avancement
      <input name="avancement" value="<%= bien ? (bien.avancement || '') : '' %>" placeholder="Ex : Projet livré, 90 %">
    </label>
  </div>

  <label>Prix
    <input name="prix" value="<%= bien ? bien.prix : '' %>" placeholder="Ex : Prix sur demande">
  </label>

  <div class="grid4">
    <label>Surface<input name="surface" value="<%= bien ? bien.surface : '' %>" placeholder="120 m²"></label>
    <label>Chambres<input name="chambres" value="<%= bien ? bien.chambres : '' %>" placeholder="3"></label>
    <label>Détail<input name="detail" value="<%= bien ? bien.detail : '' %>" placeholder="2 niveaux"></label>
    <label>Extérieur<input name="exterieur" value="<%= bien ? bien.exterieur : '' %>" placeholder="Terrasse"></label>
  </div>

  <label>Description
    <textarea name="description" rows="4" placeholder="Quelques phrases qui mettent le bien en valeur…"><%= bien ? bien.description : '' %></textarea>
  </label>

  <label>Équipements <span class="muted small">(un par ligne)</span>
    <textarea name="equipements" rows="5" placeholder="Cuisine équipée&#10;Climatisation&#10;Double vitrage"><%= bien ? (bien.equipements || '') : '' %></textarea>
  </label>

  <label>Commodités <span class="muted small">(une par ligne : salle de sport, padel, piscine…)</span>
    <textarea name="commodites" rows="4" placeholder="Salle de sport&#10;Terrain de padel&#10;Piscine"><%= bien ? (bien.commodites || '') : '' %></textarea>
  </label>

  <div class="grid2">
    <label>Appartements par palier <span class="muted small">(résidences)</span>
      <input name="palier" value="<%= bien ? (bien.palier || '') : '' %>" placeholder="Ex : 4 appartements par palier">
    </label>
    <label>Image du palier <span class="muted small">(lien, optionnel)</span>
      <input name="palier_image" value="<%= bien ? (bien.palier_image || '') : '' %>" placeholder="https://… ou /uploads/…">
    </label>
  </div>

  <div class="field-label" style="margin-top:6px">Typologies <span class="muted small">(F3, F4, Duplex… — chaque type devient une page cliquable avec ses infos)</span></div>
  <div id="typoList" class="typo-cards-admin">
    <% var typos = (bien && bien.typologies && bien.typologies.length) ? bien.typologies : []; %>
    <% typos.forEach(function(t){ %>
      <div class="typo-card-admin">
        <div class="tc-grid">
          <label class="sm">Nom<input name="typo_nom[]" value="<%= t.nom %>" placeholder="F3, Duplex, Villa F4"></label>
          <label class="sm">Nombre<input name="typo_nb[]" value="<%= t.nb %>" placeholder="24 appartements"></label>
          <label class="sm">Superficie<input name="typo_superficie[]" value="<%= t.superficie %>" placeholder="~90 m²"></label>
        </div>
        <label class="sm">Description<input name="typo_description[]" value="<%= t.description %>" placeholder="Petit descriptif"></label>
        <label class="sm">Avantages <span class="muted small">(un par ligne)</span><textarea name="typo_avantages[]" rows="3" placeholder="Cuisine équipée&#10;Balcon&#10;Climatisation"><%= t.avantages || '' %></textarea></label>
        <label class="sm">Photos <span class="muted small">(liens séparés par des virgules)</span><textarea name="typo_photos[]" rows="2" placeholder="https://… , https://…"><%= t.photos || '' %></textarea></label>
        <div class="tc-grid">
          <label class="sm">Lien du plan (3D)<input name="typo_plan[]" value="<%= t.plan %>" placeholder="https://… (plan)"></label>
          <label class="sm">Photo principale<input name="typo_photo[]" value="<%= t.photo %>" placeholder="https://… (vignette)"></label>
        </div>
        <button type="button" class="typo-del" onclick="this.closest('.typo-card-admin').remove()">Retirer cette typologie</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="link" id="typoAdd">+ Ajouter une typologie</button>
  <template id="typoTpl">
      <div class="typo-card-admin">
        <div class="tc-grid">
          <label class="sm">Nom<input name="typo_nom[]" placeholder="F3, Duplex, Villa F4"></label>
          <label class="sm">Nombre<input name="typo_nb[]" placeholder="24 appartements"></label>
          <label class="sm">Superficie<input name="typo_superficie[]" placeholder="~90 m²"></label>
        </div>
        <label class="sm">Description<input name="typo_description[]" placeholder="Petit descriptif"></label>
        <label class="sm">Avantages <span class="muted small">(un par ligne)</span><textarea name="typo_avantages[]" rows="3" placeholder="Cuisine équipée&#10;Balcon&#10;Climatisation"></textarea></label>
        <label class="sm">Photos <span class="muted small">(liens séparés par des virgules)</span><textarea name="typo_photos[]" rows="2" placeholder="https://… , https://…"></textarea></label>
        <div class="tc-grid">
          <label class="sm">Lien du plan (3D)<input name="typo_plan[]" placeholder="https://… (plan)"></label>
          <label class="sm">Photo principale<input name="typo_photo[]" placeholder="https://… (vignette)"></label>
        </div>
        <button type="button" class="typo-del" onclick="this.closest('.typo-card-admin').remove()">Retirer cette typologie</button>
      </div>
  </template>
  <script>
    document.getElementById('typoAdd').addEventListener('click', function () {
      var tpl = document.getElementById('typoTpl');
      document.getElementById('typoList').appendChild(tpl.content.cloneNode(true));
    });
  </script>

  <% var photos = (bien && bien.photos && bien.photos.length) ? bien.photos : (bien && bien.image ? [bien.image] : []); %>
  <% if (photos.length) { %>
    <div class="field-label">Photos actuelles <span class="muted small">(décochez pour retirer ; la 1ʳᵉ sert de photo principale)</span></div>
    <div class="photo-grid">
      <% photos.forEach(function(p){ %>
        <label class="photo-keep">
          <img src="<%= p %>" alt="">
          <span><input type="checkbox" name="keep_photos" value="<%= p %>" checked> Garder</span>
        </label>
      <% }) %>
    </div>
  <% } %>

  <label>Ajouter des photos <span class="muted small">(plusieurs possibles)</span>
    <input type="file" name="photos" accept="image/*" multiple>
  </label>

  <div class="grid2">
    <label>Ordre d'affichage
      <input type="number" name="position" value="<%= bien ? bien.position : 0 %>">
    </label>
    <label class="check">
      <input type="checkbox" name="actif" <%= (!bien || bien.actif) ? 'checked' : '' %>>
      Afficher ce bien sur le site
    </label>
  </div>

  <div class="form-actions">
    <button class="btn" type="submit">Enregistrer</button>
    <a class="link" href="/admin/biens">Annuler</a>
  </div>
</form>

<%- include('partials/footer') %>
