384 lines
20 KiB
PHP
384 lines
20 KiB
PHP
{{-- resources/views/orangtua/children.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Anak-anak - LearnMood')
|
|
|
|
@section('content')
|
|
<div class="space-y-6 pb-16 md:pb-0">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-800">👨👩👧👦 Anak-anak</h2>
|
|
<p class="text-sm md:text-base text-gray-500">Pantau dan hubungkan dengan anak Anda</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Koneksi Baru -->
|
|
<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 px-4 md:px-6 py-4">
|
|
<h3 class="text-lg font-semibold text-white">🔗 Hubungkan Anak Baru</h3>
|
|
<p class="text-purple-100 text-sm mt-1">Masukkan kode koneksi dari anak Anda</p>
|
|
</div>
|
|
|
|
<div class="p-4 md:p-6">
|
|
<form method="POST" action="{{ route('orangtua.connect') }}" class="space-y-4">
|
|
@csrf
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3">
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">
|
|
Kode Koneksi (8 digit)
|
|
</label>
|
|
<input type="text"
|
|
name="connection_code"
|
|
placeholder="Contoh: AB12CD34"
|
|
class="w-full px-4 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-lg"
|
|
maxlength="8"
|
|
style="text-transform: uppercase"
|
|
required>
|
|
<p class="text-xs text-gray-500 mt-1">Kode dapat diperoleh dari menu "Koneksi Orang Tua" di akun anak</p>
|
|
</div>
|
|
<div class="sm:self-end">
|
|
<button type="submit"
|
|
class="w-full sm:w-auto px-6 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 shadow-md font-medium">
|
|
<i class="fas fa-link mr-2"></i>
|
|
Hubungkan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pesan Sukses/Error -->
|
|
@if(session('success'))
|
|
<div class="p-3 bg-green-100 text-green-700 rounded-lg text-sm flex items-center gap-2">
|
|
<i class="fas fa-check-circle"></i>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="p-3 bg-red-100 text-red-700 rounded-lg text-sm flex items-center gap-2">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@if(count($childrenData) > 0)
|
|
<!-- Statistik Gabungan -->
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
|
|
<!-- ... statistik cards (tetap sama) ... -->
|
|
</div>
|
|
|
|
<!-- Daftar Anak Terhubung -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="px-4 md:px-6 py-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-gray-100/50">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-semibold text-gray-800 flex items-center gap-2">
|
|
<i class="fas fa-users text-purple-600"></i>
|
|
Daftar Anak Terhubung
|
|
</h3>
|
|
<span class="text-xs bg-purple-100 text-purple-700 px-2 py-1 rounded-full">
|
|
{{ count($childrenData) }} anak
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divide-y divide-gray-100">
|
|
@foreach($childrenData as $child)
|
|
<div class="p-4 hover:bg-gray-50 transition-colors">
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-lg shrink-0">
|
|
{{ substr($child['name'], 0, 1) }}
|
|
</div>
|
|
<div>
|
|
<h4 class="font-medium text-gray-800">{{ $child['name'] }}</h4>
|
|
<p class="text-xs text-gray-500">{{ $child['email'] }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 ml-13 sm:ml-0">
|
|
<!-- Status Badge -->
|
|
@if($child['today_activity'])
|
|
<span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded-full flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></span>
|
|
Hari Ini
|
|
</span>
|
|
@else
|
|
<span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-700 rounded-full flex items-center gap-1">
|
|
<span class="w-1.5 h-1.5 bg-yellow-500 rounded-full animate-pulse"></span>
|
|
Belum Input
|
|
</span>
|
|
@endif
|
|
|
|
<!-- Action Buttons -->
|
|
<a href="{{ route('orangtua.child.visualization', $child['id']) }}"
|
|
class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Lihat Grafik">
|
|
<i class="fas fa-chart-line"></i>
|
|
</a>
|
|
<a href="{{ route('orangtua.child.detail', $child['id']) }}"
|
|
class="p-2 text-purple-600 hover:bg-purple-50 rounded-lg transition" title="Detail">
|
|
<i class="fas fa-info-circle"></i>
|
|
</a>
|
|
|
|
<!-- Tombol Hapus Koneksi -->
|
|
<button type="button"
|
|
onclick="showDisconnectModal({{ $child['id'] }}, '{{ $child['name'] }}')"
|
|
class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition"
|
|
title="Putuskan Koneksi">
|
|
<i class="fas fa-unlink"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ringkasan Cepat (muncul di mobile) -->
|
|
<div class="grid grid-cols-3 gap-2 mt-3 sm:hidden">
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">7 Hari</span>
|
|
<p class="text-sm font-bold text-gray-800">{{ $child['week_count'] }}x</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">Rata-rata</span>
|
|
<p class="text-sm font-bold text-gray-800">{{ $child['avg_duration'] }} mnt</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-2 rounded-lg text-center">
|
|
<span class="text-xs text-gray-500">Mood</span>
|
|
<p class="text-sm font-bold
|
|
@if($child['top_mood'] == 'Bagus') text-green-600
|
|
@elseif($child['top_mood'] == 'Lumayan') text-blue-600
|
|
@elseif($child['top_mood'] == 'Biasa Saja') text-gray-600
|
|
@elseif($child['top_mood'] == 'Cukup Jenuh') text-yellow-600
|
|
@elseif($child['top_mood'] == 'Jenuh') text-red-600
|
|
@else text-gray-400 @endif">
|
|
{{ $child['top_mood'] ? substr($child['top_mood'], 0, 3) : '-' }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar (hidden di mobile, tampil di desktop) -->
|
|
<div class="hidden sm:block mt-3">
|
|
<div class="flex justify-between text-xs text-gray-500 mb-1">
|
|
<span>Progress Minggu Ini</span>
|
|
<span class="font-medium">{{ $child['week_count'] }}/7 hari</span>
|
|
</div>
|
|
<div class="w-full bg-gray-200 rounded-full h-1.5">
|
|
<div class="bg-gradient-to-r from-blue-500 to-green-500 h-1.5 rounded-full"
|
|
style="width: {{ min(100, ($child['week_count']/7)*100) }}%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setelah Daftar Anak Terhubung -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
|
|
<!-- Pengingat -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
|
|
<h3 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<i class="fas fa-bell text-yellow-600"></i>
|
|
Pengingat Hari Ini
|
|
</h3>
|
|
<div class="space-y-3">
|
|
@php
|
|
$belumInput = collect($childrenData)->filter(fn($c) => !$c['today_activity'])->count();
|
|
@endphp
|
|
|
|
@if($belumInput > 0)
|
|
<div class="flex items-center gap-3 p-3 bg-yellow-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-exclamation text-yellow-600"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
<span class="font-bold">{{ $belumInput }}</span> anak belum input hari ini
|
|
</p>
|
|
<p class="text-xs text-gray-500">Ingatkan mereka untuk mencatat aktivitas!</p>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="flex items-center gap-3 p-3 bg-green-50 rounded-lg">
|
|
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
|
|
<i class="fas fa-check text-green-600"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-700">Semua anak sudah input hari ini!</p>
|
|
<p class="text-xs text-gray-500">Mantap! Pertahankan ya.</p>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistik Cepat -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
|
|
<h3 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
|
|
<i class="fas fa-chart-pie text-blue-600"></i>
|
|
Statistik Cepat
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
|
<span class="text-2xl font-bold text-blue-600">{{ $stats['total_anak'] }}</span>
|
|
<p class="text-xs text-gray-500">Anak</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
|
<span class="text-2xl font-bold text-green-600">{{ $stats['today_input'] }}</span>
|
|
<p class="text-xs text-gray-500">Input Hari Ini</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
|
<span class="text-2xl font-bold text-purple-600">{{ $stats['total_activities'] }}</span>
|
|
<p class="text-xs text-gray-500">Aktivitas 7 Hari</p>
|
|
</div>
|
|
<div class="bg-gray-50 p-3 rounded-lg text-center">
|
|
<span class="text-2xl font-bold text-yellow-600">{{ $stats['avg_mood'] }}</span>
|
|
<p class="text-xs text-gray-500">Rata Mood</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Setelah Daftar Anak Terhubung -->
|
|
<div class="mt-6">
|
|
<div class="bg-gradient-to-r from-purple-500 to-pink-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">
|
|
<i class="fas fa-lightbulb text-2xl"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-lg mb-2">💡 Tips untuk Anda</h3>
|
|
@php
|
|
$totalProgress = collect($childrenData)->avg('week_count') / 7 * 100;
|
|
$bestChild = collect($childrenData)->sortByDesc('week_count')->first();
|
|
@endphp
|
|
|
|
@if($totalProgress < 50)
|
|
<p class="text-purple-100 text-sm">
|
|
Ayo semangat! Masih ada <span class="font-bold">{{ 7 - collect($childrenData)->sum('week_count') }}</span>
|
|
aktivitas yang belum diinput minggu ini. Ingatkan anak untuk rutin belajar!
|
|
</p>
|
|
@elseif($totalProgress < 80)
|
|
<p class="text-purple-100 text-sm">
|
|
Bagus! Konsistensi belajar sudah <span class="font-bold">{{ round($totalProgress) }}%</span>.
|
|
Pertahankan dan tingkatkan lagi!
|
|
</p>
|
|
@else
|
|
<p class="text-purple-100 text-sm">
|
|
Luar biasa! Konsistensi belajar mencapai <span class="font-bold">{{ round($totalProgress) }}%</span>.
|
|
Beri apresiasi untuk anak-anak!
|
|
</p>
|
|
@endif
|
|
|
|
@if($bestChild)
|
|
<p class="text-purple-100 text-sm mt-2">
|
|
🏆 <span class="font-bold">{{ $bestChild['name'] }}</span> paling konsisten minggu ini
|
|
({{ $bestChild['week_count'] }} hari)!
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
@else
|
|
<!-- Empty State - Belum Ada Anak -->
|
|
<div class="bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden mt-6">
|
|
<div class="bg-gradient-to-r from-purple-600 to-indigo-600 p-8 text-center">
|
|
<div class="w-20 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-10 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 font-bold text-white mt-4">Belum Ada Anak Terhubung</h3>
|
|
<p class="text-purple-100 mt-2">Gunakan form di atas untuk menghubungkan dengan anak Anda</p>
|
|
</div>
|
|
|
|
<div class="p-6 text-center">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="bg-purple-50 rounded-lg p-4">
|
|
<h4 class="font-semibold text-purple-800 mb-2 flex items-center gap-2">
|
|
<i class="fas fa-info-circle"></i>
|
|
Cara Mendapatkan Kode:
|
|
</h4>
|
|
<ol class="text-left text-sm text-purple-700 space-y-2 list-decimal list-inside">
|
|
<li>Minta anak login ke akun LearnMood</li>
|
|
<li>Buka menu "Koneksi Orang Tua"</li>
|
|
<li>Generate kode 8 digit</li>
|
|
<li>Masukkan kode di form atas</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Modal Konfirmasi Hapus Koneksi -->
|
|
<div id="disconnectModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 px-4">
|
|
<div class="bg-white rounded-xl max-w-md w-full p-6 shadow-xl">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
|
|
<i class="fas fa-unlink text-red-600 text-2xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-800">Putuskan Koneksi?</h3>
|
|
<p class="text-sm text-gray-500 mt-2">
|
|
Anda akan memutuskan koneksi dengan <span id="childName" class="font-medium text-gray-700"></span>.
|
|
Data anak akan tetap tersimpan, tapi Anda tidak bisa lagi memantau perkembangannya.
|
|
</p>
|
|
</div>
|
|
|
|
<form id="disconnectForm" method="POST" action="">
|
|
@csrf
|
|
{{-- Gunakan method spoofing untuk DELETE --}}
|
|
@method('DELETE')
|
|
<div class="flex gap-3">
|
|
<button type="button"
|
|
onclick="hideDisconnectModal()"
|
|
class="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
|
|
Ya, Putuskan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showDisconnectModal(childId, childName) {
|
|
document.getElementById('childName').textContent = childName;
|
|
// Pastikan URL menggunakan prefix yang benar
|
|
document.getElementById('disconnectForm').action = "/orangtua/anak/" + childId + "/disconnect";
|
|
document.getElementById('disconnectModal').classList.remove('hidden');
|
|
document.getElementById('disconnectModal').classList.add('flex');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function hideDisconnectModal() {
|
|
document.getElementById('disconnectModal').classList.add('hidden');
|
|
document.getElementById('disconnectModal').classList.remove('flex');
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
document.getElementById('disconnectModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
hideDisconnectModal();
|
|
}
|
|
});
|
|
|
|
// Close modal with ESC key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
hideDisconnectModal();
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|