@extends('layaout')
@section('content')
<div class="preguntas">
  <div class="container container-xxl">
    <div class="row">
      <div class="col-xl-2">
        <div class="preguntas__left">
          <img src="{{ url('images/logopreguntas.png') }}" alt="" class=" img-fluid " >
          <div class="formulario__numeros">
            <ul>
              @foreach($preguntas as $k => $pregunta)
              <li id="li-{{ $pregunta->orden }}" @if($k == 0) class="activado" @endif>
                {{ $pregunta->orden }}
              </li>
              @endforeach
            </ul>
          </div>
        </div>
      </div>
      <div class="col-xl-1">

      </div>
      <div class="col-xl-7">
        @foreach($preguntas as $p => $pregunta)
        <div id="div_{{ $pregunta->id }}" class="preguntas__right @if($p != 0) d-none @endif">
          <h6>Pregunta {{ $pregunta->orden }}</h6>
          <h3>{!! str_replace("<br>", "\n", $pregunta->texto) !!}</h3>
          <div class="preguntas__right__card">
            @foreach($pregunta->respuestas()->where('estado', 1)->orderBy('orden', 'asc')->get() as $r => $respuesta)
            <label class="containerRadio">{{ $respuesta->texto }}
              <input type="radio" name="radio{{ $pregunta->id }}" value="{{ $respuesta->id }}">
              <span class="checkmark"></span>
            </label>
            @endforeach
          </div>
          <div class="botones">
            @if($p != 0)
            <div class="boton">
              <a id="btnAnterior_{{ $pregunta->id }}" href="#">
                <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.585512 7.707L4.87851 12L6.29251 10.586L2.99951 7.293L12.9995 7.293L12.9995 5.293L2.99951 5.293L6.29251 2L4.87851 0.585999L0.585512 4.879C0.21057 5.25406 -6.15804e-05 5.76267 -6.15341e-05 6.293C-6.14877e-05 6.82333 0.21057 7.33195 0.585512 7.707Z" fill="#003DA5"/>
                </svg>

                Anterior
              </a>
            </div>
            @endif
            <div class="boton ">
              <a id="btnSiguiente_{{ $pregunta->id }}_{{ $pregunta->orden }}" href="#">
                Siguiente
                <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12.414 4.293L8.121 0L6.707 1.414L10 4.707H0V6.707H10L6.707 10L8.121 11.414L12.414 7.121C12.7889 6.74594 12.9996 6.23733 12.9996 5.707C12.9996 5.17667 12.7889 4.66806 12.414 4.293Z" fill="#003DA5"/>
                </svg>

              </a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
</div>


<div class=" modal fade modalLogin" id="modalFormulario" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
   <div class="modal-dialog modal-xl">
      <div class="modal-content">
         <div class="modal-body p-0">
            <div class="modalCard">
               <div class="modalCard__contenedor">
                  <!-- <div class="modalLogin__header">
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div> -->
                  <div class="modalLogin__form">
                     <div class="row">
                        <form id="formRegistro" class="" action="javascript:void(0)" method="post">
                          {{ csrf_field() }}
                          <div class="row">
                              <div class="col-xl-4">
                                <div class=" text-center mt-5 mb-5">
                                  <div class="modalLogin__form__left text-start">
                                    <img src="{{ url('images/numero/gracias.png') }}" alt="" class=" img-fluid " >
                                    <h3>Completa los datos y a jugar</h3>
                                    <p>Completa tus datos para participar y entrar al sorteo.</p>
                                    <img src="{{ url('images/numero/mensajealerta.png') }}" alt="" class=" img-fluid " >
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-8">
                                <div id="divError" class="alert alert-danger print-error-msg d-none">
                                  <ul></ul>
                                </div>
                                <div class="row">
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <input type="text" id="nombre" name="nombre" required pattern="[a-zA-Z0-9 ]+"
                                            class="form-control" placeholder="Nombre completo *">
                                      </div>
                                    </div>
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <input type="tel" id="celular" name="celular" value="" required pattern="[a-zA-Z0-9 ]+" class="form-control" placeholder="Celular *" maxlength="9">
                                      </div>
                                    </div>
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <input type="email" id="correo" name="correo" required class="form-control" placeholder="Correo *">
                                      </div>
                                    </div>
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <select class="form-control" id="distrito" name="distrito" required >
                                            <option value="" >Seleccionar distrito*</option>
                                            @foreach($distritos as $d => $distrito)
                                            <option value="{{ $distrito->id }}">{{ $distrito->distrito }}</option>
                                            @endforeach
                                          </select>
                                      </div>
                                    </div>
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <input type="number" id="documento" name="documento" required pattern="[a-zA-Z0-9 ]+" class="form-control" placeholder="# de documento *" maxlength="8">
                                      </div>
                                    </div>
                                    <div class="col-xl-6">
                                      <div class="contacto__right__card">
                                          <div class="row">
                                            <div class="contacto__right__card">
                                              <select class="form-control" id="como_te_enteraste" name="como_te_enteraste" required >
                                                <option value="" >¿Cómo te enteraste de nuestro sorteo?</option>
                                                <option value="facebook">Facebook</option>
                                                <option value="instagram">Instagram</option>
                                                <option value="tiktok">Tiktok</option>
                                                <option value="otros">Otros</option>
                                              </select>
                                            </div>
                                          </div>
                                      </div>
                                    </div>
                                    <div class="col-xl-12">
                                      <div class="contacto__right__card mb-3">
                                          <div class="row">
                                            <div class="col-xl-12">
                                                <div class="modalCard__card__check">
                                                  <label class="checkCard">Acepto que soy mayor de 18 años de edad.
                                                  <input type="checkbox" id="mayor_edad" name="mayor_edad">
                                                  <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                            </div>
                                          </div>
                                      </div>
                                      <div class="contacto__right__card mb-3">
                                          <div class="row">
                                            <div class="col-xl-12">
                                                <div class="modalCard__card__check">
                                                  <label class="checkCard">Acepto los términos y condiciones de Aceros Arequipa.
                                                  <input type="checkbox" id="terminos" name="terminos">
                                                  <span class="checkmark"></span>
                                                  </label>
                                                </div>
                                            </div>
                                          </div>
                                      </div>
                                      <div class="contacto__right__card">
                                          <div class="row">
                                            <div class="col-xl-12">
                                                <div class="boton">
                                                  <a href="#" id="btnEnviar" class="boton">
                                                    Participar
                                                  </a>
                                                </div>
                                            </div>
                                          </div>
                                      </div>
                                    </div>
                                </div>
                              </div>
                          </div>

                        </form>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
<style type="text/css">
  .contacto__right__card select option{
    color:#000 !important;
  }

  .contacto__right__card label.error{
    color:#fff !important;
  }

  @media (max-width: 575.98px) {
    .jugar__header__left{
      width: 70%;
      text-align:left;
      margin-top: -80px;
      margin-left: -80px;
    }

    .jugar__header__left a{
      font-size: 12px;
    }
  }

  .swal2-confirm a{
    color: #FFFFFF;
  }
</style>
@endsection
@section('scripts')
<script type="text/javascript" nonce="{{ csrf_token() }}">
  $('#documento').on('input', function(){
    if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);
  });

  var Anchors = document.getElementsByTagName("a");

  for (var i = 0; i < Anchors.length ; i++) {
    id_arr_glo = Anchors[i].id.split('_');
    if(id_arr_glo[0] == 'btnAnterior' || id_arr_glo[0] == 'btnSiguiente' || Anchors[i].id == 'btnEnviar'){
      Anchors[i].removeAttribute("href");
    }
    
    Anchors[i].addEventListener("click", 
      function (event) {
        id_arr = this.id.split('_');
        if(id_arr[0] == 'btnAnterior'){
          event.preventDefault();
          anterior(id_arr[1]);
        }else if(id_arr[0] == 'btnSiguiente'){
          event.preventDefault();
          siguiente(id_arr[1], id_arr[2]);
        }
      }, 
    false);
  }

  $("#btnEnviar").click(function(){
    $('#formRegistro').submit();
  });

  var arr_respuestas = [];

  $.validator.addMethod("regex", function(value, element, regexp) {
      var re = new RegExp(regexp);
      return this.optional(element) || re.test(value);
    },
    "Please check your input."
  );

  $.validator.addMethod('filesize', function (value, element, param) {
    return this.optional(element) || (element.files[0].size <= param)
  }, 'El tamaño del archivo debe ser menor de 10 MB');

  function printErrorMsg (msg) {
    $(".print-error-msg").find("ul").html('');
    $(".print-error-msg").css('display','block');
    $.each( msg, function( key, value ) {
      $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
    });
  }

  function enviarFormRegistros(){
    var form = document.getElementById("formRegistro");

    var checked = 0;
    var checkedMayor = 0;

    if($('#terminos').is(":checked") == true){
      checked = 1;
    };

    if($('#mayor_edad').is(":checked") == true){
      checkedMayor = 1;
    };

    $.ajax({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      type:'post',
      dataType: 'json',
      url: "{{ route('save-registro-form') }}",
      data: {
        nombre: $("#nombre").val(),
        celular: $("#celular").val(),
        correo: $("#correo").val(),
        distrito: $("#distrito").val(),
        documento: $("#documento").val(),
        como_te_enteraste: $("#como_te_enteraste").val(),
        terminos: checked,
        mayor_edad: checkedMayor,
        arr_respuestas: arr_respuestas
      },
      beforeSend:function(){
        $("#btnEnviar").html("Enviando...");
        $("#btnEnviar").attr("onclick", null).off("click");
      },
      success:function(data){
        if(data['status'] == 'success'){
          $('#formRegistro').trigger("reset");
          var registro = data.registro;
          window.location.href = "{{ url('gracias') }}/" + registro;
        }else if(data['status'] == 'duplicate'){
          $('#formRegistro').trigger("reset");
          var nombre = data.nombre;
          $("#btnEnviar").html('COMENZAR');
          $("#btnEnviar").attr("onclick", "$('#formRegistro').submit();").off("click");

          var warningTlt = "Estimado usuario " + nombre + ", usted ya ha participado anteriormente";
          var warningMsg = "Por lo tanto no puede volver a participar, pero puedes ganar con nuestras promociones.";

          Swal.fire({
            type: 'warning',
            title: warningTlt,
            text: warningMsg,
            showCancelButton: true,
            cancelButtonText: "Cerrar",
            confirmButtonText: "<a href='http://acerosarequipa.com/' target='_blank'>VER PROMOCIONES</a>"
          });
        }else{
          var errorTlt = "Lo sentimos";
          var errorMsg = "Ha ocurrido un error";

          $("#btnEnviar").html('COMENZAR');
          $("#btnEnviar").attr("onclick", "$('#formRegistro').submit();").off("click");

          Swal.fire({
            type: 'error',
            title: errorTlt,
            text: errorMsg,
          });
        }

        if(data.error != NULL){
          printErrorMsg(data.error);
          const element = document.getElementById("divError");
          element.scrollIntoView();
        }
      },
      error:function(XMLHttpRequest, textStatus, errorThrown){
        console.log(textStatus);
        var errorMsg = "";
        var errorTlt = "";

        $("#btnEnviar").html("Enviar");
        errorMsg = "Ocurrió un error";
        errorTlt = "Lo sentimos";

        $("#btnEnviar").attr("onclick", "$('#formRegistro').submit();").off("click");
        Swal.fire({
          type: 'error',
          title: errorTlt,
          text: errorMsg,
        });
      }
    });
  }

  $("#formRegistro").validate({
    rules: {
      nombre: "required",
      correo: {required: true, email: true},
      celular: {required:true, regex: "[0-9]+", minlength:7, maxlength: 9},
      distrito: "required",
      documento: {required:true, regex: "[0-9]+", minlength:8, maxlength: 8},
      como_te_enteraste: "required",
      mayor_edad: "required",
      terminos: "required"
    },
    messages: {
      nombre: "Ingrese su nombre",
      correo: {
        "required" : "Ingrese su correo",
        "email" : "Ingrese un correo válido"
      },
      celular: {
        "required" : "Ingresa tu celular",
        "regex" : "Ingresa un numero de celular valido",
        "minlength" : "El celular debe tener entre 7 y 9 digitos",
        "maxlength" : "El celular debe tener entre 7 y 9 digitos"
      },
      distrito: "Seleccione su distrito de residencia",
      documento: {
        "required" : "Ingresa tu numero documento",
        "regex" : "Ingresa un documento valido",
        "minlength" : "El documento debe tener 8 caracteres",
        "maxlength" : "El documento debe tener 8 caracteres"
      },
      como_te_enteraste: "Selecciona como te enteraste",
      mayor_edad: "Debe aceptar que es mayor de edad",
      terminos: "Debe aceptar los terminos y condiciones"
    },
    submitHandler: function (form) {
      enviarFormRegistros();
    }
  });

  function siguiente(pregunta_id, pregunta_orden){
    if ($('input[name="radio' + pregunta_id +'"]:checked').length > 0) {
      var respuesta = $('input[name="radio' + pregunta_id +'"]:checked').val();
      var index = -1;
      var encontrado = 0;

      if(arr_respuestas.length != 0){
        $.each(arr_respuestas, function(i, res) {
          if(res[0] == pregunta_id){
            index = i;
            encontrado = 1;
          }
        });

        if(encontrado == 1){
          arr_respuestas.splice(index, 1,pregunta_id + "__"+ respuesta);
        }else{
          arr_respuestas.push(pregunta_id + "__"+ respuesta);
        }
      }else{
        arr_respuestas.push(pregunta_id + "__"+ respuesta);
      }

      var siguientepregunta = Number(pregunta_id) + 1;

      $('div[id^="div_"]').addClass("d-none");
      $("#div_" + (siguientepregunta)).removeClass("d-none");

      $('li[id^="li-"]').removeClass("activado");
      $('#li-' + (siguientepregunta)).addClass("activado");

      if(pregunta_orden >= {{ count($preguntas) }}){
        $("#modalFormulario").modal('toggle');
      }
    }else{
      warningTlt = "¡Aviso!";
      warningMsg = "Debe seleccionar una respuesta";

      Swal.fire({
        type: 'warning',
        title: warningTlt,
        text: warningMsg,
      });
    }
  }

  function anterior(pregunta_id){
    if ($('input[name="radio' + pregunta_id +'"]:checked').length > 0) {
      var respuesta = $('input[name="radio' + pregunta_id +'"]:checked').val();
      var index = -1;
      var encontrado = 0;

      if(arr_respuestas.length != 0){
        $.each(arr_respuestas, function(i, res) {
          if(res[0] == pregunta_id){
            index = i;
            encontrado = 1;
          }
        });

        if(encontrado == 1){
          arr_respuestas.splice(index, 1,pregunta_id + "__"+ respuesta);
        }else{
          arr_respuestas.push(pregunta_id + "__"+ respuesta);
        }
      }else{
        arr_respuestas.push(pregunta_id + "__"+ respuesta);
      }

      $('div[id^="div_"]').addClass("d-none");
      $("#div_" + (pregunta_id - 1)).removeClass("d-none");

      $('li[id^="li-"]').removeClass("activado");
      $('#li-' + (pregunta_id - 1)).addClass("activado");
    }else{
      warningTlt = "¡Aviso!";
      warningMsg = "Debe seleccionar una respuesta";

      Swal.fire({
        type: 'warning',
        title: warningTlt,
        text: warningMsg,
      });
    }
  }
</script>
@endsection