@extends('adminlte::page')

@section('title', 'Dashboard | ' . Config::get('adminlte.title'))

@php
    use Carbon\Carbon;
    use Illuminate\Support\Str;

    $selectedMonthDate = Carbon::parse($selectedMonth . '-01');
    $daysInMonth = $selectedMonthDate->daysInMonth;
    $presentDays = $selectedUserMonthlyStats['present_days'] ?? 0;
    $absentDays = max($daysInMonth - $presentDays, 0);
    $lateDays = $selectedUserMonthlyStats['late_days'] ?? 0;
    $overtimeDays = $selectedUserMonthlyStats['overtime_days'] ?? 0;
    $monthlyTotal = max($presentDays + $absentDays, 1);
    $presentPct = round(($presentDays / $monthlyTotal) * 100);
    $absentPct = round(($absentDays / $monthlyTotal) * 100);
    $latePct = round(($lateDays / $monthlyTotal) * 100);

    $weeklyBuckets = collect(range(1, 5))->map(function ($week) use ($selectedUserMonthlyAttendances) {
        $records = $selectedUserMonthlyAttendances->filter(function ($attendance) use ($week) {
            $date = $attendance->date;
            if (!$date) {
                return false;
            }

            return (int) ceil($date->day / 7) === $week;
        });

        return [
            'label' => 'Week ' . $week,
            'present' => $records->count(),
            'late' => $records->filter(fn ($attendance) => ($attendance->late_time ?? '00:00:00') > '00:00:00')->count(),
            'overtime' => $records->filter(fn ($attendance) => ($attendance->over_time ?? '00:00:00') > '00:00:00')->count(),
        ];
    });

    $yearLabels = $selectedUserYearlyCards->pluck('label')->values();
    $yearPresent = $selectedUserYearlyCards->pluck('present_days')->values();
    $yearLate = $selectedUserYearlyCards->pluck('late_days')->values();
    $yearOvertime = $selectedUserYearlyCards->pluck('overtime_days')->values();
@endphp

@section('content_header')
<h1>Dashboard</h1>
@stop

@section('content')
<div class="saas-shell">
    <section class="saas-topbar">
        <div>
            <p class="eyebrow">Operations dashboard</p>
            <h2>Welcome back, {{ Str::of(Auth::user()->name)->before(' ') ?: Auth::user()->name }}.</h2>
            <p class="subcopy">Monitor attendance, review staff trends, and jump into the most common admin tasks from one screen.</p>
        </div>
        <div class="topbar-meta">
            <span class="meta-pill">
                <i class="far fa-calendar-alt"></i>
                {{ Carbon::parse($today)->format('d M Y, l') }}
            </span>
            <span class="meta-pill accent">
                <i class="fas fa-user-clock"></i>
                {{ $selectedUserLabel }}
            </span>
        </div>
    </section>

    <section class="filter-panel">
        <form method="GET" action="{{ route('home') }}">
            <div class="row">
                <div class="col-xl-3 col-md-6 form-group">
                    <label for="user_id">Employee</label>
                    @if($canChooseUsers)
                    <select name="user_id" id="user_id" class="form-control">
                        <option value="" @if($selectedUserId === null) selected @endif>All Users</option>
                        @foreach($users as $user)
                        <option value="{{ $user->id }}" @if((int) $selectedUserId === (int) $user->id) selected @endif>{{ $user->name }}</option>
                        @endforeach
                    </select>
                    @else
                    <input type="text" class="form-control" value="{{ $selectedUserLabel }}" disabled>
                    @endif
                </div>
                <div class="col-xl-3 col-md-6 form-group">
                    <label for="date">Daily View</label>
                    <input type="date" name="date" id="date" class="form-control" value="{{ $selectedDate }}">
                </div>
                <div class="col-xl-3 col-md-6 form-group">
                    <label for="month">Monthly View</label>
                    <input type="month" name="month" id="month" class="form-control" value="{{ $selectedMonth }}">
                </div>
                <div class="col-xl-2 col-md-4 form-group">
                    <label for="year">Year</label>
                    <input type="number" name="year" id="year" min="2000" max="2100" class="form-control" value="{{ $selectedYear }}">
                </div>
                <div class="col-xl-1 col-md-2 form-group d-flex align-items-end">
                    <button type="submit" class="btn btn-primary btn-block">Go</button>
                </div>
            </div>
        </form>
    </section>

    <section class="summary-grid">
        @if(Auth::user()->hasRole('administrator'))
        <article class="summary-card tone-blue">
            <div class="summary-icon"><i class="fas fa-users"></i></div>
            <div>
                <span>Total Users</span>
                <strong>{{ $userCount }}</strong>
                <small>Registered staff in system</small>
            </div>
        </article>
        @endif
        <article class="summary-card tone-green">
            <div class="summary-icon"><i class="fas fa-user-check"></i></div>
            <div>
                <span>Present Today</span>
                <strong>{{ $attendaceToday }}</strong>
                <small>{{ $attendanceCheckedOutToday }} checked out</small>
            </div>
        </article>
        <article class="summary-card tone-amber">
            <div class="summary-icon"><i class="far fa-clock"></i></div>
            <div>
                <span>Late Today</span>
                <strong>{{ $attendanceLateToday }}</strong>
                <small>{{ $latePct }}% of monthly records</small>
            </div>
        </article>
        <article class="summary-card tone-violet">
            <div class="summary-icon"><i class="fas fa-file-medical"></i></div>
            <div>
                <span>On Leave Today</span>
                <strong>{{ $leaveTodayCount }}</strong>
                <small>{{ $areaCount }} active areas</small>
            </div>
        </article>
    </section>

    <section class="dashboard-grid">
        <div class="main-column">
            <div class="panel-card overview-panel">
                <div class="panel-head">
                    <div>
                        <h3>Attendance Overview</h3>
                        <p>Monthly attendance pattern for {{ $selectedUserLabel }}</p>
                    </div>
                    <span class="panel-chip">{{ $selectedMonth }}</span>
                </div>
                <div class="chart-wrap tall">
                    <canvas id="attendanceOverviewChart"></canvas>
                </div>
            </div>

            <div class="bottom-split">
                <div class="panel-card">
                    <div class="panel-head">
                        <div>
                            <h3>Attendance Summary</h3>
                            <p>{{ $selectedMonthDate->format('F Y') }}</p>
                        </div>
                    </div>
                    <div class="donut-layout">
                        <div class="chart-wrap donut">
                            <canvas id="attendanceDonutChart"></canvas>
                        </div>
                        <div class="legend-stack">
                            <div class="legend-row">
                                <span class="legend-dot green"></span>
                                <div>
                                    <b>Present</b>
                                    <small>{{ $presentPct }}% ({{ $presentDays }})</small>
                                </div>
                            </div>
                            <div class="legend-row">
                                <span class="legend-dot red"></span>
                                <div>
                                    <b>Absent Estimate</b>
                                    <small>{{ $absentPct }}% ({{ $absentDays }})</small>
                                </div>
                            </div>
                            <div class="legend-row">
                                <span class="legend-dot violet"></span>
                                <div>
                                    <b>Late Days</b>
                                    <small>{{ $latePct }}% ({{ $lateDays }})</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="panel-card">
                    <div class="panel-head">
                        <div>
                            <h3>Monthly Trend</h3>
                            <p>Weekly movement inside {{ $selectedMonth }} for {{ $selectedUserLabel }}</p>
                        </div>
                    </div>
                    <div class="chart-wrap medium">
                        <canvas id="monthlyTrendChart"></canvas>
                    </div>
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-head">
                    <div>
                        <h3>Recent Activity</h3>
                        <p>Latest attendance entries</p>
                    </div>
                    <span class="panel-chip">Live snapshot</span>
                </div>
                <div class="table-responsive">
                    <table class="table modern-table mb-0">
                        <thead>
                            <tr>
                                <th>Employee</th>
                                <th>Date</th>
                                <th>Check In</th>
                                <th>Check Out</th>
                                <th>Late</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentAttendances as $attendance)
                            <tr>
                                <td>
                                    <div class="person-cell">
                                        <span class="person-dot"></span>
                                        <span>{{ optional($attendance->user)->name ?? 'Unknown user' }}</span>
                                    </div>
                                </td>
                                <td>{{ optional($attendance->date)->format('Y-m-d') }}</td>
                                <td>{{ optional($attendance->in_time)->format('H:i:s') ?? '--' }}</td>
                                <td>{{ optional($attendance->out_time)->format('H:i:s') ?? '--' }}</td>
                                <td>{{ optional($attendance->late_time)->format('H:i:s') ?? '--' }}</td>
                                <td>
                                    @if($attendance->out_time)
                                    <span class="status-pill success">Completed</span>
                                    @else
                                    <span class="status-pill warning">Checked In</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="empty-state">No recent attendance data.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="side-column">
            <div class="profile-panel">
                <div class="profile-top">
                    <img src="{{ asset('uploads/' . ($selectedUser ? $selectedUser->image : 'default-user.png')) }}" alt="{{ $selectedUserLabel }}" class="profile-avatar">
                    <div>
                        <p class="eyebrow">Selected Employee</p>
                        <h3>{{ $selectedUserLabel }}</h3>
                        <span>{{ $selectedUser ? $selectedUser->email : 'Aggregated team attendance view' }}</span>
                    </div>
                </div>
                <div class="profile-metrics">
                    <div>
                        <span>Avg In</span>
                        <strong>{{ $selectedUserMonthlyStats['avg_check_in'] }}</strong>
                    </div>
                    <div>
                        <span>Avg Out</span>
                        <strong>{{ $selectedUserMonthlyStats['avg_check_out'] }}</strong>
                    </div>
                    <div>
                        <span>Present Days</span>
                        <strong>{{ $selectedUserMonthlyStats['present_days'] }}</strong>
                    </div>
                    <div>
                        <span>Early Out</span>
                        <strong>{{ $selectedUserMonthlyStats['early_out_days'] }}</strong>
                    </div>
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-head">
                    <div>
                        <h3>Quick Actions</h3>
                        <p>Common admin shortcuts</p>
                    </div>
                </div>
                <div class="quick-grid">
                    <a href="{{ route('attendances') }}" class="quick-card blue">
                        <i class="fas fa-fingerprint"></i>
                        <span>Attendance</span>
                    </a>
                    @if(Auth::user()->hasRole('administrator'))
                    <a href="{{ route('users') }}" class="quick-card green">
                        <i class="fas fa-user-plus"></i>
                        <span>Manage Users</span>
                    </a>
                    @endif
                    <a href="{{ route('leave-requests') }}" class="quick-card amber">
                        <i class="fas fa-file-signature"></i>
                        <span>Leave Requests</span>
                    </a>
                    <a href="{{ route('settings') }}" class="quick-card violet">
                        <i class="fas fa-chart-column"></i>
                        <span>Settings</span>
                    </a>
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-head">
                    <div>
                        <h3>Events This Month</h3>
                        <p>Operational calendar</p>
                    </div>
                </div>
                <div class="event-list">
                    @forelse ($events as $event)
                    <div class="event-item">
                        <span>{{ $event->start_date->format('d M Y') }}</span>
                        <h5>{{ $event->title }}</h5>
                        <p>{{ $event->desc }}</p>
                    </div>
                    @empty
                    <div class="empty-panel">There is no event this month.</div>
                    @endforelse
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-head">
                    <div>
                        <h3>Yearly Snapshot</h3>
                        <p>{{ $selectedYear }} attendance map</p>
                    </div>
                </div>
                <div class="year-mini-grid">
                    @foreach($selectedUserYearlyCards as $month)
                    <div class="year-mini-card">
                        <span>{{ $month['label'] }}</span>
                        <strong>{{ $month['present_days'] }}</strong>
                        <small>L {{ $month['late_days'] }} | O {{ $month['overtime_days'] }}</small>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
</div>
@stop

@section('css')
<style>
    :root {
        --home-bg: #f3f7fd;
        --home-surface: #ffffff;
        --home-border: #dbe5f2;
        --home-ink: #15233b;
        --home-muted: #64748b;
        --home-blue: #2f6df6;
        --home-green: #22a861;
        --home-amber: #e8a11c;
        --home-red: #ef4444;
        --home-violet: #8b5cf6;
        --home-shadow: 0 22px 50px rgba(30, 41, 59, .08);
    }

    .content-wrapper,
    .content-header,
    .content {
        background: var(--home-bg);
    }

    .saas-shell {
        display: grid;
        gap: 1.5rem;
        padding-bottom: 1rem;
    }

    .saas-topbar,
    .filter-panel,
    .summary-card,
    .panel-card,
    .profile-panel {
        background: var(--home-surface);
        border: 1px solid var(--home-border);
        box-shadow: var(--home-shadow);
    }

    .saas-topbar {
        border-radius: 28px;
        padding: 1.6rem 1.8rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }

    .eyebrow {
        margin: 0 0 .35rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .72rem;
        font-weight: 800;
        color: var(--home-blue);
    }

    .saas-topbar h2,
    .panel-head h3,
    .profile-top h3 {
        margin: 0;
        color: var(--home-ink);
        font-weight: 800;
    }

    .subcopy,
    .panel-head p,
    .profile-top span {
        margin: .35rem 0 0;
        color: var(--home-muted);
    }

    .topbar-meta {
        display: flex;
        gap: .75rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .meta-pill,
    .panel-chip {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .7rem 1rem;
        border-radius: 999px;
        background: #eef4ff;
        color: var(--home-ink);
        font-weight: 600;
    }

    .meta-pill.accent {
        background: #ebfff3;
    }

    .filter-panel {
        border-radius: 24px;
        padding: 1.25rem 1.3rem .3rem;
    }

    .filter-panel label {
        color: var(--home-muted);
        font-size: .8rem;
        font-weight: 700;
        margin-bottom: .45rem;
    }

    .summary-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }

    .summary-card {
        border-radius: 24px;
        padding: 1.2rem;
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .summary-card strong {
        display: block;
        font-size: 2.1rem;
        line-height: 1;
        color: var(--home-ink);
        margin: .2rem 0 .35rem;
    }

    .summary-card span,
    .summary-card small {
        display: block;
    }

    .summary-card span {
        color: var(--home-ink);
        font-weight: 700;
    }

    .summary-card small {
        color: var(--home-muted);
    }

    .summary-icon {
        width: 68px;
        height: 68px;
        border-radius: 20px;
        display: grid;
        place-items: center;
        font-size: 1.6rem;
    }

    .tone-blue .summary-icon { background: rgba(47, 109, 246, .12); color: var(--home-blue); }
    .tone-green .summary-icon { background: rgba(34, 168, 97, .12); color: var(--home-green); }
    .tone-amber .summary-icon { background: rgba(232, 161, 28, .14); color: var(--home-amber); }
    .tone-violet .summary-icon { background: rgba(139, 92, 246, .12); color: var(--home-violet); }

    .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
        gap: 1.25rem;
    }

    .main-column,
    .side-column,
    .bottom-split {
        display: grid;
        gap: 1.25rem;
    }

    .bottom-split {
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    }

    .panel-card,
    .profile-panel {
        border-radius: 24px;
        overflow: hidden;
    }

    .panel-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.35rem 1.35rem 0;
    }

    .chart-wrap {
        position: relative;
        padding: 1rem 1.25rem 1.25rem;
    }

    .chart-wrap.tall { height: 340px; }
    .chart-wrap.medium { height: 280px; }
    .chart-wrap.donut { height: 220px; }

    .donut-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: .5rem;
        align-items: center;
        padding-right: 1rem;
    }

    .legend-stack {
        display: grid;
        gap: .9rem;
    }

    .legend-row {
        display: flex;
        align-items: center;
        gap: .8rem;
    }

    .legend-dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        flex: 0 0 auto;
    }

    .legend-dot.green { background: #22a861; }
    .legend-dot.red { background: #ef4444; }
    .legend-dot.violet { background: #8b5cf6; }

    .legend-row b,
    .legend-row small {
        display: block;
    }

    .legend-row small {
        color: var(--home-muted);
    }

    .profile-panel {
        padding: 1.35rem;
    }

    .profile-top {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.2rem;
    }

    .profile-avatar {
        width: 74px;
        height: 74px;
        border-radius: 22px;
        object-fit: cover;
        border: 3px solid rgba(47, 109, 246, .16);
    }

    .profile-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem;
    }

    .profile-metrics div,
    .year-mini-card,
    .quick-card {
        border: 1px solid var(--home-border);
        border-radius: 18px;
        background: #f9fbff;
    }

    .profile-metrics div {
        padding: .95rem;
    }

    .profile-metrics span,
    .year-mini-card span {
        display: block;
        color: var(--home-muted);
        font-size: .82rem;
    }

    .profile-metrics strong,
    .year-mini-card strong {
        display: block;
        margin-top: .3rem;
        color: var(--home-ink);
        font-size: 1.35rem;
    }

    .quick-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .9rem;
        padding: 1.1rem 1.25rem 1.25rem;
    }

    .quick-card {
        min-height: 126px;
        display: grid;
        place-items: center;
        text-align: center;
        gap: .45rem;
        padding: 1rem;
        color: var(--home-ink);
        font-weight: 700;
        text-decoration: none;
    }

    .quick-card i {
        font-size: 1.75rem;
    }

    .quick-card.blue { background: #edf4ff; color: #2f6df6; }
    .quick-card.green { background: #eefbf4; color: #22a861; }
    .quick-card.amber { background: #fff7e8; color: #e8a11c; }
    .quick-card.violet { background: #f3efff; color: #8b5cf6; }

    .event-list {
        padding: 1.1rem 1.25rem 1.25rem;
    }

    .event-item {
        padding: .9rem 1rem;
        border-radius: 18px;
        background: #f9fbff;
        border: 1px solid var(--home-border);
        margin-bottom: .85rem;
    }

    .event-item span,
    .event-item p,
    .year-mini-card small {
        color: var(--home-muted);
    }

    .event-item h5 {
        margin: .25rem 0;
        color: var(--home-ink);
        font-weight: 700;
    }

    .empty-panel,
    .empty-state {
        color: var(--home-muted);
        text-align: center;
        padding: 1.2rem;
    }

    .year-mini-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .8rem;
        padding: 1.1rem 1.25rem 1.25rem;
    }

    .year-mini-card {
        padding: .85rem;
    }

    .modern-table thead th {
        border-top: 0;
        color: var(--home-muted);
        font-size: .76rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .modern-table tbody td {
        vertical-align: middle;
        color: var(--home-ink);
    }

    .person-cell {
        display: flex;
        align-items: center;
        gap: .7rem;
        font-weight: 600;
    }

    .person-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #7cfc00;
        flex: 0 0 auto;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        padding: .35rem .75rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 800;
    }

    .status-pill.success {
        background: #dcfce7;
        color: #166534;
    }

    .status-pill.warning {
        background: #fef3c7;
        color: #92400e;
    }

    @media (max-width: 1199.98px) {
        .summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-grid,
        .bottom-split,
        .donut-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .saas-topbar {
            flex-direction: column;
            align-items: flex-start;
        }

        .topbar-meta,
        .summary-grid,
        .profile-metrics,
        .quick-grid,
        .year-mini-grid {
            grid-template-columns: 1fr;
        }

        .chart-wrap.tall { height: 280px; }
        .chart-wrap.medium { height: 240px; }
    }
</style>
@stop

@section('js')
<script src="{{ asset('vendor/chart.js/Chart.bundle.js') }}"></script>
<script>
    $(function () {
        const baseFontColor = '#64748b';
        const gridColor = 'rgba(148, 163, 184, 0.16)';

        new Chart(document.getElementById('attendanceOverviewChart'), {
            type: 'line',
            data: {
                labels: @json($yearLabels),
                datasets: [
                    {
                        label: 'Present',
                        data: @json($yearPresent),
                        borderColor: '#22a861',
                        backgroundColor: 'rgba(34, 168, 97, 0.10)',
                        pointBackgroundColor: '#22a861',
                        borderWidth: 3,
                        fill: true,
                        lineTension: 0.35
                    },
                    {
                        label: 'Late',
                        data: @json($yearLate),
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.08)',
                        pointBackgroundColor: '#ef4444',
                        borderWidth: 2,
                        fill: false,
                        lineTension: 0.35
                    },
                    {
                        label: 'Overtime',
                        data: @json($yearOvertime),
                        borderColor: '#8b5cf6',
                        backgroundColor: 'rgba(139, 92, 246, 0.08)',
                        pointBackgroundColor: '#8b5cf6',
                        borderWidth: 2,
                        fill: false,
                        lineTension: 0.35
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'top',
                    labels: {
                        fontColor: baseFontColor,
                        boxWidth: 12
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: { display: false },
                        ticks: { fontColor: baseFontColor }
                    }],
                    yAxes: [{
                        gridLines: { color: gridColor, drawBorder: false },
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            fontColor: baseFontColor
                        }
                    }]
                }
            }
        });

        new Chart(document.getElementById('attendanceDonutChart'), {
            type: 'doughnut',
            data: {
                labels: ['Present', 'Absent Estimate', 'Late Days'],
                datasets: [{
                    data: [{{ $presentDays }}, {{ $absentDays }}, {{ $lateDays }}],
                    backgroundColor: ['#22a861', '#ef4444', '#8b5cf6'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutoutPercentage: 68,
                legend: { display: false }
            }
        });

        new Chart(document.getElementById('monthlyTrendChart'), {
            type: 'bar',
            data: {
                labels: @json($weeklyBuckets->pluck('label')->values()),
                datasets: [
                    {
                        label: 'Present',
                        data: @json($weeklyBuckets->pluck('present')->values()),
                        backgroundColor: '#22a861'
                    },
                    {
                        label: 'Late',
                        data: @json($weeklyBuckets->pluck('late')->values()),
                        backgroundColor: '#ef4444'
                    },
                    {
                        label: 'Overtime',
                        data: @json($weeklyBuckets->pluck('overtime')->values()),
                        backgroundColor: '#8b5cf6'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'top',
                    labels: {
                        fontColor: baseFontColor,
                        boxWidth: 12
                    }
                },
                scales: {
                    xAxes: [{
                        gridLines: { display: false },
                        ticks: { fontColor: baseFontColor }
                    }],
                    yAxes: [{
                        gridLines: { color: gridColor, drawBorder: false },
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            fontColor: baseFontColor
                        }
                    }]
                }
            }
        });
    });
</script>
@stop