@extends('master')

@section('style')

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

@endsection

@section('titulo')
Reserva Verano 21-22
@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>

    <h4>
        <p>
          Reserva Verano
        </p>
        <p> 21-22 </p>
            </h4>
</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/4')}}">
    {{ 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

    @isset($_GET['id'])
    <input type="hidden" name="id" value="{{$_GET['id']}}">
    @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 (Socio)" />
                    </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="input-group mb-3">
                      <input type="text" maxlength="2" class="form-control" placeholder="Cantidad de personas"
                      aria-label="comentario_2" name="comentario_2" id="comentario_2"
                      value="{{ old("comentario_2") }}" aria-describedby="basic-addon1">
                  </div>

            </div>
    </div>

    </div>



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

</form>
<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);
    });

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



</script>

@endsection