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

@section('title', 'Detail ' . $child->name . ' - LearnMood')

@section('content')
<div class="space-y-6 pb-20 md:pb-0">
    
    <!-- Breadcrumb -->
    <div class="flex items-center text-xs md:text-sm text-gray-500 overflow-x-auto pb-1">
        <a href="{{ route('dashboard') }}" class="hover:text-purple-600 flex items-center gap-1 whitespace-nowrap">
            <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            <span>Dashboard</span>
        </a>
        <span class="mx-1 md:mx-2 text-gray-300">/</span>
        <a href="{{ route('orangtua.children') }}" class="hover:text-purple-600 whitespace-nowrap">
            Anak-anak
        </a>
        <span class="mx-1 md:mx-2 text-gray-300">/</span>
        <span class="text-gray-700 font-medium truncate max-w-[120px] md:max-w-none">{{ $child->name }}</span>
    </div>

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-xl md:text-2xl shadow-md shrink-0">
                {{ substr($child->name, 0, 1) }}
            </div>
            <div class="min-w-0">
                <h2 class="text-lg md:text-2xl font-bold text-gray-800 truncate">{{ $child->name }}</h2>
                <p class="text-xs md:text-sm text-gray-500 truncate">{{ $child->email }}</p>
            </div>
        </div>
        
        <a href="{{ route('orangtua.child.visualization', $child->id) }}" 
           class="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-4 py-2.5 rounded-lg hover:from-blue-700 hover:to-indigo-700 transition text-sm text-center shadow-md">
            <i class="fas fa-chart-line mr-1"></i> Lihat Grafik
        </a>
    </div>

    <!-- Statistik - Responsif Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition">
            <p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Aktivitas</p>
            <p class="text-lg md:text-xl font-bold text-gray-800">{{ $stats['total_activities'] }}</p>
        </div>
        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition">
            <p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Durasi</p>
            <p class="text-lg md:text-xl font-bold text-gray-800">{{ $stats['total_duration'] }} <span class="text-[10px] md:text-xs font-normal">mnt</span></p>
        </div>
        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition">
            <p class="text-[10px] md:text-xs text-gray-500 mb-1">Rata-rata</p>
            <p class="text-lg md:text-xl font-bold text-gray-800">{{ $stats['avg_daily'] }} <span class="text-[10px] md:text-xs font-normal">mnt</span></p>
        </div>
        <div class="bg-white p-3 md:p-4 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition">
            <p class="text-[10px] md:text-xs text-gray-500 mb-1">Konsistensi</p>
            <div class="flex items-center gap-1">
                <p class="text-lg md:text-xl font-bold text-gray-800">{{ $stats['consistency'] }}%</p>
                <div class="w-12 bg-gray-200 rounded-full h-1.5">
                    <div class="bg-green-500 h-1.5 rounded-full" style="width: {{ $stats['consistency'] }}%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeline Aktivitas -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-3 border-b border-gray-100 bg-gradient-to-r from-purple-50 to-indigo-50">
            <div class="flex items-center gap-2">
                <div class="w-6 h-6 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg class="w-3 h-3 text-purple-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>
                <h3 class="font-semibold text-gray-800 text-sm md:text-base">📋 Timeline Aktivitas</h3>
            </div>
        </div>
        
        <div class="divide-y divide-gray-100">
            @forelse($activities as $activity)
                <div class="p-4 hover:bg-gray-50 transition-colors">
                    <!-- Header: Tanggal -->
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-2">
                            @if($activity->activity_date->isToday())
                                <span class="text-xs px-2 py-0.5 bg-green-100 text-green-700 rounded-full font-medium">
                                    Hari Ini
                                </span>
                            @endif
                            <span class="font-medium text-gray-800 text-sm">
                                {{ $activity->activity_date->format('d M Y') }}
                            </span>
                        </div>
                        <span class="text-xs md:text-sm text-gray-600 bg-gray-100 px-2 py-1 rounded-full">
                            {{ $activity->duration_minutes }} menit
                        </span>
                    </div>
                    
                    <!-- Grid Info -->
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mb-3">
                        <!-- Mood -->
                        <div class="bg-gray-50 p-2 rounded-lg">
                            <p class="text-[10px] text-gray-500 mb-1">Mood</p>
                            <div class="flex items-center gap-1">
                                <span class="text-sm">
                                    @if($activity->mood == 'Bagus') 😊
                                    @elseif($activity->mood == 'Lumayan') 🙂
                                    @elseif($activity->mood == 'Biasa Saja') 😐
                                    @elseif($activity->mood == 'Cukup Jenuh') 😕
                                    @else 😫 @endif
                                </span>
                                <span class="text-xs font-medium
                                    @if($activity->mood == 'Bagus') text-green-600
                                    @elseif($activity->mood == 'Lumayan') text-blue-600
                                    @elseif($activity->mood == 'Biasa Saja') text-gray-600
                                    @elseif($activity->mood == 'Cukup Jenuh') text-yellow-600
                                    @else text-red-600 @endif">
                                    {{ $activity->mood }}
                                </span>
                            </div>
                        </div>
                        
                        <!-- Tidur -->
                        <div class="bg-gray-50 p-2 rounded-lg">
                            <p class="text-[10px] text-gray-500 mb-1">Tidur</p>
                            <p class="text-sm font-medium text-gray-800">
                                {{ $activity->sleep_hours ?? $activity->sleep_duration ?? 7 }} jam
                            </p>
                        </div>
                        
                        <!-- Waktu (hidden di mobile, show di desktop) -->
                        <div class="hidden md:block bg-gray-50 p-2 rounded-lg">
                            <p class="text-[10px] text-gray-500 mb-1">Waktu</p>
                            <p class="text-sm font-medium text-gray-800">
                                {{ \Carbon\Carbon::parse($activity->start_time ?? '19:00')->format('H:i') }} - 
                                {{ \Carbon\Carbon::parse($activity->end_time ?? '20:00')->format('H:i') }}
                            </p>
                        </div>
                    </div>
                    
                    <!-- Rekomendasi - DIUBAH menggunakan parent_display_category -->
                    @if($activity->recommendation)
                        <div class="mt-2 p-3 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-200">
                            <div class="flex items-start gap-2">
                                <div class="text-yellow-600 text-sm">💡</div>
                                <div class="flex-1">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-xs font-medium text-yellow-700">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->parent_display_category }}
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-600 leading-relaxed">{{ $activity->recommendation->notes }}</p>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @empty
                <div class="p-8 text-center">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <svg class="w-8 h-8 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>
                    </div>
                    <h4 class="text-sm font-medium text-gray-700 mb-1">Belum Ada Aktivitas</h4>
                    <p class="text-xs text-gray-500">{{ $child->name }} belum mencatat aktivitas belajar</p>
                </div>
            @endforelse
        </div>
        
        <!-- Pagination -->
        @if(method_exists($activities, 'links') && $activities->hasPages())
            <div class="px-4 py-3 border-t border-gray-100 bg-gray-50">
                {{ $activities->links() }}
            </div>
        @endif
    </div>

    <!-- Tombol Aksi Tambahan -->
    <div class="flex justify-center gap-3">
        <a href="{{ route('orangtua.children') }}" 
           class="flex items-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
            </svg>
            Kembali
        </a>
    </div>
</div>
@endsection