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

@section('title', 'Dashboard Orang Tua - LearnMood')

@section('content')
{{-- Konten dashboard orang tua --}}
<div class="space-y-6 pb-16 md:pb-0">
    
    <!-- Header with Welcome Message -->
    <div class="bg-gradient-to-r from-purple-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-purple-100">Pantau perkembangan belajar anak Anda dengan mudah</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 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
            </div>
        </div>
    </div>

    @if(count($childrenData) > 0)
        <!-- Stats Overview Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
            <!-- Total Anak -->
            <div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs md:text-sm text-gray-500 mb-1">Total Anak</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">{{ count($childrenData) }}</p>
                    </div>
                    <div class="bg-purple-100 p-2 md:p-3 rounded-lg">
                        <svg class="w-4 h-4 md:w-6 md: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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <!-- Input Hari Ini -->
            <div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs md:text-sm text-gray-500 mb-1">Input Hari Ini</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">{{ collect($childrenData)->filter(fn($item) => $item['today_activity'])->count() }}</p>
                    </div>
                    <div class="bg-green-100 p-2 md:p-3 rounded-lg">
                        <svg class="w-4 h-4 md:w-6 md: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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <!-- Total Aktivitas -->
            <div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs md:text-sm text-gray-500 mb-1">Total Aktivitas</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">{{ collect($childrenData)->sum('week_activities_count') }}</p>
                    </div>
                    <div class="bg-blue-100 p-2 md:p-3 rounded-lg">
                        <svg class="w-4 h-4 md:w-6 md: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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                        </svg>
                    </div>
                </div>
            </div>
            
            <!-- Rata-rata Mood -->
            <div class="bg-white rounded-xl p-4 md:p-5 shadow-sm border border-gray-100 hover:shadow-md transition-all">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs md:text-sm text-gray-500 mb-1">Rata Mood</p>
                        <p class="text-xl md:text-2xl font-bold text-gray-800">
                            @php
                                $avgMood = collect($childrenData)->avg(function($item) {
                                    return $item['average_mood_score'] ?? 0;
                                });
                            @endphp
                            {{ number_format($avgMood, 1) }}
                        </p>
                    </div>
                    <div class="bg-yellow-100 p-2 md:p-3 rounded-lg">
                        <svg class="w-4 h-4 md:w-6 md:h-6 text-yellow-600" 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>
                    </div>
                </div>
            </div>
        </div>

        <!-- Progress Overview -->
        <div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-4">📈 Progress Mingguan</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($childrenData as $data)
                    <div class="border border-gray-100 rounded-lg p-3 md:p-4 hover:bg-gray-50 transition">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-8 h-8 md:w-10 md:h-10 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm md:text-base">
                                {{ substr($data['child']->name, 0, 1) }}
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-semibold text-sm md:text-base text-gray-800 truncate">{{ $data['child']->name }}</h4>
                                <div class="flex items-center gap-2 text-xs">
                                    <span class="text-gray-500">Progress:</span>
                                    <span class="font-medium text-green-600">{{ $data['week_activities_count'] }}/7</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="w-full bg-gray-200 rounded-full h-1.5 md:h-2 mb-2">
                            <div class="bg-gradient-to-r from-blue-500 to-green-500 h-1.5 md:h-2 rounded-full" 
                                 style="width: {{ min(100, ($data['week_activities_count']/7)*100) }}%"></div>
                        </div>
                        
                        <div class="flex justify-between text-xs text-gray-500">
                            <span>Konsistensi: {{ $data['week_activities_count'] > 0 ? round(($data['week_activities_count']/7)*100) : 0 }}%</span>
                            <span>Mood: ⭐ {{ number_format($data['average_mood_score'] ?? 0, 1) }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Daftar Anak dengan Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
            @foreach($childrenData as $index => $data)
                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
                     x-data="{ expanded: false }">
                    <!-- Header Card dengan Gradient -->
                    <div class="bg-gradient-to-r 
                        @if($index % 3 == 0) from-blue-500 to-cyan-500
                        @elseif($index % 3 == 1) from-purple-500 to-pink-500
                        @else from-green-500 to-teal-500 @endif
                        px-4 md:px-5 py-3 md:py-4">
                        <div class="flex justify-between items-center">
                            <div class="flex items-center gap-2 md:gap-3 min-w-0">
                                <div class="w-8 h-8 md:w-10 md:h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center border-2 border-white/50 text-white font-bold text-sm md:text-base shrink-0">
                                    {{ substr($data['child']->name, 0, 1) }}
                                </div>
                                <div class="text-white min-w-0">
                                    <h3 class="font-semibold text-sm md:text-base truncate">{{ $data['child']->name }}</h3>
                                    <p class="text-xs text-white/80 truncate">{{ $data['child']->email }}</p>
                                </div>
                            </div>
                            <div class="flex flex-col items-end gap-1 md:gap-2 shrink-0">
                                <span class="text-[10px] md:text-xs px-2 md:px-3 py-0.5 md:py-1 rounded-full backdrop-blur-sm whitespace-nowrap
                                    {{ $data['today_activity'] ? 'bg-green-500/30 text-white border border-green-300' : 'bg-yellow-500/30 text-white border border-yellow-300' }}">
                                    {{ $data['today_activity'] ? '✅ Sudah' : '⏳ Belum' }}
                                </span>
                                <button @click="expanded = !expanded" class="text-white/80 hover:text-white p-1">
                                    <svg class="w-4 h-4 md:w-5 md:h-5" :class="{ 'rotate-180': expanded }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Body Card -->
                    <div class="p-4 md:p-5">
                        <!-- Today's Activity Highlight -->
                        @if($data['today_activity'])
                            <div class="mb-4 bg-gradient-to-r from-blue-50 to-purple-50 p-3 md:p-4 rounded-xl border border-blue-100">
                                <p class="text-[10px] md:text-xs font-semibold text-blue-600 mb-2 md:mb-3 flex items-center gap-1">
                                    <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    AKTIVITAS HARI INI
                                </p>
                                <div class="grid grid-cols-3 gap-2 md:gap-3">
                                    <div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
                                        <span class="text-base md:text-lg font-bold text-gray-800">{{ $data['today_activity']->duration_minutes }}</span>
                                        <p class="text-[10px] md:text-xs text-gray-500">menit</p>
                                    </div>
                                    <div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
                                        <span class="text-base md:text-lg font-bold text-gray-800">
                                            @if($data['today_activity']->mood == 'Bagus') 😊
                                            @elseif($data['today_activity']->mood == 'Lumayan') 🙂
                                            @elseif($data['today_activity']->mood == 'Biasa Saja') 😐
                                            @elseif($data['today_activity']->mood == 'Cukup Jenuh') 😕
                                            @else 😞 @endif
                                        </span>
                                        <p class="text-[10px] md:text-xs text-gray-500">{{ $data['today_activity']->mood }}</p>
                                    </div>
                                    <div class="bg-white/80 p-2 md:p-3 rounded-lg text-center">
                                        <span class="text-base md:text-lg font-bold text-gray-800">
                                            {{-- 🔥 PERBAIKAN: Tampilkan nilai sleep_hours langsung --}}
                                            @php
                                                $sleepValue = $data['today_activity']->sleep_hours ?? $data['today_activity']->sleep_duration ?? 7;
                                                if (!is_numeric($sleepValue)) {
                                                    $sleepMap = ['<4' => 3, '4-7' => 5.5, '>7' => 8];
                                                    $sleepValue = $sleepMap[$sleepValue] ?? 7;
                                                }
                                            @endphp
                                            {{ number_format((float)$sleepValue, 1) }}
                                        </span>
                                        <p class="text-[10px] md:text-xs text-gray-500">jam</p>
                                    </div>
                                </div>
                            </div>
                        @else
                            <div class="mb-4 bg-gray-50 p-3 md:p-4 rounded-xl border border-gray-200 text-center">
                                <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-300 mx-auto mb-2" 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-xs md:text-sm text-gray-400">Belum ada aktivitas hari ini</p>
                            </div>
                        @endif

                        <!-- Quick Stats Grid -->
                        <div class="grid grid-cols-2 gap-2 md:gap-3 mb-4">
                            <div class="bg-gray-50 p-2 md:p-3 rounded-lg">
                                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Total 7 Hari</p>
                                <p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_activities_count'] }}x</p>
                            </div>
                            <div class="bg-gray-50 p-2 md:p-3 rounded-lg">
                                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Durasi</p>
                                <p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_total_duration'] ?? 0 }} <span class="text-[10px] md:text-xs font-normal">mnt</span></p>
                            </div>
                            <div class="bg-gray-50 p-2 md:p-3 rounded-lg">
                                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Rata Mood</p>
                                <p class="text-base md:text-lg font-bold text-gray-800">{{ number_format($data['average_mood_score'] ?? 0, 1) }}</p>
                            </div>
                            <div class="bg-gray-50 p-2 md:p-3 rounded-lg">
                                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Konsistensi</p>
                                <p class="text-base md:text-lg font-bold text-gray-800">{{ $data['week_activities_count'] > 0 ? round(($data['week_activities_count']/7)*100) : 0 }}%</p>
                            </div>
                        </div>

                        <!-- Latest Recommendation -->
                        @if($data['latest_recommendation'])
                            <div class="mb-4 p-2 md:p-3 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-200">
                                <p class="text-[10px] md:text-xs font-semibold text-yellow-700 mb-1 md:mb-2 flex items-center gap-1">
                                    <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.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>
                                    REKOMENDASI
                                </p>
                                <div class="flex items-center justify-between gap-2">
                                    <div class="min-w-0">
                                        <p class="text-xs md:text-sm text-gray-700 truncate">{{ $data['latest_recommendation']->recommendation_date->format('d M') }}</p>
                                        <p class="text-[10px] md:text-xs text-gray-500 truncate">{{ $data['latest_recommendation']->notes }}</p>
                                    </div>
                                    <span class="px-2 md:px-3 py-0.5 md:py-1 text-[10px] md:text-xs rounded-full font-medium whitespace-nowrap shrink-0
                                        @if($data['latest_recommendation']->category == 'Ringan') bg-yellow-100 text-yellow-800
                                        @elseif($data['latest_recommendation']->category == 'Sedang') bg-green-100 text-green-800
                                        @else bg-blue-100 text-blue-800 @endif">
                                        {{ $data['latest_recommendation']->parent_display_category }}
                                    </span>
                                </div>
                            </div>
                        @endif

                        <!-- Expandable Recent Activities -->
                        <div x-show="expanded" x-collapse class="mb-4">
                            <p class="text-[10px] md:text-xs font-semibold text-gray-600 mb-2">📋 5 Aktivitas Terakhir</p>
                            <div class="space-y-1 md:space-y-2">
                                @forelse($data['recent_activities'] ?? [] as $activity)
                                    <div class="flex items-center justify-between text-[10px] md:text-xs bg-gray-50 p-1.5 md:p-2 rounded">
                                        <span>{{ \Carbon\Carbon::parse($activity->activity_date)->format('d/m') }}</span>
                                        <span>{{ $activity->duration_minutes }}'</span>
                                        <span class="px-1.5 md:px-2 py-0.5 rounded-full 
                                            @if($activity->mood == 'Bagus') bg-green-100 text-green-700
                                            @elseif($activity->mood == 'Lumayan') bg-blue-100 text-blue-700
                                            @elseif($activity->mood == 'Biasa Saja') bg-yellow-100 text-yellow-700
                                            @elseif($activity->mood == 'Cukup Jenuh') bg-orange-100 text-orange-700
                                            @else bg-red-100 text-red-700 @endif">
                                            {{ substr($activity->mood, 0, 3) }}
                                        </span>
                                    </div>
                                @empty
                                    <p class="text-[10px] md:text-xs text-gray-400 italic">Belum ada aktivitas</p>
                                @endforelse
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex gap-2">
                            <a href="{{ route('orangtua.child.visualization', $data['child']->id) }}" 
                               class="flex-1 text-center bg-blue-600 text-white py-2 md:py-2.5 rounded-lg hover:bg-blue-700 transition text-xs md:text-sm font-medium shadow-sm">
                                <i class="fas fa-chart-line mr-1 text-xs md:text-sm"></i>
                                Grafik
                            </a>
                            <button onclick="window.location.href='{{ route('orangtua.child.detail', $data['child']->id) }}'"
                                    class="px-3 md:px-4 py-2 md:py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs md:text-sm flex items-center justify-center"
                                    title="Lihat Detail">
                                <i class="fas fa-info-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Weekly Summary Chart Placeholder -->
        <div class="bg-white rounded-xl p-4 md:p-6 shadow-sm border border-gray-100">
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-4">📊 Ringkasan Mingguan</h3>
            <div class="h-48 md:h-64 flex items-center justify-center bg-gray-50 rounded-lg">
                <p class="text-xs md:text-sm text-gray-400">Grafik perkembangan akan ditampilkan di sini</p>
            </div>
        </div>

    @else
        <!-- Empty State -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <div class="bg-gradient-to-r from-purple-600 to-indigo-600 p-6 md:p-8 text-center">
                <div class="w-16 h-16 md:w-20 md:h-20 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto border-4 border-white/50">
                    <svg class="w-8 h-8 md:w-10 md:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
                    </svg>
                </div>
                <h3 class="text-xl md:text-2xl font-bold text-white mt-4">Belum Terhubung dengan Anak</h3>
                <p class="text-sm md:text-base text-purple-100 mt-2 px-4">Hubungkan akun dengan anak Anda untuk mulai memantau perkembangan belajar</p>
            </div>
            
            <div class="p-4 md:p-8">
                <div class="max-w-md mx-auto">
                    <form method="POST" action="{{ route('orangtua.connect') }}" class="space-y-4">
                        @csrf
                        <div>
                            <label class="block text-xs md:text-sm font-medium text-gray-700 mb-2">
                                Masukkan Kode Koneksi Anak
                            </label>
                            <div class="flex gap-2">
                                <input type="text" 
                                       name="connection_code" 
                                       placeholder="Contoh: AB12CD34" 
                                       class="flex-1 px-3 md:px-4 py-2 md:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-center uppercase tracking-wider font-mono text-sm"
                                       maxlength="8"
                                       style="text-transform: uppercase"
                                       required>
                                <button type="submit" 
                                        class="px-4 md:px-6 py-2 md:py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 transition text-sm md:text-base shadow-md whitespace-nowrap">
                                    Hubungkan
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="mt-6 md:mt-8 bg-purple-50 rounded-lg p-4 md:p-5">
                        <h4 class="font-semibold text-sm md:text-base text-purple-800 mb-3 flex items-center gap-2">
                            <i class="fas fa-info-circle text-purple-600"></i>
                            Cara Mendapatkan Kode:
                        </h4>
                        <ol class="list-decimal list-inside space-y-1.5 md:space-y-2 text-xs md:text-sm text-purple-700">
                            <li>Minta anak Anda login ke akun LearnMood</li>
                            <li>Buka menu <span class="font-semibold bg-white px-2 py-0.5 rounded">Koneksi Orang Tua</span></li>
                            <li>Salin kode 8 digit yang ditampilkan</li>
                            <li>Masukkan kode tersebut di form di atas</li>
                        </ol>
                    </div>

                    <div class="mt-4 md:mt-6 text-center text-xs md:text-sm text-gray-500">
                        <p>Setelah terhubung, Anda dapat:</p>
                        <div class="flex flex-wrap justify-center gap-2 mt-3">
                            <span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">📊 Grafik perkembangan</span>
                            <span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">📈 Konsistensi belajar</span>
                            <span class="bg-gray-100 px-2 md:px-3 py-1 rounded-full text-[10px] md:text-xs">😊 Tren mood</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    function showQuickView(childId) {
        alert('Quick view untuk anak ID: ' + childId);
    }
</script>
@endpush

<style>
    [x-cloak] { display: none !important; }
    
    @media (max-width: 640px) {
        .hover\:-translate-y-1:hover {
            transform: none;
        }
        
        a, button {
            min-height: 44px;
            min-width: 44px;
        }
        
        .bg-white.rounded-xl {
            width: 100%;
        }
    }
</style>