@extends('layouts.app')
@section('content')
@include('management.analytics._shared_styles')

<style>
.chart-container {
    position: relative;
    height: 400px;
    padding: 20px;
}
.metric-card {
    transition: transform 0.2s;
}
.metric-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
</style>

<div class="container-fluid">
    {{-- Breadcrumb Navigation --}}
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class='bx bx-home'></i> Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('management.analytics.all.branches') }}">Management Analytics</a></li>
            <li class="breadcrumb-item active">Trends</li>
        </ol>
    </nav>

    {{-- Page Header --}}
    <div class="page-header-modern mb-4">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12 mb-3 mb-lg-0">
                <h2 class="mb-2 text-white"><i class='bx bx-trending-up'></i> Management Trends & Analytics</h2>
                <p class="mb-0 opacity-75">
                    <i class='bx bx-calendar'></i> {{ now()->format('F d, Y') }}
                </p>
            </div>
            <div class="col-lg-6 col-md-12 text-lg-end">
                <button class="btn btn-light btn-lg" data-bs-toggle="modal" data-bs-target="#filterModal">
                    <i class='bx bx-filter'></i> Filters
                </button>
            </div>
        </div>
    </div>

    {{-- Summary Metric Cards --}}
    <div class="row mb-4">
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #17479E;"><div class="card-body text-center" style="background:#e3f2fd;">
                <p class="mb-1 small text-muted">BRANCHES</p>
                <h3 class="mb-0 text-primary">{{ $branchesCount }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #333;"><div class="card-body text-center" style="background:#f5f5f5;">
                <p class="mb-1 small text-muted">TOTAL</p>
                <h3 class="mb-0">{{ number_format($totalEnquiries) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #ff9800;"><div class="card-body text-center" style="background:#fff3e0;">
                <p class="mb-1 small text-muted">PENDING</p>
                <h3 class="mb-0 text-warning">{{ number_format($statusCounts['pending'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #2196f3;"><div class="card-body text-center" style="background:#e1f5fe;">
                <p class="mb-1 small text-muted">ASSIGNED</p>
                <h3 class="mb-0 text-info">{{ number_format($statusCounts['assigned'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #4caf50;"><div class="card-body text-center" style="background:#e8f5e9;">
                <p class="mb-1 small text-muted">APPROVED</p>
                <h3 class="mb-0 text-success">{{ number_format($statusCounts['approved'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100 metric-card" style="border-left:4px solid #f44336;"><div class="card-body text-center" style="background:#ffebee;">
                <p class="mb-1 small text-muted">REJECTED</p>
                <h3 class="mb-0 text-danger">{{ number_format($statusCounts['rejected'] ?? 0) }}</h3>
            </div></div>
        </div>
    </div>

    {{-- Charts Row 1 --}}
    <div class="row mb-4">
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-pie-chart-alt'></i> Enquiry Status Distribution</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('status', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-bar-chart-alt-2'></i> Enquiries by Type</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('type', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="typeChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts Row 2 --}}
    <div class="row mb-4">
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-line-chart'></i> Monthly Enquiry Trends</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('monthly', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="height: 500px;">
                        <canvas id="monthlyTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Charts Row 3 --}}
    <div class="row mb-4">
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-building'></i> Branch Distribution</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('branch', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="branchChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-command'></i> Commands Performance</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('command', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="commandChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Payment Trends --}}
    <div class="row mb-4">
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-money'></i> Payment Trends (Initiated vs Paid)</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('payment', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="height: 500px;">
                        <canvas id="paymentTrendChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Loan Application Trends --}}
    <div class="row mb-4">
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class='bx bx-file'></i> Loan Application Trends</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
                                <i class='bx bx-filter'></i> Period
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'today')">Today</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'week')">This Week</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'month')">This Month</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'year')">This Year</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'q1')">Q1 (Jan-Mar)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'q2')">Q2 (Apr-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'q3')">Q3 (Jul-Sep)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'q4')">Q4 (Oct-Dec)</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'h1')">H1 (Jan-Jun)</a></li>
                                <li><a class="dropdown-item" href="#" onclick="filterChart('loan', 'h2')">H2 (Jul-Dec)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="height: 500px;">
                        <canvas id="loanApplicationChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Filter Modal --}}
<div class="modal fade" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background:#17479E;color:white;">
                <h5 class="modal-title text-white"><i class='bx bx-filter-alt'></i> Filter Trends</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="GET" action="{{ route('management.analytics.trends') }}">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label class="form-label"><i class='bx bx-time'></i> Quick Date Filters</label>
                            <div class="btn-group d-flex flex-wrap gap-2" role="group">
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('today')">Today</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('week')">This Week</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('month')">This Month</button>
                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="setQuickDate('year')">This Year</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q1')">Q1 (Jan-Mar)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q2')">Q2 (Apr-Jun)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q3')">Q3 (Jul-Sep)</button>
                                <button type="button" class="btn btn-outline-success btn-sm" onclick="setQuickDate('q4')">Q4 (Oct-Dec)</button>
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="setQuickDate('h1')">H1 (Jan-Jun)</button>
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="setQuickDate('h2')">H2 (Jul-Dec)</button>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-building'></i> Branch</label>
                            <select name="branch_id" class="form-select">
                                <option value="">All Branches</option>
                                @foreach($allBranches as $branch)
                                <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-category'></i> Enquiry Type</label>
                            <select name="type" class="form-select">
                                <option value="">All Types</option>
                                <option value="loan_application" {{ request('type') == 'loan_application' ? 'selected' : '' }}>Loan Application</option>
                                <option value="refund" {{ request('type') == 'refund' ? 'selected' : '' }}>Refund</option>
                                <option value="withdraw_savings" {{ request('type') == 'withdraw_savings' ? 'selected' : '' }}>Withdraw Savings</option>
                                <option value="withdraw_deposit" {{ request('type') == 'withdraw_deposit' ? 'selected' : '' }}>Withdraw Deposit</option>
                                <option value="retirement" {{ request('type') == 'retirement' ? 'selected' : '' }}>Retirement</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-info-circle'></i> Status</label>
                            <select name="status" class="form-select">
                                <option value="">All Statuses</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="assigned" {{ request('status') == 'assigned' ? 'selected' : '' }}>Assigned</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-world'></i> Region</label>
                            <select name="region_id" class="form-select">
                                <option value="">All Regions</option>
                                @foreach($allRegions as $region)
                                <option value="{{ $region->id }}" {{ request('region_id') == $region->id ? 'selected' : '' }}>{{ $region->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-map'></i> District</label>
                            <select name="district_id" class="form-select">
                                <option value="">All Districts</option>
                                @foreach($allDistricts as $district)
                                <option value="{{ $district->id }}" {{ request('district_id') == $district->id ? 'selected' : '' }}>{{ $district->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-calendar'></i> Date From</label>
                            <input type="date" name="date_from" id="date_from" class="form-control" value="{{ request('date_from') }}">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label"><i class='bx bx-calendar'></i> Date To</label>
                            <input type="date" name="date_to" id="date_to" class="form-control" value="{{ request('date_to') }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('management.analytics.trends') }}" class="btn btn-secondary">
                        <i class='bx bx-reset'></i> Reset
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class='bx bx-filter-alt'></i> Apply Filters
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Chart.js Library --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

<script>
// Status Distribution Chart (Doughnut)
const statusCtx = document.getElementById('statusChart').getContext('2d');
new Chart(statusCtx, {
    type: 'doughnut',
    data: {
        labels: ['Pending', 'Assigned', 'Approved', 'Rejected'],
        datasets: [{
            data: [
                {{ $statusCounts['pending'] ?? 0 }},
                {{ $statusCounts['assigned'] ?? 0 }},
                {{ $statusCounts['approved'] ?? 0 }},
                {{ $statusCounts['rejected'] ?? 0 }}
            ],
            backgroundColor: ['#ff9800', '#2196f3', '#4caf50', '#f44336'],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});

// Enquiry Type Chart (Bar)
const typeCtx = document.getElementById('typeChart').getContext('2d');
new Chart(typeCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode(array_keys($typeAnalytics)) !!}.map(t => t.replace(/_/g, ' ').toUpperCase()),
        datasets: [{
            label: 'Count',
            data: {!! json_encode(array_values($typeAnalytics)) !!},
            backgroundColor: '#17479E',
            borderRadius: 5
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Monthly Trend Chart (Line)
const monthlyCtx = document.getElementById('monthlyTrendChart').getContext('2d');
new Chart(monthlyCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode(array_keys($monthlyTrends)) !!},
        datasets: [{
            label: 'Enquiries',
            data: {!! json_encode(array_values($monthlyTrends)) !!},
            borderColor: '#17479E',
            backgroundColor: 'rgba(23, 71, 158, 0.1)',
            fill: true,
            tension: 0.4,
            borderWidth: 3
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Branch Chart (Horizontal Bar)
const branchCtx = document.getElementById('branchChart').getContext('2d');
new Chart(branchCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode(array_keys($branchAnalytics)) !!},
        datasets: [{
            label: 'Enquiries',
            data: {!! json_encode(array_values($branchAnalytics)) !!},
            backgroundColor: '#4caf50',
            borderRadius: 5
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                beginAtZero: true
            }
        }
    }
});

// Command Chart (Polar Area)
const commandCtx = document.getElementById('commandChart').getContext('2d');
new Chart(commandCtx, {
    type: 'polarArea',
    data: {
        labels: {!! json_encode(array_keys($commandAnalytics)) !!},
        datasets: [{
            data: {!! json_encode(array_values($commandAnalytics)) !!},
            backgroundColor: [
                'rgba(255, 152, 0, 0.7)',
                'rgba(33, 150, 243, 0.7)',
                'rgba(76, 175, 80, 0.7)',
                'rgba(244, 67, 54, 0.7)',
                'rgba(156, 39, 176, 0.7)',
                'rgba(255, 193, 7, 0.7)',
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false
    }
});

// Payment Trend Chart (Multi-line)
const paymentCtx = document.getElementById('paymentTrendChart').getContext('2d');
new Chart(paymentCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode(array_keys($paymentTrends['initiated'])) !!},
        datasets: [
            {
                label: 'Initiated Amount',
                data: {!! json_encode(array_values($paymentTrends['initiated'])) !!},
                borderColor: '#ff9800',
                backgroundColor: 'rgba(255, 152, 0, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            },
            {
                label: 'Paid Amount',
                data: {!! json_encode(array_values($paymentTrends['paid'])) !!},
                borderColor: '#4caf50',
                backgroundColor: 'rgba(76, 175, 80, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: function(value) {
                        return value.toLocaleString();
                    }
                }
            }
        },
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': ' + context.parsed.y.toLocaleString();
                    }
                }
            }
        }
    }
});

// Loan Application Trend Chart (Multi-line)
const loanAppCtx = document.getElementById('loanApplicationChart').getContext('2d');
new Chart(loanAppCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode(array_keys($loanApplicationTrends['submitted'])) !!},
        datasets: [
            {
                label: 'Submitted',
                data: {!! json_encode(array_values($loanApplicationTrends['submitted'])) !!},
                borderColor: '#2196f3',
                backgroundColor: 'rgba(33, 150, 243, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            },
            {
                label: 'Approved',
                data: {!! json_encode(array_values($loanApplicationTrends['approved'])) !!},
                borderColor: '#4caf50',
                backgroundColor: 'rgba(76, 175, 80, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            },
            {
                label: 'Rejected',
                data: {!! json_encode(array_values($loanApplicationTrends['rejected'])) !!},
                borderColor: '#f44336',
                backgroundColor: 'rgba(244, 67, 54, 0.1)',
                fill: true,
                tension: 0.4,
                borderWidth: 3
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        },
        plugins: {
            legend: {
                position: 'top'
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': ' + context.parsed.y;
                    }
                }
            }
        }
    }
});

// Filter Chart Function
function filterChart(chartType, period) {
    event.preventDefault();

    if (confirm('Apply ' + period.toUpperCase() + ' filter to ALL data on this page?\n\nClick OK to apply globally or Cancel to keep current filters.')) {
        const today = new Date();
        const year = today.getFullYear();
        let dateFrom = '';
        let dateTo = '';

        switch(period) {
            case 'today':
                dateFrom = today.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                break;
            case 'week':
                const weekStart = new Date(today);
                weekStart.setDate(today.getDate() - today.getDay());
                dateFrom = weekStart.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                break;
            case 'month':
                const monthStart = new Date(year, today.getMonth(), 1);
                dateFrom = monthStart.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                break;
            case 'year':
                const yearStart = new Date(year, 0, 1);
                dateFrom = yearStart.toISOString().split('T')[0];
                dateTo = today.toISOString().split('T')[0];
                break;
            case 'q1':
                dateFrom = year + '-01-01';
                dateTo = year + '-03-31';
                break;
            case 'q2':
                dateFrom = year + '-04-01';
                dateTo = year + '-06-30';
                break;
            case 'q3':
                dateFrom = year + '-07-01';
                dateTo = year + '-09-30';
                break;
            case 'q4':
                dateFrom = year + '-10-01';
                dateTo = year + '-12-31';
                break;
            case 'h1':
                dateFrom = year + '-01-01';
                dateTo = year + '-06-30';
                break;
            case 'h2':
                dateFrom = year + '-07-01';
                dateTo = year + '-12-31';
                break;
        }

        const url = new URL(window.location.href);
        url.searchParams.set('date_from', dateFrom);
        url.searchParams.set('date_to', dateTo);
        window.location.href = url.toString();
    }
}

// Quick Date Filter Function for Modal
function setQuickDate(period) {
    const today = new Date();
    const year = today.getFullYear();
    let dateFrom = '';
    let dateTo = '';

    switch(period) {
        case 'today':
            dateFrom = today.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'week':
            const weekStart = new Date(today);
            weekStart.setDate(today.getDate() - today.getDay());
            dateFrom = weekStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'month':
            const monthStart = new Date(year, today.getMonth(), 1);
            dateFrom = monthStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'year':
            const yearStart = new Date(year, 0, 1);
            dateFrom = yearStart.toISOString().split('T')[0];
            dateTo = today.toISOString().split('T')[0];
            break;
        case 'q1':
            dateFrom = year + '-01-01';
            dateTo = year + '-03-31';
            break;
        case 'q2':
            dateFrom = year + '-04-01';
            dateTo = year + '-06-30';
            break;
        case 'q3':
            dateFrom = year + '-07-01';
            dateTo = year + '-09-30';
            break;
        case 'q4':
            dateFrom = year + '-10-01';
            dateTo = year + '-12-31';
            break;
        case 'h1':
            dateFrom = year + '-01-01';
            dateTo = year + '-06-30';
            break;
        case 'h2':
            dateFrom = year + '-07-01';
            dateTo = year + '-12-31';
            break;
    }

    document.getElementById('date_from').value = dateFrom;
    document.getElementById('date_to').value = dateTo;
}
</script>

@endsection