@extends('externo.layout')
@section('contenido')
    <style>
        .checkout .icon-block i {
            position: absolute;
            top: 8px;
            right: 16px;
            font-size: 24px;
            color: #7A7F85;
        }
    </style>
<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>
                </div>
            </div>
            <div class="col-lg-6">
                <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" 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" 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="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" 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" 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" id="confirmPassword" class="form-control" placeholder="Confirma tu contraseña" required>
                            </div>
                        </div>
                        <div class="col-lg-12 col-12">
                            <div class="form-group">
                                <input type="checkbox" id="term-cdn" 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 registro con MercadoPago -->
                        <div class="col-lg-12 text-center">
                            <button type="button" id="checkout-btn-mercadoPago" class="btn signup-btn">Registrarse</button>
                            <div id="wallet_container" class="btnMP mt-3" style="display: none;"></div>
                        </div>
                        <div class="col-lg-12 text-center mt-3">
                            <span>¿Ya tienes una cuenta? <a href="{{ route('login.cliente') }}">Iniciar sesión</a></span>
                        </div>
                    </div>
                </div>
            </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>
    var rootUrl = "{{ url('/') }}";
    var csrfToken = "{{ csrf_token() }}";
    //const MERCADOPAGO_PUBLIC_KEY = '{{ env('MERCADOPAGO_PUBLIC_KEY') }}';
    const MERCADOPAGO_PUBLIC_KEY = 'APP_USR-734157e3-45c9-46cd-b734-6a7dbd3a5f49';
    </script>
    <script src="{!! asset('assets/js/mp.js') !!}"></script>

@endsection