{{-- resources/views/dashboard/siswa.blade.php --}}
@extends('layouts.app')

@section('title', 'Dashboard Siswa - LearnMood')

@section('content')
<div class="space-y-6 md:space-y-6 pb-16 md:pb-0">
    
    <!-- Welcome Card with Greeting Based on Time -->
    <div class="bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl p-6 text-white shadow-lg">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl md:text-2xl font-bold mb-2">{{ $greeting }}, <span class="block md:inline">{{ Auth::user()->name }}!</span> 👋</h2>
                <p class="text-sm md:text-base text-blue-100">Pantau dan optimalkan waktu belajarmu dengan LearnMood</p>
            </div>
            <div class="hidden md:block">
                <svg class="w-24 h-24 opacity-20" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- Stats Cards (tetap sama) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {{-- Card 1 --}}
        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Hari Input</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $totalDays }} <span class="text-sm font-normal text-gray-500">hari</span></p>
                </div>
                <div class="bg-blue-100 p-3 rounded-xl">
                    <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-2 text-xs text-gray-400 hidden md:block">
                {{ $weekActivities->count() }} aktivitas dalam 7 hari terakhir
            </div>
        </div>

        {{-- Card 2 --}}
        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Rata-rata Durasi</p>
                    <p class="text-2xl font-bold text-gray-800">{{ round($avgDuration) }} <span class="text-sm font-normal text-gray-500">menit</span></p>
                </div>
                <div class="bg-green-100 p-3 rounded-xl">
                    <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-2 text-xs text-gray-400 hidden md:block">
                Total: {{ $weekActivities->sum('duration_minutes') }} menit (7 hari)
            </div>
        </div>

        {{-- Card 3 --}}
        <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Status Hari Ini</p>
                    @if($todayActivity)
                        <p class="text-lg font-semibold text-green-600 flex items-center gap-2">
                            <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
                            Sudah Input
                        </p>
                    @else
                        <p class="text-lg font-semibold text-yellow-600 flex items-center gap-2">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></span>
                            Belum Input
                        </p>
                    @endif
                </div>
                <div class="bg-purple-100 p-3 rounded-xl">
                    <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
            @if(!$todayActivity)
            <div class="mt-2 md:mt-2">
                <a href="{{ route('siswa.input') }}" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                    </svg>
                    Input sekarang
                </a>
            </div>
            @else
            <div class="mt-2 md:mt-2">
                <a href="{{ route('siswa.input') }}" class="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1">
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                    </svg>
                    Edit aktivitas
                </a>
            </div>
            @endif
        </div>
    </div>

    {{-- Mobile-only summary --}}
    <div class="md:hidden grid grid-cols-2 gap-2 text-xs text-gray-500">
        <div class="bg-gray-50 p-2 rounded-lg text-center">
            <span class="block font-medium text-gray-700">{{ $weekActivities->count() }}</span>
            <span>Aktivitas 7 hari</span>
        </div>
        <div class="bg-gray-50 p-2 rounded-lg text-center">
            <span class="block font-medium text-gray-700">{{ $weekActivities->sum('duration_minutes') }} menit</span>
            <span>Total 7 hari</span>
        </div>
    </div>

    <!-- Today's Activity & Recommendation -->
    @if($todayActivity)
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <!-- Today's Activity Card -->
            <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                <div class="flex items-center gap-2 mb-4">
                    <div class="bg-blue-100 p-2 rounded-lg">
                        <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                    </div>
                    <h3 class="text-lg font-semibold text-gray-800">Aktivitas Hari Ini</h3>
                </div>
                
                <div class="space-y-4">
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-600 flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Durasi Belajar
                        </span>
                        <span class="font-semibold text-gray-900">{{ $todayActivity->duration_minutes }} menit</span>
                    </div>
                    
                    <div class="flex justify-between items-center py-2 border-b border-gray-100">
                        <span class="text-gray-600 flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            Mood
                        </span>
                        <span class="px-3 py-1 rounded-full text-sm font-medium 
                            @if($todayActivity->mood == 'Bagus') bg-green-100 text-green-800
                            @elseif($todayActivity->mood == 'Lumayan') bg-blue-100 text-blue-800
                            @elseif($todayActivity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-800
                            @elseif($todayActivity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-800
                            @else bg-red-100 text-red-800 @endif">
                            {{ $todayActivity->mood }}
                        </span>
                    </div>
                    
                    <div class="flex justify-between items-center py-2">
                        <span class="text-gray-600 flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646"></path>
                            </svg>
                            Jam Tidur
                        </span>
                        <span class="font-semibold text-gray-900">
                            @if(is_numeric($todayActivity->sleep_hours))
                                {{ number_format($todayActivity->sleep_hours, 1) }} jam
                            @else
                                {{ $todayActivity->sleep_hours ?? '0' }} jam
                            @endif
                        </span>
                    </div>
                </div>
            </div>

            <!-- Today's Recommendation Card -->
            @if(isset($latestRecommendation) && $latestRecommendation && $latestRecommendation->recommendation_date->isToday())
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="bg-yellow-100 p-2 rounded-lg">
                            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800">Rekomendasi Hari Ini</h3>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                            <span class="text-gray-600">Kategori</span>
                            <span class="px-3 py-1 rounded-full text-sm font-medium 
                                @if($latestRecommendation->category == 'Ringan') bg-yellow-100 text-yellow-800
                                @elseif($latestRecommendation->category == 'Sedang') bg-green-100 text-green-800
                                @else bg-blue-100 text-blue-800 @endif">
                                {{ $latestRecommendation->display_category }}
                            </span>
                        </div>
                        
                        <div class="flex justify-between items-center py-2 border-b border-gray-100">
                            <span class="text-gray-600">Durasi yang Disarankan</span>
                            <span class="font-semibold text-gray-900">{{ $latestRecommendation->recommended_minutes }} menit</span>
                        </div>
                        
                        @if($latestRecommendation->notes)
                        <div class="mt-4 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-100">
                            <p class="text-sm text-gray-700 italic">"{{ $latestRecommendation->notes }}"</p>
                        </div>
                        @endif
                    </div>
                </div>
            @elseif($todayActivity)
                <div class="bg-white rounded-xl p-6 shadow-sm border border-gray-100">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="bg-gray-100 p-2 rounded-lg">
                            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800">Rekomendasi</h3>
                    </div>
                    
                    <div class="text-center py-6">
                        <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-gray-500">Rekomendasi akan segera tersedia</p>
                        <p class="text-sm text-gray-400 mt-2">Setelah sistem menganalisis polamu</p>
                    </div>
                </div>
            @endif
        </div>
    @else
        <!-- CTA Input -->
        <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center hover:shadow-md transition-all duration-300">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-pulse">
                <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-medium text-gray-900 mb-2">Belum Input Hari Ini</h3>
            <p class="text-gray-500 mb-6">Yuk catat aktivitas belajarmu hari ini untuk mendapatkan rekomendasi personal!</p>
            <a href="{{ route('siswa.input') }}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors shadow-md hover:shadow-lg">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
                Input Sekarang
            </a>
        </div>
    @endif

    <!-- Recent Activities -->
    @if($weekActivities->count() > 0)
        <div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-3 md:mb-4">
                <div class="flex items-center gap-2">
                    <div class="bg-purple-100 p-1.5 md:p-2 rounded-lg">
                        <svg class="w-4 h-4 md:w-5 md:h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                        </svg>
                    </div>
                    <h3 class="text-sm md:text-lg font-semibold text-gray-800">Aktivitas 7 Hari Terakhir</h3>
                </div>
                <a href="{{ route('siswa.history') }}" class="text-xs md:text-sm text-blue-600 hover:text-blue-800 flex items-center gap-1 bg-blue-50 px-2 md:px-3 py-1 rounded-full">
                    <span class="hidden md:inline">Lihat Semua</span>
                    <span class="md:hidden">Semua</span>
                    <svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
            
            {{-- DESKTOP VIEW - Table --}}
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="border-b border-gray-200 bg-gray-50">
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 rounded-tl-lg">Tanggal</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Durasi</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600">Mood</th>
                            <th class="text-left py-3 px-4 text-sm font-semibold text-gray-600 rounded-tr-lg">Tidur</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($weekActivities as $index => $activity)
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors {{ $index === 0 ? 'bg-blue-50/30' : '' }}">
                                <td class="py-3 px-4 text-sm text-gray-800">
                                    <div class="flex items-center gap-2">
                                        @if($index === 0)
                                            <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                        @endif
                                        {{ \Carbon\Carbon::parse($activity->activity_date)->isoFormat('dddd, D MMM YYYY') }}
                                    </div>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-800">
                                    <span class="font-medium">{{ $activity->duration_minutes }}</span> menit
                                </td>
                                <td class="py-3 px-4 text-sm">
                                    <span class="px-3 py-1 rounded-full text-xs font-medium
                                        @if($activity->mood == 'Bagus') bg-green-100 text-green-800
                                        @elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-800
                                        @elseif($activity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-800
                                        @elseif($activity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-800
                                        @else bg-red-100 text-red-800 @endif">
                                        {{ $activity->mood }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 text-sm text-gray-800">
                                    {{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
                                    @if(isset($activity->sleep_hours) && is_numeric($activity->sleep_hours))
                                        <span class="font-medium">{{ number_format($activity->sleep_hours, 1) }}</span> jam
                                    @elseif(isset($activity->sleep_duration))
                                        @php
                                            // Konversi sleep_duration (enum) ke angka
                                            $sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
                                            $sleepValue = $sleepMap[$activity->sleep_duration] ?? 7;
                                        @endphp
                                        <span class="font-medium">{{ $sleepValue }}</span> jam
                                    @else
                                        <span class="text-gray-400">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            
            {{-- MOBILE VIEW - Card List --}}
            <div class="md:hidden space-y-3">
                @foreach($weekActivities as $index => $activity)
                    <div class="bg-gray-50 rounded-xl p-3 {{ $index === 0 ? 'border-l-4 border-green-500' : '' }}">
                        <div class="flex justify-between items-center mb-2">
                            <div class="flex items-center gap-2">
                                @if($index === 0)
                                    <span class="text-xs font-medium text-green-600 bg-green-100 px-2 py-0.5 rounded-full">Hari Ini</span>
                                @endif
                                <span class="text-xs text-gray-500">
                                    {{ \Carbon\Carbon::parse($activity->activity_date)->isoFormat('dddd, D MMM') }}
                                </span>
                            </div>
                            <span class="text-xs text-gray-400">
                                {{ \Carbon\Carbon::parse($activity->activity_date)->diffForHumans() }}
                            </span>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-2">
                            <div class="bg-white rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500 mb-1">Durasi</div>
                                <div class="font-bold text-gray-800">
                                    <span class="text-base">{{ $activity->duration_minutes }}</span>
                                    <span class="text-xs text-gray-500 ml-0.5">mnt</span>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500 mb-1">Mood</div>
                                <div class="flex items-center justify-center gap-1">
                                    @if($activity->mood == 'Bagus')
                                        <span class="text-lg">😊</span>
                                        <span class="text-xs font-medium text-green-600">Bagus</span>
                                    @elseif($activity->mood == 'Lumayan')
                                        <span class="text-lg">🙂</span>
                                        <span class="text-xs font-medium text-blue-600">Lumayan</span>
                                    @elseif($activity->mood == 'Biasa Saja')
                                        <span class="text-lg">😐</span>
                                        <span class="text-xs font-medium text-yellow-600">Biasa</span>
                                    @elseif($activity->mood == 'Cukup Jenuh')
                                        <span class="text-lg">😕</span>
                                        <span class="text-xs font-medium text-orange-600">Jenuh</span>
                                    @else
                                        <span class="text-lg">😫</span>
                                        <span class="text-xs font-medium text-red-600">Jenuh</span>
                                    @endif
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500 mb-1">Tidur</div>
                                <div class="font-bold text-gray-800">
                                    {{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
                                    @if(isset($activity->sleep_hours) && is_numeric($activity->sleep_hours))
                                        <span class="text-base">{{ number_format($activity->sleep_hours, 1) }}</span>
                                        <span class="text-xs text-gray-500 ml-0.5">jam</span>
                                    @elseif(isset($activity->sleep_duration))
                                        @php
                                            $sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
                                            $sleepValue = $sleepMap[$activity->sleep_duration] ?? 7;
                                        @endphp
                                        <span class="text-base">{{ $sleepValue }}</span>
                                        <span class="text-xs text-gray-500 ml-0.5">jam</span>
                                    @else
                                        <span class="text-base text-gray-400">-</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        
                        @if(isset($activity->recommendation) && $activity->recommendation)
                            <div class="mt-2 pt-2 border-t border-gray-200">
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Rekomendasi:</span>
                                    <span class="text-xs px-2 py-0.5 rounded-full
                                        @if($activity->recommendation->category == 'Ringan') bg-yellow-100 text-yellow-700
                                        @elseif($activity->recommendation->category == 'Sedang') bg-green-100 text-green-700
                                        @else bg-blue-100 text-blue-700 @endif">
                                        {{ $activity->recommendation->display_category }}
                                    </span>
                                </div>
                            </div>
                        @endif
                    </div>
                @endforeach
                
                <a href="{{ route('siswa.history') }}" class="block w-full text-center bg-gray-100 text-gray-700 py-3 rounded-xl text-sm font-medium hover:bg-gray-200 transition-colors mt-2">
                    Lihat Semua Riwayat
                </a>
            </div>
            
            <!-- Summary Row -->
            <div class="hidden md:grid mt-4 pt-4 border-t border-gray-200 grid-cols-3 gap-4 text-sm">
                <div class="flex items-center gap-2">
                    <span class="text-gray-500">Total durasi 7 hari:</span>
                    <span class="font-semibold text-gray-800">{{ $weekActivities->sum('duration_minutes') }} menit</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-gray-500">Rata-rata harian:</span>
                    <span class="font-semibold text-gray-800">{{ round($weekActivities->avg('duration_minutes')) }} menit/hari</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-gray-500">Mood terbanyak:</span>
                    <span class="font-semibold text-gray-800">
                        @php
                            $topMood = $weekActivities->groupBy('mood')->map->count()->sortDesc()->keys()->first();
                        @endphp
                        {{ $topMood ?? '-' }}
                    </span>
                </div>
            </div>
            
            <div class="md:hidden mt-4 pt-3 border-t border-gray-200 grid grid-cols-2 gap-2 text-xs">
                <div class="bg-gray-100 rounded-lg p-2 text-center">
                    <span class="text-gray-500 block">Total 7 hari</span>
                    <span class="font-bold text-gray-800">{{ $weekActivities->sum('duration_minutes') }} menit</span>
                </div>
                <div class="bg-gray-100 rounded-lg p-2 text-center">
                    <span class="text-gray-500 block">Rata-rata</span>
                    <span class="font-bold text-gray-800">{{ round($weekActivities->avg('duration_minutes')) }} menit/hari</span>
                </div>
            </div>
        </div>
    @endif
    
    <!-- Tips Card -->
    <div class="bg-gradient-to-r from-green-500 to-teal-500 rounded-xl p-6 text-white shadow-lg">
        <div class="flex items-start gap-4">
            <div class="bg-white/20 p-3 rounded-xl backdrop-blur-sm hidden md:block">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div class="flex-1">
                <h4 class="font-semibold text-lg mb-1">Tips Belajar Sehat</h4>
                <p class="text-green-100 text-sm">Konsistensi lebih penting daripada durasi. Belajar 30 menit setiap hari lebih baik daripada 3 jam sekali seminggu. Jangan lupa istirahat yang cukup!</p>
            </div>
        </div>
    </div>
</div>

<!-- Debug Info -->
@if(config('app.debug'))
<div class="mt-8 p-4 bg-gray-100 rounded-lg text-xs border border-gray-300 hidden md:block">
    <details>
        <summary class="font-bold mb-2 cursor-pointer text-gray-700">🔧 Debug Info (Click to expand)</summary>
        <div class="mt-2 space-y-1 text-gray-600">
            <p>Total Days: {{ $totalDays }}</p>
            <p>Avg Duration: {{ $avgDuration }}</p>
            <p>Today Activity: {{ $todayActivity ? 'Yes' : 'No' }}</p>
            <p>Week Activities Count: {{ $weekActivities->count() }}</p>
        </div>
    </details>
</div>
@endif
@endsection

@push('styles')
<style>
    .animate-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .7; }
    }
    
    @media (max-width: 768px) {
        .overflow-x-auto {
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        
        a, button {
            min-height: 44px;
            min-width: 44px;
        }
        
        .bg-white.rounded-xl.p-6 {
            padding: 1rem;
        }
    }
</style>
@endpush