@extends('layouts.app')

@section('title', 'Reservar retiro | Lavaustral')
@section('description', 'Completa tu solicitud de retiro y coordinamos por WhatsApp. Retiro y entrega a domicilio en Coyhaique y Puerto Aysén.')

@section('content')

    <!-- Reservar Retiro Section -->
    <section id="reservar-retiro" class="lav-booking" aria-label="Reservar retiro Lavaustral">

      <div class="container">
        <div class="lav-booking-grid">

          <div class="lav-booking-content" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">

            <p class="lav-booking-eyebrow">— Reserva tu retiro</p>

            <h1 class="lav-booking-headline">Completa y coordinamos por WhatsApp</h1>

            <p class="lav-booking-lead">Rellena tus datos y arma tu solicitud en segundos. Al enviar, se abre WhatsApp con tu reserva lista para confirmar el día y la hora.</p>

            <p class="lav-booking-sub">Sin llamadas ni esperas. Tú eliges el servicio y la modalidad; nosotros nos encargamos del resto.</p>

            <ul class="lav-booking-checklist">
              <li><i class="bi bi-check-lg" aria-hidden="true"></i><span>Retiro y entrega a domicilio en Coyhaique y Puerto Aysén.</span></li>
              <li><i class="bi bi-check-lg" aria-hidden="true"></i><span>Ropa doblada, embolsada y lista para guardar.</span></li>
              <li><i class="bi bi-check-lg" aria-hidden="true"></i><span>Detergentes de calidad y suavizante hipoalergénico.</span></li>
              <li><i class="bi bi-check-lg" aria-hidden="true"></i><span>Delivery 100% gratis en todos tus pedidos.</span></li>
              <li><i class="bi bi-check-lg" aria-hidden="true"></i><span>La confianza de más de 20 años de experiencia.</span></li>
            </ul>

          </div>

          <aside class="lav-booking-card" data-aos="fade-left" data-aos-duration="800" data-aos-delay="200" aria-label="Formulario de solicitud de retiro">

            <h2 class="lav-booking-card-title">Solicitar retiro</h2>
            <p class="lav-booking-card-desc">Te toma menos de un minuto.</p>

            <form action="" method="POST" class="lav-booking-form">
              @csrf

              <div class="lav-booking-toggle" role="group" aria-label="Modalidad de servicio">
                <label class="lav-booking-toggle-opt is-active">
                  <input type="radio" name="modalidad" value="domicilio" checked>
                  <span class="lav-booking-toggle-title">A domicilio</span>
                  <span class="lav-booking-toggle-desc">Retiramos y entregamos</span>
                </label>
                <label class="lav-booking-toggle-opt">
                  <input type="radio" name="modalidad" value="local">
                  <span class="lav-booking-toggle-title">En el local</span>
                  <span class="lav-booking-toggle-desc">Yo dejo y retiro</span>
                </label>
              </div>

              <div class="lav-booking-field">
                <label for="nombre">Nombre</label>
                <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
              </div>

              <div class="lav-booking-field-row">
                <div class="lav-booking-field">
                  <label for="telefono">Teléfono</label>
                  <input type="tel" id="telefono" name="telefono" placeholder="+56 9 ..." required>
                </div>
                <div class="lav-booking-field">
                  <label for="comuna">Comuna</label>
                  <select id="comuna" name="comuna">
                    <option value="coyhaique">Coyhaique</option>
                    <option value="puerto_aysen">Puerto Aysén</option>
                  </select>
                </div>
              </div>

              <div class="lav-booking-field" data-modalidad="domicilio">
                <label for="direccion">Dirección de retiro</label>
                <input type="text" id="direccion" name="direccion" placeholder="Calle, número, depto/casa">
              </div>

              <div class="lav-booking-field-row">
                <div class="lav-booking-field">
                  <label for="servicio">Servicio</label>
                  <select id="servicio" name="servicio">
                    <optgroup label="Lavado en Agua">
                      <option value="carga_chica" data-price="12000" data-tipo="agua">Carga chica (hasta 5 kg)</option>
                      <option value="carga_mediana" data-price="19000" data-tipo="agua">Carga mediana (hasta 8 kg)</option>
                      <option value="carga_grande" data-price="29000" data-tipo="agua">Carga grande (hasta 12 kg)</option>
                      <option value="carga_chica_planchado" data-price="17000" data-tipo="agua">Carga chica con planchado</option>
                      <option value="carga_mediana_planchado" data-price="26000" data-tipo="agua">Carga mediana con planchado</option>
                      <option value="carga_grande_planchado" data-price="40000" data-tipo="agua">Carga grande con planchado</option>
                      <option value="plumon" data-price="8000" data-tipo="agua">Plumón / edredón (unidad)</option>
                      <option value="frazada" data-price="6000" data-tipo="agua">Frazada / cubrecama (unidad)</option>
                      <option value="zapatillas" data-price="6000" data-tipo="agua">Zapatillas (par)</option>
                    </optgroup>
                    <optgroup label="Wet Cleaning (prendas delicadas)">
                      <option value="wet_prenda_delicada" data-price="0" data-tipo="wet">Prenda delicada (a cotizar)</option>
                      <option value="wet_prenda_especial" data-price="0" data-tipo="wet">Prenda especial / a medida (a cotizar)</option>
                    </optgroup>
                  </select>
                </div>
                <div class="lav-booking-field">
                  <label for="cantidad">Cantidad</label>
                  <input type="number" id="cantidad" name="cantidad" min="1" value="1">
                </div>
              </div>

              <p class="lav-booking-wet-note" id="lav-booking-wet-note" hidden>
                <i class="bi bi-info-circle" aria-hidden="true"></i>
                Las prendas Wet Cleaning se cotizan según material y tratamiento. Te confirmamos el valor por WhatsApp o correo antes de procesar tu pedido.
              </p>

              <div class="lav-booking-field">
                <label for="dia">Día preferido</label>
                <input type="date" id="dia" name="dia">
              </div>

              <div class="lav-booking-field">
                <label for="notas">Notas (opcional)</label>
                <textarea id="notas" name="notas" rows="2" placeholder="Ej: ropa delicada, prendas que necesitan cuidado especial..."></textarea>
              </div>

              <div class="lav-booking-estimate">
                <span id="lav-booking-estimate-label">Estimación referencial</span>
                <strong id="lav-booking-estimate-value">$12.000</strong>
              </div>

              <button type="submit" formaction="" class="lav-booking-btn lav-booking-btn-whatsapp">
                <i class="bi bi-whatsapp" aria-hidden="true"></i>
                <span>Reservar por WhatsApp</span>
              </button>

              <button type="submit" formaction="" class="lav-booking-btn lav-booking-btn-email">
                <i class="bi bi-envelope" aria-hidden="true"></i>
                <span>Reservar por correo</span>
              </button>

              <p class="lav-booking-disclaimer">Se abrirá WhatsApp o tu correo con la solicitud ya escrita. Confirmamos día, hora y valor final por ese medio.</p>

            </form>

          </aside>

        </div>
      </div>

    </section><!-- /Reservar Retiro Section -->

    <style>
      #reservar-retiro.lav-booking {
        position: relative !important;
        overflow: hidden !important;
        background: var(--lav-dark) !important;
        padding: 96px 0 !important;
      }

      .lav-booking-grid {
        display: grid;
        grid-template-columns: 1fr 480px;
        gap: 72px;
        align-items: start;
      }

      .lav-booking-eyebrow {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--lav-brand-sky) !important;
        margin-bottom: 22px;
      }

      .lav-booking-headline {
        font-size: 44px !important;
        font-weight: 800 !important;
        line-height: 1.18 !important;
        color: #FFFFFF !important;
        margin-bottom: 22px !important;
      }

      .lav-booking-lead {
        font-size: 17px !important;
        line-height: 1.65 !important;
        color: color-mix(in srgb, #FFFFFF 78%, transparent) !important;
        margin-bottom: 18px !important;
      }

      .lav-booking-sub {
        font-size: 15px !important;
        line-height: 1.6 !important;
        color: color-mix(in srgb, #FFFFFF 60%, transparent) !important;
        margin-bottom: 36px !important;
      }

      .lav-booking-checklist {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .lav-booking-checklist li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        color: #FFFFFF !important;
      }

      .lav-booking-checklist i {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--lav-primary) !important;
        color: #FFFFFF !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        margin-top: 1px;
      }

      /* Card lateral */
      .lav-booking-card {
        background: #FFFFFF !important;
        border-radius: 20px;
        padding: 36px;
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.25);
      }

      .lav-booking-card-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--lav-dark) !important;
        margin-bottom: 4px;
      }

      .lav-booking-card-desc {
        font-size: 14px;
        color: var(--lav-text-secondary) !important;
        margin-bottom: 24px;
      }

      .lav-booking-form {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      .lav-booking-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 4px;
      }

      .lav-booking-toggle-opt {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--lav-border) !important;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
      }

      .lav-booking-toggle-opt input {
        position: absolute;
        opacity: 0;
      }

      .lav-booking-toggle-opt.is-active,
      .lav-booking-toggle-opt:has(input:checked) {
        border-color: var(--lav-primary) !important;
        background: var(--lav-bg-light) !important;
      }

      .lav-booking-toggle-title {
        font-size: 14px;
        font-weight: 700;
        color: var(--lav-dark) !important;
      }

      .lav-booking-toggle-desc {
        font-size: 12px;
        color: var(--lav-text-secondary) !important;
      }

      .lav-booking-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .lav-booking-field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .lav-booking-field label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--lav-dark) !important;
      }

      .lav-booking-field input,
      .lav-booking-field select,
      .lav-booking-field textarea {
        width: 100%;
        border: 1px solid var(--lav-border) !important;
        border-radius: 10px;
        padding: 11px 14px;
        font-size: 14px;
        color: var(--lav-dark) !important;
        background: #FFFFFF !important;
      }

      .lav-booking-field input:focus,
      .lav-booking-field select:focus,
      .lav-booking-field textarea:focus {
        outline: none;
        border-color: var(--lav-primary) !important;
      }

      .lav-booking-field textarea {
        resize: vertical;
      }

      .lav-booking-wet-note {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: #F4EFE8;
        color: #8A6A2F !important;
        font-size: 12.5px;
        line-height: 1.5;
        padding: 12px 14px;
        border-radius: 10px;
        margin: -4px 0 0;
      }

      .lav-booking-wet-note i {
        margin-top: 1px;
        flex-shrink: 0;
      }

      .lav-booking-estimate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        border-top: 1px solid var(--lav-border) !important;
        margin-top: 4px;
      }

      .lav-booking-estimate span {
        font-size: 13px;
        color: var(--lav-text-secondary) !important;
      }

      .lav-booking-estimate strong {
        font-size: 20px;
        font-weight: 700;
        color: var(--lav-dark) !important;
      }

      .lav-booking-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 20px !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border: none;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
      }

      .lav-booking-btn-whatsapp {
        background-color: var(--lav-whatsapp) !important;
        color: #FFFFFF !important;
      }

      .lav-booking-btn-whatsapp:hover {
        background-color: #1fb956 !important;
      }

      .lav-booking-btn-email {
        background-color: #FFFFFF !important;
        color: var(--lav-dark) !important;
        border: 1px solid var(--lav-border) !important;
      }

      .lav-booking-btn-email:hover {
        border-color: var(--lav-primary) !important;
        color: var(--lav-primary) !important;
      }

      .lav-booking-disclaimer {
        font-size: 12px;
        line-height: 1.5;
        color: var(--lav-text-secondary) !important;
        text-align: center;
        margin: 4px 0 0 0;
      }

      @media (max-width: 1200px) {
        .lav-booking-grid {
          grid-template-columns: 1fr 420px;
          gap: 48px;
        }
      }

      @media (max-width: 992px) {
        .lav-booking-grid {
          grid-template-columns: 1fr;
        }
        .lav-booking-headline {
          font-size: 34px !important;
        }
        .lav-booking-field-row {
          grid-template-columns: 1fr;
        }
      }
    </style>

    <script>
      // Estimación referencial simple: precio del servicio x cantidad.
      // Los servicios Wet Cleaning no tienen precio fijo (data-price="0"),
      // así que en ese caso mostramos "A cotizar" en vez de $0.
      document.addEventListener('DOMContentLoaded', function () {
        const servicio = document.getElementById('servicio');
        const cantidad = document.getElementById('cantidad');
        const estimateLabel = document.getElementById('lav-booking-estimate-label');
        const estimateEl = document.getElementById('lav-booking-estimate-value');
        const wetNote = document.getElementById('lav-booking-wet-note');
        const direccionField = document.querySelector('[data-modalidad="domicilio"]');
        const toggleInputs = document.querySelectorAll('.lav-booking-toggle-opt input');

        function formatCLP(value) {
          return '$' + value.toLocaleString('es-CL');
        }

        function updateEstimate() {
          if (!servicio || !cantidad || !estimateEl) return;

          const selectedOption = servicio.selectedOptions[0];
          const price = parseInt(selectedOption?.dataset.price || '0', 10);
          const tipo = selectedOption?.dataset.tipo || 'agua';
          const qty = parseInt(cantidad.value || '1', 10);

          const isWet = tipo === 'wet' || price === 0;

          if (wetNote) {
            wetNote.hidden = !isWet;
          }

          if (isWet) {
            estimateLabel.textContent = 'Valor';
            estimateEl.textContent = 'A cotizar';
          } else {
            estimateLabel.textContent = 'Estimación referencial';
            estimateEl.textContent = formatCLP(price * qty);
          }
        }

        function updateModalidad() {
          const selected = document.querySelector('.lav-booking-toggle-opt input:checked')?.value;
          document.querySelectorAll('.lav-booking-toggle-opt').forEach(function (opt) {
            opt.classList.toggle('is-active', opt.querySelector('input').checked);
          });
          if (direccionField) {
            direccionField.style.display = selected === 'local' ? 'none' : '';
          }
        }

        servicio && servicio.addEventListener('change', updateEstimate);
        cantidad && cantidad.addEventListener('input', updateEstimate);
        toggleInputs.forEach(function (input) {
          input.addEventListener('change', updateModalidad);
        });

        updateEstimate();
        updateModalidad();
      });
    </script>

    <a href="https://wa.me/56984284828"
       target="_blank"
       rel="noopener noreferrer"
       aria-label="Contactar por WhatsApp"
       style="position:fixed; bottom:24px; right:24px; width:52px; height:52px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(37,211,102,0.35); z-index:999; text-decoration:none;">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="#FFFFFF" aria-hidden="true">
        <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.71.45 3.38 1.29 4.86L2 22l5.36-1.4a9.9 9.9 0 0 0 4.68 1.19h.01c5.46 0 9.9-4.45 9.9-9.9C21.95 6.45 17.5 2 12.04 2Zm0 18.02h-.01a8.1 8.1 0 0 1-4.13-1.13l-.3-.18-3.08.81.82-3-.19-.31a8.1 8.1 0 0 1-1.25-4.31c0-4.48 3.65-8.13 8.15-8.13 2.17 0 4.21.85 5.75 2.39a8.08 8.08 0 0 1 2.38 5.75c0 4.49-3.65 8.14-8.14 8.14Zm4.47-6.1c-.24-.12-1.45-.72-1.68-.8-.23-.08-.39-.12-.56.12-.16.24-.64.8-.78.97-.14.16-.29.18-.53.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.35-1.67-.14-.24-.02-.37.11-.49.11-.11.24-.29.36-.43.12-.14.16-.24.24-.4.08-.16.04-.31-.02-.43-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.42-.14 0-.31-.02-.47-.02-.16 0-.43.06-.66.31-.23.24-.86.84-.86 2.05s.88 2.38 1 2.54c.12.16 1.73 2.64 4.2 3.7.59.25 1.05.4 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.45-.59 1.66-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z"/>
      </svg>
    </a>

@endsection