@extends('staff.layouts.app')

@section('title', 'Dashboard')

@section('content')
    <!-- WELCOME CARD -->
    <div class="bg-gradient-to-br from-amber-500 to-orange-600 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">
            <div class="w-14 h-14 rounded-full bg-white/20 border-2 border-white/40 flex items-center justify-center overflow-hidden">
                <img src="{{ $photoPath }}" alt="{{ $staff->staff_name ?? 'Staff' }}" class="w-full h-full object-cover">
            </div>
            <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">{{ Session::get('user_name') }}</p>
                <p class="text-[10px] opacity-75 mt-0.5">{{ $staff->designation ?? 'Staff Member' }}</p>
            </div>
        </div>
        
        <div class="mt-4 flex items-center justify-between">
            <div class="flex items-center gap-2 bg-white/20 px-3 py-1 rounded-full text-[10px] font-bold uppercase">
                <i class="fa-solid fa-circle text-[6px] text-green-300 animate-pulse"></i> Online
            </div>
            <div class="text-right">
                <p class="text-[10px] opacity-75">Dept</p>
                <p class="text-xs font-bold truncate max-w-[120px]">{{ $staff->department ?? '—' }}</p>
            </div>
        </div>

        <div class="absolute -top-8 -right-8 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 px-4 flex items-center gap-2">
    <i class="fa-solid fa-calendar-day text-amber-500 text-xs"></i> Today's Overview
</h3>

<!-- {{-- ✅ ADMIN STATS CARDS (Principal, Coordinator, Reception ONLY) --}}
@if(in_array(strtoupper($staff->designation), ['PRINCIPAL', 'COORDINATOR', 'RECEPTION']))
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 px-4 mb-4">
    <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'submitted']) }}" class="block p-4 bg-red-50 border border-red-100 rounded-2xl shadow-sm active:scale-95 transition-transform">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-red-600 font-bold uppercase">Pending Review</p>
                <p class="text-2xl font-black text-red-700 mt-1">{{ $pendingAppsCount ?? 0 }}</p>
            </div>
            <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center text-red-600">
                <i class="fa-solid fa-clock text-lg"></i>
            </div>
        </div>
    </a>
    <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'processed']) }}" class="block p-4 bg-amber-50 border border-amber-100 rounded-2xl shadow-sm active:scale-95 transition-transform">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-amber-600 font-bold uppercase">Processed</p>
                <p class="text-2xl font-black text-amber-700 mt-1">{{ $processedAppsCount ?? 0 }}</p>
            </div>
            <div class="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center text-amber-600">
                <i class="fa-solid fa-gear text-lg"></i>
            </div>
        </div>
    </a>
    <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug'), 'status' => 'delivered']) }}" class="block p-4 bg-green-50 border border-green-100 rounded-2xl shadow-sm active:scale-95 transition-transform">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-green-600 font-bold uppercase">Delivered</p>
                <p class="text-2xl font-black text-green-700 mt-1">{{ $deliveredAppsCount ?? 0 }}</p>
            </div>
            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600">
                <i class="fa-solid fa-check-circle text-lg"></i>
            </div>
        </div>
    </a>
</div>
@endif-->

{{-- Standard 4-Column Overview Grid --}}
<div class="grid grid-cols-4 gap-2 px-4 mb-6">
    <div class="bg-white py-2.5 px-1 rounded-xl border border-slate-100 shadow-sm text-center">
        <p class="text-lg font-black text-slate-800 leading-none">{{ $assignedClassesCount ?? 0 }}</p>
        <p class="text-[7px] font-bold text-slate-400 uppercase tracking-wider mt-1">Classes</p>
    </div>
    <a href="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}" class="bg-white py-2.5 px-1 rounded-xl border border-slate-100 shadow-sm text-center relative block">
        <p class="text-lg font-black text-blue-600 leading-none">{{ $pendingHomework ?? 0 }}</p>
        <p class="text-[7px] font-bold text-slate-400 uppercase tracking-wider mt-1">Homework</p>
        @if(($pendingHomework ?? 0) > 0)
            <span class="absolute top-1.5 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
        @endif
    </a>
    <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug')]) }}" class="bg-white py-2.5 px-1 rounded-xl border border-slate-100 shadow-sm text-center relative block">
        <p class="text-lg font-black text-emerald-600 leading-none">{{ $pendingAppsCount ?? 0 }}</p>
        <p class="text-[7px] font-bold text-slate-400 uppercase tracking-wider mt-1">Applications</p>
        @if(($pendingAppsCount ?? 0) > 0)
            <span class="absolute top-1.5 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
        @endif
    </a>
    <a href="{{ route('staff.chats.list', ['slug' => session('staff_school_slug')]) }}" class="bg-white py-2.5 px-1 rounded-xl border border-slate-100 shadow-sm text-center relative block">
        <p class="text-lg font-black text-amber-600 leading-none">{{ $totalUnreadChats ?? 0 }}</p>
        <p class="text-[7px] font-bold text-slate-400 uppercase tracking-wider mt-1">Chats</p>
        @if(($totalUnreadChats ?? 0) > 0)
            <span class="absolute top-1.5 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-amber-500 text-xs"></i> Quick Actions
</h3>
<div class="grid grid-cols-3 gap-3 px-4 mb-6">
        {{-- 1. Homework Broadcast --}}
    <a href="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}" 
       class="group bg-gradient-to-b from-white to-blue-50/60 p-5 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-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-blue-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-pen-to-square text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">Homework</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Broadcast</p>
        @if(($pendingHomework ?? 0) > 0)
        <div class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
            {{ $pendingHomework > 9 ? '9+' : $pendingHomework }}
        </div>
        @endif
    </a>

    {{-- 2. Notices --}}
    <a href="{{ route('staff.notice.list', ['slug' => session('staff_school_slug')]) }}" 
       class="group bg-gradient-to-b from-white to-orange-50/60 p-5 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-12 h-12 bg-gradient-to-br from-orange-400 to-orange-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-orange-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-bullhorn text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">Notices</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Announce</p>
        @if(isset($unreadNoticeCount) && $unreadNoticeCount > 0)
        <div class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] 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. My Chats --}}
    <a href="{{ route('staff.chats.list', ['slug' => session('staff_school_slug')]) }}" 
       class="group bg-gradient-to-b from-white to-amber-50/60 p-5 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-12 h-12 bg-gradient-to-br from-amber-400 to-amber-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-amber-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-comments text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">My Chats</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Messages</p>
        @if(($totalUnreadChats ?? 0) > 0)
        <div class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
            {{ $totalUnreadChats > 9 ? '9+' : $totalUnreadChats }}
        </div>
        @endif
    </a>

    {{-- 4. Applications with Notification Count --}}
    <a href="{{ route('staff.applications.index', ['slug' => session('staff_school_slug')]) }}" 
    class="group bg-gradient-to-b from-white to-emerald-50/60 p-5 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-12 h-12 bg-gradient-to-br from-emerald-400 to-emerald-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-emerald-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-file-lines text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">Applications</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Forms & Requests</p>
        @if(isset($pendingAppsCount) && $pendingAppsCount > 0)
        <div class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md animate-pulse">
            {{ $pendingAppsCount > 9 ? '9+' : $pendingAppsCount }}
        </div>
        @endif
    </a>

    {{-- 5. My Students --}}
    <a href="{{ route('staff.my_students.list', ['slug' => session('staff_school_slug')]) }}" 
       class="group bg-gradient-to-b from-white to-indigo-50/60 p-5 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-12 h-12 bg-gradient-to-br from-indigo-400 to-indigo-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-indigo-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-user-group text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">My Students</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Class List</p>
    </a>

        {{-- 5b. Online Classes --}}
    <a href="{{ route('staff.online_classes.index', ['slug' => session('staff_school_slug')]) }}"
       class="group bg-gradient-to-b from-white to-rose-50/60 p-5 rounded-2xl border border-rose-100 shadow-sm hover:shadow-lg hover:shadow-rose-100/50 hover:border-rose-200 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
        <div class="w-12 h-12 bg-gradient-to-br from-rose-400 to-rose-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-rose-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-video text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">Online Class</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">Zoom / Meet</p>
    </a>

    {{-- 6. My Profile --}}
    <a href="{{ route('staff.profile', ['slug' => session('staff_school_slug')]) }}"
       class="group bg-gradient-to-b from-white to-slate-50/60 p-5 rounded-2xl border border-slate-200 shadow-sm hover:shadow-lg hover:shadow-slate-200/50 hover:border-slate-300 transition-all duration-300 active:scale-95 relative flex flex-col items-center text-center">
        <div class="w-12 h-12 bg-gradient-to-br from-slate-400 to-slate-600 text-white rounded-2xl flex items-center justify-center mb-3 shadow-lg shadow-slate-200 group-hover:scale-110 transition-transform duration-300">
            <i class="fa-solid fa-id-card text-sm"></i>
        </div>
        <h4 class="text-xs font-black text-slate-800 leading-tight">My Profile</h4>
        <p class="text-[9px] font-semibold text-slate-400 mt-0.5">View</p>
    </a>
</div>
<!-- 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('staff.notice.list', ['slug' => session('staff_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('staff.notice.view', ['slug' => session('staff_school_slug'), 'id' => $notice->id]) }}" 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>
    <br/>
</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 sm:max-w-md rounded-2xl 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), 0 0 0 1px rgba(255,255,255,0.2) inset, 0 0 30px rgba(239,68,68,0.12); transform: rotateX(10deg) scale(0.9) translateY(20px); opacity: 0;">
            
            {{-- Header Banner --}}
            <div class="h-24 sm:h-28 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-7xl sm:text-9xl absolute right-2 -bottom-4 sm:-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] sm:text-[11px] 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 sm:text-lg mt-1.5 sm:mt-2 drop-shadow-lg tracking-wide">Important Announcement</h3>
                </div>
                <button onclick="closePopup()" class="absolute top-2 right-2 sm:top-3 sm:right-3 w-8 h-8 sm:w-9 sm:h-9 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 sm:text-sm"></i>
                </button>
            </div>
            
            {{-- Body --}}
            <div class="p-5 sm:p-6 md:p-8">
                <div class="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4 flex-wrap">
                    <span class="text-slate-500 text-[10px] sm:text-xs font-bold flex items-center gap-1.5 bg-slate-100 px-2.5 sm:px-3 py-1 sm:py-1.5 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 sm:px-3 py-1 sm:py-1.5 rounded-lg text-[10px] sm:text-xs font-bold flex items-center gap-1">
                        <i class="fa-solid fa-pin text-[8px]"></i> Pinned
                    </span>
                    @endif
                </div>
                
                <h2 class="text-lg sm:text-xl md:text-2xl font-extrabold text-slate-800 mb-3 sm:mb-4 leading-tight">{{ $popupNotice->title }}</h2>
                
                <div class="prose max-w-none text-slate-600 text-xs sm:text-sm leading-relaxed whitespace-pre-line mb-4 sm:mb-6 max-h-40 sm:max-h-56 overflow-y-auto pr-2 custom-scrollbar">
                    {{ $popupNotice->content }}
                </div>

                @if($popupNotice->attachment)
                <div class="p-3 sm:p-4 bg-slate-50 border border-slate-100 rounded-xl sm:rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 mb-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 sm:w-11 sm:h-11 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 sm:text-lg"></i>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-bold text-slate-700">Attachment Available</p>
                            <p class="text-[10px] sm:text-[11px] text-slate-400">Click to view or download</p>
                        </div>
                    </div>
                    <a href="{{ asset('storage/'.$popupNotice->attachment) }}" target="_blank" 
                       class="w-full sm:w-auto px-4 sm:px-5 py-2 sm:py-2.5 bg-red-600 text-white text-[11px] sm:text-xs font-bold rounded-xl hover:bg-red-700 transition-all text-center shadow-lg shadow-red-200 hover:shadow-red-300 active:scale-95">
                        <i class="fa-solid fa-download mr-1"></i> Download
                    </a>
                </div>
                @endif
                
                <div class="flex justify-center pt-1 sm:pt-2">
                    <button onclick="closePopup()" class="px-6 sm:px-8 py-2 sm:py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 text-[11px] sm:text-xs font-bold rounded-xl transition-all active:scale-95 hover:shadow-md">
                        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; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</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