<% layout('layouts/main') %>
<% const clientBase = typeof clientBaseUrl !== 'undefined' ? clientBaseUrl : '/client'; %>
<div class="app-shell"><%- partial('partials/client-nav') %><section class="content">
  <div class="quote-intro compact-intro">
    <h1>Demander un devis</h1>
    <p>Votre demande est transmise à l’équipe avec les informations nécessaires au devis.</p>
  </div>
  <% const formOld = typeof old !== 'undefined' ? old : {}; %>
  <form method="post" action="<%= clientBase %>/demande-devis?_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">Adresse</span>
      <span data-step-dot="1">Prestation</span>
      <span data-step-dot="2">Détails</span>
    </div>

    <section class="form-section" data-wizard-step>
      <div class="section-title"><span>1</span><h2>Adresse</h2></div>
      <label>Adresse d’intervention<input name="address" required autocomplete="street-address"></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>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 || '' %>"><%= service.title %></option>
          <% }) %>
        </select>
      </label>

      <% const quoteFields = publicSite.quoteFields || {}; %>
      <% const frequencyOptions = quoteFields.frequencyOptions || ['Ponctuel', 'Chaque semaine', 'Toutes les 2 semaines', 'Mensuel', 'À définir']; %>
      <label>Délai souhaité<select name="urgency"><option>Standard</option><option>Dès que possible</option><option>Urgent</option></select></label>
      <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="<%= formOld.surface || '' %>" placeholder="<%= quoteFields.surfacePlaceholder || 'Ex. 80 m², 4.5 pièces, bureaux 120 m²' %>"></label>
          <label>Type de lieu<input name="site_type" value="<%= formOld.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 <%= formOld.frequency === option ? 'selected' : '' %>><%= option %></option><% }) %></select></label>
          <label>Budget indicatif<input name="budget_range" value="<%= formOld.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...' %>"><%= formOld.project_details || '' %></textarea></label>
      </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>Détails</h2></div>
      <div class="form-grid two" data-general-date-row><label data-desired-date-field>Date souhaitée<input type="date" name="desired_date"></label><label>Photos ou PDF<input type="file" name="photos" multiple accept=".jpg,.jpeg,.png,.webp,.pdf"></label></div>
      <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"></textarea></label>
      <div class="wizard-actions final"><button type="button" class="secondary" data-prev-step>Précédent</button><button>Envoyer la demande</button></div>
    </section>
  </form>
</section></div>
