@if ($infoCobu != null && !empty($infoCobu))
    <div class="row">
        <div class="col">
            <div class="alert alert-success">
                {{ trans('payments.vinculoExitoso').' '.$infoCobu->idAccount}}
            </div>
        </div>
    </div>
@else
    <div class="row">
        <div class="col text-center">
            <button type="button" class="btn btn-info btn-lg btn-block" onclick="mostrarFormularioVincular()"
                data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseVinculacion">
                {{ trans('payments.vincular') }} </button>
        </div>
        <div class="col text-center">
            <button type="button" class="btn btn-success btn-lg btn-block" onclick="mostrarFormularioRegistrar()"
                data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseRegistro">
                {{ trans('payments.registrate') }} </button>
        </div>
    </div>


    <div class="collapse" id="collapseVinculacion">
        <hr>
        <div class="row mt-10">
            <div class="col">
                <h3> {{ trans('payments.registroCobru') }} </h3>
            </div>
        </div>
        <form action="{{ route('payments.vincular') }}" method="POST" id="Vincular">
            @csrf
            <div class="row mt-10">
                <div class="col">
                    <div class="form-group">
                        <label for="exampleInputEmail1"> {{ trans('payments.celular') }} </label>
                        <input type="number" min="1" name="celular" class="form-control" aria-describedby="nameInput"
                            required id="celularValid1">
                    </div>
                </div>
                {{-- <div class="col">
                <div class="form-group">
                    <label for="exampleInputEmail1"> {{  trans('payments.password') }} </label>
                    <input type="password" name="password" class="form-control" aria-describedby="nameInput" required>
                  </div>
            </div> --}}
            </div>
            <div class="row">
                <div class="col text-center mx-80">
                    <button href="Javascript:;" class="btn btn-primary btn-lg btn-block" type="button"
                        onclick="validCelular('1')"> {{ trans('payments.validar') }} </button>
                </div>
                {{-- <div class="input-group-append" >
                <button href="Javascript:;" class="btn btn-success btn-lg btn-block" type="button" id="button-addon2" onclick="validCelular()" > {{  trans('payments.registrar') }} </button>
              </div> --}}
            </div>
        </form>

    </div>


    <div class="collapse" id="collapseRegistro">
        <hr>
        <div class="row mt-10">
            <div class="col">
                <h3> {{ trans('payments.registroCobru') }} </h3>
            </div>
        </div>
        <div class="row mt-10">
            <div class="col">
                <form action="{{ route('payments.cobru') }}" id="formRegistro" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="name"> {{ trans('payments.nombre') }} </label>
                                <input type="text" name="name" class="form-control" id="nameInput"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="apellido"> {{ trans('payments.apellido') }}</label>
                                <input type="text" name="apellido" class="form-control" id="apellido"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-2">
                            <div class="form-group">
                                <label for="typeID">Tipo ID</label>
                                <select name="typeID" id="typeID" class="form-control" required>
                                    <option value="0" {{old('typeID') == 0 ? 'selected':''}}>CC</option>
                                    <option value="1" {{old('typeID') == 1 ? 'selected':''}}>CE</option>
                                    <option value="2" {{old('typeID') == 2 ? 'selected':''}}>TI</option>
                                    <option value="3" {{old('typeID') == 3 ? 'selected':''}}>NIT</option>
                                    <option value="4" {{old('typeID') == 4 ? 'selected':''}}>PSP</option>
                                </select>
                                <small class="text-danger">{{ $errors->first('typeID') }}</small>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label for="noCC"> {{ trans('payments.identificacion') }} </label>
                                <input type="number" name="noCC" class="form-control" min="0" id="noCC"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label for="email"> {{ trans('payments.email') }} </label>
                                <input type="email" name="email" class="form-control" id="email"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="genero"> {{ trans('payments.genero') }} </label>
                                <select name="genero" id="genero" class="form-control">
                                    <option value="0" selected> {{ trans('payments.ninguno') }} </option>
                                    <option value="1"> {{ trans('payments.hombre') }} </option>
                                    <option value="2"> {{ trans('payments.mujer') }} </option>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="fechaNacimiento"> {{ trans('payments.fechaNacimineto') }} </label>
                                <input type="date" name="fechaNacimiento" class="form-control" id="fechaNacimiento"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="expediciondate"> {{ trans('payments.fechaExpedicion') }} </label>
                                <input type="date" name="expediciondate" class="form-control" id="expediciondate"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col input-group">


                            <input type="number" class="form-control" placeholder=" {{ trans('payments.celular') }}" aria-label=" " min="0"
                                aria-describedby="nameInput" aria-describedby="button-addon2" id="celularValid">
                            {{-- <div class="input-group-append" >
                          <button class="btn btn-secondary" type="button" id="button-addon2" onclick="validCelular()"> {{  trans('payments.validar') }} </button>
                        </div> --}}

                        </div>
                    </div>
                    <br>

                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="person"> {{ trans('payments.tipoPersona') }} </label>
                                <select name="person" id="" class="form-control">
                                    <option value="1" selected> {{ trans('payments.natural') }} </option>
                                    <option value="2"> {{ trans('payments.juridica') }} </option>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="password"> {{ trans('payments.pass') }} </label>
                                <input type="password" name="password" class="form-control" id="password"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="passwordconfirmacion"> {{ trans('payments.confirmarPass') }}</label>
                                <input type="password" name="passwordconfirmacion" class="form-control"
                                    id="passwordconfirmacion" aria-describedby="nameInput" required>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="celular" id="celular" required>
                    <div class="row">
                        <div class="col text-center mx-80">
                            <div class="input-group-append">
                                <button href="Javascript:;" class="btn btn-success btn-lg btn-block" type="button"
                                    id="button-addon2" onclick="validCelular()"> {{ trans('payments.registrar') }}
                                </button>
                            </div>
                            {{-- <a href="Javascript:;" onClick="validarProceso()" class="btn btn-success btn-lg btn-block"> {{  trans('payments.registrar') }} </a> --}}
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>


    <div class="modal" tabindex="-1" id="modalvalid">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ trans('payments.codigoVerificacion') }}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="exampleInputEmail1"> {{ trans('payments.code') }} </label>
                                <input type="number" name="validCode" class="form-control" min="0" id="validCode"
                                    aria-describedby="nameInput" required>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="validCode()"> {{ trans('payments.validar') }} </button>

                </div>
            </div>
        </div>
    </div>

    <script>
        var msgBoolean = false;
        var validarVariable = '';
        var valid = false;
        var msgCode = "";
        var collapseVincular = document.getElementById('collapseVinculacion');
        var collapseRegistro = document.getElementById('collapseRegistro');


        function validCode() {
            var cdeIn = document.getElementById('validCode').value;
            if (msgCode == cdeIn) {
                valid = true;
                // swal("Succces!", "Codigo correcto", "success");
                swal({
                        title: " {{ trans('payments.confirmado') }} ",
                        text: " {{ trans('payments.codigoCorrecto') }} ",
                        showConfirmButton: true,
                    },
                    function(isConfirm) {
                        if (isConfirm) {
                            if (validarVariable == '') {
                                validarProceso();
                                $("#showConfirmButton").click();
                                swal.close();
                            } else {
                                $('#Vincular').submit()
                                $("#showConfirmButton").click();
                                swal.close();
                            }
                        }
                    });

                $('#modalvalid').modal('hide')
                document.getElementById("celularValid").disabled = false;


            } else {
                swal("Error!", "Error de codigo", "error");
            }
        }

        function validCelular(validar = '') {
            if ($('#celularValid'+validar).val() != $('#celular').val()) {
                msgBoolean = false
            }

            if (!msgBoolean) {
                if (document.getElementById('celularValid' + validar).value == "" || (document.getElementById(
                        'celularValid' + validar).value).length != 10) {
                    swal("Error", "{{ trans('payments.cell_invalido') }}", 'error')
                    return false;
                }
                msgCode = Math.floor(Math.random() * (999999 - 100000)) + 100000;
                var data = {
                    'phone': document.getElementById('celularValid' + validar).value,
                    'msg': msgCode
                }
                $.ajax({
                    url: UrlHost_ + "/administrator/payments/online/cobru/send/msg",
                    type: 'post',
                    data: data,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        swal({
                            title: " {{ trans('payments.cargando') }} ",
                            text: " {{ trans('payments.espereUnMomento') }} ",
                            showConfirmButton: false,
                        });
                    },
                    success: function(response) {
                        $('#validCode').val('')
                        if (response.code == 200) {
                            if (validar == '') {
                                swal.close();
                                msgBoolean = true;
                                document.getElementById('celularValid' + validar).disabled = true;
                                document.getElementById('celular').value = document.getElementById(
                                    'celularValid' + validar).value;
                                $('#modalvalid').modal('toggle')
                            } else {
                                swal.close();

                                $('#modalvalid').modal('toggle')
                            }
                            validarVariable = validar;
                        } else {
                            swal("Error!", " {{ trans('payments.errorMessage') }} ", "error");
                        }
                        // swal.close();
                    },
                    error: function(xhr) {
                        swal("Error!", " {{ trans('payments.errorMessage') }} ", "error");
                    }
                });
            } else {
                if (!valid) {
                    $('#modalvalid').modal('toggle')
                }
            }
        }

        function validarProceso() {
            if (msgBoolean) {
                if (valid && document.getElementById('celular').value != "") {
                    document.getElementById("formRegistro").submit();
                } else {
                    swal("Error", "{{ trans('payments.no_codigo_sms') }}", "error");
                }
            } else {

                swal("Error", "{{ trans('payments.no_validado_cell') }}", "error");
            }
        }

        function mostrarFormularioVincular() {

            if (collapseVincular.style.display === 'block') {
                if(collapseRegistro.style.display === "block"){
                    collapseRegistro.style.display = 'none';
                }
                collapseVincular.style.display = 'none';
            } else if (collapseVincular.style.display === 'none' || collapseVincular.style.display === '') {
                if(collapseRegistro.style.display === "block"){
                    collapseRegistro.style.display = 'none';
                }
                collapseVincular.style.display = 'block';
            }
        }

        function mostrarFormularioRegistrar() {
            if (collapseRegistro.style.display === 'block') {
                if(collapseVincular.style.display === "block"){
                    collapseVincular.style.display = 'none';
                }
                collapseRegistro.style.display = 'none';
            } else if (collapseRegistro.style.display === 'none' || collapseRegistro.style.display === '') {
                if(collapseVincular.style.display === "block"){
                    collapseVincular.style.display = 'none';
                }
                collapseRegistro.style.display = 'block';
            }
        }
    </script>
@endif