@props([
    'title',
    'subtitle' => null,
    'icon' => 'file-alt',
    'theme' => 'purple' // purple, teal, success, warning
])

<div class="modern-page-header">
    <div class="header-left">
        <div class="icon-wrapper theme-{{ $theme }}">
            <i class="fas fa-{{ $icon }}"></i>
        </div>
        <div class="header-title">
            <h1>{{ $title }}</h1>
            @if($subtitle)
                <div class="header-subtitle">{{ $subtitle }}</div>
            @endif
        </div>
    </div>

    <div class="datetime-display">
        <div class="date-box">
            <i class="far fa-calendar-alt"></i>
            <span id="day">{{ now()->format('l') }}</span>,
            <span id="daynum">{{ now()->format('d') }}</span>
            <span id="month">{{ now()->format('F') }}</span>
            <span id="year">{{ now()->format('Y') }}</span>
        </div>
        <div class="time-box theme-{{ $theme }}">
            <i class="far fa-clock"></i>
            <span class="display-time"></span>
        </div>
    </div>
</div>

@once
    @push('scripts')
    <script>
        // Live time update
        function updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const timeElements = document.querySelectorAll('.display-time');
            timeElements.forEach(el => {
                el.textContent = `${hours}:${minutes}:${seconds}`;
            });
        }

        updateTime();
        setInterval(updateTime, 1000);
    </script>
    @endpush
@endonce
