@extends('layouts.kaiadmin.master')

@section('content')
<div class="container d-flex justify-content-center align-items-center" style="min-height: 50vh;">
    <div class="card shadow-lg p-4" style="max-width: 500px; width: 100%; border-radius: 15px;">
        <h2 class="text-center mb-4 text-primary">Crear Nuevo Usuario</h2>
        <form id="userCreationForm" action="{{ route('users.create') }}" method="POST">
            @csrf
            <div class="form-group mb-3">
                <label for="name" class="form-label">Nombre</label>
                <input 
                    type="text" 
                    name="name" 
                    id="name" 
                    class="form-control" 
                    placeholder="Ingresa el nombre del usuario" 
                    required>
            </div>
            <div class="form-group mb-4">
                <label for="email" class="form-label">Correo Electrónico</label>
                <input 
                    type="email" 
                    name="email" 
                    id="email" 
                    class="form-control" 
                    placeholder="Ingresa el correo electrónico" 
                    required>
            </div>
            <button type="submit" id="submitButton" class="btn btn-primary w-100">Crear Usuario</button>
        </form>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Check URL parameters for messages
    const urlParams = new URLSearchParams(window.location.search);
    const status = urlParams.get('status');
    const message = urlParams.get('message');
    
    if (status && message) {
        Swal.fire({
            icon: status === 'success' ? 'success' : 'error',
            title: status === 'success' ? 'Éxito' : 'Error',
            text: decodeURIComponent(message),
            confirmButtonText: 'Aceptar'
        });
    }
});

document.getElementById('userCreationForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    if (!this.checkValidity()) {
        Swal.fire({
            icon: 'error',
            title: 'Campos Requeridos',
            text: 'Por favor, complete todos los campos obligatorios.',
            confirmButtonText: 'Aceptar'
        });
        return;
    }
    
    const result = await Swal.fire({
        icon: 'question',
        title: '¿Estás seguro?',
        text: 'Confirma la creación del nuevo usuario',
        showCancelButton: true,
        confirmButtonText: 'Sí, crear usuario',
        cancelButtonText: 'Cancelar'
    });
    
    if (result.isConfirmed) {
        // Si se confirma, envía el formulario y muestra un SweetAlert de éxito o error según sea el caso.
        this.submit();

    }

    Swal.fire({
            icon: 'success',
            title: 'Usuario Creado',
            text: 'El usuario ha sido creado exitosamente.',
            confirmButtonText: 'Aceptar'
        });
});
</script>
@endpush