@extends('externo/layout')
@section('contenido')
<!-- Page Title -->
<div class="page-title-area">
    <style>
        /* Estilos para el loader */
        #loader {
            display: none;
            position: fixed;
            z-index: 9999;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            font-family: Arial, sans-serif;
        }
        #loader .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /* Estilo del texto */
        #loader h2 {
            font-size: 24px;
            color: #3498db; /* Mismo color que los círculos */
            font-weight: bold; /* Texto más grueso */
            margin-bottom: 20px;
        }
        #loader p {
            color: #3498db; /* Mismo color que los círculos */
            margin-top: 20px;
        }
        /* Ajuste del spinner */
        #loader .spinner {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        #loader .spinner div {
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: #3498db;
            border-radius: 100%;
            -webkit-animation: sk-bounce 1.4s infinite ease-in-out both;
            animation: sk-bounce 1.4s infinite ease-in-out both;
        }
        @keyframes sk-bounce {
            0%, 100% { transform: scale(0.0) }
            50% { transform: scale(1.0) }
        }
    </style>
    <img src="{!! asset('externo/assets/img/home-one/footer-car.png') !!}" alt="Title">
    <div class="container">
        <div class="page-title-content">
            <h2>Compra confirmada</h2>
            <ul>
                <li>
                    <a href="{{ route('index') }}">Inicio</a>
                </li>
                <li>
                    <i class='bx bx-chevron-right'></i>
                </li>
                <li>Compra confirmada</li>
            </ul>
        </div>
    </div>
</div>
<!-- End Page Title -->
<!-- Sign Up -->
<div class="signup-area pt-100 pb-70">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-12">
                <div class="signup-item text-center">
                    <h2 class="text-center mb-4">Gracias por confirmar</h2>
                        <form action="{{ route('confirmado', $cliente) }}" method="POST" id="confirmForm">
                            @csrf
                            <div class="signup-item">
                                <div class="row justify-content-center">
                                    <div class="col-lg-6 col-12">
                                        <button class="btn btn-success " type="submit" id="btn">
                                            <i class="bx bxs-car-wash"></i> Ingresar al sistema
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    <!-- Loader -->
                    <div id="loader">
                        <div class="content">
                            <div class="spinner">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <h2>El blog del auto</h2> <!-- Texto -->
                            <p>La instalación está en proceso y podría tardar hasta 5 minutos. Le pedimos que no cierre ni actualice la página. Por favor, manténgase a la espera...</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.getElementById('confirmForm').addEventListener('submit', function(event) {
        // Mostrar el loader
        document.getElementById('loader').style.display = 'block';
        // Deshabilitar el botón para evitar múltiples envíos
        document.getElementById('btn').disabled = true;
    });
</script>
@if ($mensaje = Session::get('success'))
<script>
    $(document).ready(function() {
            Swal.fire({
                title: '¡Éxito!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonText: 'OK'
            });
        });
</script>
@endif
@if ($mensaje = Session::get('danger'))
<script>
    $(document).ready(function() {
            Swal.fire({
                title: '¡Error!',
                text: '{{ session('danger') }}',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
</script>
@endif
@if ($mensaje = Session::get('info'))
<script>
    $(document).ready(function() {
            Swal.fire({
                title: '¡Atención!',
                text: '{{ session('info') }}',
                icon: 'info',
                confirmButtonText: 'OK'
            });
        });
</script>
@endif
@if ($mensaje = Session::get('warning'))
<script>
    $(document).ready(function() {
            Swal.fire({
                title: '¡Error!',
                text: '{{ session('warning') }}',
                icon: 'error',
                confirmButtonText: 'OK'
            });
        });
</script>
@endif
@endsection