@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>
        <h4>Sorteo: 1 semana para 4 personas</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('/campaña/3')}}">
    {{ csrf_field() }}

    @isset($_GET['ref'])
    <input type="hidden" name="ref" value="{{$_GET['ref']}}">
    @endif
    @isset($_GET['from'])
    <input type="hidden" name="from" value="{{$_GET['from']}}">
    @endif

    <div class="fields">

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

            <div class="field">
                <p> </br>Completa tus datos<strong>  </strong> </p>


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


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


                <div class="form-group">
                    <div class="input-group">
                            <div class="col-md-5">
                      <select style="margin-top: 3px"  class="form-control" name="tipo_documento_1">
                        <option value="DNI">DNI</option>
                        <option value="LC">LC</option>
                        <option value="LE">LE</option>
                        <option value="Pasaporte">Pasaporte</option>
                      </select>
                    </div>

                      <input type="text" maxlength="8" class="form-control" placeholder="Documento"
                      aria-label="documento_1" name="documento_1" id="documento_1"
                      value="{{ old("documento_1") }}" aria-describedby="basic-addon1">
                    </div>
                  </div>


                <div class="input-group mb-3">
                    <input maxlength="60" type="email" class="form-control" placeholder="EMAIL EJ: micorreo@rct.coop"
                        aria-label="email_1" name="email_1" id="email_1" value="{{ old("email_1") }}"
                        aria-describedby="basic-addon1">
                </div>

                <p>
                <div align="center" class="">
                  <span style="font-size: 14px"> ¿Conoce </span>
                </div>

                <div align="center" class="">
                    <span style="font-size: 14px"> RCT Club Vacacional & SPA? </span>
                </div>
                </p>


                <div style="margin-left:20%">
                    <div class="input-group mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="comentario_1" id="comentario1_1" value="si"
                                >
                            <label class="form-check-label" for="comentario1_1">
                                SI
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="comentario_1" id="comentario2_1" value="no">
                            <label class="form-check-label" for="comentario2_1">
                                NO
                            </label>
                        </div>
                    </div>
                </div>

            </div>
    </div>

    </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/202009_Bases_Sorteo-1_semana-x_4_pax.pdf">Bases y Condiciones</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

    });



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



    // Restricts input for each element in the set of matched elements to the given inputFilter.
    (function ($) {
        $.fn.inputFilter = function (inputFilter) {
            return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function () {
                if (inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        };
    }(jQuery));


    $("#numero_1").inputFilter(function (value) {
        return /^\d*$/.test(value);
    });
    $("#pais_1").inputFilter(function (value) {
        return /^\d*$/.test(value);
    });
    $("#documento_1").inputFilter(function (value) {
        return /^\d*$/.test(value);
    });


</script>

@endsection