<% layout('layouts/main') %>
<% const site = typeof publicSite !== 'undefined' ? publicSite : { homeUrl: '/', quoteUrl: '/demander-un-devis' }; %>
<nav class="breadcrumbs" aria-label="Fil d’Ariane">
  <a href="<%= site.homeUrl %>">Accueil</a>
  <span>/</span>
  <strong>Demander un devis</strong>
</nav>
<section class="quote-page">
  <div class="quote-intro">
    <p class="eyebrow">Demande de devis</p>
    <h1>Décrivez votre demande de nettoyage en quelques étapes.</h1>
    <p>Compte client optionnel, réponse professionnelle, photos possibles pour accélérer l’analyse.</p>
  </div>
  <div class="draft-notice" data-draft-notice hidden>Votre brouillon a été repris automatiquement. <button type="button" data-clear-draft>Effacer</button></div>

  <% if (errors?.length) { %><div class="errors"><% errors.forEach(e=>{ %><div><%= e.msg %></div><% }) %></div><% } %>

  <form method="post" action="<%= site.quoteUrl %>?_csrf=<%= csrfToken %>" enctype="multipart/form-data" class="quote-form wizard-form" data-quote-form data-wizard-form>
    <div class="wizard-progress" aria-label="Progression">
      <span data-step-dot="0">Coordonnées</span>
      <span data-step-dot="1">Adresse</span>
      <span data-step-dot="2">Prestation</span>
      <span data-step-dot="3">Récapitulatif</span>
    </div>

    <section class="form-section" data-wizard-step>
      <div class="section-title"><span>1</span><h2>Coordonnées</h2></div>
      <div class="form-grid two client-type-row">
        <label>Type de client<select name="client_type" data-client-type><option value="particulier">Particulier</option><option value="entreprise">Entreprise</option></select></label>
        <label data-company-field>Nom de l’entreprise<input name="company_name" value="<%= old.company_name || '' %>" autocomplete="organization"></label>
      </div>
      <div class="form-grid two">
        <label>Prénom<input name="first_name" value="<%= old.first_name || '' %>" autocomplete="given-name" required></label>
        <label>Nom<input name="last_name" value="<%= old.last_name || '' %>" autocomplete="family-name" required></label>
      </div>
      <div class="form-grid two">
        <label>Email<input type="email" name="email" value="<%= old.email || '' %>" autocomplete="email" required></label>
        <label>Téléphone<input name="phone" value="<%= old.phone || '' %>" autocomplete="tel" inputmode="tel" required></label>
      </div>
      <p class="field-help">Votre téléphone sert uniquement à vous recontacter au sujet de cette demande.</p>
      <div class="form-grid two">
        <label>Contact préféré<select name="contact_preference"><option <%= old.contact_preference === 'Email' || !old.contact_preference ? 'selected' : '' %>>Email</option><option <%= old.contact_preference === 'Téléphone' ? 'selected' : '' %>>Téléphone</option><option <%= old.contact_preference === 'WhatsApp / SMS' ? 'selected' : '' %>>WhatsApp / SMS</option></select></label>
        <label>Moment idéal<select name="contact_time"><option>Matin</option><option>Midi</option><option>Après-midi</option><option>Soir</option></select></label>
      </div>
      <label class="check premium-check"><input type="checkbox" name="create_account" <%= old.create_account === 'on' ? 'checked' : '' %>> <span><strong>Créer mon espace client automatiquement</strong><small>Recevoir un mot de passe temporaire par email pour suivre la demande, consulter le devis et retrouver les documents.</small></span></label>
      <div class="wizard-actions"><button type="button" data-next-step>Suivant</button></div>
    </section>

    <section class="form-section" data-wizard-step>
      <div class="section-title"><span>2</span><h2>Adresse</h2></div>
      <label>Adresse d’intervention<input name="address" value="<%= old.address || '' %>" autocomplete="street-address" required></label>
      <div class="form-grid two compact">
        <label>NPA<input name="postal_code" value="<%= old.postal_code || '' %>" autocomplete="postal-code" inputmode="numeric"></label>
        <label>Ville<input name="city" value="<%= old.city || '' %>" autocomplete="address-level2"></label>
      </div>
      <div class="trust-row">
        <span>Réponse rapide</span>
        <span>Devis clair</span>
        <span>Sans engagement</span>
      </div>
      <div class="wizard-actions"><button type="button" class="secondary" data-prev-step>Précédent</button><button type="button" data-next-step>Suivant</button></div>
    </section>

    <section class="form-section" data-wizard-step>
      <div class="section-title"><span>3</span><h2>Prestation</h2></div>
      <% const quoteServices = (publicSite && publicSite.services && publicSite.services.length) ? publicSite.services : [{ title: 'Nettoyage régulier', short: 'Décrivez le nettoyage souhaité.' }]; %>
      <label>Type de prestation
        <select name="service_type" required data-service-type>
          <% quoteServices.forEach(service => { %>
            <option data-short="<%= service.short || '' %>" <%= old.service_type === service.title ? 'selected' : '' %>><%= service.title %></option>
          <% }) %>
        </select>
      </label>
      <label>Délai souhaité<select name="urgency"><option>Standard</option><option>Dès que possible</option><option>Urgent</option></select></label>

      <% const quoteFields = publicSite.quoteFields || {}; %>
      <% const frequencyOptions = quoteFields.frequencyOptions || ['Ponctuel', 'Chaque semaine', 'Toutes les 2 semaines', 'Mensuel', 'À définir']; %>
      <div class="service-fields">
        <div class="info-note" data-selected-service-note><%= quoteServices[0].short || 'Décrivez le contexte du nettoyage pour recevoir une réponse adaptée.' %></div>
        <div class="form-grid two">
          <label><%= quoteFields.surfaceLabel || 'Surface, nombre de pièces ou volume à nettoyer' %><input name="surface" value="<%= old.surface || '' %>" placeholder="<%= quoteFields.surfacePlaceholder || 'Ex. 80 m², 4.5 pièces, bureaux 120 m²' %>"></label>
          <label>Type de lieu<input name="site_type" value="<%= old.site_type || '' %>" placeholder="<%= quoteFields.siteTypePlaceholder || 'Appartement, villa, bureaux, commerce, immeuble...' %>"></label>
        </div>
        <div class="form-grid two">
          <label>Fréquence<select name="frequency"><% frequencyOptions.forEach(option => { %><option <%= old.frequency === option ? 'selected' : '' %>><%= option %></option><% }) %></select></label>
          <label>Budget indicatif<input name="budget_range" value="<%= old.budget_range || '' %>" placeholder="Optionnel"></label>
        </div>
        <label>Détails importants<textarea name="project_details" placeholder="<%= quoteFields.detailsPlaceholder || 'Type de nettoyage, état actuel, accès, étage, vitres/stores, fréquence, photos utiles...' %>"><%= old.project_details || '' %></textarea></label>
      </div>

      <div class="form-grid two" data-general-date-row>
        <label data-desired-date-field>Date souhaitée<input type="date" name="desired_date" value="<%= old.desired_date || '' %>"></label>
        <label class="upload-box">Photos ou PDF<input type="file" name="photos" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" data-file-input><span data-file-summary>Ajouter des photos ou documents</span></label>
      </div>
      <p class="field-help">Photos ou documents recommandés si cela aide à comprendre l’état, les accès, les vitres, les stores ou le volume à nettoyer.</p>
      <div class="info-note" data-scheduled-after-quote-note>Pour cette prestation, le jour et l’heure fixes seront définis ensemble après analyse de la demande.</div>
      <label>Commentaire<textarea name="comment"><%= old.comment || '' %></textarea></label>
      <div class="wizard-actions"><button type="button" class="secondary" data-prev-step>Précédent</button><button type="button" data-next-step>Vérifier ma demande</button></div>
    </section>

    <section class="form-section" data-wizard-step>
      <div class="section-title"><span>4</span><h2>Récapitulatif</h2></div>
      <div class="quote-summary" data-quote-summary></div>
      <div class="trust-row">
        <span>Entreprise suisse</span>
        <span>Aucun engagement</span>
        <span>Réponse professionnelle</span>
      </div>
      <div class="wizard-actions final"><button type="button" class="secondary" data-prev-step>Précédent</button><button>Envoyer ma demande de devis</button></div>
    </section>
  </form>
</section>
