@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') }}">
    
    {{-- Stack for additional CSS --}}
    @stack('css')
@stop

@section('adminlte_js')
    {{-- Toast Notifications (load first so AdminToastManager is available) --}}
    @include('components.admin-toast-notifications')
    
    {{-- Admin Common JS (loads after toast system) --}}
    <script src="{{ asset('assets/js/admin-common.js') }}"></script>
    
    <!-- Admin Panel Loading Spinner -->
    <div class="admin-spinner-overlay show" id="adminSpinner">
        <div class="admin-spinner-container">
            <div class="admin-spinner">
                <div class="admin-spinner-inner"></div>
            </div>
        </div>
    </div>

    <!-- Spinner Management Script -->
    <script>
        (function() {
            'use strict';
            
            const spinner = document.getElementById('adminSpinner');
            
            function hideSpinner() {
                if (spinner) {
                    spinner.classList.remove('show');
                    document.body.classList.add('admin-content-loaded');
                }
            }
            
            // Auto-hide after page load
            setTimeout(hideSpinner, 1000);
            window.addEventListener('load', hideSpinner);
            
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', hideSpinner);
            } else {
                hideSpinner();
            }
            
            // Global API
            window.showAdminSpinner = function() {
                if (spinner) spinner.classList.add('show');
            };
            
            window.hideAdminSpinner = hideSpinner;
        })();
    </script>
    
    {{-- Stack for additional JS --}}
    @stack('js')
    
    {{-- Yield custom JS from child views --}}
    @yield('js')
@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