Twig\Error\RuntimeError {#2425
  -lineno: 21
  -rawMessage: "Impossible to access an attribute ("folioCredicel") on a bool variable ("")."
  -source: Twig\Source {#2247
    -code: """
      {% extends 'base.html.twig' %}\n
      \n
      {% block title %}Cotizador{% endblock %}\n
      \n
      {% block body %}\n
          <link rel="stylesheet" href="{{ asset('css/ion.rangeSlider.css') }}">\n
          <link rel="stylesheet" href="{{ asset('css/ion.rangeSlider.skinNice.css') }}">\n
          <div class="my-6 p-2 lg:custom-container md:p-4">\n
              <div class="flex flex-col items-center justify-center">\n
                  <div class="w-full">\n
                      <h1 class="text-3xl font-bold mb-8 text-center md:text-left">Cotizador Credicel</h1>\n
                      <div class="grid grid-cols-1 md:grid-cols-12 gap-6">\n
                          {{ include('includes/info-compra.html.twig') }}\n
                          <div class="col-span-12 md:col-span-8 bg-white border rounded-lg shadow-md p-6" id="contentArea">\n
                              <form class="hidden" id="quoterFormData" action="{{ path('app_ordenes_saveQuote', {'orderEncoded': order.orderEncoded}) }}" method="post">\n
                                  <div id="addresses" class="content-section">\n
                                      {{ include('includes/pasos-credicel.html.twig') }}\n
                                      <img src="{{ asset('img/banners/banner2.png') }}">\n
                                      <h3 class="text-3xl font-bold text-center" style="margin-top: 10px;">Folio: <label\n
                                                  class="text-3xl font-bold"\n
                                                  style="color: #571666; font-size: 1.9rem;">{{ order.credicelToken.last.folioCredicel }}</label>\n
                                      </h3>\n
                                      <div class="flex flex-col md:flex-row justify-center p-4 rounded-lg gap-4">\n
                                          <!-- Marca -->\n
                                          <div class="lg:w-1/2 md:w-1/2 w-full px-4 py-3 bg-[#e9ecef] flex items-center justify-center gap-2 rounded-lg">\n
                                              <img src="{{ asset('img/marca_icons/'~order.detalleOrdens.first.producto.marca.nombre~'.png') }}" class="w-12 h-auto">\n
                                              <h4 class="text-2xl">{{ order.detalleOrdens.first.producto.marca.nombre | title }}</h4>\n
                                          </div>\n
      \n
                                          <!-- Modelo -->\n
                                          <div class="lg:w-1/2 md:w-1/2 w-full px-4 py-3 bg-[#e9ecef] flex items-center justify-center rounded-lg">\n
                                              <h4 class="text-2xl text-center">{{ order.detalleOrdens.first.producto.nombre | upper }}</h4>\n
                                          </div>\n
                                      </div>\n
      \n
                                      <div class="relative flex justify-center items-center p-4 mt-2 bg-white rounded-[18px]">\n
                                          <div class="absolute inset-0 rounded-[18px] border-[3px] border-transparent"\n
                                               style="background: linear-gradient(90deg, #6659CE 0%, #E14DF3 57%, #6659CE 150%);\n
                                             -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n
                                             mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n
                                             -webkit-mask-composite: xor;\n
                                             mask-composite: exclude;">\n
                                          </div>\n
                                          <h3 class="text-2xl font-bold text-gray-800 relative text-center sm:text-left">\n
                                              Precio de contado:\n
                                              <span class="block sm:inline text-[#571666]">$ {{ precioColaborador | number_format(2, '.', ',') }}</span>\n
                                          </h3>\n
                                      </div>\n
                                      <div class="lg:w-full md:w-full w-full hidden" id="infoEquipo">\n
                                          <div class="select-items">\n
                                              <div class="flex justify-center mt-4 border border-solid border-gray-300 rounded-xl p-2">\n
                                                  <div class="lg:w-1/2 md:w-1/2 w-full mb-2">\n
                                                      <div id="imgEquipo"></div>\n
                                                  </div>\n
                                                  <div class="lg:w-1/2 md:w-1/2 w-full mb-2">\n
                                                      <h5 class="text-xl mt-4" id="equipo">Samsung A03</h5>\n
                                                      <p class="text-base">Procesador: <span\n
                                                                  id="procesador">Octacore 1.6Gz</span><br>RAM:\n
                                                          <span id="ram">4GB</span><br> Almacenamiento: <span\n
                                                                  id="almacenamiento">64 GB*</span> <br>\n
                                                          Batería: <span id="bateria">5,000 mAh</span></p>\n
                                                  </div>\n
                                              </div>\n
                                          </div>\n
                                      </div>\n
                                      <div class="lg:w-full md:w-full w-full pt-3 hidden" id="precioContadoContainer">\n
                                          <label for="preciocontado" class="w-full text-2xl">Precio de contado:</label>\n
                                          <div class="input-form">\n
                                              <input type="text" name="preciocontado" id="preciocontado" value="{{ precioColaborador }}"\n
                                                     class="text-2xl text-black bg-transparent" disabled>\n
                                          </div>\n
                                      </div>\n
                                      <br>\n
                                      <div class="w-full">\n
                                          <p class="mt-4 bg-purple-100 text-purple-800 text-center p-2 rounded-md"\n
                                             role="alert">\n
                                              ¡Recuerda, puedes aumentar el pago del enganche, con el fin de disminuir tus pagos semanales!\n
                                          </p>\n
                                      </div>\n
                                      <br>\n
                                      <div id="plazos_container">\n
                                          <div class="mt-4 p-4 rounded-md flex flex-col sm:flex-row items-center gap-4 justify-center">\n
                                              <label for="enganche" class="whitespace-nowrap text-2xl font-bold">Monto de enganche:</label>\n
      \n
                                              <div class="flex items-center w-full sm:w-1/2 justify-center">\n
                                                  <span class="text-[#5f2978] text-4xl font-bold mr-2">$</span>\n
                                                  <input id="montoEngancheChangeSlider" type="number" placeholder="" name="enganche"\n
                                                         class="w-full border border-gray-300 p-2 rounded-md font-bold text-4xl text-center text-[#5f2978]">\n
                                              </div>\n
                                          </div>\n
                                          <div class="w-full cotiza pt-3">\n
                                              <div style="background: #fdd440; border-radius: 15px; padding: 3%;">\n
                                                  <div class="flex justify-between">\n
                                                      <label class="control-label">Enganche mínimo</label>\n
                                                      <label class="control-label">Enganche máximo</label>\n
                                                  </div>\n
                                                  <input type="text" id="slider-enganche" value="" name="enganche" class="irs-hidden-input" readonly style="display: none">\n
                                              </div>\n
                                              <div class="w-full hidden" id="mensajePromocionalContainer">\n
                                                  <p class="mt-4 bg-purple-100 text-purple-800 text-center p-2 rounded-md"\n
                                                     role="alert">\n
                                                      Monedero electrónico de <strong id="promocion">$100.00</strong> aplicado a su enganche <br>\n
                                                      Total enganche a pagar: <strong id="enganchePromocion">$268.00</strong>\n
                                                  </p>\n
                                              </div>\n
                                              <div class="w-full text-center mt-4">\n
                                                  <h4 class="font-bold">Seleccione el plazo que se ajuste mejor a su\n
                                                      presupuesto:</h4>\n
                                              </div>\n
                                              <div id="plazos" class="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 justify-center p-4">\n
                                                  <!-- Opción 13S -->\n
                                                  <label class="block cursor-pointer hidden" id="plazoContainer-13">\n
                                                      <input type="radio" name="plazo" value="13S" class="hidden" required>\n
                                                      <div class="plazo-card bg-[#79bcaf] text-white rounded-xl w-full flex flex-col items-center p-4 shadow-lg transition-all duration-300 hover:-translate-y-2">\n
                                                          <img src="{{ asset('img/13.png') }}" alt="13S" class="w-full max-w-[300px] mb-4">\n
                                                          <h5 class="text-2xl mb-2">Pago semanal:</h5>\n
                                                          <p id="ss13" class="text-3xl font-bold mb-2">$ 389.00</p>\n
                                                      </div>\n
                                                  </label>\n
      \n
                                                  <!-- Opción 26S -->\n
                                                  <label class="block cursor-pointer hidden" id="plazoContainer-26">\n
                                                      <input type="radio" name="plazo" value="26S" class="hidden" required>\n
                                                      <div class="plazo-card bg-[#ebb430] text-white rounded-xl w-full flex flex-col items-center p-4 shadow-lg transition-all duration-300 hover:-translate-y-2">\n
                                                          <img src="{{ asset('img/26.png') }}" alt="26S" class="w-full max-w-[300px] mb-4">\n
                                                          <h5 class="text-2xl mb-2">Pago semanal:</h5>\n
                                                          <p id="ss26" class="text-3xl font-bold mb-2">$ 389.00</p>\n
                                                      </div>\n
                                                  </label>\n
      \n
                                                  <!-- Opción 39S -->\n
                                                  <label class="block cursor-pointer hidden" id="plazoContainer-39">\n
                                                      <input type="radio" name="plazo" value="39S" class="hidden" required>\n
                                                      <div class="plazo-card bg-[#c64ea4] text-white rounded-xl w-full flex flex-col items-center p-4 shadow-lg transition-all duration-300 hover:-translate-y-2">\n
                                                          <img src="{{ asset('img/39.png') }}" alt="39S" class="w-full max-w-[300px] mb-4">\n
                                                          <h5 class="text-2xl mb-2">Pago semanal:</h5>\n
                                                          <p id="ss39" class="text-3xl font-bold mb-2">$ 389.00</p>\n
                                                      </div>\n
                                                  </label>\n
                                              </div>\n
                                          </div>\n
                                      </div>\n
                                      <!-- Banner y pregunta de chip -->\n
                                      {% if operadores is not empty %}\n
                                          <div class="flex items-center p-4 mb-4 text-sm text-yellow-700 bg-yellow-100 border border-yellow-400 rounded-lg" role="alert">\n
                                              <svg class="w-5 h-5 mr-2 text-yellow-700" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n
                                                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v4a1 1 0 002 0V7zm-1 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>\n
                                              </svg>\n
                                              <span class="sr-only">Warning</span>\n
                                              <div>\n
                                                  El equipo está limitado para uso con la red de ABIB. Asegúrate de tener un chip de esa compañía para poder usarlo sin problemas.\n
                                              </div>\n
                                          </div>\n
                                          <div class="w-full flex flex-col items-center justify-center mt-8">\n
                                              <div class="relative w-full max-w-[900px] rounded-2xl overflow-hidden bg-no-repeat bg-cover bg-center"\n
                                                   style="background-image: url('{{ asset('img/chips/banners/BANNERMORAD_Mesa de trabajo 1 copia 6.png') }}');">\n
                                                  <div class="flex items-center h-[180px] md:h-[220px] w-full">\n
                                                      <div class="flex flex-col items-center justify-center w-full md:w-2/3 ml-auto pr-2 md:pr-12">\n
                                                          <div class="mb-4 font-extrabold leading-tight text-center text-white max-w-[420px] w-full text-lg sm:text-xl md:text-2xl lg:text-3xl break-words">\n
                                                              ¿Quieres agregar un<br class="hidden md:block">chip a tu compra?\n
                                                          </div>\n
                                                          <div class="flex gap-4 sm:gap-6 bg-white bg-opacity-90 rounded-2xl p-2 w-fit items-center justify-center">\n
                                                              <label class="flex items-center gap-2 font-bold text-base sm:text-lg md:text-xl text-[#571666]">\n
                                                                  <input type="radio" name="agregar_chip" value="si" class="accent-[#571666]"  id="chip-si" required> Sí\n
                                                              </label>\n
                                                              <label class="flex items-center gap-2 font-bold text-base sm:text-lg md:text-xl text-[#571666]">\n
                                                                  <input type="radio" name="agregar_chip" value="no" class="accent-[#571666]" id="chip-no"> No\n
                                                              </label>\n
                                                          </div>\n
                                                      </div>\n
                                                  </div>\n
                                              </div>\n
                                          </div>\n
                                      {% endif %}\n
      \n
                                      <!-- Fin banner chip -->\n
                                  </div>\n
                                  <input class="hidden" type="text" name="token" value="{{ order.credicelToken.last.tokenCredicel }}">\n
                                  <input class="hidden" type="text" name="folio" value="{{ order.credicelToken.last.folioCredicel }}">\n
                                  <input class="hidden" type="text" name="bonificacion" id="bonificacion" value="0">\n
                                  <input class="hidden" type="text" name="operador_seleccionado" id="operador_seleccionado" value="">\n
      \n
                              \n
                                  <div style="display: flex; justify-content: center; margin-top: 2%">\n
                                      <button id="continuar" type="submit"\n
                                              class="bg-[rgb(87,22,102)] text-white font-semibold py-2 px-4 rounded-md shadow hover:bg-[rgb(87,22,102,0.8)] focus:ring-2 focus:ring-[rgb(87,22,102)] focus:ring-offset-2">\n
                                          CONTINUAR\n
                                      </button>\n
                                  </div>\n
                              </form>\n
                              {% for tipo, mensajes in app.flashes %}\n
                                  {% for mensaje in mensajes %}\n
                                      <div class="flex items-center p-4 mb-4 text-sm {{ tipo == 'success' ? 'text-green-700 bg-green-100 border border-green-400' : (tipo == 'error' ? 'text-red-700 bg-red-100 border border-red-400' : 'text-yellow-700 bg-yellow-100 border border-yellow-400') }} rounded-lg" role="alert">\n
                                          <svg class="w-5 h-5 mr-2 {{ tipo == 'success' ? 'text-green-700' : (tipo == 'error' ? 'text-red-700' : 'text-yellow-700') }}" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n
                                              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v4a1 1 0 002 0V7zm-1 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>\n
                                          </svg>\n
                                          <span class="sr-only">{{ tipo == 'success' ? 'Success' : (tipo == 'error' ? 'Error' : 'Warning') }}</span>\n
                                          <div>\n
                                              {{ mensaje }}\n
                                          </div>\n
                                      </div>\n
                                  {% endfor %}\n
                              {% endfor %}\n
                          </div>\n
                      </div>\n
                  </div>\n
              </div>\n
          </div>\n
          \n
          <!-- Modal de Compañías -->\n
          <div id="compañias-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4 pb-8">\n
              <div class="bg-white rounded-2xl max-w-sm w-full max-h-[75vh] overflow-visible relative">\n
                  <!-- Logo posicionado parcialmente fuera del modal -->\n
                  <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 z-10">\n
                      <img src="{{ asset('img/chips/banners/COMPAÑIA_Mesa de trabajo 1 copia 10.png') }}" \n
                           alt="Elige tu compañía" \n
                           class="w-64 h-auto">\n
                  </div>\n
                  \n
                  <!-- Contenido del modal con scroll -->\n
                  <div class="p-4 pt-16 max-h-[75vh] overflow-y-auto">\n
                      <h3 class="text-xl font-bold text-center mb-4 text-[#571666]">Selecciona tu compañía</h3>\n
                      \n
                      <!-- Grid de compañías -->\n
                      <div class="grid grid-cols-1 gap-2 mb-4 max-w-xs mx-auto">\n
                          {% for operador in operadores %}\n
                              <label class="cursor-pointer">\n
                                  <input type="radio" name="compañia_chip" value="{{ operador.id }}" class="hidden">\n
                                  <div class="compañia-card border-2 border-gray-200 rounded-lg p-1.5 hover:border-[#571666] transition-all duration-300">\n
                                      <img src="https://shop.credicel.mx/img/chips/operadores/{{ operador.id }}.png"\n
                                           alt="{{ operador.nombre }}"\n
                                           class="w-full h-auto rounded-md">\n
                                  </div>\n
                              </label>\n
                          {% endfor %}\n
                      </div>\n
                  </div>\n
              </div>\n
          </div>\n
      \n
          <div id="loading-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">\n
              <div class="bg-white rounded-lg p-6 flex flex-col items-center">\n
                  <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-600 mb-4"></div>\n
                  <p id="loading-text" class="text-gray-700">Procesando...</p>\n
              </div>\n
          </div>\n
          \n
          <!-- Modal de Chips -->\n
          <div id="chips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-8">\n
              <div class="bg-white rounded-2xl max-w-[600px] w-full max-h-[90vh] flex flex-col justify-between shadow-xl overflow-hidden">\n
                  <div class="flex justify-center pt-6 pb-2" id="operadorSeleccionado">\n
      \n
                  </div>\n
                  <div    id="carouselChips"\n
                          x-data="carousel3D()"\n
                          x-init="init()"\n
                          class="relative w-full max-w-[600px] mx-auto"\n
                  >\n
                      <!-- ◀ Prev -->\n
                      <button\n
                              @click="prev()"\n
                              :class="{ 'opacity-50 cursor-not-allowed': !canPrev }"\n
                              class="absolute left-0 top-1/2 transform -translate-y-1/2 z-20  px-3 py-2 transition-colors"\n
                      >\n
                          <div class="w-10 h-10 rounded-full bg-purple-700 flex items-center justify-center">\n
                              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">\n
                                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 6l-6 6 6 6" />\n
                              </svg>\n
                          </div>\n
                      </button>\n
      \n
                      <!-- perspectiva y contenedor 3D -->\n
                      <div id="testChipe" class="w-full h-[450px] perspective-[1000px] relative overflow-hidden">\n
                          <template x-for="i in 6" :key="i">\n
                              <div\n
                                      class="absolute inset-0 mx-auto w-[300px] h-[350px]"\n
                                      :style="cellStyle(i-1)"\n
                                      x-ref="cells"\n
                              >\n
                                  <!-- solo renderiza contenido si hay chip -->\n
                                  <template x-if="slots[i-1]">\n
                                      <div class="bg-white rounded-xl p-2 shadow-md h-full flex flex-col">\n
                                          <img\n
                                                  :src="'https://shop.credicel.mx/files/catalogo/' + slots[i-1].images.principal + '.webp'"\n
                                                  class="w-full h-[300px] object-contain rounded-md"\n
                                                  alt="chip"\n
                                          >\n
                                          <button\n
                                                  @click="confirm(slots[i-1].id)"\n
                                                  class="mt-auto bg-[#8B2BB9] hover:bg-[#6d1e99] text-white font-bold py-1 px-2 rounded-2xl text-xs"\n
                                          >\n
                                              Confirmar\n
                                          </button>\n
                                      </div>\n
                                  </template>\n
                              </div>\n
                          </template>\n
                      </div>\n
      \n
                      <!-- Next ▶ -->\n
                      <button\n
                              @click="next()"\n
                              :class="{ 'opacity-50 cursor-not-allowed': !canNext }"\n
                              class="absolute right-0 top-1/2 transform -translate-y-1/2 z-20  px-3 py-2  transition-colors"\n
                      >\n
                          <div class="w-10 h-10 rounded-full bg-purple-700 flex items-center justify-center">\n
                              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">\n
                                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 6l6 6-6 6" />\n
                              </svg>\n
                          </div>\n
                      </button>\n
                  </div>\n
                  <!-- Aviso Importante -->\n
      {#            <div class="bg-[#f3eaff] border border-[#8B2BB9] rounded-xl p-2 text-center m-3">#}\n
      {#                <h4 class="font-bold text-[#8B2BB9] mb-1 text-sm">Aviso Importante</h4>#}\n
      {#                <p class="text-[11px] text-[#571666] mb-0.5 leading-tight">#}\n
      {#                    Antes de continuar, verifica que tu teléfono esté liberado y sea compatible con la red de la compañía elegida.#}\n
      {#                </p>#}\n
      {#                <p class="text-[11px] text-[#571666] leading-tight">#}\n
      {#                    Si tienes dudas, consulta con nuestro personal o revisa las especificaciones de tu equipo.#}\n
      {#                </p>#}\n
      {#            </div>#}\n
              </div>\n
          </div>\n
      \n
          <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>\n
          <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"\n
                  integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="\n
                  crossorigin="anonymous" referrerpolicy="no-referrer"></script>\n
          <script src="{{ asset('js/ion.rangeSlider.js') }}"></script>\n
          <script src="{{ asset('js/jsrsasign-all-min.js') }}"></script>\n
          <script src="{{ asset('js/CirculoCredito.js') }}?1.0"></script>\n
          <script>\n
              document.addEventListener('DOMContentLoaded', () => {\n
                  const container = document.getElementById('plazos');\n
                  const radios = container.querySelectorAll('input[type="radio"]');\n
                  const cards = container.querySelectorAll('.plazo-card');\n
      \n
                  radios.forEach((radio, index) => {\n
                      radio.addEventListener('change', () => {\n
                          cards.forEach((card, i) => {\n
                              // Limpia todas las clases de fondo y borde\n
                              card.classList.remove('bg-[#79bcaf]', 'bg-[#ebb430]', 'bg-[#c64ea4]', 'bg-purple-600', 'bg-gray-300', 'ring-4', 'ring-purple-500', 'ring-offset-2');\n
      \n
                              if (i === index) {\n
                                  // Aplica el fondo morado y el borde\n
                                  card.classList.add('bg-purple-600', 'ring-4', 'ring-purple-500', 'ring-offset-2');\n
                              } else {\n
                                  // Aplica gris a los demás\n
                                  card.classList.add('bg-gray-300');\n
                              }\n
                          });\n
                      });\n
                  });\n
              });\n
          </script>\n
          <script>\n
              let engancheMinimo = 0;\n
              let engancheMaximo = 0;\n
              let usarPromocion = false;\n
              let bonificacion = 0;\n
      \n
              document.addEventListener('DOMContentLoaded', async function () {\n
                  showLoadingModal();\n
                  let consultaBuro = await solicitudCirculoCreditoJS('{{ order.credicelToken.last.folioCredicel }}');\n
                  if (consultaBuro) {\n
                      obtenerDatosEvaluacion()\n
                  } else {\n
                  }\n
              })\n
      \n
      \n
              function showLoadingModal(message = 'Procesando...') {\n
                  const loadingModal = document.getElementById('loading-modal');\n
                  const loadingText = document.getElementById('loading-text');\n
                  loadingText.textContent = message;\n
                  loadingModal.classList.remove('hidden');\n
              }\n
      \n
              function hideLoadingModal() {\n
                  const loadingModal = document.getElementById('loading-modal');\n
                  loadingModal.classList.add('hidden');\n
              }\n
      \n
              document.querySelector("#quoterFormData").addEventListener('submit', function (e){\n
                  showLoadingModal();\n
                  /*\n
                  Swal.fire({\n
                      html: `<img src="../../../img/alertas/info.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">¿Los datos son correctos?</p>`,\n
                      showCancelButton: true,\n
                      confirmButtonText: 'Sí, enviar',\n
                      cancelButtonText: 'Cancelar',\n
                      reverseButtons: true,\n
                      allowOutsideClick: false,\n
                      allowEscapeKey: false,\n
                      customClass: {\n
                          popup: 'swal-msg',\n
                          confirmButton: "btn bg-morado",\n
                          cancelButton: "btn bg-yellow-500"\n
                      },\n
                  }).then((result) => {\n
                      if (result.isConfirmed) {\n
                          showLoadingModal();\n
                          this.submit();\n
                      }\n
                  })*/\n
              })\n
              document.querySelector('#continuar').addEventListener('click', (e) => {\n
                  const form = e.target.form; // o document.querySelector('form')\n
                  const radioChecked = form.querySelector('input[name="plazo"]:checked');\n
                  if (!radioChecked) {\n
                      Swal.fire({\n
                          toast: true,\n
                          position: 'top-end',\n
                          icon: 'error',\n
                          title: 'Selecciona un plazo antes de continuar.',\n
                          showConfirmButton: false,\n
                          timer: 3000,\n
                          timerProgressBar: true,\n
                          background: '#fef2f2',\n
                          color: '#b91c1c',\n
                          iconColor: '#b91c1c',\n
                          customClass: {\n
                              popup: 'rounded-lg shadow-md border border-red-200'\n
                          }\n
                      });\n
                  } else {\n
                      form.submit();\n
                  }\n
              });\n
      \n
              function obtenerDatosEvaluacion() {\n
                  let data = new FormData();\n
                  data.append('folio', '{{ order.credicelToken.last.folioCredicel }}');\n
                  data.append('token', '{{ order.credicelToken.last.tokenCredicel }}');\n
                  fetch('/api/cotizador/revisarEvaluacionInicial', {\n
                      method: 'POST',\n
                      body: data\n
                  }).then(response => {\n
                      return response.json();\n
                  }).then(dataResponse => {\n
                      let response = dataResponse.data;\n
                      if ((response.status == false || response.status == 0) && (response.code == '1')) {\n
                          availableCredit = false;\n
                          Swal.fire({\n
                              html: `<img src="../../../img/alertas/error.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">Lamentamos informarte que los datos proporcionados no han pasado nuestros lineamientos para poder proporcionarle un crédito, debido al resultado de tu historial crediticio.</p>`,\n
                              customClass: {\n
                                  popup: 'swal-msg',\n
                                  confirmButton: "btn principal"\n
                              },\n
                              confirmButtonText: "Aceptar"\n
                          }).then(result => {\n
                              if (result.isConfirmed) {\n
                              }\n
                          });\n
                      } else if (response.status == false || response.status == 0 && (response.code == null)) {\n
                          Swal.fire({\n
                              html: `<img src="../../../img/alertas/error.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">${response.msg}</p>`,\n
                              customClass: {\n
                                  popup: 'swal-msg',\n
                                  confirmButton: "btn principal"\n
                              },\n
                              confirmButtonText: "Aceptar"\n
                          }).then(result => {\n
                              if (result.isConfirmed) {\n
                              }\n
                          });\n
                      } else {\n
                          actualizarPlazos();\n
                      }\n
                  })\n
              }\n
      \n
              function actualizarPlazos() {\n
                  let formData = new FormData();\n
                  formData.append('folio', '{{ order.credicelToken.last.folioCredicel }}');\n
                  formData.append('claveEquipo', 'K70023491');\n
                  formData.append('token', '{{ order.credicelToken.last.tokenCredicel }}');\n
                  fetch('/api/cotizador/actualizarEvaluacionEquipo', {\n
                      method: 'POST',\n
                      body: formData\n
                  }).then(res => {\n
                      return res.json();\n
                  }).then(response => {\n
                      if (response.success) {\n
                          hideLoadingModal();\n
                          document.querySelector('#quoterFormData').classList.remove('hidden');\n
                          mostrarPlazosOfrecidos(response.data.plazos, '#plazos_table')\n
                          engancheMinimo = response.data.plazos[0].enganche;\n
                          engancheMaximo = parseFloat((response.data.precio_contado * .70).toFixed(2));\n
                          changeSliderMount(response.data.plazos[0].enganche, (response.data.precio_contado * .70).toFixed(2));\n
                          let format = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});\n
                          document.querySelector('#montoEngancheChangeSlider').value = response.data.plazos[0].enganche;\n
                          if (response.data.bonificacion > 0){\n
                              deseaUsarBonificacion(response.data.bonificacion);\n
                          }\n
                          if (response.data.promocion != false) {\n
                              // $('.promocion-enganche').prop('hidden', false)\n
                              // $('.enganche-promocion').text(numeroConComas(response.data.plazos[0].enganche))\n
                              // $('.descuento-promocion').text(numeroConComas(response.data.promocion.descuento))\n
                              // $('.total-promocion').text(numeroConComas(response.data.plazos[0].enganche - response.data.promocion.descuento))\n
                          }\n
                      } else {\n
                          // $('#enganche').val('');\n
                          // $(inputPlazos).prop('disabled', true)\n
                          // desactivarEnvioCotizacion(false)\n
                      }\n
                  })\n
              }\n
      \n
              function deseaUsarBonificacion(monedero){\n
                  Swal.fire({\n
                      html: `<img src="../../../img/alertas/info.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">Cuentas con un monedero electrónico de $${monedero.toFixed(2)} ¿Deseas aplicarlo para reducir tu enganche?</p>`,\n
                      showCancelButton: true,\n
                      confirmButtonText: 'Sí',\n
                      cancelButtonText: 'No',\n
                      reverseButtons: true,\n
                      allowOutsideClick: false,\n
                      allowEscapeKey: false,\n
                      customClass: {\n
                          popup: 'swal-msg',\n
                          confirmButton: "btn principal",\n
                          cancelButton: "btn bg-yellow-500"\n
                      },\n
                  }).then((result) => {\n
                      if (result.isConfirmed) {\n
                          document.querySelector("#mensajePromocionalContainer").classList.remove('hidden');\n
                          bonificacion = monedero;\n
                          if (parseFloat(document.querySelector('#montoEngancheChangeSlider').value) <= parseFloat(bonificacion)){\n
                              let my_range = sliderEnganche.data("ionRangeSlider");\n
                              my_range.update({\n
                                  from: bonificacion,\n
                                  min: bonificacion\n
                              });\n
                              document.querySelector('#montoEngancheChangeSlider').value = bonificacion;\n
                              engancheMinimo = bonificacion;\n
                              ajustarPrecioPlazos(bonificacion);\n
                          }\n
                          document.querySelector("#bonificacion").value = bonificacion;\n
                          actulizarEngancheByBonificacion();\n
                      }\n
                  })\n
              }\n
      \n
              function actulizarEngancheByBonificacion(){\n
                  document.querySelector("#promocion").innerHTML = "$" + bonificacion.toFixed(2);\n
                  document.querySelector("#enganchePromocion").innerHTML = "$" + (document.querySelector('#montoEngancheChangeSlider').value - bonificacion).toFixed(2);\n
              }\n
      \n
              function ajustarPrecioPlazos(engancheNuevo) {\n
                  actulizarEngancheByBonificacion();\n
                  showLoadingModal();\n
                  const precio = $('#preciocontado').val();\n
                  let dataSend = new FormData();\n
                  dataSend.append('folio', '{{ order.credicelToken.last.folioCredicel }}');\n
                  dataSend.append('precio', precio)\n
                  dataSend.append('enganche', engancheNuevo)\n
      \n
                  fetch("/api/cotizador/ajustarPlazosCotizacionEnganche", {\n
                      method: 'POST',\n
                      body: dataSend\n
                  }).then(dataResponse => {\n
                      return dataResponse.json()\n
                  }).then(response => {\n
                      hideLoadingModal();\n
                      if (response.success == true) {\n
                          response = response.data;\n
                          mostrarPlazosOfrecidos(response.data, '#plazos_table');\n
                      } else {\n
                          Swal.fire({\n
                              html: `<img src="../../../img/alertas/error.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">${response.msg}</p>`,\n
                              allowOutsideClick: false,\n
                              allowEscapeKey: false,\n
                              customClass: {\n
                                  popup: 'swal-msg',\n
                                  confirmButton: "btn principal"\n
                              },\n
                              confirmButtonText: "Aceptar",\n
                          });\n
                      }\n
                  })\n
              }\n
      \n
              function mostrarPlazosOfrecidos(arraySemanas, selector) {\n
                  let options = {style: 'currency', currency: 'USD'};\n
                  let format = new Intl.NumberFormat('en-US', options);\n
                  arraySemanas.forEach(plazo => {\n
                      let plazoSelector = plazo.plazo.replace('S', '');\n
                      document.querySelector("#ss" + plazoSelector).innerHTML = format.format(plazo.pago_semanal);\n
                      //document.querySelector("#st" + plazoSelector).innerHTML = format.format(plazo.saldo_pagar);\n
                      document.querySelector("#plazoContainer-" + plazoSelector).classList.remove('hidden');\n
                  })\n
              }\n
          </script>\n
          <script>\n
              let sliderEnganche = $("#slider-enganche");\n
              const slideValue = document.querySelector("span");\n
              const inputSlider = document.querySelector("input");\n
              inputSlider.oninput = (() => {\n
                  let value = inputSlider.value;\n
                  slideValue.textContent = value;\n
                  slideValue.style.left = (value / 2) + "%";\n
                  slideValue.classList.add("show");\n
              });\n
              inputSlider.onblur = (() => {\n
                  slideValue.classList.remove("show");\n
              });\n
      \n
              sliderEnganche.ionRangeSlider({\n
                  type: "single",\n
                  min: parseFloat(0).toFixed(2),\n
                  max: parseFloat(0).toFixed(2),\n
                  step: 1,\n
                  grid: true,\n
                  prefix: "<i class='fa fa-dollar'></i> ",\n
                  prettify_enabled: true,\n
                  prettify_separator: ",",\n
                  from: parseFloat(0),\n
                  onChange: function (data) {\n
                  },\n
                  onFinish: function (data) {\n
                      let format = new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'});\n
                      document.querySelector('#montoEngancheChangeSlider').value = data.from;\n
                      ajustarPrecioPlazos(data.from);\n
                  },\n
                  grid_num: 2\n
              });\n
      \n
              document.querySelector('#montoEngancheChangeSlider').addEventListener('change', function (){\n
                  this.value = parseFloat(this.value);\n
                  if (this.value < engancheMinimo) {\n
                      Swal.fire({\n
                          html: `<img src="../../../img/alertas/error.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">Lo sentimos, el monto de enganche no puede ser menor al enganche minimo proporcionado</p>`,\n
                          allowOutsideClick: false,\n
                          allowEscapeKey: false,\n
                          customClass: {\n
                              popup: 'swal-msg',\n
                              confirmButton: "btn principal"\n
                          },\n
                          confirmButtonText: "Aceptar",\n
                      });\n
                      this.value = engancheMinimo;\n
                      let my_range = sliderEnganche.data("ionRangeSlider");\n
                      my_range.update({\n
                          from: this.value\n
                      });\n
                      ajustarPrecioPlazos(this.value);\n
                  } else if (this.value > engancheMaximo) {\n
                      Swal.fire({\n
                          html: `<img src="../../../img/alertas/error.gif" style="margin-left: 30%;"  alt="" width="40%"><p class="">Lo sentimos, el monto de enganche no puede ser mayor al enganche máximo proporcionado</p>`,\n
                          allowOutsideClick: false,\n
                          allowEscapeKey: false,\n
                          customClass: {\n
                              popup: 'swal-msg',\n
                              confirmButton: "btn principal"\n
                          },\n
                          confirmButtonText: "Aceptar",\n
                      });\n
                      this.value = engancheMaximo;\n
                      let my_range = sliderEnganche.data("ionRangeSlider");\n
                      my_range.update({\n
                          from: this.value\n
                      });\n
                      ajustarPrecioPlazos(this.value);\n
                  } else {\n
                      let my_range = sliderEnganche.data("ionRangeSlider");\n
                      my_range.update({\n
                          from: this.value\n
                      });\n
                      ajustarPrecioPlazos(this.value);\n
                  }\n
              })\n
      \n
              function changeSliderMount(enganche, contado) {\n
                  let my_range = sliderEnganche.data("ionRangeSlider");\n
                  my_range.update({\n
                      from: enganche,\n
                      min: enganche,\n
                      max: contado\n
                  });\n
                  my_range.reset();\n
              }\n
          </script>\n
      \n
          {% if operadores is not empty %}\n
              <!-- Script para modal de compañías -->\n
              <script>\n
                  document.addEventListener('DOMContentLoaded', function() {\n
                      const chipSi = document.getElementById('chip-si');\n
                      const chipNo = document.getElementById('chip-no');\n
                      const modal = document.getElementById('compañias-modal');\n
                      const compañiaCards = document.querySelectorAll('.compañia-card');\n
                      const compañiaRadios = document.querySelectorAll('input[name="compañia_chip"]');\n
      \n
                      let selectedOperador = null;\n
      \n
                      // Abrir modal cuando seleccionen "Sí"\n
                      chipSi.addEventListener('change', function() {\n
                          if (this.checked) {\n
                              if (compañiaRadios.length == 1){\n
                                  const operadorSeleccionado = document.querySelectorAll('input[name="compañia_chip"]')[0];\n
                                  operadorSeleccionado.checked = true;\n
                                  seleccionarOperador(operadorSeleccionado, 0);\n
                              } else {\n
                                  modal.classList.remove('hidden');\n
                                  document.body.style.overflow = 'hidden'; // Prevenir scroll del fondo\n
                              }\n
                          }\n
                      });\n
      \n
                      // Manejar selección de compañías\n
                      compañiaRadios.forEach(function(radio, index) {\n
                          radio.addEventListener('change', function() {\n
                              if (this.checked) {\n
                                  seleccionarOperador(this, index);\n
                              }\n
                          });\n
                      });\n
      \n
                      // Cerrar modal al hacer click fuera\n
                      modal.addEventListener('click', function(e) {\n
                          if (e.target === modal) {\n
                              cerrarModal();\n
                              chipNo.checked = true;\n
                              chipSi.checked = false;\n
                          }\n
                      });\n
      \n
                      function seleccionarOperador(operador, index){\n
                          selectedOperador = operador.value;\n
                          showLoadingModal();\n
                          // Resetear todas las cards\n
                          compañiaCards.forEach(function(card) {\n
                              card.classList.remove('border-[#571666]', 'bg-purple-50');\n
                              card.classList.add('border-gray-200');\n
                          });\n
      \n
                          // Marcar la card seleccionada\n
                          const selectedCard = compañiaCards[index];\n
                          selectedCard.classList.remove('border-gray-200');\n
                          selectedCard.classList.add('border-[#571666]', 'bg-purple-50');\n
      \n
                          document.querySelector("#operadorSeleccionado").innerHTML = `<img style="width: 50%;" src="https://shop.credicel.mx/img/chips/operadores/${selectedOperador}.png">`\n
                          // Ejecutar acción según la compañía seleccionada\n
                          fetch('/item/operador/'+selectedOperador).then(response => {\n
                              return response.json();\n
                          }).then(dataResponse => {\n
                              hideLoadingModal();\n
                              cerrarModal();\n
                              renderChipsDisponibles(dataResponse.data);\n
                          })\n
                      }\n
      \n
                      // Función para cerrar modal\n
                      function cerrarModal() {\n
                          modal.classList.add('hidden');\n
                          document.body.style.overflow = ''; // Restaurar scroll\n
      \n
                          // Resetear selección\n
                          selectedOperador = null;\n
      \n
                          // Resetear cards\n
                          compañiaCards.forEach(function(card) {\n
                              card.classList.remove('border-[#571666]', 'bg-purple-50');\n
                              card.classList.add('border-gray-200');\n
                          });\n
      \n
                          // Resetear radios\n
                          compañiaRadios.forEach(function(radio) {\n
                              radio.checked = false;\n
                          });\n
                      }\n
                  });\n
      \n
                  function renderChipsDisponibles(planesDisponibles){\n
      \n
                      window.dispatchEvent(\n
                          new CustomEvent('set-chips', { detail: planesDisponibles })\n
                      );\n
                      document.getElementById('chips-modal').classList.remove('hidden');\n
                      document.body.style.overflow = 'hidden';\n
                  }\n
      \n
                  function addPlanChipToQuoter(planChipId){\n
                      document.getElementById('operador_seleccionado').value = planChipId;\n
                      // Mostrar confirmación\n
                      Swal.fire({\n
                          html: `\n
                              <img src="../../../img/alertas/success.gif"\n
                                   style="margin-left: 30%;"\n
                                   alt=""\n
                                   width="40%">\n
                              <p class="">Has agregado un chip a tu compra.</p>\n
                            `,\n
                          customClass: {\n
                              popup: 'swal-msg'\n
                          },\n
                          showConfirmButton: false,\n
                          timer: 1200,\n
                          timerProgressBar: true\n
                      }).then(() => {\n
                          const form = document.querySelector('#continuar');\n
                          form.click()\n
                          document.getElementById('chips-modal').classList.add('hidden');\n
                          document.body.style.overflow = '';\n
      \n
                      });\n
                  }\n
      \n
                  function carousel3D() {\n
                      return {\n
                          // ── estado ─────────────────────────────\n
                          allChips: [],       // array original de planes\n
                          headIndex: 0,       // índice del primer slot\n
                          countChips: 0,      // cuantos chips hay\n
                          infinite: false,    // caso >6?\n
                          angle: 60,          // 360/6\n
                          radius: 0,          // calculado dinámicamente\n
                          startX: 0,          // para swipe\n
      \n
                          init() {\n
      \n
                              this.$nextTick(() => {\n
                                  const w = this.$refs.cells.offsetWidth;\n
                                  this.radius = (w / 2) / Math.tan(Math.PI / 6);\n
                                  this.radius = (80) / Math.tan(Math.PI / 6) + 140;\n
                              });\n
      \n
                              const wrapper = this.$el.querySelector('#testChipe');\n
                              wrapper.addEventListener('touchstart', e => this.startX = e.changedTouches[0].clientX, { passive: true });\n
                              wrapper.addEventListener('touchend', e => {\n
                                  const dx = e.changedTouches[0].clientX - this.startX;\n
                                  if (Math.abs(dx) > 40) dx > 0 ? this.prev() : this.next();\n
                              }, { passive: true });\n
                              window.addEventListener('resize', () => {\n
                                  const w2 = this.$refs.cells.offsetWidth;\n
                                  this.radius = (80) / Math.tan(Math.PI / 6) + 140;\n
                              });\n
                              window.addEventListener('set-chips', e => {\n
                                  this.setChips(e.detail);\n
                              });\n
                          },\n
                          setChips(chips) {\n
                              this.allChips = chips;\n
                              this.countChips = chips.length;\n
                              this.infinite = this.countChips > 6;\n
                              this.headIndex = 0;\n
                          },\n
                          next() {\n
                              if (!this.infinite && this.headIndex >= this.countChips - 1) return;\n
                              this.headIndex = (this.headIndex + 1) % this.countChips;\n
                          },\n
                          prev() {\n
                              if (!this.infinite && this.headIndex <= 0) return;\n
                              this.headIndex = (this.headIndex - 1 + this.countChips) % this.countChips;\n
                          },\n
                          confirm(id) {\n
                              addPlanChipToQuoter(id);\n
                          },\n
      \n
                          get slots() {\n
                              if (!this.infinite) {\n
                                  return Array.from({ length: 6 }, (_, i) =>\n
                                      this.allChips[i] ?? null\n
                                  );\n
                              }\n
                              return Array.from({ length: 6 }, (_, i) =>\n
                                  this.allChips[(this.headIndex + i) % this.countChips]\n
                              );\n
                          },\n
                          get canNext() {\n
                              return this.infinite || this.headIndex < this.countChips - 1;\n
                          },\n
                          get canPrev() {\n
                              return this.infinite || this.headIndex > 0;\n
                          },\n
      \n
                          cellStyle(i) {\n
                              const deg = (i * this.angle) - (this.headIndex * this.angle);\n
      \n
                              const isFront = deg === 0;\n
      \n
                              const opacity = isFront ? 1 : 0.4;\n
      \n
                              const pointerEvents = isFront ? 'auto' : 'none';\n
      \n
                              const zIndex = isFront ? 10 : 1;\n
      \n
                              return `\n
                                  position: absolute;\n
                                  transform: rotateY(${deg}deg) translateZ(${this.radius}px);\n
                                  transition: transform 0.6s, opacity 0.6s;\n
                                  opacity: ${opacity};\n
                                  pointer-events: ${pointerEvents};\n
                                  z-index: ${zIndex};\n
                              `;\n
                          }\n
                      }\n
                  }\n
      \n
      \n
              </script>\n
              <script>\n
                  document.addEventListener('DOMContentLoaded', function() {\n
                      const chipNo = document.getElementById('chip-no');\n
      \n
                      chipNo.addEventListener('change', function() {\n
                          if (this.checked) {\n
                              document.getElementById('operador_seleccionado').value = '';\n
                          }\n
                      });\n
                  });\n
              </script>\n
          {% endif %}\n
      {% endblock %}\n
      \n
      """
    -name: "ordenes/order-quoterStep.html.twig"
    -path: "/home/microtecnologias/www/ecommerceCredicel/templates/ordenes/order-quoterStep.html.twig"
  }
  -phpFile: "/home/microtecnologias/www/ecommerceCredicel/vendor/twig/twig/src/Extension/CoreExtension.php"
  -phpLine: 1739
}