{% extends 'baseTest.html.twig' %}

{% block title %} {{page_title}} {% endblock %}
 
 {% block stylesheet %}
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
 {% endblock %}

{% block body %}

 {{ form_start(formQrCode)}}
 <div id="smartwizard">

        <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#step-1">
                <strong>Etape 1</strong> <br>Informations QRCode
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#step-2">
                <strong>Etape 2</strong> <br>Informations de l'entreprise
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#step-3">
                <strong>Etape 3</strong> <br> Informations du Distributeur
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#step-4">
                <strong>Etape 4</strong> <br>Informations média
              </a>
            </li>

            <li class="nav-item">
              <a class="nav-link" href="#step-5">
                <strong>Etape 5</strong> <br>Confirmation
              </a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
               <div class="row">
    <div class="col">{{ form_row(formQrCode.label,{'label':'Label','attr':{'placeholder':'Label du QRCode'}}) }}</div>
    <div class="col">{{ form_row(formQrCode.name,{'label':'Nom','attr':{'placeholder':'Nom de la boulangerie'}}) }}</div>
   </div>
            </div>
            <div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<h5>Informations entreprise</h5>
   <div class="row">
      <div class="col">{{ form_row(formQrCode.Location,{'label':'Adresse','attr':{'placeholder':'Adresse'}}) }}</div>
      <div class="col">{{ form_row(formQrCode.Timetables,{'label':'Horaires','attr':{'placeholder':'Horaires'}}) }}</div>
   </div>

   <div class="row">
      <div class="col">{{ form_row(formQrCode.Phone,{'label':'N° de Téléphone','attr':{'placeholder':'Numéro de téléphone'}}) }}</div>
      <div class="col">{{ form_row(formQrCode.Mail,{'label':'Adresse e-mail','attr':{'placeholder':'adresse@domaine.fr'}}) }}</div>
   </div>
   <a href="#Step1" class="btn btn-success">Suivant</a><a href="#Step1" class="btn btn-warning">Retour</a>
            </div>

<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
   <h5>Informations du Distributeur</h5>
      <div class="row">
         <div class="col">{{form_row(formQrCode.Product,{'label':'Produits Disributeur'}) }}</div>
         <div class="col">{{form_row(formQrCode.SetupAt,{'label':'Date de mise en service'}) }}</div>
      </div>
</div>
            
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
      <h5>Informations média</h5>
         <div class="row">
            <div class="col">{{form_row(formQrCode.SocialMedia,{'label':'Facebook','attr':{'placeholder':'Url de la page Faceook'}}) }}</div>
            <div class="col">{{form_row(formQrCode.Website,{'label':'Site web','attr':{'placeholder':'Url du site internet'}}) }}</div>
         </div>
</div>

   <div id="step-5" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
      <h5>Validation</h5>
         <div class="row">
            <div class="col">{{form_row(formQrCode.SocialMedia,{'label':'Facebook','attr':{'placeholder':'Url de la page Faceook'}}) }}</div>
            <div class="col">{{form_row(formQrCode.Website,{'label':'Site web','attr':{'placeholder':'Url du site internet'}}) }}</div>
         </div>
   </div>

  </div>

   {{form_row(formQrCode._token)}}
{{ form_end(formQrCode, {'render_rest': false}) }}
</div>
   
</div>
{% block javascripts %}     
{{ parent() }}
{{ encore_entry_script_tags('form') }}
{% endblock %}
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

  <!-- Include SmartWizard JavaScript source -->
  <script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>

  <script type="text/javascript">
      $(document).ready(function(){

          // Toolbar extra buttons
          var btnFinish = $('<button></button>').text('Finish')
                                           .addClass('btn btn-info')
                                           .on('click', function(){ alert('Finish Clicked'); });
          var btnCancel = $('<button></button>').text('Cancel')
                                           .addClass('btn btn-danger')
                                           .on('click', function(){ $('#smartwizard').smartWizard("reset"); });

          // Step show event
          $("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
              $("#prev-btn").removeClass('disabled');
              $("#next-btn").removeClass('disabled');
              if(stepPosition === 'first') {
                  $("#prev-btn").addClass('disabled');
              } else if(stepPosition === 'last') {
                  $("#next-btn").addClass('disabled');
              } else {
                  $("#prev-btn").removeClass('disabled');
                  $("#next-btn").removeClass('disabled');
              }
          });

          // Smart Wizard
          $('#smartwizard').smartWizard({
              selected: 0,
              theme: 'dots',
              transition: {
                  animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
              },
              toolbarSettings: {
                  toolbarPosition: 'bottom', // both bottom
                  toolbarExtraButtons: [btnFinish]
              },
              lang: { // Language variables for button
                  next: 'Suivant',
                  previous: 'Retour',
                  btnFinish: 'Enregistrement QRCode'
              },

          });

          // External Button Events
          $("#reset-btn").on("click", function() {
              // Reset wizard
              $('#smartwizard').smartWizard("reset");
              return true;
          });

          $("#prev-btn").on("click", function() {
              // Navigate previous
              $('#smartwizard').smartWizard("prev");
              return true;
          });

          $("#next-btn").on("click", function() {
              // Navigate next
              $('#smartwizard').smartWizard("next");
              return true;
          });
      });
  </script>
{% endblock body %}