@extends("theme.sneat.blank")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
<div class="d-flex justify-content-center align-items-center min-vh-100">
    <div class="col-md-6">
        <div class="card shadow-lg" id="facturacionCard">
            <!-- Encabezado con opacidad -->
            <div class="card-header text-center bg-light text-white" style="opacity: 0.8;">
                <img src="https://app.proalmar.cl/public/assets/sneat/img/icons/brands/logo.png" alt="Logo" width="120">
                <h3 class="mb-0 mt-2 text-dark" style="font-weight: 1000;">DATOS DE FACTURACIÓN</h3>
            </div>

            <div class="card-body">
                <form id="facturacionForm">
                    <div class="mb-3 mt-3">
                        <label for="mesa" class="form-label">Mesa</label>
                        <input type="text" class="form-control input-sin-espacios" id="mesa" name="mesa" placeholder="Número de mesa" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="rut" class="form-label">RUT</label>
                        <input type="text" class="form-control input-sin-espacios" id="rut" name="rut" placeholder="Ej: 12345678-9" required>
                    </div>

                    <div class="mb-3">
                        <label for="razon_social" class="form-label">Razón Social</label>
                        <input type="text" class="form-control" id="razon_social" name="razon_social" placeholder="Ingrese la razón social" required>
                    </div>

                    <div class="mb-3">
                        <label for="giro" class="form-label">Giro</label>
                        <input type="text" class="form-control" id="giro" name="giro" placeholder="Ingrese el giro" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="giro" class="form-label">Monto</label>
                        <input type="number" class="form-control" id="monto" name="monto" placeholder="Ingrese el monto" required>
                    </div>

                    <div class="mb-3">
                        <label for="direccion" class="form-label">Dirección</label>
                        <input type="text" class="form-control" id="direccion" name="direccion" placeholder="Ingrese la dirección" required>
                    </div>

                    <div class="mb-3">
                        <label for="correo" class="form-label">Correo Electrónico</label>
                        <input type="email" class="form-control" id="correo" name="correo" placeholder="ejemplo@email.com" required>
                    </div>

                    <div class="mb-3">
                        <label for="telefono" class="form-label">Teléfono</label>
                        <input type="tel" class="form-control input-sin-espacios" id="telefono" name="telefono" placeholder="Ej: 912345678" required>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-outline-primary">Enviar Información</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>

cargar_validaciones_custom();

$(document).ready(function () {

    // Quitar espacios en blanco mientras se escribe en ciertos campos
    $(".input-sin-espacios").on("input", function() {
        $(this).val($(this).val().replace(/\s+/g, ''));
    });

    // Formatear RUT al salir del campo
    $('#rut').change(function(){
        $(this).val(formatearRut($(this).val()));
    });

    $("#facturacionForm").validate({
        rules: {
            mesa: { required: true },
            razon_social: { required: true },
            giro: { required: true },
            monto: { required: true },
            direccion: { required: true },
            rut: { 
                required: true, 
                rut: true
            },
            correo: { required: true, email: true },
            telefono: { required: true, minlength: 9 }
        },
        messages: {
            mesa: "Ingrese el número de mesa.",
            razon_social: "Ingrese la razón social.",
            giro: "Ingrese el giro.",
            monto: "Ingrese el monto.",
            direccion: "Ingrese la dirección.",
            rut: "Ingrese un RUT válido (Ej: 12345678-9).",
            correo: "Ingrese un correo electrónico válido.",
            telefono: "Ingrese un teléfono válido (Ej: 912345678)."
        },
        submitHandler: function (form) {
            $.ajax({
                url: "{{ url('guardar-facturacion') }}", 
                type: "POST",
                data: $("#facturacionForm").serialize(),
                headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content") },
                beforeSend: function() {
                    Swal.fire({
                        title: 'Enviando...',
                        text: 'Por favor, espere un momento.',
                        allowOutsideClick: false,
                        showConfirmButton: false,
                        didOpen: () => { Swal.showLoading(); }
                    });
                },
                success: function (response) {
                    // Cerrar el SweetAlert de "Enviando..."
                    Swal.close();
                
                    // Reemplazar el formulario con un mensaje de éxito
                    $("#facturacionCard").html(`
                        <div class="text-center py-5">
                            <img src="https://app.proalmar.cl/public/assets/sneat/img/icons/brands/logo.png" alt="Logo" width="300">
                            <h3 class="mt-3 text-success">¡Información enviada con éxito!</h3>
                            <p class="text-muted">Gracias por completar el formulario.</p>
                        </div>
                    `);
                },
                error: function (xhr) {
                    Swal.fire({
                        icon: "error",
                        title: "Error al guardar",
                        text: xhr.responseJSON ? xhr.responseJSON.message : "Ocurrió un error inesperado.",
                        showConfirmButton: true
                    });
                }
            });
        }
    });

});
</script>
@endsection