190 lines
11 KiB
PHP
190 lines
11 KiB
PHP
{{-- resources/views/siswa/recommendation-detail.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Detail Rekomendasi - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 pb-16 md:pb-0">
|
|
|
|
<!-- Back Button -->
|
|
<a href="{{ route('siswa.recommendations') }}" class="inline-flex items-center text-gray-600 hover:text-gray-800 mb-4 text-sm md:text-base">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
Kembali ke Rekomendasi
|
|
</a>
|
|
|
|
<!-- Recommendation Detail Card -->
|
|
<div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-r
|
|
@if($recommendation->category == 'Ringan') from-yellow-500 to-yellow-600
|
|
@elseif($recommendation->category == 'Sedang') from-green-500 to-green-600
|
|
@else from-blue-500 to-blue-600 @endif
|
|
px-4 md:px-8 py-4 md:py-6">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<span class="text-white/80 text-xs md:text-sm">{{ $recommendation->recommendation_date->format('l, d F Y') }}</span>
|
|
<h2 class="text-xl md:text-3xl font-bold text-white mt-1 md:mt-2">Rekomendasi {{ $recommendation->category }}</h2>
|
|
</div>
|
|
<div class="bg-white/20 p-2 md:p-4 rounded-xl md:rounded-2xl shrink-0">
|
|
@if($recommendation->category == 'Ringan')
|
|
<span class="text-2xl md:text-4xl">😌</span>
|
|
@elseif($recommendation->category == 'Sedang')
|
|
<span class="text-2xl md:text-4xl">😊</span>
|
|
@else
|
|
<span class="text-2xl md:text-4xl">🚀</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-4 md:p-8">
|
|
<!-- Info Mode -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:space-x-2 mb-4 md:mb-6">
|
|
<span class="px-2 md:px-3 py-1 rounded-full text-xs md:text-sm
|
|
@if($recommendation->based_on == 'daily_model') bg-purple-100 text-purple-700
|
|
@elseif($recommendation->based_on == 'student_pattern') bg-blue-100 text-blue-700
|
|
@else bg-gray-100 text-gray-700 @endif">
|
|
@if($recommendation->based_on == 'daily_model')
|
|
🤖 Diprediksi menggunakan Model Harian
|
|
@elseif($recommendation->based_on == 'student_pattern')
|
|
📊 Diprediksi berdasarkan Pola Belajarmu
|
|
@else
|
|
📝 Diprediksi menggunakan Aturan Manual
|
|
@endif
|
|
</span>
|
|
|
|
@if($recommendation->confidence)
|
|
<span class="text-xs md:text-sm text-gray-500">
|
|
Keyakinan: {{ round($recommendation->confidence * 100) }}%
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-6 mb-6 md:mb-8">
|
|
<!-- Durasi -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 p-4 md:p-6 rounded-xl">
|
|
<div class="flex items-center justify-between mb-2 md:mb-3">
|
|
<span class="text-blue-600 font-medium text-sm md:text-base">Durasi</span>
|
|
<svg class="w-5 h-5 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-2xl md:text-3xl font-bold text-gray-800">{{ $recommendation->recommended_minutes }}</p>
|
|
<p class="text-xs md:text-sm text-gray-500">menit belajar</p>
|
|
</div>
|
|
|
|
<!-- Input -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-purple-100 p-4 md:p-6 rounded-xl">
|
|
<div class="flex items-center justify-between mb-2 md:mb-3">
|
|
<span class="text-purple-600 font-medium text-sm md:text-base">Input</span>
|
|
<svg class="w-5 h-5 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="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>
|
|
<p class="text-xs md:text-sm text-gray-600 mb-1">Mood: {{ $recommendation->activityLog->mood }}</p>
|
|
<p class="text-xs md:text-sm text-gray-600 mb-1">Durasi: {{ $recommendation->activityLog->duration_minutes }} menit</p>
|
|
<p class="text-xs md:text-sm text-gray-600">Tidur: {{ $recommendation->activityLog->sleep_duration }} jam</p>
|
|
</div>
|
|
|
|
<!-- Rekomendasi -->
|
|
<div class="bg-gradient-to-br
|
|
@if($recommendation->category == 'Ringan') from-yellow-50 to-yellow-100
|
|
@elseif($recommendation->category == 'Sedang') from-green-50 to-green-100
|
|
@else from-blue-50 to-blue-100 @endif
|
|
p-4 md:p-6 rounded-xl sm:col-span-2 md:col-span-1">
|
|
<div class="flex items-center justify-between mb-2 md:mb-3">
|
|
<span class="
|
|
@if($recommendation->category == 'Ringan') text-yellow-600
|
|
@elseif($recommendation->category == 'Sedang') text-green-600
|
|
@else text-blue-600 @endif
|
|
font-medium text-sm md:text-base">Kategori</span>
|
|
@if($recommendation->category == 'Ringan')
|
|
<span class="text-yellow-600 text-xl md:text-2xl">😌</span>
|
|
@elseif($recommendation->category == 'Sedang')
|
|
<span class="text-green-600 text-xl md:text-2xl">😊</span>
|
|
@else
|
|
<span class="text-blue-600 text-xl md:text-2xl">🚀</span>
|
|
@endif
|
|
</div>
|
|
<p class="text-2xl md:text-3xl font-bold
|
|
@if($recommendation->category == 'Ringan') text-yellow-600
|
|
@elseif($recommendation->category == 'Sedang') text-green-600
|
|
@else text-blue-600 @endif">
|
|
{{ $recommendation->category }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="bg-gray-50 rounded-xl p-4 md:p-6 mb-6 md:mb-8">
|
|
<h3 class="font-semibold text-gray-800 mb-2 md:mb-3 text-sm md:text-base">📝 Catatan Personal</h3>
|
|
<p class="text-gray-700 leading-relaxed text-sm md:text-base">{{ $recommendation->notes }}</p>
|
|
</div>
|
|
|
|
<!-- Detail Model Input -->
|
|
@if($recommendation->model_input)
|
|
<div class="border-t pt-4 md:pt-6">
|
|
<h3 class="font-semibold text-gray-800 mb-3 md:mb-4 text-sm md:text-base">🔍 Detail Prediksi</h3>
|
|
|
|
@php
|
|
$modelInput = is_string($recommendation->model_input)
|
|
? json_decode($recommendation->model_input, true)
|
|
: $recommendation->model_input;
|
|
@endphp
|
|
|
|
@if(is_array($modelInput))
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4">
|
|
@foreach($modelInput as $key => $value)
|
|
@if(!is_array($value))
|
|
<div class="flex items-center justify-between p-2 md:p-3 bg-gray-50 rounded-lg">
|
|
<span class="text-xs md:text-sm text-gray-600">{{ str_replace('_', ' ', ucfirst($key)) }}:</span>
|
|
<span class="font-medium text-gray-800 text-xs md:text-sm">
|
|
@if(is_numeric($value))
|
|
{{ $value }}
|
|
@elseif(is_bool($value))
|
|
{{ $value ? 'Ya' : 'Tidak' }}
|
|
@else
|
|
{{ $value }}
|
|
@endif
|
|
</span>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Pattern Analysis Detail -->
|
|
@if(isset($modelInput['pattern_analysis']) && is_array($modelInput['pattern_analysis']))
|
|
<div class="mt-4 p-3 md:p-4 bg-blue-50 rounded-lg">
|
|
<h4 class="font-medium text-blue-800 mb-2 md:mb-3 text-sm md:text-base">📊 Analisis Pola 7 Hari:</h4>
|
|
<div class="grid grid-cols-2 gap-2 md:gap-3">
|
|
@foreach($modelInput['pattern_analysis'] as $key => $value)
|
|
<div class="flex justify-between">
|
|
<span class="text-xs md:text-sm text-blue-700">{{ ucfirst($key) }}:</span>
|
|
<span class="font-medium text-blue-900 text-xs md:text-sm">{{ $value }}</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Actions -->
|
|
<div class="flex flex-col sm:flex-row gap-3 mt-6 md:mt-8 pt-4 md:pt-6 border-t">
|
|
<a href="{{ route('siswa.input') }}"
|
|
class="sm:flex-1 bg-blue-600 text-white text-center px-4 md:px-6 py-2 md:py-3 rounded-lg hover:bg-blue-700 transition-colors text-sm md:text-base">
|
|
Input Aktivitas Baru
|
|
</a>
|
|
<a href="{{ route('siswa.visualization') }}"
|
|
class="sm:flex-1 px-4 md:px-6 py-2 md:py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm md:text-base text-center">
|
|
Lihat Visualisasi
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection |