@extends('layouts.parent')

@section('title', 'Parent Portal Dashboard - Kidscholl')

@section('styles')
<style>
    /* Premium Greeting Hero Card */
    .dashboard-hero-card {
        background: linear-gradient(135deg, #FFE4E6 0%, #E0F2FE 50%, #ECFDF5 100%);
        border-radius: 30px;
        border: none;
        padding: 45px 40px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    }

    /* Floating Animated Icons in Background */
    .floating-decorations {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .decor-item {
        position: absolute;
        opacity: 0.15;
        animation: float-slow 8s infinite ease-in-out;
    }

    .decor-1 { top: 15%; left: 80%; font-size: 2.5rem; animation-delay: 0s; }
    .decor-2 { top: 60%; left: 10%; font-size: 2rem; animation-delay: 2s; }
    .decor-3 { top: 40%; left: 85%; font-size: 1.8rem; animation-delay: 4s; }
    .decor-4 { top: 75%; left: 75%; font-size: 2.2rem; animation-delay: 1s; }

    @keyframes float-slow {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-15px) rotate(10deg); }
    }

    /* Premium Student ID Card */
    .student-id-card {
        background: #ffffff;
        border-radius: 26px;
        border: 2px solid #f1f5f9;
        box-shadow: var(--card-shadow);
        padding: 30px 25px;
        position: relative;
        overflow: hidden;
        border-bottom: 5px solid var(--primary);
    }

    .student-id-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(255, 107, 107, 0.04) 0%, transparent 70%);
        pointer-events: none;
    }

    .avatar-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 15px;
    }

    .avatar-image-ring {
        border-radius: 50%;
        padding: 5px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        display: inline-block;
    }

    .status-dot-pulse {
        position: absolute;
        bottom: 8px;
        right: 8px;
        width: 18px;
        height: 18px;
        background-color: #10B981;
        border: 3px solid #ffffff;
        border-radius: 50%;
        animation: pulse-green 2s infinite;
    }

    @keyframes pulse-green {
        0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }

    .student-detail-badge {
        padding: 12px 16px;
        border-radius: 16px;
        background-color: #f8fafc;
        border: 2px solid #f1f5f9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        transition: all 0.2s ease;
    }

    .student-detail-badge:hover {
        background-color: #ffffff;
        border-color: var(--secondary);
        transform: translateX(4px);
    }

    /* Barcode decoration for authentic ID card feel */
    .barcode-emblem {
        font-family: 'Libre Barcode 39', 'Courier New', monospace;
        font-size: 2rem;
        letter-spacing: 2px;
        color: #94a3b8;
        opacity: 0.6;
        user-select: none;
    }

    /* Glowing Metrics Cards */
    .metric-card-glow {
        background-color: #ffffff;
        border-radius: 24px;
        border: 2px solid #f8fafc;
        padding: 24px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        height: 100%;
    }

    .metric-card-glow:hover {
        transform: translateY(-6px);
    }

    .glow-blue:hover { border-color: #38bdf8; box-shadow: 0 12px 25px rgba(56, 189, 248, 0.15); }
    .glow-red:hover { border-color: #f87171; box-shadow: 0 12px 25px rgba(248, 113, 113, 0.15); }
    .glow-amber:hover { border-color: #fbbf24; box-shadow: 0 12px 25px rgba(251, 191, 36, 0.15); }

    .icon-backdrop {
        width: 54px;
        height: 54px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 15px;
        transition: transform 0.3s ease;
    }

    .metric-card-glow:hover .icon-backdrop {
        transform: scale(1.1) rotate(5deg);
    }

    /* Announcements feed */
    .notices-feed-card {
        background: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 22px;
        padding: 20px;
        transition: all 0.3s ease;
        position: relative;
    }

    .notices-feed-card:hover {
        transform: translateX(6px);
        border-color: var(--secondary);
        box-shadow: 0 8px 20px rgba(0,0,0,0.02);
    }

    .notice-unread-pulse {
        position: absolute;
        top: 20px;
        left: -5px;
        width: 10px;
        height: 10px;
        background-color: #ef4444;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25);
    }

    /* Bottom Widgets */
    .calendar-widget-badge {
        flex-shrink: 0;
        width: 60px;
        height: 68px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 2px solid #f1f5f9;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.02);
    }

    .calendar-widget-badge .month-tag {
        background-color: var(--primary);
        color: white;
        font-size: 0.7rem;
        font-weight: 800;
        padding: 3px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .calendar-widget-badge .day-tag {
        background-color: #ffffff;
        color: var(--dark);
        font-family: 'Fredoka', sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.2;
        padding-top: 2px;
        flex-grow: 1;
    }

    .document-preview-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 18px;
        border-radius: 18px;
        background-color: #f8fafc;
        border: 2px solid #f1f5f9;
        transition: all 0.2s ease;
    }

    .document-preview-row:hover {
        background-color: #ffffff;
        border-color: #8b5cf6;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(139, 92, 246, 0.06);
    }
</style>
@endsection

@section('content')
<!-- Header Greeting / Hero Banner -->
<div class="dashboard-hero-card mb-4">
    <!-- Animated vectors in background -->
    <div class="floating-decorations">
        <span class="decor-item decor-1"><i class="bi bi-book text-primary"></i></span>
        <span class="decor-item decor-2"><i class="bi bi-balloon text-danger"></i></span>
        <span class="decor-item decor-3"><i class="bi bi-pencil-fill text-warning"></i></span>
        <span class="decor-item decor-4"><i class="bi bi-music-note-beamed text-success"></i></span>
    </div>

    <div class="row align-items-center position-relative">
        <div class="col-md-9">
            <h2 class="text-primary mb-2" id="dynamic-greeting-text">Welcome back, {{ $parent->name }}!</h2>
            <p class="text-secondary mb-0 fw-bold">Here is your daily tracking overview, circulars feed, and progress metrics for your child.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0 d-none d-md-block">
            <i class="bi bi-balloon-heart text-danger opacity-25 fs-1 float-end"></i>
        </div>
    </div>
</div>

<!-- Main Dashboard Grid -->
<div class="row">
    <!-- Student ID Card Column -->
    <div class="col-lg-4 mb-4">
        <div class="student-id-card h-100">
            <div class="text-center mb-4">
                <div class="avatar-wrapper">
                    <div class="avatar-image-ring">
                        @if($student->photo)
                            <img src="{{ asset('storage/' . $student->photo) }}" alt="Student Avatar" class="rounded-circle border border-4 border-white shadow" style="width: 110px; height: 110px; object-fit: cover;">
                        @else
                            <div class="rounded-circle bg-danger bg-opacity-10 text-danger border border-4 border-white shadow d-inline-flex align-items-center justify-content-center fw-bold" style="width: 110px; height: 110px; font-size: 2.5rem; font-family: 'Fredoka';">
                                {{ substr($student->name, 0, 1) }}
                            </div>
                        @endif
                    </div>
                    <span class="status-dot-pulse"></span>
                </div>
                <h4 class="text-dark fw-bold mb-1">{{ $student->name }}</h4>
                <span class="badge bg-light text-secondary border font-monospace px-3 py-1.5 small">ID: {{ $student->roll_number }}</span>
            </div>

            <div class="d-flex flex-column gap-2 mb-4">
                <div class="student-detail-badge">
                    <span class="text-muted small fw-bold"><i class="bi bi-mortarboard-fill text-primary me-2"></i> Class</span>
                    <strong class="text-dark">{{ $student->schoolClass->name }}</strong>
                </div>
                <div class="student-detail-badge">
                    <span class="text-muted small fw-bold"><i class="bi bi-grid-3x3-gap-fill text-success me-2"></i> Section</span>
                    <strong class="text-dark">{{ $student->section->name }}</strong>
                </div>
                <div class="student-detail-badge">
                    <span class="text-muted small fw-bold"><i class="bi bi-geo-alt-fill text-danger me-2"></i> Branch</span>
                    <strong class="text-dark">{{ $student->branch->name }}</strong>
                </div>
            </div>

            <!-- Term Completion Progress Meter -->
            <div class="mb-4">
                <div class="d-flex justify-content-between text-muted small fw-bold mb-1.5">
                    <span>Term Academic Progress</span>
                    <span>75%</span>
                </div>
                <div class="progress" style="height: 10px; border-radius: 10px; background-color: #f1f5f9;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 75%; border-radius: 10px;"></div>
                </div>
            </div>

            <hr class="dashed my-4">

            <div class="text-center d-flex flex-column align-items-center">
                <!-- Barcode emblem to make it feel like a real ID badge -->
                <div class="barcode-emblem mb-3">*{{ $student->roll_number }}*</div>
                <a href="{{ route('parent.profile') }}" class="btn btn-outline-danger btn-sm px-4 rounded-pill fw-bold">
                    <i class="bi bi-person-gear me-1"></i> Account Details
                </a>
            </div>
        </div>
    </div>

    <!-- Stats & Notifications Feed Column -->
    <div class="col-lg-8 mb-4">
        <!-- Glowing Stats Metrics Cards Row -->
        <div class="row g-3 mb-4">
            <!-- Metric 1: Total -->
            <div class="col-sm-4">
                <div class="metric-card-glow glow-blue" style="border-bottom: 4px solid #38bdf8;">
                    <div class="icon-backdrop" style="background-color: #f0f9ff; color: #0284c7;">
                        <i class="bi bi-bell-fill"></i>
                    </div>
                    <span class="text-muted d-block small mb-1 fw-bold">Total Notifications</span>
                    <h3 class="fw-bold text-dark mb-0 font-monospace">{{ $totalNotifications }}</h3>
                </div>
            </div>
            <!-- Metric 2: Unread -->
            <div class="col-sm-4">
                <div class="metric-card-glow glow-red" style="border-bottom: 4px solid #f87171;">
                    <div class="icon-backdrop" style="background-color: #fef2f2; color: #b91c1c;">
                        <i class="bi bi-envelope-open-fill"></i>
                    </div>
                    <span class="text-muted d-block small mb-1 fw-bold">Unread Circulars</span>
                    <h3 class="fw-bold text-danger mb-0 font-monospace">{{ $unreadMessages }}</h3>
                </div>
            </div>
            <!-- Metric 3: Surveys -->
            <div class="col-sm-4">
                <div class="metric-card-glow glow-amber" style="border-bottom: 4px solid #fbbf24;">
                    <div class="icon-backdrop" style="background-color: #fffbeb; color: #b45309;">
                        <i class="bi bi-clipboard-check-fill"></i>
                    </div>
                    <span class="text-muted d-block small mb-1 fw-bold">Pending Surveys</span>
                    <h3 class="fw-bold text-warning mb-0 font-monospace">{{ $pendingSurveysCount }}</h3>
                </div>
            </div>
        </div>

        <!-- Recent Notifications Announcements Section -->
        <div class="portal-card" style="border-bottom-color: var(--secondary);">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-megaphone-fill text-warning me-2"></i> Recent Announcements</h5>
                <a href="{{ route('parent.notifications') }}" class="btn btn-sm btn-outline-primary px-3 rounded-pill fw-bold">View Feed</a>
            </div>

            <div class="d-flex flex-column gap-3">
                @forelse($recentNotifications as $log)
                    @php
                        $isUnread = ($log->status != 'Read');
                    @endphp
                    <div class="notices-feed-card {{ $isUnread ? 'bg-light border-danger border-opacity-10' : '' }}">
                        @if($isUnread)
                            <span class="notice-unread-pulse"></span>
                        @endif

                        <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                            <span class="kids-badge bg-light border text-dark font-monospace">{{ $log->notification->category }}</span>
                            <small class="text-muted fw-bold"><i class="bi bi-clock me-1"></i> {{ $log->notification->created_at->diffForHumans() }}</small>
                        </div>
                        
                        <h6 class="fw-bold text-dark mb-2">{{ $log->notification->title }}</h6>
                        <p class="text-secondary small mb-3 lh-base">{{ Str::limit($log->notification->description, 180) }}</p>
                        
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 border-top pt-3">
                            <div>
                                @if($isUnread)
                                    <a href="{{ route('parent.notifications.read', $log->notification->id) }}" class="btn btn-sm btn-success rounded-pill px-3 py-1 fw-bold text-white">
                                        <i class="bi bi-check2"></i> Mark as Read
                                    </a>
                                @else
                                    <span class="text-success small fw-bold bg-success bg-opacity-10 px-3 py-1 rounded-pill"><i class="bi bi-check-circle-fill me-1"></i> Opened & Read</span>
                                @endif
                            </div>

                            @if($log->notification->attachment_path)
                                <a href="{{ asset('storage/' . $log->notification->attachment_path) }}" class="btn btn-sm btn-outline-danger py-1 px-3 fw-bold rounded-pill" download>
                                    <i class="bi bi-file-earmark-pdf-fill me-1"></i> Circular PDF
                                </a>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-chat-dots-fill fs-2 d-block opacity-40 mb-2"></i>
                        <p class="small mb-0">No circular notifications received for your child yet.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Bottom Row: Activities & Academic Results Columns -->
<div class="row">
    <!-- Column 1: Activities Calendars -->
    <div class="col-md-6 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: #FF8A5B;">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-calendar-event text-danger me-2"></i> Upcoming Activities</h5>
                <a href="{{ route('parent.exams') }}" class="btn btn-sm btn-link text-decoration-none fw-bold p-0 text-danger">Exam Schedules</a>
            </div>

            <div class="d-flex flex-column gap-3">
                @forelse($upcomingEvents as $evt)
                    @php
                        $dateObj = \Carbon\Carbon::parse($evt->event_date);
                    @endphp
                    <div class="d-flex align-items-center gap-3 pb-3 border-bottom">
                        <div class="calendar-widget-badge">
                            <div class="month-tag">{{ $dateObj->format('M') }}</div>
                            <div class="day-tag">{{ $dateObj->format('d') }}</div>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1 fw-bold text-dark fs-6">{{ $evt->title }}</h6>
                            <small class="text-secondary fw-bold"><i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $evt->location ?? 'Main Campus' }}</small>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-calendar3 fs-2 d-block opacity-40 mb-2"></i>
                        <p class="small mb-0">No upcoming activities or holidays listed.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Column 2: Results Reports Preview -->
    <div class="col-md-6 mb-4">
        <div class="portal-card h-100" style="border-bottom-color: #8B5CF6;">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold text-dark mb-0"><i class="bi bi-file-earmark-spreadsheet-fill text-purple me-2"></i> Results & Report Cards</h5>
                <a href="{{ route('parent.results') }}" class="btn btn-sm btn-outline-purple px-3 rounded-pill fw-bold text-purple border-purple" style="color:#8B5CF6; border-color:#8B5CF6;">All Reports</a>
            </div>

            <div class="d-flex flex-column gap-3">
                @forelse($recentResults as $res)
                    <div class="document-preview-row">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center text-danger" style="width: 44px; height: 44px;">
                                <i class="bi bi-file-earmark-pdf-fill fs-5"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold text-dark">{{ $res->title }}</h6>
                                <small class="text-secondary small fw-bold"><i class="bi bi-calendar3 me-1"></i> {{ \Carbon\Carbon::parse($res->upload_date)->format('d M Y') }}</small>
                            </div>
                        </div>
                        
                        @if($res->file_path)
                            <a href="{{ asset('storage/' . $res->file_path) }}" class="btn btn-sm btn-outline-primary rounded-pill px-3 py-1.5 fw-bold text-xs" download>
                                <i class="bi bi-download"></i>
                            </a>
                        @else
                            <span class="badge bg-light border text-muted small">No File</span>
                        @endif
                    </div>
                @empty
                    <div class="text-center py-4 text-muted">
                        <i class="bi bi-file-earmark-spreadsheet fs-2 d-block opacity-40 mb-2"></i>
                        <p class="small mb-0">No exam results or report cards published yet.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const hour = new Date().getHours();
        let greeting = "Hello";
        if (hour < 12) {
            greeting = "Good Morning";
        } else if (hour < 17) {
            greeting = "Good Afternoon";
        } else {
            greeting = "Good Evening";
        }
        const greetText = document.getElementById("dynamic-greeting-text");
        if (greetText) {
            greetText.textContent = `${greeting}, {{ $parent->name }}!`;
        }
    });
</script>
@endsection