@extends('layouts.app')

@section('title', 'Dashboard Therapist')

@section('content')
<div class="space-y-4 animate-fade-in">
    
    <!-- Welcome Card -->
    <div class="relative bg-gradient-to-br from-primary-600 via-purple-600 to-pink-600 rounded-xl shadow-soft overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -mr-16 -mt-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-white/10 rounded-full -ml-12 -mb-12"></div>
        
        <div class="relative z-10 p-6">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 bg-white/20 backdrop-blur-xl rounded-lg flex items-center justify-center">
                    <i data-lucide="sparkles" class="w-5 h-5 text-white"></i>
                </div>
                <h1 class="text-xl font-bold text-white">
                    Halo, {{ auth()->user()->name }}!
                </h1>
            </div>
            <p class="text-white/90 text-sm font-medium">Semangat bekerja hari ini! 💪</p>
            <p class="text-white/70 text-xs mt-1">{{ now()->format('l, d F Y') }}</p>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-3">
        <a href="{{ route('therapist.schedules.create') }}" 
           class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-3 sm:p-4 active:scale-95 transition-all">
            <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                <i data-lucide="plus-circle" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-xs font-semibold text-gray-900 dark:text-white text-center">Tambah</p>
        </a>

        <a href="{{ route('therapist.schedules.index') }}" 
           class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-3 sm:p-4 active:scale-95 transition-all">
            <div class="w-10 h-10 bg-gradient-to-br from-accent-500 to-accent-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                <i data-lucide="calendar-days" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-xs font-semibold text-gray-900 dark:text-white text-center">Jadwal</p>
        </a>

        <a href="{{ route('therapist.history.index') }}" 
           class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-3 sm:p-4 active:scale-95 transition-all">
            <div class="w-10 h-10 bg-gradient-to-br from-emerald-500 to-green-600 rounded-lg flex items-center justify-center mx-auto mb-2">
                <i data-lucide="history" class="w-5 h-5 text-white"></i>
            </div>
            <p class="text-xs font-semibold text-gray-900 dark:text-white text-center">History</p>
        </a>
    </div>

    <!-- Panduan -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4">
        <div class="flex items-start gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
                <i data-lucide="book-open" class="w-5 h-5 text-white"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-3">Panduan Membuat Jadwal</h3>
                <ul class="space-y-2">
                    <li class="flex items-start gap-2">
                        <div class="w-4 h-4 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-2.5 h-2.5 text-green-600 dark:text-green-400"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Isi data pasien dengan lengkap dan benar</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <div class="w-4 h-4 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-2.5 h-2.5 text-green-600 dark:text-green-400"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Pilih jenis treatment sesuai layanan</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <div class="w-4 h-4 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-2.5 h-2.5 text-green-600 dark:text-green-400"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Upload bukti foto jika ada reimburse</span>
                    </li>
                    <!--<li class="flex items-start gap-2">
                        <div class="w-4 h-4 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                            <i data-lucide="check" class="w-2.5 h-2.5 text-green-600 dark:text-green-400"></i>
                        </div>
                        <span class="text-xs text-gray-700 dark:text-gray-300">Ubah status "Selesai" setelah treatment</span>
                    </li>-->
                </ul>
            </div>
        </div>
    </div>

    <!-- Peringatan -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4">
        <div class="flex items-start gap-3">
            <div class="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-600 rounded-lg flex items-center justify-center flex-shrink-0">
                <i data-lucide="alert-triangle" class="w-5 h-5 text-white"></i>
            </div>
            <div class="flex-1">
                <h3 class="text-base font-bold text-gray-900 dark:text-white mb-3">Peringatan Penting!</h3>
                <div class="space-y-2">
                    <div class="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 border-l-4 border-amber-400 dark:border-amber-600 p-3 rounded-r-lg">
                        <p class="text-xs text-amber-900 dark:text-amber-300 font-medium flex items-center">
                            <i data-lucide="bell" class="w-3.5 h-3.5 mr-2 flex-shrink-0"></i>
                            <span>Jangan lupa input jadwal hari ini!</span>
                        </p>
                    </div>
                    <div class="bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border-l-4 border-blue-400 dark:border-blue-600 p-3 rounded-r-lg">
                        <p class="text-xs text-blue-900 dark:text-blue-300 font-medium flex items-center">
                            <i data-lucide="info" class="w-3.5 h-3.5 mr-2 flex-shrink-0"></i>
                            <span>Input jadwal maksimal H+1</span>
                        </p>
                    </div>
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-l-4 border-green-400 dark:border-green-600 p-3 rounded-r-lg">
                        <p class="text-xs text-green-900 dark:text-green-300 font-medium flex items-center">
                            <i data-lucide="calendar-check" class="w-3.5 h-3.5 mr-2 flex-shrink-0"></i>
                            <span>Cek history untuk jadwal selesai</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Grafik Kinerja -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <h2 class="text-base font-bold text-gray-900 dark:text-white flex items-center">
                <i data-lucide="trending-up" class="w-4 h-4 mr-2 text-primary-600 dark:text-primary-400"></i>
                Grafik Kinerja Anda
            </h2>
            <p class="text-xs text-gray-600 dark:text-gray-400 mt-0.5">Total treatment per bulan ({{ date('Y') }})</p>
        </div>
        <div class="p-4">
            <div class="h-60 md:h-72">
                <canvas id="performanceChart" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
lucide.createIcons();

// Data untuk chart
const chartData = @json(array_values($chartData));

// Check dark mode
const isDarkMode = document.documentElement.classList.contains('dark');
const textColor = isDarkMode ? '#e5e7eb' : '#374151';
const gridColor = isDarkMode ? 'rgba(75, 85, 99, 0.2)' : 'rgba(0, 0, 0, 0.05)';

// Performance Chart
const ctx = document.getElementById('performanceChart').getContext('2d');
const performanceChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'],
        datasets: [{
            label: 'Treatment Selesai',
            data: chartData,
            backgroundColor: 'rgba(99, 102, 241, 0.8)',
            borderColor: 'rgb(99, 102, 241)',
            borderWidth: 2,
            borderRadius: 8,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                backgroundColor: isDarkMode ? 'rgba(31, 41, 55, 0.95)' : 'rgba(0, 0, 0, 0.8)',
                padding: 10,
                titleFont: {
                    size: 12,
                    weight: 'bold',
                    family: 'Inter'
                },
                bodyFont: {
                    size: 11,
                    family: 'Inter'
                },
                borderColor: isDarkMode ? 'rgba(75, 85, 99, 0.5)' : 'rgba(0, 0, 0, 0.1)',
                borderWidth: 1,
                cornerRadius: 6,
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1,
                    font: {
                        size: 10,
                        family: 'Inter'
                    },
                    color: textColor
                },
                grid: {
                    color: gridColor
                }
            },
            x: {
                ticks: {
                    font: {
                        size: 10,
                        weight: '500',
                        family: 'Inter'
                    },
                    color: textColor
                },
                grid: {
                    display: false
                }
            }
        }
    }
});

setTimeout(() => lucide.createIcons(), 100);
</script>
@endpush
@endsection