@extends('externo/layout')
@section('contenido')
<div class="page-title-area">
    <img src="{!! asset('externo/assets/img/home-one/footer-car.png') !!}" alt="Title">
    <div class="container">
        <div class="page-title-content">
            <h2>Registrarse</h2>
            <ul>
                <li>
                    <a href="{{ route('index') }}">Inicio</a>
                </li>
                <li>
                    <i class='bx bx-chevron-right'></i>
                </li>
                <li>Registrarse</li>
            </ul>
        </div>
    </div>
</div>
<div class="signup-area pt-100 pb-70">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-6">
                <div class="signup-item">
                    <h2>¡BIENVENIDO!</h2>
                    <p>Transforma la manera en que gestionas tu taller con la herramienta definitiva para mecánicos. Nuestro sistema reúne en un solo lugar todo lo que necesitas: un directorio completo de códigos DTC, acceso rápido a manuales vehiculares, un directorio de talleres, y un CRM especializado que simplifica y optimiza la administración de tu negocio. Imagina tener todo al alcance de tu mano, sin perder tiempo buscando información. Con esta solución todo-en-uno, podrás trabajar de manera más eficiente, ofrecer un mejor servicio a tus clientes y maximizar tu productividad. Regístrate hoy y lleva tu taller al siguiente nivel.</p>
                    {{-- <h3>Ingresa con una cuenta:</h3>
                    <ul>
                        <li>
                            <a href="#">
                                <i class='bx bxl-facebook'></i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class='bx bxl-google'></i>
                            </a>
                        </li>
                    </ul> --}}
                </div>
            </div>
            <div class="col-lg-6">
                <form action="{{ route('register.cliente.registro') }}" id="id-form" method="POST">
                    @csrf
                    <div class="signup-item">
                        <div class="row justify-content-center">
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Nombre del taller:</label>
                                    <input type="text" name="establecimiento" id="establecimiento" class="form-control" placeholder="Nombre del taller" value="{{ old('establecimiento') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Nombre:</label>
                                    <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Nombre completo" value="{{ old('nombre') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Correo Electrónico:</label>
                                    <input type="text" name="email" id="email" class="form-control" placeholder="ejemplo@correo.com" value="{{ old('email') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Teléfono WhatsApp:</label>
                                    <input type="text" name="telefono" id="telefono" class="form-control" placeholder="1234 5678" value="{{ old('telefono') }}" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Contraseña:</label>
                                    <input type="password" id="password" name="password" class="form-control" placeholder="Crea una contraseña" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <label>Confirmar contraseña:</label>
                                    <input type="password" class="form-control" id="confirmPassword" name="password_confirmation" placeholder="Confirma tu contraseña" required>
                                </div>
                            </div>
                            <div class="col-lg-6 col-12">
                                <div class="form-group">
                                    <input type="checkbox" id="term-cdn" name="termcdn" class="termcdn" value="1" {{ old('term-cdn') ? 'checked' : '' }}>
                                    <label for="term-cdn">Acepto los <a href="https://corporativoloruna.com/terminos-y-condiciones-.html" style="color: #fdb819" target="_blank">Términos y Condiciones</a></label>
                                </div>
                            </div>
                            <!-- Botón de envío con reCAPTCHA Enterprise -->
                            <div class="text-center">
                                <button type="button" class="btn signup-btn" onclick="onClick(event)">Registrarse</button>
                                <div id="wallet_container" class="btnMP"></div>
                            </div>
                            <span>¿Ya tienes una cuenta? <a href="{{ route('login.cliente') }}">Iniciar sesión</a></span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <script>
                        $(document).ready(function() {
                                Swal.fire({
                                    title: '¡Error!',
                                    text: '{{ $error }}',
                                    icon: 'error',
                                    confirmButtonText: 'OK'
                                });
                            });
                    </script>
                @endforeach
            </ul>
        </div>
    @endif
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://sdk.mercadopago.com/js/v2"></script>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=6LffPXgqAAAAAHBhMA8D_a9wJJfEc7rdi47OgxLV"></script>
    <script>
        function onClick(e) {
            e.preventDefault(); // Evita el envío inmediato del formulario
            grecaptcha.enterprise.ready(async () => {
                const token = await grecaptcha.enterprise.execute('6LffPXgqAAAAAHBhMA8D_a9wJJfEc7rdi47OgxLV', { action: 'submit' });
                // Agregar el token como un campo oculto en el formulario
                let form = document.getElementById('id-form');
                let input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'g-recaptcha-response';
                input.value = token;
                form.appendChild(input);
                form.submit(); // Envía el formulario
            });
        }
    </script>
    {{--
    <script>
        var rootUrl = "{{ url('/') }}";
        var token = "{{ csrf_token() }}";
        const MERCADOPAGO_PUBLIC_KEY = '{{ env('MERCADOPAGO_PUBLIC_KEY') }}';
    </script>
    <script src="{!! asset('assets/js/mp.js') !!}"></script> --}}
@endsection