{{-- DASHBOARD VERSION 2026-08-22-FIX --}}
@extends('student.layouts.app')

@section('content')

    <!-- WELCOME CARD -->
    <div class="bg-gradient-to-br from-indigo-600 to-indigo-800 mx-4 mt-4 p-5 rounded-3xl text-white shadow-xl relative overflow-hidden">
        <div class="flex items-center gap-4 relative z-10">
            <img src="{{ $photoPath }}" alt="{{ $student->student_name ?? 'Student' }}" class="w-14 h-14 rounded-full border-2 border-white/40 object-cover shadow-md flex-shrink-0">
            <div class="flex-1 min-w-0">
                <h2 class="text-xs font-medium opacity-90">Welcome,</h2>
                <p class="text-lg font-extrabold leading-tight truncate">{{ $student->student_name ?? Session::get('user_name') }}!</p>
                
                <!-- CLASS & SECTION: Locked in one row, never wraps -->
                <div class="mt-2 flex items-center gap-2 overflow-hidden">
                    <span class="inline-flex items-center gap-1.5 bg-white/20 px-2.5 py-1 rounded-lg text-[11px] font-bold backdrop-blur-sm whitespace-nowrap flex-shrink-0">
                        <i class="fa-solid fa-graduation-cap text-[10px]"></i>
                        <span class="truncate max-w-[90px]">{{ $student->seeking_class ?? 'N/A' }}</span>
                    </span>
                    <span class="inline-flex items-center gap-1.5 bg-white/20 px-2.5 py-1 rounded-lg text-[11px] font-bold backdrop-blur-sm whitespace-nowrap flex-shrink-0">
                        <i class="fa-solid fa-users text-[10px]"></i>
                        <span class="truncate max-w-[70px]">Sec {{ $student->section ?? 'N/A' }}</span>
                    </span>
                </div>
            </div>
        </div>
        
        <div class="mt-4 flex items-center gap-2 bg-white/20 w-fit px-3 py-1 rounded-full text-[10px] font-bold uppercase">
            <i class="fa-solid fa-circle text-[6px] text-green-400 animate-pulse"></i> Online
        </div>

        <div class="absolute -top-10 -right-10 w-28 h-28 bg-white/10 rounded-full"></div>
        <div class="absolute -bottom-4 -left-4 w-16 h-16 bg-white/10 rounded-full"></div>
    </div>

    <!-- TODAY'S OVERVIEW -->
    <h3 class="text-slate-700 font-bold text-sm mb-3 mt-6 px-4 flex items-center gap-2">
        <i class="fa-solid fa-calendar-day text-indigo-500 text-xs"></i> Today's Overview
    </h3>

    <div class="grid grid-cols-3 gap-2 px-4 mb-6">
        {{-- Homework Count --}}
        <a href="{{ route('student.homework.index', ['slug' => session('student_school_slug')]) }}" class="bg-white py-3 px-2 rounded-xl border border-slate-100 shadow-sm text-center relative block">
            <p class="text-xl font-black text-amber-600 leading-none">{{ $dashHwCount ?? 0 }}</p>
            <p class="text-[9px] font-bold text-slate-400 uppercase tracking-wider mt-1">Homework</p>
            @if(($dashHwCount ?? 0) > 0)
            <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
            @endif
        </a>

        {{-- Notices Count --}}
        <a href="{{ route('student.notice.list', ['slug' => session('student_school_slug')]) }}" class="bg-white py-3 px-2 rounded-xl border border-slate-100 shadow-sm text-center relative block">
            <p class="text-xl font-black text-orange-600 leading-none">{{ $unreadNoticeCount ?? 0 }}</p>
            <p class="text-[9px] font-bold text-slate-400 uppercase tracking-wider mt-1">Notices</p>
            @if(($unreadNoticeCount ?? 0) > 0)
                <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
            @endif
        </a>

        {{-- Chats Count --}}
        <a href="{{ route('student.chats.list', ['slug' => session('student_school_slug')]) }}" class="bg-white py-3 px-2 rounded-xl border border-slate-100 shadow-sm text-center relative block">
            <p class="text-xl font-black text-indigo-600 leading-none">{{ $unreadCount ?? 0 }}</p>
            <p class="text-[9px] font-bold text-slate-400 uppercase tracking-wider mt-1">Chats</p>
            @if(($unreadCount ?? 0) > 0)
                <span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
            @endif
        </a>
    </div>

     <!-- QUICK ACTIONS -->
        <h3 class="text-slate-700 font-bold text-sm mb-3 px-4 flex items-center gap-2">
            <i class="fa-solid fa-bolt text-indigo-500 text-xs"></i> Quick Actions
        </h3>
        
        {{-- ROW 1: HOMEWORK | NOTICES | CHAT --}}
        <div class="grid grid-cols-3 gap-2 px-4 mb-2">
            {{-- 1. Homework --}}
            <a href="{{ route('student.homework.index', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-amber-50/60 p-3 rounded-2xl border border-amber-100 shadow-sm hover:shadow-lg hover:shadow-amber-100/50 hover:border-amber-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-amber-400 to-amber-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-amber-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-book-open text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-slate-800 leading-tight">Homework</h4>
                <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Assignments</p>
                @if(($dashHwCount ?? 0) > 0)
                    <div class="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 bg-red-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
                        {{ $dashHwCount > 9 ? '9+' : $dashHwCount }}
                    </div>
                @endif
            </a>
            {{-- 2. Notices --}}
            <a href="{{ route('student.notice.list', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-orange-50/60 p-3 rounded-2xl border border-orange-100 shadow-sm hover:shadow-lg hover:shadow-orange-100/50 hover:border-orange-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-orange-400 to-orange-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-orange-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-bullhorn text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-slate-800 leading-tight">Notices</h4>
                <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Updates</p>
                @if(($unreadNoticeCount ?? 0) > 0)
                    <div class="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 bg-red-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
                        {{ $unreadNoticeCount > 9 ? '9+' : $unreadNoticeCount }}
                    </div>
                @endif
            </a>
            {{-- 3. Chat --}}
            <a href="{{ route('student.chats.list', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-indigo-50/60 p-3 rounded-2xl border border-indigo-100 shadow-sm hover:shadow-lg hover:shadow-indigo-100/50 hover:border-indigo-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-indigo-400 to-indigo-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-indigo-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-message text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-slate-800 leading-tight">Chat</h4>
                <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Teachers</p>
                @if(($unreadCount ?? 0) > 0)
                    <div class="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 bg-red-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
                        {{ $unreadCount > 9 ? '9+' : $unreadCount }}
                    </div>
                @endif
            </a>
        </div>

        {{-- ROW 2: APPLICATIONS | ONLINE CLASSES | PROFILE --}}
        <div class="grid grid-cols-3 gap-2 px-4 mb-6">
            {{-- 4. Applications --}}
            <a href="{{ route('student.applications.index', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-emerald-50/60 p-3 rounded-2xl border border-emerald-100 shadow-sm hover:shadow-lg hover:shadow-emerald-100/50 hover:border-emerald-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-emerald-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-emerald-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-file-lines text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-slate-800 leading-tight">Applications</h4>
                <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Leave & Docs</p>
                @if(isset($unreadApplicationsCount) && $unreadApplicationsCount > 0)
                    <span class="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 bg-red-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
                        {{ $unreadApplicationsCount > 9 ? '9+' : $unreadApplicationsCount }}
                    </span>
                @endif
            </a>

            {{-- 5. Online Classes --}}
            <a href="{{ route('student.online_classes.index', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-blue-50/60 p-3 rounded-2xl border border-blue-100 shadow-sm hover:shadow-lg hover:shadow-blue-100/50 hover:border-blue-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-blue-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-video text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-slate-800 leading-tight">Online Class</h4>
                <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Join Live</p>
                @if(count($upcomingClasses ?? []) > 0)
                    <span class="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 bg-blue-500 text-white text-[9px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
                        {{ count($upcomingClasses) }}
                    </span>
                @endif
            </a>

            {{-- 6. Profile --}}
            <a href="{{ route('student.profile', ['slug' => session('student_school_slug')]) }}" 
            class="group bg-gradient-to-b from-white to-gray-50/60 p-3 rounded-2xl border border-gray-200 shadow-sm hover:shadow-lg hover:shadow-gray-200/50 hover:border-gray-300 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
                <div class="w-10 h-10 bg-gradient-to-br from-gray-400 to-gray-600 text-white rounded-2xl flex items-center justify-center mb-1.5 shadow-lg shadow-gray-200 group-hover:scale-110 transition-transform duration-300">
                    <i class="fa-solid fa-child text-xs"></i>
                </div>
                <h4 class="text-[11px] font-black text-gray-800 leading-tight">Profile</h4>
                <p class="text-[9px] font-semibold text-gray-400 mt-0.5">My Record</p>
            </a>
        </div>

        {{-- UPCOMING ONLINE CLASSES SECTION --}}
        @if(isset($upcomingClasses) && count($upcomingClasses) > 0)
        <div id="onlineClassesSection" class="mt-2 px-4 mb-6">
            <h3 class="text-slate-700 font-bold text-sm mb-3 flex items-center gap-2">
                <i class="fa-solid fa-video text-blue-500 text-xs"></i> Upcoming Classes
            </h3>
            <div class="space-y-3">
                @foreach($upcomingClasses as $cls)
                @php
                    $startTime = \Carbon\Carbon::parse($cls->start_time)->format('h:i A');
                    $dateStr = \Carbon\Carbon::parse($cls->class_date)->format('d M Y');
                @endphp
                <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 relative overflow-hidden">
                    <div class="flex items-start justify-between gap-2">
                        <div class="flex-1 min-w-0">
                            <h4 class="font-bold text-slate-800 text-sm truncate">{{ $cls->title }}</h4>
                            <p class="text-[11px] text-slate-500 font-medium mt-0.5">
                                <i class="fa-solid fa-book-open text-amber-500 mr-0.5"></i> {{ $cls->subject }}
                            </p>
                            <p class="mt-1.5 text-xs font-bold text-slate-700">
                                <i class="fa-regular fa-calendar-days text-slate-400 mr-1"></i>{{ $dateStr }}
                                <span class="mx-1 text-slate-300">|</span>
                                <i class="fa-regular fa-clock text-slate-400 mr-1"></i>{{ $startTime }}
                            </p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <a href="{{ $cls->class_link }}" target="_blank" 
                            data-start="{{ $cls->start_ts }}"
                            class="join-btn block w-full py-2.5 rounded-xl text-[11px] font-black text-center uppercase tracking-wide transition-all
                            {{ $cls->is_startable ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg shadow-green-200 blink-active' : 'bg-slate-100 text-slate-400 pointer-events-none' }}">
                            <i class="fa-solid fa-video mr-1"></i>
                            <span class="btn-label">{{ $cls->is_startable ? 'Join Class Now' : 'Starts at ' . $startTime }}</span>
                        </a>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
        @endif

        <style>
        /* ✅ Blinking effect for the JOIN button once enabled */
        @keyframes blinkGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
            50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
        }
        .blink-active { animation: blinkGlow 1.2s infinite; }
        </style>

        <script>
        // ✅ Sync client clock with server clock for Online Classes
        const serverNowMs = {{ \Carbon\Carbon::now()->timestamp }} * 1000;
        const offset = serverNowMs - Date.now();

        setInterval(() => {
            const now = Date.now() + offset;
            document.querySelectorAll('.join-btn').forEach(btn => {
                const startMs = parseInt(btn.dataset.start) * 1000;
                if (now >= startMs - 120000) { // 2 minutes before
                    btn.classList.remove('bg-slate-100','text-slate-400','pointer-events-none');
                    btn.classList.add('bg-gradient-to-r','from-green-500','to-emerald-600','text-white','shadow-lg','shadow-green-200','blink-active');
                    const label = btn.querySelector('.btn-label');
                    if (label && !label.dataset.live) { label.textContent = 'Join Class Now'; label.dataset.live = '1'; }
                }
            });
        }, 1000);
        </script>

    <!-- Latest Notices Section -->
    @if(isset($notices) && $notices->isNotEmpty())
    <div class="mt-6 px-4 mb-8">
        <div class="flex justify-between items-center mb-3">
            <h3 class="text-slate-700 font-bold text-sm flex items-center gap-2">
                <i class="fa-solid fa-bullhorn text-orange-500 text-xs"></i> Latest Notices
            </h3>
            <a href="{{ route('student.notice.list', ['slug' => session('student_school_slug')]) }}" class="text-indigo-600 text-xs font-bold hover:underline">View All</a>
        </div>
        
        <div class="space-y-3">
            @foreach($notices as $notice)
            <a href="{{ route('student.notice.view', ['id' => $notice->id, 'slug' => session('student_school_slug')]) }}" class="block bg-white p-4 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all {{ $notice->is_pinned ? 'ring-2 ring-indigo-100 border-indigo-200' : '' }}">
                <div class="flex gap-4 items-start">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 {{ $notice->category == 'Urgent' ? 'bg-red-100 text-red-600' : 'bg-indigo-100 text-indigo-600' }}">
                        <i class="fa-solid {{ $notice->category == 'Urgent' ? 'fa-triangle-exclamation' : 'fa-bullhorn' }} text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <h4 class="font-bold text-slate-800 text-sm truncate">{{ $notice->title }}</h4>
                            @if(empty($notice->is_read))
                            <span class="bg-red-100 text-red-600 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase flex-shrink-0">New</span>
                            @endif
                            @if($notice->is_pinned)
                            <span class="bg-indigo-100 text-indigo-600 px-1.5 py-0.5 rounded text-[9px] font-bold uppercase flex-shrink-0">Pinned</span>
                            @endif
                        </div>
                        <p class="text-slate-500 text-xs line-clamp-2 leading-relaxed mb-2">{{ $notice->content }}</p>
                        <div class="flex items-center gap-3 text-[10px] text-slate-400 font-medium">
                            <span><i class="fa-regular fa-calendar-days mr-1"></i> {{ \Carbon\Carbon::parse($notice->published_at)->format('d M, Y') }}</span>
                            <span class="px-2 py-0.5 rounded-full {{ $notice->category == 'Urgent' ? 'bg-red-50 text-red-600' : 'bg-slate-100 text-slate-600' }}">{{ $notice->category }}</span>
                        </div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- URGENT POPUP NOTICE --}}
    @if(isset($popupNotice) && $popupNotice)
    <div id="urgentPopup" class="fixed inset-0 z-[9999] hidden">
        <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-md transition-opacity duration-300" onclick="closePopup()"></div>
        <div class="absolute inset-0 flex items-center justify-center p-3 sm:p-4" style="perspective: 1000px;">
            <div id="popupCard" class="bg-white w-[92%] max-w-sm rounded-3xl border border-white/50 transform transition-all duration-500 ease-out relative overflow-hidden" style="box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); transform: rotateX(10deg) scale(0.9) translateY(20px); opacity: 0;">
                <div class="h-24 bg-gradient-to-br from-red-500 via-red-600 to-rose-700 flex items-center justify-center relative overflow-hidden">
                    <i class="fa-solid fa-triangle-exclamation text-white/10 text-8xl absolute right-2 -bottom-6 drop-shadow-2xl"></i>
                    <div class="text-center z-10 relative px-4">
                        <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-white/95 text-red-600 shadow-lg backdrop-blur">{{ $popupNotice->category }}</span>
                        <h3 class="text-white font-extrabold text-sm mt-2 drop-shadow-lg tracking-wide">Important Announcement</h3>
                    </div>
                    <button onclick="closePopup()" class="absolute top-2 right-2 w-8 h-8 bg-black/20 hover:bg-black/30 backdrop-blur rounded-full flex items-center justify-center text-white transition-all hover:scale-110 active:scale-95 border border-white/10">
                        <i class="fa-solid fa-xmark text-xs"></i>
                    </button>
                </div>
                <div class="p-6">
                    <div class="flex items-center gap-2 mb-3 flex-wrap">
                        <span class="text-slate-500 text-[10px] font-bold flex items-center gap-1.5 bg-slate-100 px-2.5 py-1 rounded-lg">
                            <i class="fa-regular fa-calendar-days text-slate-400"></i> {{ \Carbon\Carbon::parse($popupNotice->published_at)->format('d M, Y') }}
                        </span>
                        @if($popupNotice->is_pinned)
                        <span class="bg-indigo-100 text-indigo-600 px-2 py-1 rounded-lg text-[10px] font-bold flex items-center gap-1"><i class="fa-solid fa-pin text-[8px]"></i> Pinned</span>
                        @endif
                    </div>
                    <h2 class="text-lg font-extrabold text-slate-800 mb-3 leading-tight">{{ $popupNotice->title }}</h2>
                    <div class="prose max-w-none text-slate-600 text-xs leading-relaxed whitespace-pre-line mb-4 max-h-40 overflow-y-auto pr-2 custom-scrollbar">{{ $popupNotice->content }}</div>
                    @if($popupNotice->attachment)
                    <div class="p-3 bg-slate-50 border border-slate-100 rounded-xl flex items-center justify-between gap-3 mb-4">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center text-red-600 flex-shrink-0 shadow-sm"><i class="fa-solid fa-paperclip text-base"></i></div>
                            <div><p class="text-xs font-bold text-slate-700">Attachment</p><p class="text-[10px] text-slate-400">Tap to download</p></div>
                        </div>
                        <a href="{{ asset('storage/'.$popupNotice->attachment) }}" target="_blank" class="px-4 py-2 bg-red-600 text-white text-[11px] font-bold rounded-xl hover:bg-red-700 transition-all shadow-lg shadow-red-200 active:scale-95"><i class="fa-solid fa-download mr-1"></i> Download</a>
                    </div>
                    @endif
                    <div class="flex justify-center pt-1">
                        <button onclick="closePopup()" class="px-6 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-[11px] font-bold rounded-xl transition-all active:scale-95">Dismiss Notice</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const popup = document.getElementById('urgentPopup');
            const card = document.getElementById('popupCard');
            popup.classList.remove('hidden');
            requestAnimationFrame(() => { card.style.transform = 'rotateX(0deg) scale(1) translateY(0)'; card.style.opacity = '1'; });
        });
        function closePopup() {
            const popup = document.getElementById('urgentPopup');
            const card = document.getElementById('popupCard');
            card.style.transform = 'rotateX(10deg) scale(0.9) translateY(20px)'; card.style.opacity = '0';
            setTimeout(() => popup.classList.add('hidden'), 350);
        }
    </script>
    @endif
@endsection