@extends('layouts/layoutMaster')

@section('title', ($providerDetails->display_name ?? 'Provider') . ' — 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('content')
    @php $provId = $providerDetails->uuid ?? ''; @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">Provider Details</h4>
                    <p class="text-muted mb-0">Overview and activity summary.</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('providers') }}">Providers</a></li>
                        <li class="breadcrumb-item active">{{ $providerDetails->display_name ?? '' }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    @include('providers.administrator._header', ['providerDetails' => $providerDetails])

    <div class="row g-4">
        <div class="col-12 col-lg-3">
            @include('providers.administrator._nav', ['activePage' => 'dashboard', 'providerDetails' => $providerDetails])
        </div>

        <div class="col-12 col-lg-9">

            {{-- Stats Cards --}}
            <div class="row g-3 mb-4">
                <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-crown ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">{{ $stats['heads'] ?? 0 }}</h5>
                                <small class="text-muted">Heads</small>
                            </div>
                        </div>
                    </div>
                </div>
                <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-user-check ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">{{ $stats['moderators'] ?? 0 }}</h5>
                                <small class="text-muted">Moderators</small>
                            </div>
                        </div>
                    </div>
                </div>
                <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-building ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">{{ $stats['departments'] ?? 0 }}</h5>
                                <small class="text-muted">Departments</small>
                            </div>
                        </div>
                    </div>
                </div>
                <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-file-text ti-sm"></i></span>
                            </div>
                            <div>
                                <h5 class="mb-0">{{ $stats['doc_types'] ?? 0 }}</h5>
                                <small class="text-muted">Doc Types</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Charts Row 1: DR Volume + Client Distribution --}}
            <div class="row g-4 mb-4">
                <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">Document Request Volume</h5>
                                <small class="text-muted">Created vs Completed (12 months)</small>
                            </div>
                        </div>
                        <div class="card-body pt-2">
                            <div id="drVolumeChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">DR Status</h5>
                            <small class="text-muted">Current breakdown</small>
                        </div>
                        <div class="card-body d-flex flex-column justify-content-center">
                            <div id="drStatusDonut"></div>
                            <ul class="list-unstyled mt-3 mb-0">
                                <li class="d-flex align-items-center mb-2">
                                    <span class="badge bg-primary p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">In Progress</span>
                                    <span class="small fw-medium">18</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">On Hold</span>
                                    <span class="small fw-medium">5</span>
                                </li>
                                <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">Completed</span>
                                    <span class="small fw-medium">42</span>
                                </li>
                                <li class="d-flex align-items-center">
                                    <span class="badge bg-danger p-1 me-2">&nbsp;</span>
                                    <span class="small text-muted flex-grow-1">Overdue</span>
                                    <span class="small fw-medium">3</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Charts Row 2: Revenue + Personnel Distribution --}}
            <div class="row g-4 mb-4">
                <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">Revenue & Collections</h5>
                                <small class="text-muted">Invoiced vs Collected (12 months)</small>
                            </div>
                        </div>
                        <div class="card-body pt-2">
                            <div id="revenueChart"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card h-100">
                        <div class="card-header pb-0">
                            <h5 class="card-title mb-0">Personnel</h5>
                            <small class="text-muted">By role type</small>
                        </div>
                        <div class="card-body d-flex flex-column align-items-center justify-content-center">
                            <div id="personnelChart"></div>
                            <div class="d-flex flex-wrap justify-content-center gap-4 mt-3">
                                <div class="text-center">
                                    <small class="text-muted d-block">Heads</small>
                                    <span class="fw-medium">{{ $stats['heads'] ?? 0 }}</span>
                                </div>
                                <div class="text-center">
                                    <small class="text-muted d-block">Moderators</small>
                                    <span class="fw-medium">{{ $stats['moderators'] ?? 0 }}</span>
                                </div>
                                <div class="text-center">
                                    <small class="text-muted d-block">Personnel</small>
                                    <span class="fw-medium">{{ $stats['personnel'] ?? 0 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Activity Timeline + Quick Links --}}
            <div class="row g-4">
                <div class="col-lg-7">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Recent Activity</h5>
                            <small class="text-muted">Latest provider actions</small>
                        </div>
                        <div class="card-body">
                            <style>
                                .prov-timeline { position: relative; padding-left: 1.75rem; }
                                .prov-timeline::before { content:''; position:absolute; left:0.5rem; top:0.5rem; bottom:0.5rem; width:2px; background:#e7e7e8; }
                                .prov-tl-item { position:relative; padding-bottom:1.25rem; }
                                .prov-tl-item:last-child { padding-bottom:0; }
                                .prov-tl-dot { position:absolute; left:-1.75rem; top:0.25rem; width:12px; height:12px; border-radius:50%; border:2px solid; background:#fff; }
                            </style>
                            <div class="prov-timeline">
                                <div class="prov-tl-item">
                                    <div class="prov-tl-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> created for <em>ABC Holdings Sdn Bhd</em>
                                            <div class="small text-muted mt-1"><i class="ti ti-file-plus ti-xs me-1"></i>Annual Audit FY2025</div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">2h ago</small>
                                    </div>
                                </div>
                                <div class="prov-tl-item">
                                    <div class="prov-tl-dot" style="border-color:#28c76f;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            New moderator <span class="fw-medium">Ahmad Razif</span> assigned
                                            <div class="small text-muted mt-1"><i class="ti ti-user-check ti-xs me-1"></i>All job types</div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">1d ago</small>
                                    </div>
                                </div>
                                <div class="prov-tl-item">
                                    <div class="prov-tl-dot" style="border-color:#ff9f43;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            Settings updated — <span class="fw-medium">currency changed</span> to MYR
                                            <div class="small text-muted mt-1"><i class="ti ti-settings ti-xs me-1"></i>By Admin</div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">3d ago</small>
                                    </div>
                                </div>
                                <div class="prov-tl-item">
                                    <div class="prov-tl-dot" style="border-color:#03c3ec;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            QuickBooks <span class="fw-medium">token refreshed</span> successfully
                                            <div class="small text-muted mt-1"><i class="ti ti-brand-cashapp ti-xs me-1"></i>Auto-refresh</div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">5d ago</small>
                                    </div>
                                </div>
                                <div class="prov-tl-item">
                                    <div class="prov-tl-dot" style="border-color:#ea5455;"></div>
                                    <div class="d-flex justify-content-between align-items-start">
                                        <div>
                                            Department <span class="fw-medium">Tax Advisory</span> access revoked
                                            <div class="small text-muted mt-1"><i class="ti ti-lock ti-xs me-1"></i>Excluded from access list</div>
                                        </div>
                                        <small class="text-muted text-nowrap ms-3">1w ago</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Quick Links</h5>
                            <small class="text-muted">Navigate to provider modules</small>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-6">
                                    <a href="{{ url('providers/' . $provId . '/settings') }}" class="text-decoration-none">
                                        <div class="card border p-3 text-center h-100" style="transition:all .2s;cursor:pointer;" onmouseover="this.style.boxShadow='0 0.25rem 1rem rgba(105,108,255,.15)'" onmouseout="this.style.boxShadow='none'">
                                            <div class="mb-2"><i class="ti ti-settings ti-lg text-primary"></i></div>
                                            <h6 class="mb-0">Settings</h6>
                                            <small class="text-muted">Configuration</small>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ url('providers/' . $provId . '/personnel/heads') }}" class="text-decoration-none">
                                        <div class="card border p-3 text-center h-100" style="transition:all .2s;cursor:pointer;" onmouseover="this.style.boxShadow='0 0.25rem 1rem rgba(105,108,255,.15)'" onmouseout="this.style.boxShadow='none'">
                                            <div class="mb-2"><i class="ti ti-users ti-lg text-success"></i></div>
                                            <h6 class="mb-0">Personnel</h6>
                                            <small class="text-muted">Heads & Mods</small>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ url('providers/' . $provId . '/documents') }}" class="text-decoration-none">
                                        <div class="card border p-3 text-center h-100" style="transition:all .2s;cursor:pointer;" onmouseover="this.style.boxShadow='0 0.25rem 1rem rgba(105,108,255,.15)'" onmouseout="this.style.boxShadow='none'">
                                            <div class="mb-2"><i class="ti ti-file-text ti-lg text-warning"></i></div>
                                            <h6 class="mb-0">Documents</h6>
                                            <small class="text-muted">Types & Templates</small>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-6">
                                    <a href="{{ url('providers/' . $provId . '/quickbooks') }}" class="text-decoration-none">
                                        <div class="card border p-3 text-center h-100" style="transition:all .2s;cursor:pointer;" onmouseover="this.style.boxShadow='0 0.25rem 1rem rgba(105,108,255,.15)'" onmouseout="this.style.boxShadow='none'">
                                            <div class="mb-2"><i class="ti ti-brand-cashapp ti-lg text-info"></i></div>
                                            <h6 class="mb-0">QuickBooks</h6>
                                            <small class="text-muted">Connection</small>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        $(function () {
            var primaryColor = '#696cff', successColor = '#28c76f', warningColor = '#ff9f43',
                dangerColor = '#ea5455', infoColor = '#03c3ec', darkColor = '#4b4b4b',
                borderColor = '#e7e7e8', labelColor = '#a1acb8';
            var months = ['Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb'];

            // DR Volume — Area
            new ApexCharts(document.querySelector('#drVolumeChart'), {
                series: [
                    { name: 'Created', data: [12,8,15,10,14,9,18,11,16,13,7,10] },
                    { name: 'Completed', data: [8,10,11,9,12,7,14,10,13,11,8,6] }
                ],
                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' } } },
                yaxis: { labels: { style: { colors: labelColor, fontSize: '11px' } } },
                grid: { borderColor: borderColor, strokeDashArray: 3, padding: { top: -10, bottom: -5 } },
                legend: { position: 'top', horizontalAlign: 'right', fontSize: '12px', markers: { width: 8, height: 8 } },
            }).render();

            // DR Status — Donut
            new ApexCharts(document.querySelector('#drStatusDonut'), {
                series: [18, 5, 42, 3],
                chart: { height: 200, type: 'donut' },
                labels: ['In Progress', 'On Hold', 'Completed', 'Overdue'],
                colors: [primaryColor, warningColor, successColor, dangerColor],
                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: 'Total', formatter: function () { return '68'; } }
                } } } }
            }).render();

            // Revenue — Area
            new ApexCharts(document.querySelector('#revenueChart'), {
                series: [
                    { name: 'Invoiced', data: [45,62,38,72,55,48,68,42,58,75,40,52] },
                    { name: 'Collected', data: [32,48,30,58,42,35,52,38,45,62,28,40] }
                ],
                chart: { height: 280, type: 'area', toolbar: { show: false }, fontFamily: 'inherit' },
                colors: [warningColor, 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' } } },
                yaxis: { labels: { style: { colors: labelColor, fontSize: '11px' }, formatter: function (v) { return 'RM ' + v + '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() + 'K'; } } }
            }).render();

            // Personnel — Radial Bar
            new ApexCharts(document.querySelector('#personnelChart'), {
                series: [100, 75, 60],
                chart: { height: 200, type: 'radialBar' },
                plotOptions: { radialBar: { hollow: { size: '35%' }, track: { background: borderColor },
                    dataLabels: { name: { fontSize: '11px', offsetY: -2 }, value: { fontSize: '16px', fontWeight: 600 },
                        total: { show: true, label: 'Total', fontSize: '11px',
                            formatter: function () { return '{{ ($stats['heads'] ?? 0) + ($stats['moderators'] ?? 0) + ($stats['personnel'] ?? 0) }}'; }
                        }
                    }
                } },
                labels: ['Heads', 'Moderators', 'Personnel'],
                colors: [primaryColor, infoColor, warningColor],
                stroke: { lineCap: 'round' }
            }).render();
        });
    </script>
@endsection