@extends('layouts.admin')

@section('title', 'Dashboard Admin | Kim Salon & Spa')

@section('content')
    <div class="flex">
        @include('components.sidebar') <!-- Memanggil Sidebar -->
        <div class="w-full flex-grow p-6">
            <h1 class="text-3xl text-black pb-6">Dashboard Admin</h1>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <!-- Total Pelanggan -->
    <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-pink-500">
        <div class="flex items-center">
            <div class="bg-pink-100 p-4 rounded-full">
                <i class="fas fa-users text-pink-600 text-3xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-700">Total Pelanggan</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $users }}</p>
            </div>
        </div>
    </div>

    <!-- Total Layanan -->
    <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-purple-500">
        <div class="flex items-center">
            <div class="bg-purple-100 p-4 rounded-full">
                <i class="fas fa-spa text-purple-600 text-3xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-700">Total Layanan</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $fields }}</p>
            </div>
        </div>
    </div>

    <!-- Jadwal Terapis -->
    <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-yellow-500">
        <div class="flex items-center">
            <div class="bg-yellow-100 p-4 rounded-full">
                <i class="fas fa-calendar-check text-yellow-600 text-3xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-700">Jadwal Terapis</h3>
                <p class="text-3xl font-bold text-gray-800">{{ $schedules }}</p>
            </div>
        </div>
    </div>

    <!-- Total Reservasi -->
    <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-rose-500">
        <div class="flex items-center">
            <div class="bg-rose-100 p-4 rounded-full">
                <i class="fas fa-book-open text-rose-600 text-3xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-700">Total Reservasi</h3>
                <p class="text-3xl font-bold text-gray-800">
                    {{ is_array($bookings) ? array_sum($bookings) : $bookings }}
                </p>
            </div>
        </div>
    </div>

    <!-- Total Pendapatan -->
    <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-green-500">
        <div class="flex items-center">
            <div class="bg-green-100 p-4 rounded-full">
                <i class="fas fa-wallet text-green-600 text-3xl"></i>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-gray-700">Total Pendapatan</h3>
                <p class="text-3xl font-bold text-gray-800">
                    Rp{{ number_format($totalPayments, 0, ',', '.') }}
                </p>
            </div>
        </div>
    </div>

</div>

            <!-- Statistik Section -->
            <div class="mt-12">
                <h2 class="text-2xl font-semibold text-gray-700 mb-6">Statistik Payment</h2>

                <!-- Grafik Payment -->
                <div class="bg-white p-6 rounded-lg shadow-lg">
                    <h3 class="text-lg font-semibold text-gray-700 mb-4">Statistik Payment</h3>
                    <canvas id="paymentChart" class="w-full"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Grafik Payment
        const paymentCtx = document.getElementById('paymentChart').getContext('2d');
        new Chart(paymentCtx, {
            type: 'bar',
            data: {
                labels: ['Pending', 'Paid', 'Failed'],
                datasets: [{
                    label: 'Payments',
                    data: [
                        {{ $payments['pending'] ?? 0 }},
                        {{ $payments['paid'] ?? 0 }},
                        {{ $payments['failed'] ?? 0 }}
                    ],
                    backgroundColor: ['#FFD700', '#32CD32', '#FF4500'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        display: false // Menonaktifkan legenda
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Payments', // Teks vertikal
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            color: '#4A5568'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Status',
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            color: '#4A5568'
                        }
                    }
                }
            }
        });
    </script>
@endsection