@extends('master')

@section('style')

<link rel="stylesheet" href="{{asset('country/css/intlTelInput.css')}}">

@endsection

@section('style')

<style>
    .mySlides {display:none;}

    .iti__flag {background-image: url("{{asset('country/img/flags.png')}}");}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("{{asset('country/img/flags@2x.png')}}");}
}

</style>

@endsection

@section('main')


<header>
    <span><img src="{{asset('images/logo_web.png')}}" alt="" /></span>

   <p><h5>Invita hasta 5 amigos</h5></p>
</header>

@if ($errors->any())
<hr />
<div class="alert alert-danger">
    <ul>
      Por favor revisa los campos.
    </ul>
</div>
@endif


<hr />
<form id="form" method="post" action="{{url('enviar')}}">
    {{ csrf_field() }}

    @isset($_GET['email'])
    <input type="hidden" name="email" value="{{$_GET['email']}}">
    @endif
        <div class="fields">
        <div class="field"  >
            Tus datos
            <input class="form-control"  type="text" name="nombre" id="nombre" value="{{ old('nombre') }}" placeholder="Nombre y Apellido" />
        </div>

    @for($i = 1; $i < 6; $i++)


    <div class="mySlides" style="width: 100%">

        <div class="field">
            <p> </br>Datos de tu amigo<strong> {{$i}}/5 </strong> </p>

            <p>
   <button type="button"  onclick="plusDivs(-1)">&#10094;</button>
   <button type="button"  onclick="plusDivs(1)">&#10095;</button>
 </p>

    <div class="field">
        <div class="input-group mb-3">
        <input class="form-control"  type="text" name="referido_{{$i}}" id="referido_{{$i}}" value="{{ old("referido_$i") }}"
            placeholder="Nombre y Apellido" />
        </div>
    </div>
            <div class="input-group mb-3">
        <input maxlength="5" size="50" class="form-control" type="tel" id="pais_{{$i}}" aria-label="pais_{{$i}}" name="pais_{{$i}}" value="{{ old("pais_$i") }}" aria-describedby="basic-addon1" placeholder="Cod.Area EJ: 11">
              </div>


            <div class="input-group mb-3">
                <input maxlength="12" type="text" class="form-control" placeholder="Numero EJ: 5219 3434" aria-label="numero_{{$i}}" name="numero_{{$i}}" id="numero_{{$i}}" value="{{ old("numero_$i") }}" aria-describedby="basic-addon1">
              </div>
        </div>
    </div>

    @endfor

  </div>



    {!! app('captcha')->display() !!}
    </br>
    <button type="submit" class="button btn-block">Enviar</button>

</form>
<hr />

<a target="_blank" href="http://www.rct.com.ar/images/legales2020.pdf">Legales</a>

<hr />

@endsection


@section('script')

<script>
    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("mySlides");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex-1].style.display = "block";
    }
    </script>

    <script src="{{asset('country/js/intlTelInput.js')}}"></script>
<script>


    var pais1 = document.querySelector("#pais_1");
    var iti1 =  window.intlTelInput(pais1, {
    initialCountry: "ar",
    separateDialCode:true

  });


  var pais2 = document.querySelector("#pais_2");
  var iti2 =  window.intlTelInput(pais2, {
  initialCountry: "ar",
  separateDialCode:true
});


var pais3 = document.querySelector("#pais_3");
var iti3 =  window.intlTelInput(pais3, {
initialCountry: "ar",
separateDialCode:true
});


var pais4 = document.querySelector("#pais_4");
var iti4 =  window.intlTelInput(pais4, {
initialCountry: "ar",
separateDialCode:true
});


var pais5 = document.querySelector("#pais_5");
var iti5 =  window.intlTelInput(pais5, {
initialCountry: "ar",
separateDialCode:true
});


$("#form").submit( function(eventObj) {
    $("<input />").attr("type", "hidden")
        .attr("name", "cod_1")
        .attr("value", "+"+iti1.getSelectedCountryData().dialCode)
        .appendTo("#form");

        $("<input />").attr("type", "hidden")
        .attr("name", "cod_2")
        .attr("value", "+"+iti2.getSelectedCountryData().dialCode)
        .appendTo("#form");

        $("<input />").attr("type", "hidden")
        .attr("name", "cod_3")
        .attr("value", "+"+iti3.getSelectedCountryData().dialCode)
        .appendTo("#form");

        $("<input />").attr("type", "hidden")
        .attr("name", "cod_4")
        .attr("value", "+"+iti4.getSelectedCountryData().dialCode)
        .appendTo("#form");

        $("<input />").attr("type", "hidden")
        .attr("name", "cod_5")
        .attr("value", "+"+iti5.getSelectedCountryData().dialCode)
        .appendTo("#form");
    return true;
});

</script>

@endsection