@extends('fragments.public.publicFullTemplate')
@section('titulo')
    Crear cuenta
@endsection
@section('contenido')
<style>
.multisteps-form__progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.multisteps-form__progress-btn {
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  position: relative;
  padding-top: 20px;
  color: rgba(108, 117, 125, 0.7);
  text-indent: -9999px;
  border: none;
  background-color: transparent;
  outline: none !important;
  cursor: pointer;
}

@media (min-width: 500px) {
  .multisteps-form__progress-btn {
    text-indent: 0;
  }
}

.multisteps-form__progress-btn:before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 13px;
  height: 13px;
  content: '';
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
  border: 2px solid currentColor;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  z-index: 3;
}

.multisteps-form__progress-btn:after {
  position: absolute;
  top: 5px;
  left: calc(-50% - 13px / 2);
  transition-property: all;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background-color: currentColor;
  z-index: 1;
}

.multisteps-form__progress-btn:first-child:after {
  display: none;
}

.multisteps-form__progress-btn.js-active {
  color: #007bff;
}

.multisteps-form__progress-btn.js-active:before {
  -webkit-transform: translateX(-50%) scale(1.2);
          transform: translateX(-50%) scale(1.2);
  background-color: currentColor;
}

.multisteps-form__form {
  position: relative;
}

.multisteps-form__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.multisteps-form__panel.js-active {
  height: auto;
  opacity: 1;
  visibility: visible;
}
</style>
<style>
.multisteps-form__panel[data-animation="scaleIn"] {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

.multisteps-form__panel[data-animation="scaleIn"].js-active {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1);
          transform: scale(1);
}
</style>

<div class="container col-lg-12">
    {{--<br><br><br><br><br>
    <h2 class="text-center">Crear cuenta de usuario</h2>--}}
    <br><br><br><br><br>
    <div class="multisteps-form">
        <!--progress bar-->
        <div class="row">
          <div class="col-12 col-lg-8 ml-auto mr-auto mb-4">
            <div class="multisteps-form__progress">
              <button class="multisteps-form__progress-btn js-active" type="button" title="EMPRESA INFORME">EMPRESA INFORME</button>
              <button class="multisteps-form__progress-btn" type="button" title="EMPRESA FACTURACIÓN">EMPRESA FACTURACIÓN</button>
              <button class="multisteps-form__progress-btn" type="button" title="CONTACTO">CONTACTO</button>
              <button class="multisteps-form__progress-btn" type="button" title="Comments">DOCUMENTOS</button>
            </div>
          </div>
        </div>
        <!--form panels-->
        <div class="row">
          <div class="col-12 col-lg-8 m-auto">
            <form class="multisteps-form__form" action="solicitud_usuario_store" method="post" role="form" enctype="multipart/form-data">
              <!--single form panel-->
              {{csrf_field()}}
              <div class="multisteps-form__panel shadow p-4 rounded bg-white js-active" data-animation="scaleIn">
                <h3 class="multisteps-form__title">DATOS EMPRESA PARA EL INFORME</h3>
                <div class="multisteps-form__content">
                    <div class="form-row">
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="usuario">Nombre empresa</label>
                            <input type="text" class="form-control" id="nombre_empresa_informe" name="nombre_empresa_informe" placeholder="Nombre empresa" required>
                        </div>
                        <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">DIRECCIÓN</label>
                    
                        <div class="form-group col-md-12">
                            <div class="form-row">
    
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="calle_informe">Calle</label>
                                    <input type="text" class="form-control" placeholder="Calle" id="calle_informe" name="calle_informe">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="numero_exterior_informe">Número exterior</label>
                                    <input type="text" class="form-control" placeholder="Número Exterior" id="numero_exterior_informe" name="numero_exterior_informe">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="numero_interior_informe">Número interior</label>
                                    <input type="text" class="form-control" placeholder="Número interior" id="numero_interior_informe" name="numero_interior_informe">
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="cp" class="">Código postal</label>
                                    <input type="text" class="form-control" placeholder="Código postal" id="codigo_postal_informe" name="codigo_postal_informe">
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="id_estado_informe" class="">Estado</label>
                                    <select class="custom-select" id="id_estado_informe" name="id_estado_informe" required>
                                        <option selected disabled>Selecciona estado...</option>
                                        @foreach ($estados as $estado)
                                          <option value="{{$estado->id_estado}}" class="text-uppercase">{{ $estado->estado }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="colonia" class="">Colonia</label>
                                    <input type="text" class="form-control" placeholder="Colonia" id="colonia_informe" name="colonia_informe">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="municipio" class="">Municipio/Delegacion</label>
                                    <input type="text" class="form-control" placeholder="Municipio/Delegacion" id="delegacion_informe" name="delegacion_informe">
                                </div>
                                <div class="form-group col-md-12">
                                  <label class="font-weight-bold" for="pais">País</label>
                                  <input type="text" class="form-control" placeholder="País" id="pais_informe" name="pais_informe" required>
                                </div>
                            </div>
                        </div>
                        <div  id="div_otro_estado_informe" class="form-group col-md-12">
                          <div class="form-row">
                              <div class="form-group col-md-12">
                                  <label class="font-weight-bold" for="otro_estado_informe" class="">Otro Estado</label>
                                  <input type="text" class="form-control" placeholder="Ingrese el estado..." id="otro_estado_informe" name="otro_estado_informe">
                              </div>
                          </div>
                        </div>
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="representante_legal">Representante legal</label>
                            <input type="text" class="form-control" id="representante_legal" name="representante_legal" placeholder="Representante legal" required>
                        </div>
                    </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Siguiente">Siguiente</button>
                  </div>
                </div>
              </div>
              <!--single form panel-->
              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">DATOS EMPRESA PARA FACTURAR</h3>
                <div class="multisteps-form__content">
                    <div class="form-row">
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="nombre_empresa_factura">Nombre empresa</label>
                            <input type="text" class="form-control" id="nombre_empresa_factura" name="nombre_empresa_factura" placeholder="Nombre empresa" required>
                        </div>
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="rfc_factura">RFC</label>
                            <input type="text" class="form-control" id="rfc_factura" name="rfc_factura" placeholder="RFC" required>
                        </div>
                        <div class="form-group col-md-12 text-left">
                          <label class="font-weight-bold" for="rfc_archivo_factura">RFC</label>
                          <div class="custom-file">
                            <input type="file" class="custom-file-input" id="rfc_archivo_factura" name="rfc_archivo_factura" accept=".png, .jpg, .jpeg, .pdf" required>
                            <label class="custom-file-label" for="rfc_archivo_factura">Subir archivo (.png, .jpg, .jpeg o .pdf)</label>
                          </div>
                        </div>
                        
                        <div class="form-group col-md-12">
                            <label class="font-weight-bold text-center col-md-12" style="margin-bottom:10px;">DIRECCIÓN FISCAL</label>
                    
                            <div class="form-row">
    
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="calle_factura">Calle</label>
                                    <input type="text" class="form-control" placeholder="Calle" id="calle_factura" name="calle_factura">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="numero_exterior_factura">Número exterior</label>
                                    <input type="text" class="form-control" placeholder="Número Exterior" id="numero_exterior_factura" name="numero_exterior_factura">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="numero_interior_factura">Número interior</label>
                                    <input type="text" class="form-control" placeholder="Número interior" id="numero_interior_factura" name="numero_interior_factura">
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="font-weight-bold" for="cp" class="">Código postal</label>
                                    <input type="text" class="form-control" placeholder="Código postal" id="codigo_postal_factura" name="codigo_postal_factura">
                                </div>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="id_estado_factura" class="">Estado</label>
                                    <select class="custom-select otro_estado" id="id_estado_factura" name="id_estado_factura" required>
                                        <option selected disabled>Selecciona estado...</option>
                                        @foreach ($estados as $estado)
                                          <option value="{{$estado->id_estado}}" class="text-uppercase">{{ $estado->estado }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="colonia" class="">Colonia</label>
                                    <input type="text" class="form-control" placeholder="Colonia" id="colonia_factura" name="colonia_factura">
                                </div>
                                <div class="form-group col-md-4">
                                    <label class="font-weight-bold" for="municipio" class="">Municipio/Delegacion</label>
                                    <input type="text" class="form-control" placeholder="Municipio/Delegacion" id="delegacion_factura" name="delegacion_factura">
                                </div>
                                <div class="form-group col-md-12">
                                  <label class="font-weight-bold" for="pais">País</label>
                                  <input type="text" class="form-control" placeholder="País" id="pais_factura" name="pais_factura" required>
                                </div>
                            </div>
                        </div>
                        <div  id="div_otro_estado_factura" class="form-group col-md-12">
                          <div class="form-row">
                              <div class="form-group col-md-12">
                                  <label class="font-weight-bold" for="otro_estado_factura" class="">Otro Estado</label>
                                  <input type="text" class="form-control" placeholder="Ingrese el estado..." id="otro_estado_factura" name="otro_estado_factura">
                              </div>
                          </div>
                        </div>
                    </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary js-btn-prev" type="button" title="Atrás">Atrás</button>
                    <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Siguiente">Siguiente</button>
                  </div>
                </div>
              </div>
              <!--single form panel-->
              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">DATOS DE CONTACTO</h3>
                <div class="multisteps-form__content">
                    <div class="form-row">
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="nombre_contacto">Nombre contacto</label>
                            <input type="text" class="form-control" id="nombre_contacto" name="nombre_contacto" placeholder="Nombre contacto" required>
                        </div>
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="telefono_contacto">Teléfono</label>
                            <input type="text" class="form-control" id="telefono_contacto" name="telefono_contacto" placeholder="Teléfono" required>
                        </div>
                        <div class="form-group col-md-12 text-left">
                            <label class="font-weight-bold" for="correo_contacto">E-mail</label>
                            <input type="mail" class="form-control" id="correo_contacto" name="correo_contacto" placeholder="correo electrónico" required>
                        </div>
                    </div>
                    <div class="button-row d-flex mt-4">
                        <button class="btn btn-primary js-btn-prev" type="button" title="Atrás">Atrás</button>
                        <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Siguiente">Siguiente</button>
                    </div>
                </div>
              </div>
              <!--single form panel-->
              <div class="multisteps-form__panel shadow p-4 rounded bg-white" data-animation="scaleIn">
                <h3 class="multisteps-form__title">Documentos Requeridos (solo visualización)</h3>
                <div class="multisteps-form__content">
                  <div class="form-row mt-4">
                    @foreach ($documentos as $documento)
                      <div class="form-group col-md-12 text-left">
                        <label class="font-weight-bold" for="document_{{ $loop->index }}">{{$documento->document}}</label>
                        <div class="custom-file">
                          <input type="file" class="custom-file-input" id="document_{{ $loop->index }}" name="document_{{ $loop->index }}" accept=".png, .jpg, .jpeg, .pdf" required>
                          <label class="custom-file-label" for="document_{{ $loop->index }}">Subir archivo (.png, .jpg, .jpeg o .pdf)</label>
                        </div>
                      </div>
                    @endforeach
                  </div>
                  <div class="button-row d-flex mt-4">
                    <button class="btn btn-primary js-btn-prev" type="button" title="Atrás">Atrás</button>
                    <button class="btn btn-success ml-auto" type="submit" title="Send">Enviar</button>
                  </div>
                </div>
              </div>
            </form>
           </div>
        </div>
    </div>
    <br><br><br>
</div>
<script>
//DOM elements
const DOMstrings = {
  stepsBtnClass: 'multisteps-form__progress-btn',
  stepsBtns: document.querySelectorAll(`.multisteps-form__progress-btn`),
  stepsBar: document.querySelector('.multisteps-form__progress'),
  stepsForm: document.querySelector('.multisteps-form__form'),
  stepsFormTextareas: document.querySelectorAll('.multisteps-form__textarea'),
  stepFormPanelClass: 'multisteps-form__panel',
  stepFormPanels: document.querySelectorAll('.multisteps-form__panel'),
  stepPrevBtnClass: 'js-btn-prev',
  stepNextBtnClass: 'js-btn-next' };


//remove class from a set of items
const removeClasses = (elemSet, className) => {

  elemSet.forEach(elem => {

    elem.classList.remove(className);

  });

};

//return exect parent node of the element
const findParent = (elem, parentClass) => {

  let currentNode = elem;

  while (!currentNode.classList.contains(parentClass)) {
    currentNode = currentNode.parentNode;
  }

  return currentNode;

};

//get active button step number
const getActiveStep = elem => {
  return Array.from(DOMstrings.stepsBtns).indexOf(elem);
};

//set all steps before clicked (and clicked too) to active
const setActiveStep = activeStepNum => {

  //remove active state from all the state
  removeClasses(DOMstrings.stepsBtns, 'js-active');

  //set picked items to active
  DOMstrings.stepsBtns.forEach((elem, index) => {

    if (index <= activeStepNum) {
      elem.classList.add('js-active');
    }

  });
};

//get active panel
const getActivePanel = () => {

  let activePanel;

  DOMstrings.stepFormPanels.forEach(elem => {

    if (elem.classList.contains('js-active')) {

      activePanel = elem;

    }

  });

  return activePanel;

};

//open active panel (and close unactive panels)
const setActivePanel = activePanelNum => {

  //remove active class from all the panels
  removeClasses(DOMstrings.stepFormPanels, 'js-active');

  //show active panel
  DOMstrings.stepFormPanels.forEach((elem, index) => {
    if (index === activePanelNum) {

      elem.classList.add('js-active');

      setFormHeight(elem);

    }
  });

};

//set form height equal to current panel height
const formHeight = activePanel => {

  const activePanelHeight = activePanel.offsetHeight;

  DOMstrings.stepsForm.style.height = `${activePanelHeight}px`;

};

const setFormHeight = () => {
  const activePanel = getActivePanel();

  formHeight(activePanel);
};

//STEPS BAR CLICK FUNCTION
DOMstrings.stepsBar.addEventListener('click', e => {

  //check if click target is a step button
  const eventTarget = e.target;

  if (!eventTarget.classList.contains(`${DOMstrings.stepsBtnClass}`)) {
    return;
  }

  //get active button step number
  const activeStep = getActiveStep(eventTarget);

  //set all steps before clicked (and clicked too) to active
  setActiveStep(activeStep);

  //open active panel
  setActivePanel(activeStep);
});

//PREV/NEXT BTNS CLICK
DOMstrings.stepsForm.addEventListener('click', e => {

  const eventTarget = e.target;

  //check if we clicked on `PREV` or NEXT` buttons
  if (!(eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`) || eventTarget.classList.contains(`${DOMstrings.stepNextBtnClass}`)))
  {
    return;
  }

  //find active panel
  const activePanel = findParent(eventTarget, `${DOMstrings.stepFormPanelClass}`);

  let activePanelNum = Array.from(DOMstrings.stepFormPanels).indexOf(activePanel);

  //set active step and active panel onclick
  if (eventTarget.classList.contains(`${DOMstrings.stepPrevBtnClass}`)) {
    activePanelNum--;

  } else {

    activePanelNum++;

  }

  setActiveStep(activePanelNum);
  setActivePanel(activePanelNum);

});

//SETTING PROPER FORM HEIGHT ONLOAD
window.addEventListener('load', setFormHeight, false);

//SETTING PROPER FORM HEIGHT ONRESIZE
window.addEventListener('resize', setFormHeight, false);
</script>
<script>
  $(document).ready(function(){
    $("#div_otro_estado_informe").hide();
    $("#div_otro_estado_factura").hide();

    $('#id_estado_factura').change(function(){
        id_estado = $(this).val();
        if (id_estado == 33) {
          $('#div_otro_estado_factura').show();
        }else{
          $("#div_otro_estado_factura").hide();
        }
    });

    $('#id_estado_informe').change(function(){
        id_estado = $(this).val();
        if (id_estado == 33) {
          $('#div_otro_estado_informe').show();
        }else{
          $("#div_otro_estado_informe").hide();
        }
    }); 
  });
</script>
<script>
  $(".custom-file-input").on("change", function() {
    var ext = $('.custom-file-input').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['pdf','png','jpg','jpeg']) == -1) {
        showAlert('Archivo no valido, unicamente archivos: .png, .jpg, .jpeg o .pdf ');
        $(this).val('');
        $(this).siblings(".custom-file-label").addClass("selected").html("Subir archivo (.png, .jpg, .jpeg o .pdf)");
    }else{
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    }
    
  });

  
</script>
@endsection