<?php $__env->startSection('styles'); ?>
    <link rel="stylesheet" href="<?php echo e(asset('public/assets/css/frontend/register.css')); ?>">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('register-type', 'Cuenta'); ?>

<?php $__env->startSection('register-form'); ?>
    
    <form class="form-flex email-form was-validated" id="registerFormClient" method="POST"
          action="<?php echo e(route('register.buyer.store')); ?>">
        <?php echo csrf_field(); ?>
        <div class="container">
            <div class="form-row col-md-12">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group mb-4">
                            <label for="add_user_type">Tipo de Cliente</label>
                            <select name="add_user_type" id="add_user_type" class="form-input-edit" required>
                                <option value="B02" selected>Cliente Generico</option>
                                <option value="B01">Empresa o Persona Fisica</option>
                                <option value="B15">Cliente Gubernamental</option>
                            </select>
                            <?php $__errorArgs = ['client_type'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            <div id="client_typeError" style="color: #dc3545; font-size: 80%;"></div>
                        </div>
                    </div>
                    <div class="col-lg-6" id="doc_rnc_input">
                        <div class="form-group mb-4">
                            <label for="cedula_rnc" id="rc">RNC o Cedula</label>
                            <label for="cedula_rnc" id="rn">RNC</label>
                            <input type="number" name="cedula_rnc" id="cedula_rnc"
                                   class="form-input-edit <?php $__errorArgs = ['cedula_rnc'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>">
                            <?php $__errorArgs = ['cedula_rnc'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            <div id="cedula_rncError" style="color: #dc3545; font-size: 80%;"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group mb-4">
                            <label for="name_user" id="nameLabel">Nombre y Apellido</label>
                            <input type="text" name="name_user" id="name_user" placeholder="Nombre y Apellido"
                                   class="form-input-edit name_user <?php $__errorArgs = ['name_user'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                   value="<?php echo e(old('name_user')); ?>" required>
                            <?php $__errorArgs = ['name_user'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            <span id="nameError" style="color: #dc3545; font-size: 80%;"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group mb-4" id="phoneField">
                            <label for="phone" id="numeroLabel">Número Móvil</label>
                            <input type="tel" name="phone" id="phone" data-user="customer"
                                   placeholder="Ejemplo: +10123456789"
                                   class="form-input-edit phone <?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                   value="<?php echo e(old('phone')); ?>" required>
                            <div id="phoneError" style="color: #dc3545; font-size: 80%;"></div>
                            <div id="phoneStatus"></div> <!-- Agrega este elemento para mostrar el mensaje -->
                            <?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group mb-4" id="emailField">
                            <label for="email" id="emailLabel">Correo Electrónico</label>
                            <input type="email" name="email" id="email" data-user="customer"
                                   placeholder="Correo Electrónico"
                                   class="form-input-edit email <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                   value="<?php echo e(old('email')); ?>">
                            <div id="emailError" style="color: #dc3545; font-size: 80%;"></div>
                            <div id="emailStatus"></div> <!-- Agrega este elemento para mostrar el mensaje -->
                            <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group mb-4">
                            <label for="password">Contraseña</label>
                            <input type="password" name="password" id="password" placeholder="Contraseña"
                                   class="form-input-edit <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" id="inputPassword"
                                   required>
                            <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            <div id="password1Error" style="color: #dc3545; font-size: 80%;"></div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group mb-4">
                            <label for="password_confirmation">Repetir Contraseña</label>
                            <input type="password" name="password_confirmation" id="password_confirmation"
                                   placeholder="Confirmar contraseña"
                                   class="form-input-edit <?php $__errorArgs = ['password_confirmation'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                   required>
                            <?php $__errorArgs = ['password_confirmation'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                            <div class="invalid-feedback"><?php echo e($message); ?></div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            <div id="passwordError" style="color: #dc3545; font-size: 80%;"></div>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-4">
                    <div class="form-check">
                        <input style="width: 18px; height: 18px; margin-right: 10px;"
                               class="form-check-input <?php $__errorArgs = ['terms'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" type="checkbox"
                               name="terms" id="terms" value="1" <?php echo e(old('terms') ? 'checked' : ''); ?> required>
                        <label style="font-size: 1.5rem;" for="terms" style="cursor: pointer;">
                            Estoy de acuerdo con los
                            <a style="font-size: 1.5rem;" href="https://soporte.lapieza.do/?q=terminos" target="_blank">
                                Términos y Condiciones
                            </a>,
                            <a style="font-size: 1.5rem;" href="https://soporte.lapieza.do/?q=devoluciones"
                               target="_blank">
                                Política de Devoluciones
                            </a> &
                            <a style="font-size: 1.5rem;" href="https://soporte.lapieza.do/?q=politicas-privacidad"
                               target="_blank">
                                Política de Privacidad.
                            </a>
                        </label>
                    </div>
                    <?php if($errors->has('terms')): ?>
                        <p style="font-size: 80%;" class="text-danger">
                            <?php echo e($errors->first('terms')); ?>

                        </p>
                    <?php endif; ?>
                </div>
                <div class="form-group mb-4">
                    <div class="g-recaptcha" data-sitekey="<?php echo e(env('RECAPTCHA_SITE_KEY')); ?>"></div>
                    <?php if($errors->has('g-recaptcha-response')): ?>
                        <p style="font-size: 80%;" class="text-danger"><?php echo e($errors->first('g-recaptcha-response')); ?></p>
                    <?php endif; ?>
                </div>
                <div class="form-group mb-12 d-flex">
                    <button id="submitButton" class="btn btn-primary btn-lg btn-block">
                        <span>Iniciemos</span>
                        <i class="las la-arrow-right"></i>
                    </button>
                </div>
                <?php if(session('error')): ?>
                    <div class="alert alert-danger">
                        <?php echo e(session('error')); ?>

                    </div>
                <?php endif; ?>
            </div>
        </div>
    </form>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>

    <script>
        $(document).ready(function () {
            $("#submitButton").prop("disabled", true);
            $("#doc_rnc_input").hide();
            $("#rc").hide();
            $("#rn").hide();
            const $selectElement = $('#add_user_type');
            if ($selectElement.val()) {
                $selectElement.addClass('success');
            }

            $("#add_user_type").change(function () {
                if ($(this).val() === "B01") {
                    $("#doc_rnc_input").show();
                    $("#rn").hide();
                    $("#rc").show();
                    $('#cedula_rnc').attr('placeholder', 'RNC o Cedula');
                    $('#cedula_rnc').attr('required', true);
                } else if ($(this).val() === "B15") {
                    $("#doc_rnc_input").show();
                    $("#rc").hide();
                    $("#rn").show();
                    $('#cedula_rnc').attr('placeholder', 'RNC');
                    $('#cedula_rnc').attr('required', true);
                } else {
                    $("#doc_rnc_input").hide();
                    $("#rc").hide();
                    $("#rn").hide();
                    $('#cedula_rnc').attr('required', false);
                }
            });
            const phoneunoInput = $("#phone");

            function addPlusOneToPhoneInputs(phoneInput) {
                const inputValue = phoneInput.val().trim();
                if (!inputValue || !inputValue.startsWith("+1")) {
                    phoneInput.val("+1");
                }
            }

            function checkFormValidity() {
                const nameValid = $("#name_user").val().trim().length >= 3 &&
                    /^[a-zA-ZñÑ\s]+$/.test($("#name_user").val().trim());

                const phoneValid = /^\+1\d{10}$/.test($("#phone").val().trim());

                const emailValid = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.(com|do|net|com\.do)$/.test($("#email").val().trim());

                const passwordValid = $("#password").val().trim().length >= 8 &&
                    $("#password").val().trim() === $("#password_confirmation").val().trim();

                const termsAccepted = $("#terms").is(":checked");

                /* const recaptchaValid = grecaptcha.getResponse();*/

                const formIsValid = nameValid && phoneValid && emailValid && passwordValid && termsAccepted;

                if (formIsValid) {
                    $("#submitButton").prop("disabled", false);
                }

            }

            $("#name_user").on("input", function () {
                const input = $(this).val().trim();
                const errorSpan = $("#nameError");

                if (input.length === 0) {
                    errorSpan.text("El campo nombre y apellido es obligatorio.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (!/^[a-zA-ZñÑ\s]+$/.test(input)) {
                    errorSpan.text("Solo se permiten letras y espacios.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (input.length < 3) {
                    errorSpan.text("Debe tener al menos 3 letras.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else {
                    errorSpan.text("");
                    $(this).css({"border": "1px solid #198754", "box-shadow": "0 0 5px #198754"});
                }

                checkFormValidity();
            });

            $("#phone").on("input", function () {
                const input = $(this).val().trim().replace(/\s/g, "");
                const errorSpan = $("#phoneError");

                addPlusOneToPhoneInputs(phoneunoInput);

                if (input.length === 0) {
                    errorSpan.text("El campo número móvil es obligatorio.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (!/^[\d+]+$/.test(input)) {
                    errorSpan.text('Solo se permiten números y el símbolo "+".');
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (!/^\+1\d{10}$/.test(input)) {
                    errorSpan.text("El número móvil debe tener el formato +1 seguido de 10 números.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else {
                    errorSpan.text("");
                    $(this).css({"border": "1px solid #198754", "box-shadow": "0 0 5px #198754"});
                    // Llamada AJAX para verificar el número
                    fetch(phoneCheckUrl, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                        },
                        body: JSON.stringify({
                            phone: input,
                            user_type: $(this).data("user"),
                        }),
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.exists) {
                                $("#phoneStatus").html('<div style="font-size: 80%; color:#dc3545;">El número de teléfono ya ha sido registrado.</div>');
                                $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                            } else {
                                $("#phoneStatus").html('<div class="text-success"></div>');
                            }
                        })
                        .catch(error => console.error("Error:", error));
                }

                checkFormValidity();
            });

            $("#email").on("input", function () {
                const input = $(this).val().trim();
                const errorSpan = $("#emailError");

                if (input.length === 0) {
                    errorSpan.text("El campo correo electrónico es obligatorio.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.(com|do|net|com\.do)$/.test(input)) {
                    errorSpan.text("Ingrese un correo electrónico válido.");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else {
                    errorSpan.text("");
                    $(this).css({"border": "1px solid #198754", "box-shadow": "0 0 5px #198754"});
                    // Llamada AJAX para verificar el correo
                    fetch(emailCheckUrl, {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "Accept": "application/json",
                        },
                        body: JSON.stringify({
                            email: input,
                            user_type: $(this).data("user"),
                        }),
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.exists) {
                                $("#emailStatus").html('<div style="font-size: 80%; color:#dc3545;">El correo electrónico ya ha sido registrado.</div>');
                                $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                            } else {
                                $("#emailStatus").html('<div class="text-success"></div>');
                            }
                        })
                        .catch(error => console.error("Error:", error));
                }

                checkFormValidity();
            });

            $("#cedula_rnc").on('input', function () {
                const input = $(this).val().trim();
                const errorSpan = $("#cedula_rncError");
                if (input.length === 0) {
                    errorSpan.text("Este campo debe contener mas de 4 dígitos");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (input.length < 4) {
                    errorSpan.text("Este campo debe contener mas de 4 dígitos");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else if (!/^\d+$/.test(input)) {
                    errorSpan.text("Este campo solo admite números");
                    $(this).css({"border": "1px solid #dc3545", "box-shadow": "0 0 5px #dc3545"});
                } else {
                    errorSpan.text("");
                    $(this).css({"border": "1px solid #198754", "box-shadow": "0 0 5px #198754"});
                    fetch("<?php echo e(route('verification.rcn_doc.verify')); ?>", {
                        method: "POST",
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            rnc: input
                        }),
                    })
                        .then((response) => response.json())
                        .then((data) => {
                            console.log(data);
                            if (data.state) {
                                $("#name_user").val(data.message[0].valor);
                                $("#name_user").attr('readonly', true);
                                $("#name_user").addClass('success');
                            } else {
                                $("#name_user").val('');
                                $("#name_user").attr('readonly', false);
                                $("#name_user").removeClass('success');
                            }
                        })
                        .catch((error) => {
                            console.error("Error:", error);
                        });
                }
                checkFormValidity();
            });

            $("#password, #password_confirmation").on("input", function () {
                const password = $("#password").val().trim();
                const confirmPassword = $("#password_confirmation").val().trim();
                const errorMessage = password.length < 8 ? "La contraseña debe tener al menos 8 caracteres." : (password !== confirmPassword ? "Las contraseñas no coinciden." : "");

                $("#password1Error").text(errorMessage);
                $("#password").css("border", errorMessage ? "1px solid #dc3545" : "1px solid #198754");
                $("#password_confirmation").css("border", password === confirmPassword ? "1px solid #198754" : "1px solid #dc3545");

                checkFormValidity();
            });

            $("#cedula_input").on("input", function () {
                const input = $(this).val().trim();
                const cedulaStatus = $("#cedulaStatus");
                const errorSpan = $("#cedulaError");

                if (!input) {
                    errorSpan.text("El campo Cédula Representante es obligatorio.");
                    $(this).css("border", "1px solid #dc3545").css("box-shadow", "0 0 5px #dc3545");
                    return;
                }

                fetch(cedulaCheckUrl, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                        "X-CSRF-TOKEN": csrfToken,
                    },
                    body: JSON.stringify({cedula: input, user_type: $("#cedula_input").data("user")}),
                })
                    .then(response => response.json())
                    .then(data => {
                        cedulaStatus.html(data.exists ? '<div style="font-size: 80%; color:#dc3545;">La cédula ya ha sido registrada.</div>' : '');
                        $(this).css("border", data.exists ? "1px solid #dc3545" : "1px solid #198754").css("box-shadow", data.exists ? "0 0 5px #dc3545" : "0 0 5px #198754");
                    })
                    .catch(error => console.error("Error:", error));

                checkFormValidity();
            });

            $("#terms, #password, #password_confirmation").on("input change", checkFormValidity);

            $("#registerFormClient").on("submit", function (e) {
                e.preventDefault();

                $("#submitButton").prop("disabled", true);
                $("#preloader").show();
                const recaptchaResponse = grecaptcha.getResponse();

                if (recaptchaResponse.length === 0) {
                    Swal({
                        type: "error",
                        /*title: "Oops...",*/
                        title: "Por favor, verifica que no eres un robot.",
                        timer: 6000,
                    });
                    $("#preloader").hide();
                    $("#submitButton").prop("disabled", false);
                    return;
                }
                let formData = new FormData(this);

                $.ajax({
                    type: "POST",
                    url: $(this).attr("action"),
                    data: formData,
                    contentType: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        "X-Requested-With": "XMLHttpRequest",
                    },
                    success: function (response) {
                        console.log(response, ' response')
                        if (!response.state) {
                            $("#preloader").hide();
                            $("#submitButton").prop("disabled", false);
                            Swal({
                                type: "error",
                                /*title: "Oops...",*/
                                title: response.message,
                                timer: 6000,
                            }).then(() => {
                                grecaptcha.reset();
                            });
                        } else {
                            window.location.href = response.redirect;
                        }
                    },
                });
            });
        });

    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.layouts.register', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/devs.lapieza.net/resources/views/frontend/registro-comercio/views/buyers/index.blade.php ENDPATH**/ ?>