@extends('layouts/layoutMaster')

@section('title', ($companyDetails['name'] ?? 'Client') . ' — Dashboard')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/apex-charts/apexcharts.js') }}"></script>
@endsection

@section('page-style')
    <style>
        .client-detail-nav .nav-link {
            color: #697a8d;
            border-radius: 0.375rem;
            padding: 0.55rem 1rem;
        }
        .client-detail-nav .nav-link:hover {
            background-color: rgba(105, 122, 141, 0.08);
        }
        .client-detail-nav .nav-link.active {
            color: #696cff;
            background-color: rgba(105, 108, 255, 0.08);
            font-weight: 600;
        }
        .activity-timeline {
            position: relative;
            padding-left: 1.75rem;
        }
        .activity-timeline::before {
            content: '';
            position: absolute;
            left: 0.5rem;
            top: 0.5rem;
            bottom: 0.5rem;
            width: 2px;
            background: #e7e7e8;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 1.25rem;
        }
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        .timeline-dot {
            position: absolute;
            left: -1.75rem;
            top: 0.25rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid;
            background: #fff;
        }
        .quick-link-card {
            transition: all 0.2s;
            cursor: pointer;
        }
        .quick-link-card:hover {
            box-shadow: 0 0.25rem 1rem rgba(105, 108, 255, 0.15);
            transform: translateY(-2px);
        }
    </style>
@endsection

@section('content')
    @php $clientId = $companyDetails['id'] ?? ''; @endphp

    {{-- Page Header --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Client Details</h4>
                    <p class="text-muted mb-0">Overview and summary for this client.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ url('clients') }}">Clients</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $companyDetails['name'] ?? 'Dashboard' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    {{-- Company Header Card --}}
    @include('companies.administrator._header', ['companyDetails' => $companyDetails])

    {{-- Left Nav + Right Content --}}
    <div class="row g-4">
        {{-- Left Sidebar Navigation --}}
        <div class="col-12 col-lg-3">
            @include('companies.administrator._nav', ['activePage' => 'dashboard', 'companyDetails' => $companyDetails])
        </div>

        {{-- Right Content --}}
        <div class="col-12 col-lg-9">

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 1: Summary Stat Cards --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-3 mb-4">
                {{-- Outstanding Balance --}}
                <div class="col-sm-6 col-lg-3">
                    <div class="card p-3 h-100">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-currency-dollar ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">RM 42.5K</h5>
                                <small class="text-muted">Outstanding</small>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Open Document Requests --}}
                <div class="col-sm-6 col-lg-3">
                    <div class="card p-3 h-100">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-file-plus ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">5</h5>
                                <small class="text-muted">Open DR</small>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Active Users --}}
                <div class="col-sm-6 col-lg-3">
                    <div class="card p-3 h-100">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-success"><i class="ti ti-users ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">8</h5>
                                <small class="text-muted">Users</small>
                            </div>
                        </div>
                    </div>
                </div>
                {{-- Repository Files --}}
                <div class="col-sm-6 col-lg-3">
                    <div class="card p-3 h-100">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm me-3">
                                <span class="avatar-initial rounded bg-label-info"><i class="ti ti-archive ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">24</h5>
                                <small class="text-muted">Files</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 2: Billing Trend (Area) + Aging Donut --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-4 mb-4">
                {{-- Billing Trend — Area Chart --}}
                <div class="col-lg-8">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between pb-0">
                            <div>
                                <h5 class="card-title mb-0">Billing Trend</h5>
                                <small class="text-muted">Invoiced vs Collected (12 months)</small>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown">
                                    FY2025
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">FY2025</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">FY2024</a></li>
                                    <li><a class="dropdown-item" href="javascript:void(0);">FY2023</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-body pt-2">
                            <div id="billingTrendChart"></div>
                        </div>
                    </div>
                </div>

                {{-- Aging Breakdown — Donut Chart --}}
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">Aging Breakdown</h5>
                            <small class="text-muted">Outstanding by age</small>
                        </div>
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div id="agingDonutChart"></div>
                            <ul class="list-unstyled mt-3 mb-0">
                                <li class="d-flex align-items-center mb-2">
                                    <span class="badge bg-success p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">Current</span>
                                    <span class="small fw-medium">RM 12,400</span>
                                </li>
                                <li class="d-flex align-items-center mb-2">
                                    <span class="badge bg-info p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">1-30 Days</span>
                                    <span class="small fw-medium">RM 8,500</span>
                                </li>
                                <li class="d-flex align-items-center mb-2">
                                    <span class="badge bg-warning p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">31-60 Days</span>
                                    <span class="small fw-medium">RM 6,200</span>
                                </li>
                                <li class="d-flex align-items-center mb-2">
                                    <span class="badge bg-danger p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">61-90 Days</span>
                                    <span class="small fw-medium">RM 3,800</span>
                                </li>
                                <li class="d-flex align-items-center">
                                    <span class="badge bg-dark p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">90+ Days</span>
                                    <span class="small fw-medium">RM 11,600</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 3: DR Status (Horizontal Bar) + Users by Role (Radial) --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-4 mb-4">
                {{-- Document Requests by Status — Horizontal Bar --}}
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between pb-0">
                            <div>
                                <h5 class="card-title mb-0">Document Requests</h5>
                                <small class="text-muted">By status breakdown</small>
                            </div>
                            <a href="{{ url('clients/' . $clientId . '/documents/requests') }}" class="btn btn-sm btn-label-primary">
                                View All
                            </a>
                        </div>
                        <div class="card-body pt-2">
                            <div id="drStatusChart"></div>
                        </div>
                    </div>
                </div>

                {{-- Users by Role — Radial Bar --}}
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between pb-0">
                            <div>
                                <h5 class="card-title mb-0">User Distribution</h5>
                                <small class="text-muted">By role</small>
                            </div>
                            <a href="{{ url('clients/' . $clientId . '/users') }}" class="btn btn-sm btn-label-primary">
                                Manage
                            </a>
                        </div>
                        <div class="card-body d-flex align-items-center">
                            <div class="w-50">
                                <div id="userRolesChart"></div>
                            </div>
                            <div class="w-50 ps-3">
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <small class="text-muted">Owner</small>
                                        <span class="badge bg-label-primary rounded-pill">1</span>
                                    </div>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-primary" style="width: 12.5%"></div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <small class="text-muted">Editor</small>
                                        <span class="badge bg-label-info rounded-pill">3</span>
                                    </div>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-info" style="width: 37.5%"></div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="d-flex align-items-center justify-content-between mb-1">
                                        <small class="text-muted">Guest</small>
                                        <span class="badge bg-label-warning rounded-pill">4</span>
                                    </div>
                                    <div class="progress" style="height: 5px;">
                                        <div class="progress-bar bg-warning" style="width: 50%"></div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center mt-3 pt-2 border-top">
                                    <i class="ti ti-users ti-xs text-muted me-2"></i>
                                    <small class="text-muted">8 total users</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 4: Entity Engagement (Grouped Bar) + Collection Rate (Gauge) --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-4 mb-4">
                {{-- Entity Engagement Breakdown — Grouped Bar --}}
                <div class="col-lg-8">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">Entity Engagement</h5>
                            <small class="text-muted">Invoiced vs Collected per entity</small>
                        </div>
                        <div class="card-body pt-2">
                            <div id="entityBarChart"></div>
                        </div>
                    </div>
                </div>

                {{-- Collection Rate — Radial Gauge --}}
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">Collection Rate</h5>
                            <small class="text-muted">YTD payment progress</small>
                        </div>
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <div id="collectionGaugeChart"></div>
                            <div class="text-center mt-2">
                                <div class="d-flex justify-content-center gap-4">
                                    <div>
                                        <small class="text-muted d-block">Invoiced</small>
                                        <span class="fw-medium">RM 128.5K</span>
                                    </div>
                                    <div>
                                        <small class="text-muted d-block">Collected</small>
                                        <span class="fw-medium text-success">RM 86.0K</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 5: Recent Activity Timeline + Upcoming Due --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-4 mb-4">
                {{-- Activity Timeline --}}
                <div class="col-lg-7">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div>
                                <h5 class="card-title mb-0">Recent Activity</h5>
                                <small class="text-muted">Latest interactions across all modules</small>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="activity-timeline">
                                {{-- Item 1 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #696cff;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">DR-2026-0042</span> status updated to <span class="badge bg-label-primary">In Progress</span>
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-user ti-xs me-1"></i>Ahmad Razif uploaded 2 files
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">2h ago</small>
                                    </div>
                                </div>
                                {{-- Item 2 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #ff9f43;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">Invoice #INV-2025-0891</span> payment reminder sent
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-mail ti-xs me-1"></i>Email sent to admin@clientco.com
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">5h ago</small>
                                    </div>
                                </div>
                                {{-- Item 3 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #28c76f;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">Payment #PMT-6542</span> received — <span class="text-success">RM 15,000.00</span>
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-building-bank ti-xs me-1"></i>Bank Transfer · Salihin Advisory
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">1d ago</small>
                                    </div>
                                </div>
                                {{-- Item 4 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #03c3ec;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            New user <span class="fw-medium">Nur Aisyah</span> joined as <span class="badge bg-label-warning">Guest</span>
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-user-plus ti-xs me-1"></i>Invited by admin via email
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">2d ago</small>
                                    </div>
                                </div>
                                {{-- Item 5 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #696cff;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">DR-2026-0039</span> created — <em>Tax Compliance FY2025</em>
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-building ti-xs me-1"></i>Salihin GST · 3 documents requested
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">3d ago</small>
                                    </div>
                                </div>
                                {{-- Item 6 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #28c76f;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">DR-2025-0128</span> marked as <span class="badge bg-label-success">Completed</span>
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-checks ti-xs me-1"></i>Annual Audit FY2024 · 8 files submitted
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">5d ago</small>
                                    </div>
                                </div>
                                {{-- Item 7 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #ff9f43;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">Statement of Account</span> generated & emailed
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-file-invoice ti-xs me-1"></i>Period: Jan–Dec 2025 · Salihin Advisory
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">1w ago</small>
                                    </div>
                                </div>
                                {{-- Item 8 --}}
                                <div class="timeline-item">
                                    <div class="timeline-dot" style="border-color: #ea5455;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            <span class="fw-medium">SSM Certificate 2026.jpg</span> uploaded to repository
                                            <div class="small text-muted mt-1">
                                                <i class="ti ti-upload ti-xs me-1"></i>Category: Compliance · 3.8 MB
                                            </div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">2w ago</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Upcoming Due Items --}}
                <div class="col-lg-5">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between">
                            <div>
                                <h5 class="card-title mb-0">Upcoming Due</h5>
                                <small class="text-muted">Invoices & DR deadlines</small>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <ul class="list-group list-group-flush">
                                {{-- Overdue DR --}}
                                <li class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded bg-label-danger"><i class="ti ti-alert-circle ti-xs"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <span class="fw-medium">DR-2026-0042</span>
                                                <span class="badge bg-danger">Overdue</span>
                                            </div>
                                            <small class="text-muted d-block">Annual Audit FY2025</small>
                                            <small class="text-danger"><i class="ti ti-calendar ti-xs me-1"></i>Due 10 Feb 2026</small>
                                        </div>
                                    </div>
                                </li>
                                {{-- Overdue Invoice --}}
                                <li class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-file-invoice ti-xs"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <span class="fw-medium">INV-2025-0891</span>
                                                <span class="badge bg-warning">90+ days</span>
                                            </div>
                                            <small class="text-muted d-block">Audit Fee Q3 2025</small>
                                            <small class="text-warning"><i class="ti ti-currency-dollar ti-xs me-1"></i>RM 8,500.00</small>
                                        </div>
                                    </div>
                                </li>
                                {{-- Upcoming DR --}}
                                <li class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-file-plus ti-xs"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <span class="fw-medium">DR-2026-0039</span>
                                                <span class="badge bg-label-primary">2 days</span>
                                            </div>
                                            <small class="text-muted d-block">Tax Compliance FY2025</small>
                                            <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>Due 28 Feb 2026</small>
                                        </div>
                                    </div>
                                </li>
                                {{-- Upcoming Invoice --}}
                                <li class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded bg-label-info"><i class="ti ti-file-invoice ti-xs"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <span class="fw-medium">INV-2026-0023</span>
                                                <span class="badge bg-label-info">15 days</span>
                                            </div>
                                            <small class="text-muted d-block">Advisory Retainer Mar 2026</small>
                                            <small class="text-muted"><i class="ti ti-currency-dollar ti-xs me-1"></i>RM 3,200.00</small>
                                        </div>
                                    </div>
                                </li>
                                {{-- Upcoming DR --}}
                                <li class="list-group-item px-4 py-3">
                                    <div class="d-flex align-items-start">
                                        <div class="avatar avatar-sm me-3">
                                            <span class="avatar-initial rounded bg-label-secondary"><i class="ti ti-file-plus ti-xs"></i></span>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-start">
                                                <span class="fw-medium">DR-2026-0035</span>
                                                <span class="badge bg-label-secondary">17 days</span>
                                            </div>
                                            <small class="text-muted d-block">Secretarial Filing</small>
                                            <small class="text-muted"><i class="ti ti-calendar ti-xs me-1"></i>Due 15 Mar 2026</small>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 6: Monthly DR Activity (Line) + Repository Breakdown (Donut) --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-4 mb-4">
                {{-- DR Activity Over Time — Line Chart --}}
                <div class="col-lg-8">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">DR Activity</h5>
                            <small class="text-muted">Created vs Completed monthly</small>
                        </div>
                        <div class="card-body pt-2">
                            <div id="drActivityChart"></div>
                        </div>
                    </div>
                </div>

                {{-- Repository Breakdown — Donut --}}
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header d-flex align-items-center justify-content-between pb-0">
                            <div>
                                <h5 class="card-title mb-0">Repository</h5>
                                <small class="text-muted">Files by category</small>
                            </div>
                            <a href="{{ url('clients/' . $clientId . '/documents/repository') }}" class="btn btn-sm btn-icon btn-label-primary">
                                <i class="ti ti-external-link ti-xs"></i>
                            </a>
                        </div>
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div id="repoCategoryChart"></div>
                            <div class="d-flex flex-wrap justify-content-center gap-3 mt-3">
                                <div class="text-center">
                                    <small class="text-muted d-block">From DR</small>
                                    <span class="fw-medium">15</span>
                                </div>
                                <div class="text-center">
                                    <small class="text-muted d-block">Uploaded</small>
                                    <span class="fw-medium">9</span>
                                </div>
                                <div class="text-center">
                                    <small class="text-muted d-block">Storage</small>
                                    <span class="fw-medium">~18 MB</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ═══════════════════════════════════════════════ --}}
            {{-- ROW 7: Quick Links --}}
            {{-- ═══════════════════════════════════════════════ --}}
            <div class="row g-3">
                <div class="col-sm-6 col-lg-3">
                    <a href="{{ url('clients/' . $clientId . '/info') }}" class="text-decoration-none">
                        <div class="card quick-link-card p-3 text-center h-100">
                            <div class="mb-2"><i class="ti ti-building-skyscraper ti-lg text-primary"></i></div>
                            <h6 class="mb-0">Company Info</h6>
                            <small class="text-muted">View details</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <a href="{{ url('clients/' . $clientId . '/users') }}" class="text-decoration-none">
                        <div class="card quick-link-card p-3 text-center h-100">
                            <div class="mb-2"><i class="ti ti-users ti-lg text-success"></i></div>
                            <h6 class="mb-0">Manage Users</h6>
                            <small class="text-muted">8 active</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <a href="{{ url('clients/' . $clientId . '/billings') }}" class="text-decoration-none">
                        <div class="card quick-link-card p-3 text-center h-100">
                            <div class="mb-2"><i class="ti ti-receipt ti-lg text-warning"></i></div>
                            <h6 class="mb-0">Billings</h6>
                            <small class="text-muted">RM 42.5K due</small>
                        </div>
                    </a>
                </div>
                <div class="col-sm-6 col-lg-3">
                    <a href="{{ url('clients/' . $clientId . '/documents/requests') }}" class="text-decoration-none">
                        <div class="card quick-link-card p-3 text-center h-100">
                            <div class="mb-2"><i class="ti ti-file-text ti-lg text-info"></i></div>
                            <h6 class="mb-0">Documents</h6>
                            <small class="text-muted">5 open requests</small>
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            var primaryColor = '#696cff';
            var successColor = '#28c76f';
            var warningColor = '#ff9f43';
            var dangerColor = '#ea5455';
            var infoColor = '#03c3ec';
            var darkColor = '#4b4b4b';
            var borderColor = '#e7e7e8';
            var labelColor = '#a1acb8';

            var months = ['Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb'];

            // ── 1. Billing Trend — Area Chart ──
            new ApexCharts(document.querySelector('#billingTrendChart'), {
                series: [
                    { name: 'Invoiced', data: [8200, 12400, 9800, 15600, 11200, 10500, 14300, 9100, 12800, 16400, 8700, 11500] },
                    { name: 'Collected', data: [6500, 10200, 8400, 12100, 9800, 8200, 11500, 7800, 10400, 13200, 6900, 9200] }
                ],
                chart: { height: 280, type: 'area', toolbar: { show: false }, fontFamily: 'inherit' },
                colors: [primaryColor, successColor],
                fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.1, stops: [0, 95, 100] } },
                stroke: { width: 2, curve: 'smooth' },
                dataLabels: { enabled: false },
                xaxis: { categories: months, labels: { style: { colors: labelColor, fontSize: '11px' } }, axisBorder: { show: false } },
                yaxis: {
                    labels: {
                        style: { colors: labelColor, fontSize: '11px' },
                        formatter: function (v) { return 'RM ' + (v / 1000).toFixed(0) + 'K'; }
                    }
                },
                grid: { borderColor: borderColor, strokeDashArray: 3, padding: { top: -10, bottom: -5 } },
                legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px', markers: { width: 8, height: 8 } },
                tooltip: { y: { formatter: function (v) { return 'RM ' + v.toLocaleString(); } } }
            }).render();

            // ── 2. Aging Breakdown — Donut ──
            new ApexCharts(document.querySelector('#agingDonutChart'), {
                series: [12400, 8500, 6200, 3800, 11600],
                chart: { height: 200, type: 'donut' },
                labels: ['Current', '1-30 Days', '31-60 Days', '61-90 Days', '90+ Days'],
                colors: [successColor, infoColor, warningColor, dangerColor, darkColor],
                stroke: { width: 0 },
                dataLabels: { enabled: false },
                legend: { show: false },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                value: {
                                    fontSize: '16px', fontWeight: 600,
                                    formatter: function (v) { return 'RM ' + Number(v).toLocaleString(); }
                                },
                                total: {
                                    show: true, label: 'Total Due',
                                    formatter: function () { return 'RM 42.5K'; }
                                }
                            }
                        }
                    }
                }
            }).render();

            // ── 3. DR Status — Horizontal Bar ──
            new ApexCharts(document.querySelector('#drStatusChart'), {
                series: [{ data: [5, 2, 1, 12, 3, 2] }],
                chart: { height: 260, type: 'bar', toolbar: { show: false }, fontFamily: 'inherit' },
                plotOptions: { bar: { borderRadius: 4, horizontal: true, barHeight: '55%', distributed: true } },
                dataLabels: { enabled: true, style: { fontSize: '12px', fontWeight: 600 }, offsetX: 5 },
                xaxis: { categories: ['In Progress', 'On Hold', 'Withdrawn', 'Completed', 'Archived', 'Overdue'], labels: { style: { colors: labelColor, fontSize: '11px' } } },
                yaxis: { labels: { style: { colors: labelColor, fontSize: '12px' } } },
                colors: [primaryColor, warningColor, '#a8aaae', successColor, darkColor, dangerColor],
                legend: { show: false },
                grid: { borderColor: borderColor, strokeDashArray: 3, xaxis: { lines: { show: true } }, yaxis: { lines: { show: false } }, padding: { top: -15, bottom: -10 } },
                tooltip: { enabled: false }
            }).render();

            // ── 4. Users by Role — Radial Bar ──
            new ApexCharts(document.querySelector('#userRolesChart'), {
                series: [100, 75, 50],
                chart: { height: 200, type: 'radialBar' },
                plotOptions: {
                    radialBar: {
                        hollow: { size: '35%' },
                        track: { background: borderColor },
                        dataLabels: {
                            name: { fontSize: '11px', offsetY: -2 },
                            value: { fontSize: '16px', fontWeight: 600, formatter: function (v) { return Math.round(v / 100 * 8); } },
                            total: { show: true, label: 'Total', fontSize: '11px', formatter: function () { return '8'; } }
                        }
                    }
                },
                labels: ['Owner', 'Editor', 'Guest'],
                colors: [primaryColor, infoColor, warningColor],
                stroke: { lineCap: 'round' }
            }).render();

            // ── 5. Entity Engagement — Grouped Bar ──
            new ApexCharts(document.querySelector('#entityBarChart'), {
                series: [
                    { name: 'Invoiced', data: [68500, 42800, 17200] },
                    { name: 'Collected', data: [48200, 28600, 9200] }
                ],
                chart: { height: 260, type: 'bar', toolbar: { show: false }, fontFamily: 'inherit' },
                plotOptions: { bar: { borderRadius: 4, columnWidth: '50%' } },
                dataLabels: { enabled: false },
                xaxis: { categories: ['Salihin Advisory', 'Salihin GST', 'Salihin Consulting'], labels: { style: { colors: labelColor, fontSize: '11px' } } },
                yaxis: {
                    labels: {
                        style: { colors: labelColor, fontSize: '11px' },
                        formatter: function (v) { return 'RM ' + (v / 1000).toFixed(0) + 'K'; }
                    }
                },
                colors: [primaryColor, successColor],
                grid: { borderColor: borderColor, strokeDashArray: 3, padding: { top: -15, bottom: -5 } },
                legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px', markers: { width: 8, height: 8 } },
                tooltip: { y: { formatter: function (v) { return 'RM ' + v.toLocaleString(); } } }
            }).render();

            // ── 6. Collection Rate — Radial Gauge ──
            new ApexCharts(document.querySelector('#collectionGaugeChart'), {
                series: [67],
                chart: { height: 180, type: 'radialBar' },
                plotOptions: {
                    radialBar: {
                        startAngle: -135, endAngle: 135,
                        hollow: { size: '65%' },
                        track: { background: borderColor, strokeWidth: '100%' },
                        dataLabels: {
                            name: { offsetY: -8, fontSize: '12px', color: labelColor },
                            value: { fontSize: '28px', fontWeight: 700, offsetY: 5, formatter: function (v) { return v + '%'; } }
                        }
                    }
                },
                fill: {
                    type: 'gradient',
                    gradient: { shade: 'dark', type: 'horizontal', shadeIntensity: 0.5, gradientToColors: [successColor], stops: [0, 100] }
                },
                colors: [primaryColor],
                labels: ['Collected'],
                stroke: { lineCap: 'round' }
            }).render();

            // ── 7. DR Activity Over Time — Line Chart ──
            new ApexCharts(document.querySelector('#drActivityChart'), {
                series: [
                    { name: 'Created', data: [3, 2, 4, 1, 3, 2, 5, 2, 3, 4, 1, 2] },
                    { name: 'Completed', data: [1, 3, 2, 2, 1, 3, 2, 4, 2, 3, 2, 1] }
                ],
                chart: { height: 260, type: 'line', toolbar: { show: false }, fontFamily: 'inherit' },
                colors: [primaryColor, successColor],
                stroke: { width: 3, curve: 'smooth' },
                markers: { size: 4, hover: { size: 6 } },
                dataLabels: { enabled: false },
                xaxis: { categories: months, labels: { style: { colors: labelColor, fontSize: '11px' } } },
                yaxis: { min: 0, max: 6, tickAmount: 3, labels: { style: { colors: labelColor, fontSize: '11px' } } },
                grid: { borderColor: borderColor, strokeDashArray: 3, padding: { top: -15, bottom: -5 } },
                legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px', markers: { width: 8, height: 8 } },
                tooltip: { shared: true, intersect: false }
            }).render();

            // ── 8. Repository Category — Donut ──
            new ApexCharts(document.querySelector('#repoCategoryChart'), {
                series: [8, 5, 4, 3, 4],
                chart: { height: 200, type: 'donut' },
                labels: ['Financial', 'Tax', 'Corporate', 'Compliance', 'General'],
                colors: [primaryColor, warningColor, infoColor, successColor, '#a8aaae'],
                stroke: { width: 0 },
                dataLabels: { enabled: false },
                legend: { show: false },
                plotOptions: {
                    pie: {
                        donut: {
                            size: '75%',
                            labels: {
                                show: true,
                                value: { fontSize: '16px', fontWeight: 600 },
                                total: { show: true, label: 'Files', fontSize: '12px', formatter: function () { return '24'; } }
                            }
                        }
                    }
                }
            }).render();
        });
    </script>
@endsection