@extends('adminlte::page')

@section('title', 'Admin Dashboard')

@section('adminlte_css')
    <link rel="stylesheet" href="{{ asset('vendor/fontawesome-free/css/all.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/custom_admin.css') }}">
@stop

@section('js')
    <script>
        // Auto-hide Bootstrap alerts after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                // Skip alerts that already have auto-hide functionality
                if (alert.dataset.autoHide === 'false') {
                    return;
                }
                
                // Set up auto-hide timer
                const autoHideTimer = setTimeout(function() {
                    hideAlert(alert);
                }, 5000); // 5 seconds delay
                
                // Handle manual close buttons for dismissible alerts (Bootstrap 4 & 5)
                const closeButton = alert.querySelector('.close, [data-dismiss="alert"], [data-bs-dismiss="alert"], .btn-close');
                if (closeButton) {
                    closeButton.addEventListener('click', function(e) {
                        e.preventDefault();
                        clearTimeout(autoHideTimer); // Cancel auto-hide timer
                        hideAlert(alert);
                    });
                }
                
                // Function to hide alert with fade-out effect
                function hideAlert(alertElement) {
                    // Check if jQuery is available and use it for smooth fade-out
                    if (typeof $ !== 'undefined' && $.fn.fadeOut) {
                        $(alertElement).fadeOut(500, function() {
                            $(this).remove();
                        });
                    } else {
                        // Fallback to vanilla JavaScript
                        alertElement.style.transition = 'opacity 0.5s ease-out';
                        alertElement.style.opacity = '0';
                        
                        // Remove the alert after fade-out
                        setTimeout(function() {
                            if (alertElement.parentNode) {
                                alertElement.remove();
                            }
                        }, 500);
                    }
                }
            });
            
            // Bootstrap custom file input functionality
            document.addEventListener('change', function(e) {
                if (e.target && e.target.type === 'file') {
                    const label = e.target.closest('.custom-file')?.querySelector('.custom-file-label');
                    if (label) {
                        label.textContent = Array.from(e.target.files).map(f => f.name).join(', ') || 'Choose file';
                    }
                }
            }, true);
        });
    </script>
@stop