@extends('layouts.default')

@section('title', 'Executive Command Centre')

@section('content')
    <link rel="stylesheet" href="{{ asset('css/command-centre.css') }}">

    <main class="command-centre container-fluid" aria-label="Executive Command Centre">
        <div class="cc-page-heading">
            <div>
                <h1>Business at a glance</h1>
                <p>Commercial performance, client health and recurring revenue across the platform.</p>
            </div>
            <button class="cc-date" type="button" aria-label="Selected month: September 2026">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <rect x="3.5" y="5" width="17" height="15" rx="2" />
                    <path d="M7.5 3v4M16.5 3v4M3.5 9h17" />
                </svg>
                September 2026
            </button>
        </div>

        <section class="cc-kpis" aria-label="Business metrics">
            <article class="cc-card cc-kpi cc-kpi-danger">
                <div class="cc-kpi-top">
                    <span class="cc-kpi-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <circle cx="9" cy="8" r="3" />
                            <path d="M3 20v-1.5A4.5 4.5 0 0 1 7.5 14h3a4.5 4.5 0 0 1 4.5 4.5V20M17 8a3 3 0 0 1 0 6m1 1h.5a3.5 3.5 0 0 1 3.5 3.5V20" />
                        </svg>
                    </span>
                    <span class="cc-spark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                </div>
                <strong class="cc-kpi-value">24</strong>
                <span class="cc-kpi-label">Total Clients</span>
                <small class="cc-positive">+3 this quarter</small>
            </article>

            <article class="cc-card cc-kpi cc-kpi-success">
                <div class="cc-kpi-top">
                    <span class="cc-kpi-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <rect x="4" y="5" width="16" height="16" rx="2" />
                            <path d="M8 3v4m8-4v4M4 10h16" />
                        </svg>
                    </span>
                    <span class="cc-spark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                </div>
                <strong class="cc-kpi-value">18 Sep</strong>
                <span class="cc-kpi-label">Next Contract Expiry</span>
                <small class="cc-alert">3 contracts within 30 days</small>
            </article>

            <article class="cc-card cc-kpi cc-kpi-info">
                <div class="cc-kpi-top">
                    <span class="cc-kpi-icon cc-currency">$</span>
                    <span class="cc-spark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                </div>
                <strong class="cc-kpi-value">RM 184.5K</strong>
                <span class="cc-kpi-label">Total Revenue</span>
                <small class="cc-positive">+12.8% vs last month</small>
            </article>

            <article class="cc-card cc-kpi cc-kpi-purple">
                <div class="cc-kpi-top">
                    <span class="cc-kpi-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M3 17 9 11l4 4 8-9M15 6h6v6" />
                        </svg>
                    </span>
                    <span class="cc-spark" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
                </div>
                <strong class="cc-kpi-value">RM 2.14M</strong>
                <span class="cc-kpi-label">Annual Recurring Revenue</span>
                <small class="cc-positive">91% revenue retained</small>
            </article>
        </section>

        <section class="cc-main-grid" aria-label="Revenue and client portfolio">
            <article class="cc-card cc-panel cc-revenue-panel">
                <header class="cc-panel-header">
                    <div>
                        <h2>Monthly recurring revenue</h2>
                        <p>October 2025 – September 2026</p>
                    </div>
                    <div class="cc-panel-stat">
                        <strong>+18.6% YoY</strong>
                        <small>Healthy growth</small>
                    </div>
                </header>
                <div class="cc-chart" role="img" aria-label="Monthly recurring revenue rises from approximately RM 72,000 in October to RM 200,000 in September">
                    <div class="cc-y-labels"><span>200K</span><span>150K</span><span>100K</span><span>50K</span></div>
                    <svg class="cc-line-chart" viewBox="0 0 520 230" preserveAspectRatio="none" aria-hidden="true">
                        <defs>
                            <linearGradient id="cc-revenue-fill" x1="0" x2="0" y1="0" y2="1">
                                <stop offset="0" stop-color="#1768ce" stop-opacity=".25" />
                                <stop offset="1" stop-color="#1768ce" stop-opacity=".02" />
                            </linearGradient>
                        </defs>
                        <path class="cc-gridline" d="M0 15H520M0 75H520M0 135H520M0 195H520" />
                        <path class="cc-area" d="M0 185 L52 160 L104 170 L156 115 L208 102 L260 72 L312 84 L364 38 L416 22 L468 2 L520 -3 L520 210 L0 210Z" />
                        <path class="cc-line" d="M0 185 L52 160 L104 170 L156 115 L208 102 L260 72 L312 84 L364 38 L416 22 L468 2 L520 -3" />
                        <circle cx="520" cy="-3" r="6" class="cc-line-dot" />
                    </svg>
                    <div class="cc-x-labels"><span>Oct</span><span>Dec</span><span>Feb</span><span>Apr</span><span>Jun</span><span>Sep</span></div>
                </div>
            </article>

            <article class="cc-card cc-panel cc-portfolio-panel">
                <header class="cc-panel-header">
                    <div>
                        <h2>Client portfolio</h2>
                        <p>24 active accounts by segment</p>
                    </div>
                </header>
                <div class="cc-portfolio-content">
                    <div class="cc-donut-wrap" role="img" aria-label="24 clients: 12 residential, 7 commercial, and 5 corporate">
                        <canvas id="cc-portfolio-donut" aria-hidden="true"></canvas>
                        <div class="cc-donut-center"><strong>24</strong><span>CLIENTS</span></div>
                    </div>
                    <ul class="cc-legend">
                        <li>
                            <i class="cc-legend-blue"></i>
                            <span>Residential<strong>12 <em>accounts</em></strong></span>
                        </li>
                        <li>
                            <i class="cc-legend-sky"></i>
                            <span>Commercial<strong>7 <em>accounts</em></strong></span>
                        </li>
                        <li>
                            <i class="cc-legend-pale"></i>
                            <span>Corporate<strong>5 <em>accounts</em></strong></span>
                        </li>
                    </ul>
                </div>
            </article>
        </section>

        <section class="cc-bottom-grid" aria-label="Product revenue and upcoming contract expiries">
            <article class="cc-card cc-panel cc-products-panel">
                <header class="cc-panel-header">
                    <div>
                        <h2>Revenue by product</h2>
                        <p>September 2026</p>
                    </div>
                    <span class="cc-total">RM 184.5K total</span>
                </header>
                <div class="cc-product-list">
                    <div class="cc-product">
                        <div><span>Workforce &amp; Patrol</span><strong>RM 76.4K</strong></div>
                        <div class="cc-progress"><i style="width: 100%"></i></div>
                    </div>
                    <div class="cc-product">
                        <div><span>Visitor Management</span><strong>RM 48.2K</strong></div>
                        <div class="cc-progress cc-progress-sky"><i style="width: 63%"></i></div>
                    </div>
                    <div class="cc-product">
                        <div><span>Community Platform</span><strong>RM 36.7K</strong></div>
                        <div class="cc-progress cc-progress-purple"><i style="width: 48%"></i></div>
                    </div>
                    <div class="cc-product">
                        <div><span>Control Room</span><strong>RM 23.2K</strong></div>
                        <div class="cc-progress cc-progress-green"><i style="width: 30%"></i></div>
                    </div>
                </div>
            </article>

            <article class="cc-card cc-panel cc-expiry-panel">
                <header class="cc-panel-header">
                    <div>
                        <h2>Upcoming expiries</h2>
                        <p>Contracts requiring attention</p>
                    </div>
                    <span class="cc-due-badge">3 DUE SOON</span>
                </header>
                <div class="cc-expiry-list">
                    <div class="cc-expiry-row cc-expiry-soon">
                        <div class="cc-expiry-client"><strong>Vista Heights JMB</strong><small>Package A+B</small></div>
                        <div class="cc-expiry-date"><strong>18 Sep 2026</strong><small>15 days remaining</small></div>
                        <a class="badge badge-info light" href="{{ url('billing-revenue') }}">REVIEW</a>
                    </div>
                    <div class="cc-expiry-row">
                        <div class="cc-expiry-client"><strong>Lakeside Commercial Park</strong><small>Package B+C</small></div>
                        <div class="cc-expiry-date"><strong>27 Sep 2026</strong><small>24 days remaining</small></div>
                        <a class="badge badge-info light" href="{{ url('billing-revenue') }}">REVIEW</a>
                    </div>
                    <div class="cc-expiry-row">
                        <div class="cc-expiry-client"><strong>Central Properties Bhd</strong><small>Package A+B+D</small></div>
                        <div class="cc-expiry-date"><strong>02 Oct 2026</strong><small>29 days remaining</small></div>
                        <a class="badge badge-info light" href="{{ url('billing-revenue') }}">REVIEW</a>
                    </div>
                </div>
            </article>
        </section>
    </main>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/chart.js/Chart.bundle.min.js') }}"></script>
    <script>
        jQuery(function () {
            const canvas = document.getElementById('cc-portfolio-donut');

            if (!canvas || typeof Chart === 'undefined') {
                return;
            }

            new Chart(canvas, {
                type: 'doughnut',
                data: {
                    labels: ['Residential', 'Commercial', 'Corporate'],
                    datasets: [{
                        data: [12, 7, 5],
                        backgroundColor: ['#205fa7', '#4a91e5', '#b5d5fb'],
                        borderColor: '#ffffff',
                        borderWidth: 3,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '68%',
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    return context.label + ': ' + context.raw + ' accounts';
                                }
                            }
                        }
                    }
                }
            });
        });
    </script>
@endpush