@extends('admin/layouts/default')

@section('title')
    Dashboard
    @parent
@stop

@section('header_styles')
    <!-- DataTables / Select2 CSS -->
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/pages/tables.css') }}" />

    <!-- Chart.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Dashboard Card CSS -->
    <style>
        .dashboard-card {
            padding: 40px 20px;
            border-radius: 12px;
            text-align: center;
            color: #fff;
            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }

        .dashboard-card:hover {
            transform: translateY(-5px);
        }

        .dashboard-card h3 {
            font-size: 40px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .dashboard-card p {
            font-size: 18px;
            font-weight: 600;
        }

        .total-card {
            background: linear-gradient(45deg, #007bff, #00c6ff);
        }

        .today-card {
            background: linear-gradient(45deg, #28a745, #7bed9f);
        }

        /* Chart container */
        #mealChartContainer {
            margin-top: 40px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        }
    </style>
@stop

@section('content')
    <section class="content-header">
        <h1><font color='#8b4513'>Onecard System</font></h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}"><i class="livicon" data-name="home" data-size="16" data-color="#000"></i> Dashboard</a></li>
            <li>cafe dashboard</li>
            <li class="active">Onecard management system</li>
        </ol>
    </section>

    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title">
                <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                Onecard System Dashboard
            </h4>
        </div>

        <div class="panel-body">
        @php
            use Carbon\Carbon;

            $totalUsed = DB::table('mealcards')->count();

            $breakfastUsed = DB::table('mealcards')
                                ->whereDate('date', '=', Carbon::today())
                                ->where('ቁርስ', '1')
                                ->count();

            $lunchUsed = DB::table('mealcards')
                            ->whereDate('date', '=', Carbon::today())
                            ->where('ምሳ', '1')
                            ->count();

            $dinnerUsed = DB::table('mealcards')
                            ->whereDate('date', '=', Carbon::today())
                            ->where('ራት', '1')
                            ->count();
         $todayUsed =$breakfastUsed+$lunchUsed+$dinnerUsed;

        @endphp


        <!-- Dashboard Cards -->
            <div class="row">
                <div class="col-md-6">
                    <div class="dashboard-card total-card">
                        <h3>{{ $totalUsed }}</h3>
                        <p>Total Students Used</p>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="dashboard-card today-card">
                        <h3>{{ $todayUsed }}</h3>
                        <p>Total Used Today</p>
                    </div>
                </div>
            </div>

            <!-- Meal Usage Chart -->
            <div id="mealChartContainer">
                <canvas id="mealChart" height="120"></canvas>
            </div>
        </div>
    </div>
@stop

@section('footer_scripts')
    <script>
        const ctx = document.getElementById('mealChart').getContext('2d');
        const mealChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['ቁርስ', 'ምሳ', 'ራት'],
                datasets: [{
                    label: 'Meal Usage Today',
                    data: [{{ $breakfastUsed }}, {{ $lunchUsed }}, {{ $dinnerUsed }}],
                    backgroundColor: [
                        'rgba(0, 123, 255, 0.7)',
                        'rgba(40, 167, 69, 0.7)',
                        'rgba(220, 53, 69, 0.7)'
                    ],
                    borderColor: [
                        'rgba(0, 123, 255, 1)',
                        'rgba(40, 167, 69, 1)',
                        'rgba(220, 53, 69, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            stepSize: 1
                        },
                        title: {
                            display: true,
                            text: 'Number of Students'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Meal Type'
                        }
                    }
                }
            }
        });
    </script>
@stop