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

@section('title', 'Riwayat Aktivitas - LearnMood')

@section('content')
<div class="space-y-4 md:space-y-6 pb-20 md:pb-0">
    
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 md:gap-4">
        <div>
            <h2 class="text-lg md:text-2xl font-bold text-gray-800">📋 Riwayat Aktivitas</h2>
            <p class="text-xs md:text-sm text-gray-500">Lihat semua catatan belajarmu di sini</p>
        </div>
        
        <!-- Statistik Ringkas -->
        <div class="overflow-x-auto pb-1 -mx-4 px-4 sm:mx-0 sm:px-0">
            <div class="flex items-center gap-2 md:gap-3 bg-purple-50 px-3 md:px-4 py-2 rounded-lg min-w-max sm:min-w-0">
                <div class="text-center px-2">
                    <span class="text-[10px] md:text-xs text-purple-600">Total</span>
                    <p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['total'] }}</p>
                </div>
                <div class="w-px h-6 md:h-8 bg-purple-200"></div>
                <div class="text-center px-2">
                    <span class="text-[10px] md:text-xs text-purple-600">Durasi</span>
                    <p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['total_duration'] }} <span class="text-[10px]">mnt</span></p>
                </div>
                <div class="w-px h-6 md:h-8 bg-purple-200"></div>
                <div class="text-center px-2">
                    <span class="text-[10px] md:text-xs text-purple-600">Rata-rata</span>
                    <p class="text-base md:text-lg font-bold text-purple-700">{{ $stats['avg_duration'] }} <span class="text-[10px]">mnt</span></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter Section -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-3 md:p-4">
    <form method="GET" action="{{ route('siswa.history') }}" class="space-y-3 md:space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-4 gap-2 md:gap-3">
            <!-- Filter Periode -->
            <div>
                <label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1">Periode</label>
                <select name="period" class="w-full px-2 md:px-3 py-1.5 md:py-2 text-xs md:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="all" {{ $period == 'all' ? 'selected' : '' }}>Semua Waktu</option>
                    <option value="7" {{ $period == '7' ? 'selected' : '' }}>7 Hari</option>
                    <option value="30" {{ $period == '30' ? 'selected' : '' }}>30 Hari</option>
                    <option value="90" {{ $period == '90' ? 'selected' : '' }}>90 Hari</option>
                </select>
            </div>
            
            <!-- Filter Mood -->
            <div>
                <label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1">Mood</label>
                <select name="mood" class="w-full px-2 md:px-3 py-1.5 md:py-2 text-xs md:text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="all" {{ $mood == 'all' ? 'selected' : '' }}>Semua Mood</option>
                    @foreach($moodList as $m)
                        <option value="{{ $m }}" {{ $mood == $m ? 'selected' : '' }}>{{ $m }}</option>
                    @endforeach
                </select>
            </div>
            
            <!-- Tombol Cari & Reset -->
            <div class="sm:col-span-2">
                <label class="block text-[10px] md:text-xs font-medium text-gray-500 mb-1">&nbsp;</label>
                <div class="flex gap-1 md:gap-2">
                    <button type="submit" class="px-4 md:px-6 py-1.5 md:py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-xs md:text-sm whitespace-nowrap">
                        <i class="fas fa-search mr-1"></i> Cari
                    </button>
                    <a href="{{ route('siswa.history') }}" class="px-4 md:px-6 py-1.5 md:py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-xs md:text-sm whitespace-nowrap">
                        <i class="fas fa-sync-alt mr-1"></i> Reset
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Tombol Reset Filter (jika ada filter aktif) -->
        @if($period != 'all' || $mood != 'all')
        <div class="flex justify-end">
            <a href="{{ route('siswa.history') }}" class="text-[10px] md:text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1">
                <i class="fas fa-times"></i> Reset Semua Filter
            </a>
        </div>
        @endif
    </form>
</div>

    @if($activities->count() > 0)
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
            <!-- Desktop Table View -->
            <div class="hidden md:block overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tanggal</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Waktu</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Durasi</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Mood</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tidur</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rekomendasi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @foreach($activities as $activity)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-6 py-3 text-sm text-gray-800 whitespace-nowrap">
                                    {{ \Carbon\Carbon::parse($activity->activity_date)->format('d M Y') }}
                                </td>
                                <td class="px-6 py-3 text-sm text-gray-800 whitespace-nowrap">
                                    {{ $activity->start_time }} - {{ $activity->end_time }}
                                </td>
                                <td class="px-6 py-3 text-sm text-gray-800">
                                    {{ $activity->duration_minutes }} menit
                                </td>
                                <td class="px-6 py-3">
                                    <span class="px-3 py-1 text-xs rounded-full font-medium
                                        @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-gray-100 text-gray-700
                                        @elseif($activity->mood == 'Cukup Jenuh') bg-yellow-100 text-yellow-700
                                        @else bg-red-100 text-red-700 @endif">
                                        {{ $activity->mood }}
                                    </span>
                                </td>
                                <td class="px-6 py-3 text-sm text-gray-800">
                                    {{ $activity->sleep_hours ?? $activity->sleep_duration ?? 7 }} jam
                                </td>
                                <td class="px-6 py-3">
                                    @if($activity->recommendation)
                                        <span class="px-3 py-1 text-xs rounded-full font-medium
                                            @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>
                                    @else
                                        <span class="text-xs text-gray-400">-</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Mobile Card View -->
            <div class="md:hidden divide-y divide-gray-100">
                @foreach($activities as $activity)
                    <div class="p-4 hover:bg-gray-50 transition-colors">
                        <div class="flex items-center justify-between mb-3">
                            <span class="font-semibold text-gray-800 text-sm">
                                {{ \Carbon\Carbon::parse($activity->activity_date)->format('d M Y') }}
                            </span>
                            <span class="text-sm font-medium text-gray-600">
                                {{ $activity->duration_minutes }} menit
                            </span>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-2">
                            <!-- Mood -->
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <span class="text-xs text-gray-500 block mb-1">Mood</span>
                                <span class="text-sm font-medium block
                                    @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>
                            
                            <!-- Tidur -->
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <span class="text-xs text-gray-500 block mb-1">Tidur</span>
                                <span class="text-sm font-medium text-gray-800 block">
                                    {{ $activity->sleep_hours ?? $activity->sleep_duration ?? 7 }} jam
                                </span>
                            </div>
                            
                            <!-- Rekomendasi -->
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <span class="text-xs text-gray-500 block mb-1">Rekomendasi</span>
                                @if($activity->recommendation)
                                    <span class="text-sm font-medium block
                                        @if($activity->recommendation->category == 'Ringan') text-yellow-600
                                        @elseif($activity->recommendation->category == 'Sedang') text-green-600
                                        @else text-blue-600 @endif">
                                        {{ $activity->recommendation->display_category }}
                                    </span>
                                @else
                                    <span class="text-sm text-gray-400 block">-</span>
                                @endif
                            </div>
                        </div>

                        <div class="mt-2 text-xs text-gray-500">
                            Waktu: {{ $activity->start_time }} - {{ $activity->end_time }}
                        </div>
                        
                        <div class="mt-2 flex justify-end">
                            <span class="inline-flex items-center gap-1 text-xs px-2 py-1 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-gray-100 text-gray-700
                                @elseif($activity->mood == 'Cukup Jenuh') bg-yellow-100 text-yellow-700
                                @else bg-red-100 text-red-700 @endif">
                                @if($activity->mood == 'Bagus') 😊
                                @elseif($activity->mood == 'Lumayan') 🙂
                                @elseif($activity->mood == 'Biasa Saja') 😐
                                @elseif($activity->mood == 'Cukup Jenuh') 😕
                                @else 😫 @endif
                                <span>{{ $activity->mood }}</span>
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>
            
            <!-- Pagination -->
            <div class="px-4 md:px-6 py-3 border-t border-gray-100">
                {{ $activities->links() }}
            </div>
        </div>

        <!-- Statistik Tambahan -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4">
            <div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Konsistensi Belajar</p>
                <div class="flex items-end gap-2">
                    <span class="text-xl md:text-2xl font-bold text-blue-600">{{ $stats['consistency'] }}%</span>
                    <span class="text-[8px] md:text-xs text-gray-500 mb-1">dari total hari</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-1.5 md:h-2 mt-2">
                    <div class="bg-blue-600 h-1.5 md:h-2 rounded-full" style="width: {{ $stats['consistency'] }}%"></div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Total Waktu Belajar</p>
                @php
                    $hours = floor($stats['total_duration'] / 60);
                    $minutes = $stats['total_duration'] % 60;
                @endphp
                <span class="text-xl md:text-2xl font-bold text-green-600">
                    @if($hours > 0)
                        {{ $hours }} jam @if($minutes > 0) {{ $minutes }} menit @endif
                    @else
                        {{ $minutes }} menit
                    @endif
                </span>
            </div>
            
            <div class="bg-white rounded-xl p-3 md:p-4 border border-gray-100">
                <p class="text-[10px] md:text-xs text-gray-500 mb-1">Rata-rata per Hari</p>
                <span class="text-xl md:text-2xl font-bold text-purple-600">{{ $stats['avg_duration'] }} <span class="text-xs md:text-sm font-normal">menit</span></span>
            </div>
        </div>

    @else
        <!-- Empty State -->
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-6 md:p-8 text-center">
            <div class="w-16 h-16 md:w-20 md:h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
                <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
            </div>
            <h3 class="text-base md:text-lg font-semibold text-gray-800 mb-1 md:mb-2">Belum Ada Riwayat</h3>
            <p class="text-xs md:text-sm text-gray-500 mb-4 md:mb-6">Mulai catat aktivitas belajarmu untuk melihat riwayat di sini</p>
            <a href="{{ route('siswa.input') }}" class="inline-flex items-center px-4 md:px-6 py-2 md:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-xs md:text-sm">
                <i class="fas fa-plus mr-2"></i> Input Sekarang
            </a>
        </div>
    @endif
</div>
@endsection