@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 lav-booking-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 paga en línea</h1>

            <p class="lav-booking-lead">Rellena tus datos y arma tu solicitud en segundos. Al confirmar, generamos tu orden y te llevamos directo a pagar con Webpay.</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">

            <div class="lav-booking-card-head">
              <span class="lav-booking-card-icon"><i class="bi bi-basket2" aria-hidden="true"></i></span>
              <div>
                <h2 class="lav-booking-card-title">Solicitar retiro</h2>
                <p class="lav-booking-card-desc">Te toma menos de un minuto.</p>
              </div>
            </div>

            <form action="{{ route('booking.store') }}" method="POST" id="lav-booking-form" 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>
                  <i class="bi bi-truck lav-toggle-icon" aria-hidden="true"></i>
                  <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">
                  <i class="bi bi-shop lav-toggle-icon" aria-hidden="true"></i>
                  <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-row lav-booking-field-row-2">
                <div class="lav-booking-field">
                  <label for="nombre">Nombre</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-person" aria-hidden="true"></i>
                    <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" required>
                  </div>
                </div>
                <div class="lav-booking-field">
                  <label for="telefono">Teléfono</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-telephone" aria-hidden="true"></i>
                    <input type="tel" id="telefono" name="telefono" placeholder="+56 9 ..." required>
                  </div>
                </div>
              </div>

              <div class="lav-booking-field-row lav-booking-field-row-2">
                <div class="lav-booking-field">
                  <label for="email">Correo</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-envelope" aria-hidden="true"></i>
                    <input type="email" id="email" name="email" placeholder="tu@correo.cl" required>
                  </div>
                </div>
                <div class="lav-booking-field">
                  <label for="comuna">Comuna</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-geo-alt" aria-hidden="true"></i>
                    <select id="comuna" name="comuna">
                      <option value="puerto_aysen">Puerto Aysén</option>
                      <option value="coyhaique">Coyhaique</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="lav-booking-field-row lav-booking-field-row-2">
                <div class="lav-booking-field" data-modalidad="domicilio">
                  <label for="direccion">Dirección de retiro</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-house-door" aria-hidden="true"></i>
                    <input type="text" id="direccion" name="direccion" placeholder="Calle, número, depto/casa">
                  </div>
                </div>
                <div class="lav-booking-field">
                  <label for="dia">Día preferido</label>
                  <div class="lav-input-icon">
                    <i class="bi bi-calendar3" aria-hidden="true"></i>
                    <input type="date" id="dia" name="dia">
                  </div>
                </div>
              </div>

              <!-- SELECCIÓN MÚLTIPLE DE SERVICIOS -->
              <div class="lav-booking-field">
                <div class="d-flex justify-content-between align-items-center mb-1">
                  <label class="mb-0">Servicios seleccionados</label>
                  <button type="button" class="btn btn-sm btn-outline-primary rounded-pill py-0 px-2" style="font-size:12px;" data-bs-toggle="modal" data-bs-target="#modalServicios">
                    <i class="bi bi-plus-lg me-1"></i>Agregar / Editar
                  </button>
                </div>

                <div id="lista-servicios-seleccionados" class="lav-selected-services-list">
                  <!-- Se llena dinámicamente -->
                </div>
              </div>

              <p class="lav-booking-wet-note" id="lav-booking-wet-note" hidden>
                <i class="bi bi-info-circle" aria-hidden="true"></i>
                <span id="lav-booking-wet-note-text">Incluyes prendas a cotizar. Confirmamos el valor final por WhatsApp o correo antes de procesar.</span>
              </p>

              <div class="lav-booking-field">
                <label for="notas">Notas (opcional)</label>
                <div class="lav-input-icon lav-input-icon-textarea">
                  <i class="bi bi-chat-square-text" aria-hidden="true"></i>
                  <textarea id="notas" name="notas" rows="1" placeholder="Ej: ropa delicada..."></textarea>
                </div>
              </div>

            <div class="lav-booking-estimate d-flex flex-column gap-1">
              <div class="d-flex align-items-center justify-content-between w-100">
                <span id="lav-booking-estimate-label"><i class="bi bi-cash-coin" aria-hidden="true"></i> Estimación referencial</span>
                <strong id="lav-booking-estimate-value" class="fs-5">$0</strong>
              </div>
              <div class="d-flex justify-content-between w-100 text-muted extra-small border-top pt-1 mt-1" id="lav-booking-desglose-box">
                <span>Neto: <span id="lav-booking-neto-value">$0</span></span>
                <span>IVA (19%): <span id="lav-booking-iva-value">$0</span></span>
              </div>
            </div>

              <!-- Consentimiento de tratamiento de datos personales -->
              <div class="lav-booking-consent">
                <label class="lav-booking-consent-label" for="acepta_terminos">
                  <input type="checkbox" id="acepta_terminos" name="acepta_terminos" value="1" required>
                  <span>
                    Acepto los términos y condiciones del servicio y autorizo expresamente a
                    <strong>Patagon-Oeste Ltda</strong> (Mandante), a la plataforma
                    <strong>TodoPago SpA</strong> y a sus proveedores de procesamiento de pagos
                    e instituciones financieras asociadas, para recopilar, almacenar, tratar y
                    transferir mis datos personales suministrados en este formulario, de
                    conformidad con la Ley N° 19.628 sobre Protección de la Vida Privada y sus
                    modificaciones. Entiendo que estos datos serán utilizados exclusivamente
                    para la gestión de la suscripción, la validación transaccional y la
                    prevención de fraudes.
                  </span>
                </label>
                <p class="lav-booking-consent-error" id="lav-booking-consent-error" hidden>
                  Debes aceptar los términos y condiciones para continuar.
                </p>
              </div>

              <div class="lav-booking-actions">
                <button type="button" id="btn-pagar" class="lav-booking-btn lav-booking-btn-pagar">
                  <i class="bi bi-credit-card-2-back" aria-hidden="true"></i>
                  <span>Reservar y pagar</span>
                </button>
              </div>

              <p class="lav-booking-disclaimer">Al confirmar, se genera tu orden y te llevamos directo a pagar con Webpay. Confirmamos día, hora y valor final por WhatsApp o correo.</p>

            </form>

          </aside>

        </div>
      </div>

    </section>

    <!-- Modal Catálogo de Servicios -->
    <div class="modal fade" id="modalServicios" tabindex="-1" aria-labelledby="modalServiciosLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable modal-lg modal-fullscreen-sm-down">
        <div class="modal-content rounded-4 border-0">
          <div class="modal-header border-0 pb-0">
            <h5 class="modal-title fw-bold" id="modalServiciosLabel">Catálogo de Servicios</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="text-muted small mb-3">Añade uno o varios servicios a tu pedido. Usa los botones + / − para ajustar la cantidad.</p>

            <div class="lav-catalog-accordion" id="catalogAccordion">

              @foreach($services as $groupName => $items)
                <div class="lav-catalog-group mb-3">
                  <h6 class="fw-bold text-primary border-bottom pb-2">{{ $groupName }}</h6>
                  <div class="row g-2 mt-1">
                    @foreach($items as $service)
                      @php
                        $priceNeto = $service->base_price;
                        $priceConIva = round($priceNeto * 1.19);
                      @endphp
                      <div class="col-12 col-md-6">
                        <div class="lav-catalog-item d-flex align-items-center justify-content-between"
                             data-id="{{ $service->id }}"
                             data-nombre="{{ $service->name }}"
                             data-precio="{{ $service->is_quote ? 0 : $priceConIva }}"
                             data-precio-neto="{{ $service->is_quote ? 0 : $priceNeto }}"
                             data-quote="{{ $service->is_quote ? '1' : '0' }}">
                          <div class="lav-catalog-item-info">
                            <div class="lav-catalog-item-name fw-semibold">{{ $service->name }}</div>
                            @if($service->is_quote)
                              <div class="lav-catalog-item-price is-quote">A cotizar</div>
                            @else
                              <div class="lav-catalog-item-price">${{ number_format($priceConIva, 0, ',', '.') }} <small class="text-muted fw-normal" style="font-size:11px;">(c/IVA)</small></div>
                            @endif
                          </div>
                          <div class="lav-catalog-item-control">
                            <button type="button" class="btn btn-sm btn-outline-primary btn-add-svc"
                                    data-id="{{ $service->id }}"
                                    data-nombre="{{ $service->name }}"
                                    data-precio="{{ $service->is_quote ? 0 : $priceConIva }}"
                                    data-precio-neto="{{ $service->is_quote ? 0 : $priceNeto }}"
                                    data-quote="{{ $service->is_quote ? '1' : '0' }}">+ Agregar</button>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                </div>
              @endforeach

            </div>
          </div>
          <div class="modal-footer border-0 pt-0 lav-modal-footer">
            <div class="lav-modal-total">
              <span>Estimado seleccionado</span>
              <strong id="lav-modal-estimate-value">$0</strong>
            </div>
            <button type="button" class="btn btn-primary rounded-pill px-4" data-bs-dismiss="modal">Listo</button>
          </div>
        </div>
      </div>
    </div>

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

      .lav-booking-container { max-width: 1440px !important; }

      .lav-booking-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: 64px;
        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;
      }

      .lav-booking-card {
        position: relative;
        width: 100%;
        background: #FFFFFF !important;
        border-radius: 22px;
        padding: 44px 44px 40px;
        box-shadow: 0 30px 70px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, #000 4%, transparent);
        overflow: hidden;
      }

      .lav-booking-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 5px;
        background: linear-gradient(90deg, var(--lav-primary), var(--lav-brand-sky));
      }

      .lav-booking-card-head {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 24px;
      }

      .lav-booking-card-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 13px;
        background: var(--lav-bg-light) !important;
        color: var(--lav-primary) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
      }

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

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

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

      .lav-booking-toggle {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 6px;
        background: var(--lav-bg-light) !important;
        border-radius: 15px;
        margin-bottom: 4px;
      }

      .lav-booking-toggle::before {
        content: '';
        position: absolute;
        top: 6px;
        left: 6px;
        width: calc(50% - 9px);
        height: calc(100% - 12px);
        background: #FFFFFF;
        border-radius: 11px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 0;
      }

      .lav-booking-toggle:has(.lav-booking-toggle-opt:nth-child(2) input:checked)::before {
        transform: translateX(calc(100% + 6px));
      }

      .lav-booking-toggle-opt {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 11px 14px;
        border-radius: 11px;
        cursor: pointer;
      }

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

      .lav-toggle-icon {
        font-size: 15px;
        color: var(--lav-text-secondary);
        margin-bottom: 3px;
        transition: color .2s ease;
      }

      .lav-booking-toggle-opt.is-active .lav-toggle-icon,
      .lav-booking-toggle-opt:has(input:checked) .lav-toggle-icon {
        color: var(--lav-primary) !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; gap: 12px; }
      .lav-booking-field-row-2 { grid-template-columns: 1fr 1fr; }
      .lav-booking-field label { font-size: 12.5px; font-weight: 600; color: var(--lav-dark) !important; }

      .lav-input-icon { position: relative; display: flex; align-items: center; }
      .lav-input-icon > i {
        position: absolute; left: 14px; font-size: 14.5px;
        color: var(--lav-text-secondary) !important; pointer-events: none;
      }
      .lav-input-icon-textarea > i { top: 13px; }

      .lav-booking-field input, .lav-booking-field select, .lav-booking-field textarea {
        width: 100%;
        border: 1.5px solid var(--lav-border) !important;
        border-radius: 11px;
        padding: 11px 14px 11px 40px;
        font-size: 14px;
        color: var(--lav-dark) !important;
        background: #FFFFFF !important;
        transition: border-color .15s ease, box-shadow .15s ease;
      }

      .lav-booking-field select {
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 32px;
      }

      .lav-booking-field input:focus, .lav-booking-field select:focus, .lav-booking-field textarea:focus {
        outline: none;
        border-color: var(--lav-primary) !important;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--lav-primary) 14%, transparent);
      }

      .lav-booking-field textarea { resize: vertical; min-height: 44px; }

      /* Lista de servicios seleccionados (dentro del formulario) */
      .lav-selected-services-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 180px;
        overflow-y: auto;
        border: 1.5px dashed var(--lav-border);
        border-radius: 11px;
        padding: 8px;
        background: #FAFAFA;
      }

      .lav-selected-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        background: #FFFFFF;
        border: 1px solid var(--lav-border);
        border-radius: 8px;
        padding: 6px 12px;
      }

      .lav-selected-item-qty {
        width: 56px;
        padding: 4px 6px;
        font-size: 13px;
        text-align: center;
        border: 1px solid var(--lav-border);
        border-radius: 6px;
      }

      /* Catálogo dentro del modal */
      .lav-catalog-item {
        gap: 12px;
        padding: 12px 14px;
        border: 1.5px solid var(--lav-border, #e6e6e6);
        border-radius: 12px;
        background: #FFFFFF;
        transition: border-color .15s ease, background-color .15s ease;
        height: 100%;
      }

      .lav-catalog-item.is-selected {
        border-color: var(--lav-primary) !important;
        background: color-mix(in srgb, var(--lav-primary) 6%, #FFFFFF);
      }

      .lav-catalog-item-info { min-width: 0; }

      .lav-catalog-item-name {
        font-size: 14px;
        color: var(--lav-dark) !important;
        margin-bottom: 3px;
      }

      .lav-catalog-item-price {
        font-size: 16px;
        font-weight: 700;
        color: var(--lav-primary) !important;
      }

      .lav-catalog-item-price.is-quote {
        color: #C9A227 !important;
        font-size: 14px;
      }

      .lav-catalog-item-control { flex-shrink: 0; }

      .lav-qty-stepper {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--lav-bg-light) !important;
        border-radius: 999px;
        padding: 4px;
      }

      .lav-qty-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: #FFFFFF;
        color: var(--lav-primary);
        font-size: 17px;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        flex-shrink: 0;
      }

      .lav-qty-btn:active { transform: scale(.92); }

      .lav-qty-value {
        min-width: 20px;
        text-align: center;
        font-weight: 700;
        font-size: 14.5px;
        color: var(--lav-dark) !important;
      }

      .extra-small { font-size: 11px; }

      .lav-booking-wet-note {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        background: #F8F1E4;
        border-left: 3px solid #C9A227;
        color: #7A5C1E !important;
        font-size: 12.5px;
        line-height: 1.5;
        padding: 10px 12px;
        border-radius: 0 10px 10px 0;
        margin: 0;
      }

      .lav-booking-estimate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--lav-bg-light) !important;
        border-radius: 13px;
        padding: 12px 18px;
      }

      .lav-booking-estimate span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color: var(--lav-text-secondary) !important;
      }

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

      /* Bloque de consentimiento de datos personales */
      .lav-booking-consent {
        background: var(--lav-bg-light) !important;
        border-radius: 13px;
        padding: 14px 16px;
      }

      .lav-booking-consent-label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        cursor: pointer;
        margin: 0;
      }

      .lav-booking-consent-label input[type="checkbox"] {
        flex-shrink: 0;
        width: 17px;
        height: 17px;
        margin-top: 2px;
        accent-color: var(--lav-primary);
        cursor: pointer;
      }

      .lav-booking-consent-label span {
        font-size: 12px;
        line-height: 1.55;
        color: var(--lav-text-secondary) !important;
        text-align: left;
      }

      .lav-booking-consent-label span strong {
        color: var(--lav-dark) !important;
        font-weight: 700;
      }

      .lav-booking-consent-error {
        margin: 6px 0 0;
        font-size: 12px;
        font-weight: 600;
        color: #D64545 !important;
      }

      .lav-booking-consent.has-error {
        outline: 1.5px solid #D64545;
      }

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

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

      .lav-booking-btn:hover { transform: translateY(-2px); }
      .lav-booking-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

      .lav-booking-btn-pagar {
        background-color: var(--lav-primary) !important;
        color: #FFFFFF !important;
        box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--lav-primary) 55%, transparent);
      }

      .lav-booking-btn-pagar:hover { filter: brightness(1.05); }

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

      /* Footer del modal con el total estimado */
      .lav-modal-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        background: var(--lav-bg-light) !important;
      }

      .lav-modal-total {
        display: flex;
        flex-direction: column;
        line-height: 1.25;
      }

      .lav-modal-total span {
        font-size: 12px;
        color: var(--lav-text-secondary) !important;
      }

      .lav-modal-total strong {
        font-size: 19px;
        font-weight: 700;
        color: var(--lav-dark) !important;
      }

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

      @media (max-width: 640px) {
        #reservar-retiro.lav-booking { padding: 64px 0 !important; }
        .lav-booking-field-row-2 { grid-template-columns: 1fr; }
        .lav-booking-card { padding: 28px 20px; }
        .lav-booking-headline { font-size: 32px !important; }
      }

      @media (max-width: 480px) {
        #reservar-retiro.lav-booking { padding: 48px 0 !important; }
        .lav-booking-headline { font-size: 27px !important; line-height: 1.25 !important; }
        .lav-booking-lead, .lav-booking-sub { font-size: 14px !important; }
        .lav-booking-checklist li { font-size: 13.5px; }
        .lav-booking-card { padding: 22px 16px; border-radius: 18px; }
        .lav-booking-card-title { font-size: 19px; }
        .lav-booking-toggle-opt { padding: 9px 8px; }
        .lav-booking-toggle-title { font-size: 13px; }
        .lav-booking-toggle-desc { font-size: 10.5px; }
        .lav-booking-estimate { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
        .lav-booking-estimate strong { font-size: 18px; }
        .lav-booking-consent { padding: 12px; }

        /* Catálogo: apilar nombre/precio y control en móvil */
        .lav-catalog-item {
          flex-direction: column;
          align-items: stretch !important;
          gap: 10px;
        }
        .lav-catalog-item-control { align-self: flex-end; }
        .lav-catalog-item-price { font-size: 17px; }

        .lav-modal-footer { flex-direction: column; align-items: stretch; }
        .lav-modal-footer .btn { width: 100%; }
        .lav-modal-total { align-items: center; text-align: center; }
      }
    </style>

    <script>
      // URL de pago con placeholder de order_code, generada con el helper route() de Laravel
      const PAYMENT_URL_TEMPLATE = "{{ route('payment-process', ['order_code' => 'ORDER_CODE_PLACEHOLDER', 'method_payment' => 'todopago']) }}";

      
      if (window.__LAV_BOOKING_INITIALIZED__) {
        console.warn('[Lavaustral] El script de booking ya estaba inicializado. Se bloqueó una segunda ejecución (revisa si la vista se incluye/renderiza dos veces en el layout).');
      } else {
        window.__LAV_BOOKING_INITIALIZED__ = true;

        document.addEventListener('DOMContentLoaded', function () {
          const form = document.getElementById('lav-booking-form');
          const comunaSelect = document.getElementById('comuna');
          const estimateLabel = document.getElementById('lav-booking-estimate-label');
          const estimateEl = document.getElementById('lav-booking-estimate-value');
          const modalEstimateEl = document.getElementById('lav-modal-estimate-value');
          const wetNote = document.getElementById('lav-booking-wet-note');
          const direccionField = document.querySelector('[data-modalidad="domicilio"]');
          const listContainer = document.getElementById('lista-servicios-seleccionados');
          const catalogAccordion = document.getElementById('catalogAccordion');
          const modalServicios = document.getElementById('modalServicios');

          const btnPagar = document.getElementById('btn-pagar');
          const aceptaTerminos = document.getElementById('acepta_terminos');
          const consentBlock = document.querySelector('.lav-booking-consent');
          const consentError = document.getElementById('lav-booking-consent-error');

          if (!form || !catalogAccordion) return;

          // FIX: estos dos selectores se acotan al <form> en vez de buscar en
          // todo el document. Si la sección llegara a estar duplicada en el
          // layout, "document.querySelectorAll" traería los inputs de AMBAS
          // copias (mismo name="modalidad"), lo cual podía romper la lectura
          // del radio seleccionado. Acotar a "form" evita ese riesgo.
          const toggleInputs = form.querySelectorAll('.lav-booking-toggle-opt input');

          
          let selectedServices = [];

          
          const recentActions = new Map(); // lockKey -> timestamp
          const LOCK_MS = 400;

          function isLocked(lockKey) {
            const now = Date.now();
            const last = recentActions.get(lockKey);
            if (last && (now - last) < LOCK_MS) {
              return true;
            }
            recentActions.set(lockKey, now);
            return false;
          }

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

            function computeEstimate() {
              let totalSum = 0;
              let totalNetoSum = 0;
              let hasQuote = false;
            
              selectedServices.forEach(item => {
                if (item.isQuote) {
                  hasQuote = true;
                } else {
                  totalSum += item.precio * item.cantidad;
                  totalNetoSum += item.precioNeto * item.cantidad;
                }
              });
            
              const totalIva = totalSum - totalNetoSum;
            
              if (selectedServices.length === 0) {
                return { label: 'Estimación referencial', value: '$0', neto: '$0', iva: '$0', hasQuote: false };
              }
              if (hasQuote && totalSum === 0) {
                return { label: 'Valor', value: 'A cotizar', neto: '—', iva: '—', hasQuote: true };
              }
              if (hasQuote && totalSum > 0) {
                return { 
                  label: 'Estimación parcial', 
                  value: `${formatCLP(totalSum)} + Cotización`, 
                  neto: formatCLP(totalNetoSum), 
                  iva: formatCLP(totalIva), 
                  hasQuote: true 
                };
              }
              return { 
                label: 'Estimación referencial', 
                value: formatCLP(totalSum), 
                neto: formatCLP(totalNetoSum), 
                iva: formatCLP(totalIva), 
                hasQuote: false 
              };
            }

            function updateTotals() {
              const { label, value, neto, iva, hasQuote } = computeEstimate();
              estimateLabel.textContent = label;
              estimateEl.textContent = value;
              
              const netoEl = document.getElementById('lav-booking-neto-value');
              const ivaEl = document.getElementById('lav-booking-iva-value');
              if (netoEl) netoEl.textContent = neto;
              if (ivaEl) ivaEl.textContent = iva;
            
              if (wetNote) wetNote.hidden = !hasQuote;
              if (modalEstimateEl) {
                modalEstimateEl.innerHTML = `<span class="fs-6 fw-normal text-muted">Neto: ${neto} + IVA: ${iva} =</span> ${value}`;
              }
            }

          function renderSelectedServices() {
            listContainer.innerHTML = '';

            if (selectedServices.length === 0) {
              listContainer.innerHTML = `<div class="text-center text-muted small py-2">No has seleccionado servicios. Haz clic en "Agregar / Editar".</div>`;
              updateTotals();
              return;
            }

            selectedServices.forEach((item, index) => {
              const row = document.createElement('div');
              row.className = 'lav-selected-item';

              const itemTotal = item.isQuote ? 'A cotizar' : formatCLP(item.precio * item.cantidad);

              row.innerHTML = `
                <div class="me-2 overflow-hidden">
                  <div class="fw-semibold text-truncate small">${item.nombre}</div>
                  <div class="text-muted extra-small">${itemTotal}</div>
                </div>
                <div class="d-flex align-items-center gap-2 flex-shrink-0">
                  <input type="number" min="1" class="lav-selected-item-qty" value="${item.cantidad}" data-index="${index}">
                  <button type="button" class="btn btn-sm btn-link text-danger p-0 border-0 btn-remove-item" data-index="${index}">
                    <i class="bi bi-trash"></i>
                  </button>
                </div>
              `;
              listContainer.appendChild(row);
            });

            updateTotals();
          }

          // Sincroniza cada tarjeta del catálogo: muestra botón "+ Agregar"
          // o el contador +/- según si el servicio ya está seleccionado.
          //
          // FIX PRINCIPAL: antes esto buscaba en "document.querySelectorAll(...)",
          // es decir, en TODO el documento. Si la sección de reservas llegara a
          // renderizarse dos veces en el layout (mismos data-id repetidos),
          // esta función marcaba como "seleccionada" (con su stepper +/-) a
          // CUALQUIER tarjeta con ese id en cualquier parte del DOM, aunque
          // sólo existiera UNA entrada real en "selectedServices". Eso hacía
          // que visualmente pareciera que se agregaron más servicios de los
          // que en verdad se seleccionaron, aunque el array (y por lo tanto lo
          // que se guarda en la base de datos) siempre tuvo la cantidad correcta.
          //
          // Ahora se busca sólo dentro de "catalogAccordion", que es el único
          // contenedor real del catálogo, evitando que copias duplicadas del
          // DOM contaminen la vista.
          function syncCatalogControls() {
            catalogAccordion.querySelectorAll('.lav-catalog-item').forEach(item => {
              const id = item.dataset.id;
              const nombre = item.dataset.nombre;
              const precio = item.dataset.precio;
              const isQuote = item.dataset.quote === '1';
              const controlWrap = item.querySelector('.lav-catalog-item-control');
              const svc = selectedServices.find(s => s.id === id);

              if (svc) {
                item.classList.add('is-selected');
                controlWrap.innerHTML = `
                  <div class="lav-qty-stepper">
                    <button type="button" class="lav-qty-btn lav-qty-minus" data-id="${id}" aria-label="Quitar uno">−</button>
                    <span class="lav-qty-value">${svc.cantidad}</span>
                    <button type="button" class="lav-qty-btn lav-qty-plus" data-id="${id}" aria-label="Agregar uno">+</button>
                  </div>
                `;
              } else {
                item.classList.remove('is-selected');
                controlWrap.innerHTML = `<button type="button" class="btn btn-sm btn-outline-primary btn-add-svc" data-id="${id}" data-nombre="${nombre}" data-precio="${precio}" data-quote="${isQuote ? '1' : '0'}">+ Agregar</button>`;
              }
            });
          }

            function addItem(id, nombre, precio, isQuote, precioNeto) {
              const idx = selectedServices.findIndex(s => s.id === id);
              const pConIva = parseInt(precio, 10) || 0;
              const pNeto = precioNeto !== undefined ? parseInt(precioNeto, 10) : Math.round(pConIva / 1.19);
            
              if (idx >= 0) {
                selectedServices[idx].cantidad += 1;
              } else {
                selectedServices.push({
                  id,
                  nombre,
                  precio: pConIva,
                  precioNeto: pNeto,
                  cantidad: 1,
                  isQuote: isQuote === '1' || isQuote === true
                });
              }
            }

          function decrementItem(id) {
            const idx = selectedServices.findIndex(s => s.id === id);
            if (idx < 0) return;
            selectedServices[idx].cantidad -= 1;
            if (selectedServices[idx].cantidad <= 0) {
              selectedServices.splice(idx, 1);
            }
          }

          // Delegación de eventos dentro del catálogo (modal).
          // Este listener se registra UNA sola vez (protegido por el guard
          // global de más arriba) y además cada acción individual pasa por
          // el lock por-id/acción para ignorar disparos duplicados.
          catalogAccordion.addEventListener('click', function (e) {
            const addBtn = e.target.closest('.btn-add-svc');
            const plusBtn = e.target.closest('.lav-qty-plus');
            const minusBtn = e.target.closest('.lav-qty-minus');

            let action = null;
            let targetBtn = null;

            if (addBtn) { action = 'add'; targetBtn = addBtn; }
            else if (plusBtn) { action = 'plus'; targetBtn = plusBtn; }
            else if (minusBtn) { action = 'minus'; targetBtn = minusBtn; }
            else { return; }

            const lockKey = action + ':' + targetBtn.dataset.id;
            if (isLocked(lockKey)) {
              // Click duplicado/rebotado detectado y descartado.
              return;
            }

            if (action === 'add') {
              addItem(targetBtn.dataset.id, targetBtn.dataset.nombre, targetBtn.dataset.precio, targetBtn.dataset.quote, targetBtn.dataset.precioNeto);
            } else if (action === 'plus') {
              const existing = selectedServices.find(s => s.id === targetBtn.dataset.id);
              if (existing) addItem(existing.id, existing.nombre, existing.precio, existing.isQuote ? '1' : '0', existing.precioNeto);
            } else if (action === 'minus') {
              decrementItem(targetBtn.dataset.id);
            }

            syncCatalogControls();
            renderSelectedServices();
          });

          // Delegación de eventos para la lista editable (dentro del formulario)
          listContainer.addEventListener('change', function (e) {
            if (e.target.classList.contains('lav-selected-item-qty')) {
              const idx = parseInt(e.target.dataset.index, 10);
              const val = parseInt(e.target.value, 10);
              selectedServices[idx].cantidad = isNaN(val) || val < 1 ? 1 : val;
              renderSelectedServices();
              syncCatalogControls();
            }
          });

          listContainer.addEventListener('click', function (e) {
            const btn = e.target.closest('.btn-remove-item');
            if (btn) {
              const idx = parseInt(btn.dataset.index, 10);
              selectedServices.splice(idx, 1);
              renderSelectedServices();
              syncCatalogControls();
            }
          });

          // Al abrir el modal, refleja el estado actual de selección
          if (modalServicios) {
            modalServicios.addEventListener('show.bs.modal', syncCatalogControls);
          }

          function updateModalidad() {
            // FIX: acotado a "form" (antes: document.querySelector) por la
            // misma razón explicada arriba en "toggleInputs".
            const selected = form.querySelector('.lav-booking-toggle-opt input:checked')?.value;
            form.querySelectorAll('.lav-booking-toggle-opt').forEach(opt => {
              opt.classList.toggle('is-active', opt.querySelector('input').checked);
            });
            if (direccionField) {
              direccionField.style.display = selected === 'local' ? 'none' : '';
            }
          }

          // Oculta el error de consentimiento en cuanto el usuario marca el checkbox
          if (aceptaTerminos) {
            aceptaTerminos.addEventListener('change', function () {
              if (aceptaTerminos.checked) {
                consentError.hidden = true;
                consentBlock.classList.remove('has-error');
              }
            });
          }

          // ------------------------------------------------------------
          // Guarda la reserva en el servidor como orden pendiente (BD).
          // Solo enviamos service_id + cantidad: el precio SIEMPRE se
          // recalcula en el backend contra home_services, nunca se confía
          // en el valor mostrado aquí en el navegador.
          // Debe devolver JSON con al menos: { order_code: "..." }
          // ------------------------------------------------------------
          async function guardarReserva() {
            const csrfToken = form.querySelector('input[name="_token"]').value;

            const payload = {
              nombre: document.getElementById('nombre').value.trim(),
              telefono: document.getElementById('telefono').value.trim(),
              email: document.getElementById('email').value.trim(),
              comuna: comunaSelect.value,
              // FIX: acotado a "form" (antes: document.querySelector) para
              // no leer nunca el radio de una copia duplicada de la sección.
              modalidad: form.querySelector('.lav-booking-toggle-opt input:checked').value,
              direccion: document.getElementById('direccion').value.trim(),
              dia: document.getElementById('dia').value,
              notas: document.getElementById('notas').value.trim(),
              acepta_terminos: aceptaTerminos.checked,
              // Se envía exactamente lo que hay en "selectedServices" -
              // el único array fuente de verdad, sin agregados fantasma.
              servicios: selectedServices.map(s => ({
                service_id: parseInt(s.id, 10),
                cantidad: s.cantidad
              }))
            };

            const response = await fetch(form.action, {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest'
              },
              body: JSON.stringify(payload)
            });

            if (!response.ok) {
              let msg = 'No se pudo guardar tu reserva. Intenta nuevamente.';
              try {
                const errData = await response.json();
                if (errData.message) msg = errData.message;
              } catch (e) {}
              throw new Error(msg);
            }

            return response.json();
          }

          let isSubmitting = false;

          btnPagar.addEventListener('click', async function () {
            // Evita doble-envío si el click se dispara más de una vez.
            if (isSubmitting) return;

            if (!form.checkValidity()) {
              form.reportValidity();
              return;
            }
            if (selectedServices.length === 0) {
              alert('Por favor agrega al menos un servicio a tu solicitud.');
              return;
            }
            if (!aceptaTerminos.checked) {
              consentError.hidden = false;
              consentBlock.classList.add('has-error');
              consentBlock.scrollIntoView({ behavior: 'smooth', block: 'center' });
              return;
            }

            isSubmitting = true;
            const originalHtml = btnPagar.innerHTML;
            btnPagar.disabled = true;
            btnPagar.innerHTML = '<span>Generando tu orden...</span>';

            try {
              const data = await guardarReserva();

              if (!data || !data.order_code) {
                throw new Error('No se recibió el código de la orden.');
              }

              // Redirección directa a Webpay/TodoPago
              window.location.href = PAYMENT_URL_TEMPLATE.replace('ORDER_CODE_PLACEHOLDER', data.order_code);
            } catch (err) {
              alert(err.message || 'No se pudo generar tu reserva. Intenta nuevamente.');
              btnPagar.disabled = false;
              btnPagar.innerHTML = originalHtml;
              isSubmitting = false;
            }
          });

          toggleInputs.forEach(input => input.addEventListener('change', updateModalidad));

          renderSelectedServices();
          syncCatalogControls();
          updateModalidad();
        });
      }
    </script>

    <!-- Botón flotante WhatsApp -->
    <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