{% extends "MasterOrdenadoresTaller/MenuTemplateMT.html.twig" %}

{% block body %}

{% include '/MenuPiezas.html.twig' %}



<div class="content">
  <nav class="mb-1" aria-label="breadcrumb">
    <h2 class="mb-0 text-body-emphasis fw-semibold">Solicitud de Nueva Pieza</h2>
  </nav>

  <form id="presupuestadorForm" method="POST" enctype="multipart/form-data">

    <div class="kanban-create-board row">
      <div class="col-xxl-5 col-xl-6 col-12 pb-8 order-1 order-xl-0">
        <div class="theme-wizard theme-wizard-progress" data-theme-wizard="data-theme-wizard" data-create-board="data-create-board" data-wizard-modal-disabled="data-wizard-modal-disabled">
          <div class="mt-6 border-bottom-0">

            <ul class="nav justify-content-between nav-wizard nav-wizard-progress" id="wizard-nav">
              <li class="nav-item">
                <a class="nav-link nav-link-main active fw-semibold" 
                   href="#create-board-tab1" 
                   data-bs-toggle="tab" 
                   data-wizard-step="1">
                </a>
              </li>

              <li class="nav-item">
                <a class="nav-link nav-link-main fw-semibold" 
                   href="#create-board-tab2" 
                   data-bs-toggle="tab" 
                   data-wizard-step="2">
                </a>
              </li>

              <li class="nav-item">
                <a class="nav-link nav-link-main fw-semibold" 
                   href="#create-board-tab3" 
                   data-bs-toggle="tab" 
                   data-wizard-step="3">
                </a>
              </li>

              <li class="nav-item">
                <a class="nav-link nav-link-main fw-semibold" 
                   href="#create-board-tab4" 
                   data-bs-toggle="tab" 
                   data-wizard-step="4">
                </a>
              </li>
            </ul>


          </div>
          <div class="mt-4">
            <div class="pt-2 pb-0">
              <div class="tab-content">

                <input type="hidden" name="action" value="nuevaPieza"/> 
                {{ formToken() }}

                {% include 'presupuestador/paso1.html.twig' %}
                {% include 'presupuestador/paso2.html.twig' %}
                {% include 'presupuestador/paso3.html.twig' %}
                {% include 'presupuestador/paso5.html.twig' %}

              </div>
            </div>
          </div>
          <div class="border-top-0 mt-10" data-wizard-footer="data-wizard-footer">
            <div class="d-flex pager wizard list-inline mb-0">
              <button class="btn btn-link ps-0" type="button" data-wizard-prev-btn="data-wizard-prev-btn"><span class="fas fa-chevron-left me-1" data-fa-transform="shrink-3"></span>Anterior</button>
              <div class="flex-1 text-end">
                <button class="btn btn-primary px-6 px-sm-6" id="next-btn" type="button">Siguiente<span class="fas fa-chevron-right ms-1" data-fa-transform="shrink-3"> </span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xxl-7 col-xl-6 col-12 text-center kanban-board-bg"><img class="d-dark-none mt-5 position-sticky" src="{{ asset('Dinamic/Assets/Images/ej/imagen-configurador.png') }}" alt="" style="top: 200px" /><img class="d-light-none position-sticky" src="assets/img/imagen-configurador.png" alt="" style="top: 200px" /></div>
    </div>
  </form>


  <footer class="footer position-absolute">
    <div class="row g-0 justify-content-between align-items-center h-100">
      <div class="col-12 col-sm-auto text-center">
        <p class="mb-0 mt-2 mt-sm-0 text-body">{{ fsc.empresa.nombrecorto | raw }}<span class="d-none d-sm-inline-block"></span><span class="d-none d-sm-inline-block mx-1">|</span><br class="d-sm-none" />2024 &copy;<a class="mx-1" href="https://aress.es">Aress</a></p>
      </div>
      <div class="col-12 col-sm-auto text-center">
        <p class="mb-0 text-body-tertiary text-opacity-85">v1.17.0</p>
      </div>
    </div>
  </footer>
</div>


<div class="modal fade" id="searchBoxModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="true" data-phoenix-modal="data-phoenix-modal" style="--phoenix-backdrop-opacity: 1;">
  <div class="modal-dialog">
    <div class="modal-content mt-15 rounded-pill">
      <div class="modal-body p-0">
        <div class="search-box navbar-top-search-box" data-list='{"valueNames":["title"]}' style="width: auto;">
          <input class="form-control search-input fuzzy-search rounded-pill form-control-lg" type="search" placeholder="Search..." aria-label="Search" />
          <span class="fas fa-search search-box-icon"></span>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block javascripts %}

{{ parent() }}

<script>

  document.addEventListener('DOMContentLoaded', function() {
      function updateStepVisibility() {
          var wizardNav = document.getElementById('wizard-nav');
          var visibleSteps = wizardNav.querySelectorAll('.nav-item'); // Obtiene solo los elementos visibles
          var currentActive = wizardNav.querySelector('.nav-link-main.active');
          var stepNumber = Array.from(visibleSteps).indexOf(currentActive.parentElement) + 1;
          var totalSteps = visibleSteps.length; // Cantidad total de pasos visibles

          var footerDiv = document.querySelector('[data-wizard-footer="data-wizard-footer"]');
          if (footerDiv) {
              footerDiv.style.display = (stepNumber === totalSteps) ? 'none' : 'block';
            }
        }

      function changeStep(direction) {
          var wizardNav = document.getElementById('wizard-nav');
          var currentActiveNav = wizardNav.querySelector('.nav-link-main.active');
          var currentActiveTab = document.querySelector('.tab-pane-main.active');

          if (!currentActiveNav) return;

          var newNavLink;
          if (direction === 'next') {
              newNavLink = currentActiveNav.parentElement.nextElementSibling?.querySelector('.nav-link-main');
            } else if (direction === 'prev') {
                newNavLink = currentActiveNav.parentElement.previousElementSibling?.querySelector('.nav-link-main');
              }

          if (newNavLink) {
              var newTab = document.querySelector(newNavLink.getAttribute('href'));

              if (currentActiveNav) {
                  currentActiveNav.classList.remove('active');
                }
              if (currentActiveTab) {

                  currentActiveTab.classList.remove('active', 'show');
                }

              newNavLink.classList.add('active');
              if (newTab) {
                  newTab.classList.add('active', 'show');
                }

              updateStepVisibility();
            }
        }

      // Event listeners for navigation buttons
      document.getElementById('next-btn')?.addEventListener('click', function() {
          changeStep('next');
        });

      document.querySelector('[data-wizard-prev-btn="data-wizard-prev-btn"]')?.addEventListener('click', function() {
          changeStep('prev');
        });

      document.querySelector('[data-board-prev-btn="data-board-prev-btn"]')?.addEventListener('click', function() {
          changeStep('prev');
        });
    });








</script>

{% endblock %}