@props([
    'url' => null,
    'cancelText' => 'Cancelar',
    'submitText' => 'GUARDAR DATOS',
    'cancelIcon' => 'fas fa-times',
    'submitIcon' => 'fas fa-save',
    'submitColor' => 'success',
])

<div {{ $attributes->merge(['class' => 'row mt-4']) }}>
    <div class="col-12 text-right">
        {{-- Botón Cancelar --}}
        <a href="{{ $url ?? url()->previous() }}" class="btn btn-outline-secondary btn-lg mr-2 font-weight-bold btn-cancel-form" title="{{ $cancelText }}">
            <i class="{{ $cancelIcon }} mr-1"></i> {{ $cancelText }}
        </a>

        {{-- Botón Guardar --}}
        <button type="submit" 
            class="btn btn-{{ $submitColor }} btn-lg font-weight-bold shadow btn-save-form"
            title="{{ $submitText }}"
            data-original-content='<i class="{{ $submitIcon }} mr-1"></i> {{ $submitText }}'
        >
            <i class="{{ $submitIcon }} mr-1"></i> {{ $submitText }}
        </button>
    </div>
</div>

@pushonce('js')
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // --- Advertencia en Botón Cancelar ---
        document.querySelectorAll('.btn-cancel-form').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                let url = this.getAttribute('href');
                Swal.fire({
                    title: '¿Cancelar operación?',
                    text: "Se perderán los datos que no hayas guardado.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#6c757d',
                    cancelButtonColor: '#fc544b',
                    confirmButtonText: 'Sí, salir',
                    cancelButtonText: 'Continuar editando',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        window.location.href = url;
                    }
                });
            });
        });

        // --- Advertencia en Botón Guardar ---
        document.querySelectorAll('.btn-save-form').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                let form = this.closest('form');
                if (!form) return;
                
                // Permitir omitir la confirmación mediante el atributo data-confirm="false" en el form
                if (form.getAttribute('data-confirm') === 'false') {
                    return;
                }

                e.preventDefault();
                
                // Ejecutar la validación nativa de HTML5 primero (required, email, etc.)
                if (typeof form.checkValidity === 'function' && !form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                Swal.fire({
                    title: '¿Procesar los datos?',
                    text: "Verifique que la información introducida sea correcta.",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: '<i class="fas fa-save"></i> Sí, guardar',
                    cancelButtonText: 'Revisar',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        btn.disabled = true;
                        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Procesando...';
                        
                        if (typeof form.requestSubmit === 'function') {
                            form.requestSubmit(btn);
                        } else {
                            form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
                        }
                    }
                });
            });
        });
    });
</script>
@endpushonce