@extends('layouts.app')
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>বার্ষিক রিপোর্ট - {{ config('app.name', 'Laravel') }}</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'SolaimanLipi', 'Siyam Rupali', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            border: none;
        }
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
            padding: 15px 20px;
        }
        .stat-card {
            transition: transform 0.3s;
            border-left: 4px solid;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .bg-primary-light {
            background-color: rgba(102, 126, 234, 0.1) !important;
            border-left-color: #667eea !important;
        }
        .bg-success-light {
            background-color: rgba(40, 167, 69, 0.1) !important;
            border-left-color: #28a745 !important;
        }
        .bg-info-light {
            background-color: rgba(23, 162, 184, 0.1) !important;
            border-left-color: #17a2b8 !important;
        }
        .bg-warning-light {
            background-color: rgba(255, 193, 7, 0.1) !important;
            border-left-color: #ffc107 !important;
        }
        .bg-danger-light {
            background-color: rgba(220, 53, 69, 0.1) !important;
            border-left-color: #dc3545 !important;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            border-top: none;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .btn-primary:hover {
            opacity: 0.9;
        }
        .filter-box {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .total-box {
            font-size: 1.8rem;
            font-weight: bold;
            color: #2c3e50;
        }
        .currency {
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        .month-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 15px;
            transition: all 0.3s;
        }
        .month-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transform: translateY(-2px);
        }
        .month-header {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f8f9fa;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            .card {
                box-shadow: none !important;
                border: 1px solid #dee2e6 !important;
            }
            .table {
                font-size: 12px;
            }
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container-fluid py-4">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-1"><i class="fas fa-calendar me-2"></i>বার্ষিক রিপোর্ট</h2>
                        <p class="text-muted mb-0">{{ now()->format('d F Y, h:i A') }}</p>
                    </div>
                    <div class="no-print">
                        <a href="{{ route('reports.summary') }}" class="btn btn-outline-primary me-2">
                            <i class="fas fa-chart-line me-1"></i> সারাংশ
                        </a>
                        <a href="{{ route('reports.monthly') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-calendar-alt me-1"></i> মাসিক রিপোর্ট
                        </a>
                    </div>
                </div>
                <hr>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="row mb-4 no-print">
            <div class="col-12">
                <div class="filter-box">
                    <form method="GET" action="{{ route('reports.annual') }}" class="row g-3">
                        <div class="col-md-4">
                            <label for="year" class="form-label">বছর নির্বাচন করুন</label>
                            <select class="form-control" id="year" name="year">
                                @for($i = date('Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}" {{ $year == $i ? 'selected' : '' }}>
                                        {{ $i }} সাল
                                    </option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="submit" class="btn btn-primary me-2">
                                <i class="fas fa-search me-1"></i> রিপোর্ট দেখুন
                            </button>
                            <button type="submit" name="download" value="1" class="btn btn-success">
                                <i class="fas fa-download me-1"></i> PDF ডাউনলোড
                            </button>
                        </div>
                        <div class="col-md-4 text-end d-flex align-items-end">
                            <a href="{{ route('reports.annual') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-sync-alt me-1"></i> বর্তমান বছর
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Selected Year Info -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="alert alert-info">
                    <h5 class="alert-heading mb-2">
                        <i class="fas fa-calendar-check me-2"></i>
                        নির্বাচিত বছর: 
                        <strong>{{ $year }} সাল</strong>
                    </h5>
                    <p class="mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        নিচের সারণীতে {{ $year }} সালের সকল আয়-ব্যয় এবং লেনদেনের সারাংশ দেখানো হয়েছে।
                    </p>
                </div>
            </div>
        </div>

        <!-- Annual Summary Statistics -->
        <div class="row mb-4">
            <!-- Total Members -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card bg-primary-light">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">মোট সদস্য ({{ $year }})</h6>
                                <h3 class="total-box">{{ $total_members }}</h3>
                                <small class="text-success">
                                    <i class="fas fa-user-check me-1"></i>
                                    সক্রিয়: {{ $active_members }}
                                </small>
                            </div>
                            <div class="display-4 text-primary opacity-50">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Savings -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card bg-success-light">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">মোট সঞ্চয়</h6>
                                <h3 class="total-box">
                                    {{ number_format($total_savings, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-piggy-bank me-1"></i>
                                    বার্ষিক সঞ্চয়
                                </small>
                            </div>
                            <div class="display-4 text-success opacity-50">
                                <i class="fas fa-coins"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Net Income -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card bg-info-light">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">নিট আয়</h6>
                                <h3 class="total-box {{ $net_income >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ number_format($net_income, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-balance-scale me-1"></i>
                                    আয় - ব্যয়
                                </small>
                            </div>
                            <div class="display-4 {{ $net_income >= 0 ? 'text-success' : 'text-danger' }} opacity-50">
                                <i class="fas fa-scale-balanced"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Loan Summary -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <div class="card stat-card bg-warning-light">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="text-muted mb-1">লোন সারাংশ</h6>
                                <h3 class="total-box">
                                    {{ number_format($loan_amount, 2) }} <span class="currency">টাকা</span>
                                </h3>
                                <small class="text-muted">
                                    <i class="fas fa-handshake me-1"></i>
                                    {{ $total_loans }}টি লোন
                                </small>
                            </div>
                            <div class="display-4 text-warning opacity-50">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-success">
                                        <i class="fas fa-check-circle me-1"></i>
                                        পরিশোধিত: {{ number_format($paid_amount, 2) }}
                                    </small>
                                </div>
                                <div class="col-6">
                                    <small class="text-danger">
                                        <i class="fas fa-clock me-1"></i>
                                        বাকি: {{ number_format($remaining_balance, 2) }}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Income vs Expense -->
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-money-bill-wave me-2"></i>মোট আয়</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="total-box text-success">
                                {{ number_format($total_income, 2) }} <span class="currency">টাকা</span>
                            </h4>
                            <span class="badge bg-success">
                                <i class="fas fa-arrow-up me-1"></i> {{ $year }}
                            </span>
                        </div>
                        <div class="progress mb-3" style="height: 25px;">
                            <div class="progress-bar bg-success" role="progressbar" 
                                 style="width: {{ $total_income > 0 ? 100 : 0 }}%" 
                                 aria-valuenow="{{ $total_income }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="{{ max($total_income, $total_expense) }}">
                                মোট আয়
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-receipt me-2"></i>মোট ব্যয়</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="total-box text-danger">
                                {{ number_format($total_expense, 2) }} <span class="currency">টাকা</span>
                            </h4>
                            <span class="badge bg-danger">
                                <i class="fas fa-arrow-down me-1"></i> {{ $year }}
                            </span>
                        </div>
                        <div class="progress mb-3" style="height: 25px;">
                            <div class="progress-bar bg-danger" role="progressbar" 
                                 style="width: {{ $total_expense > 0 ? 100 : 0 }}%" 
                                 aria-valuenow="{{ $total_expense }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="{{ max($total_income, $total_expense) }}">
                                মোট ব্যয়
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Breakdown -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>মাসিক ব্রেকডাউন ({{ $year }})</h5>
                    </div>
                    <div class="card-body">
                        <!-- Chart -->
                        <div class="chart-container mb-4">
                            <canvas id="monthlyChart"></canvas>
                        </div>
                        
                        <!-- Monthly Data Table -->
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>মাস</th>
                                        <th class="text-end">সঞ্চয়</th>
                                        <th class="text-end">আয়</th>
                                        <th class="text-end">ব্যয়</th>
                                        <th class="text-end">নিট আয়</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $total_savings_year = 0;
                                        $total_income_year = 0;
                                        $total_expense_year = 0;
                                        $total_net_income_year = 0;
                                    @endphp
                                    
                                    @foreach($monthly_breakdown as $month => $data)
                                        @php
                                            $total_savings_year += $data['savings'];
                                            $total_income_year += $data['income'];
                                            $total_expense_year += $data['expense'];
                                            $total_net_income_year += $data['net_income'];
                                        @endphp
                                        <tr>
                                            <td>
                                                <strong>{{ $data['month_name'] }}</strong>
                                            </td>
                                            <td class="text-end">
                                                <span class="text-info">{{ number_format($data['savings'], 2) }}</span>
                                            </td>
                                            <td class="text-end">
                                                <span class="text-success">{{ number_format($data['income'], 2) }}</span>
                                            </td>
                                            <td class="text-end">
                                                <span class="text-danger">{{ number_format($data['expense'], 2) }}</span>
                                            </td>
                                            <td class="text-end">
                                                <span class="{{ $data['net_income'] >= 0 ? 'text-success' : 'text-danger' }}">
                                                    {{ number_format($data['net_income'], 2) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-active">
                                    <tr>
                                        <td><strong>মোট</strong></td>
                                        <td class="text-end">
                                            <strong class="text-info">{{ number_format($total_savings_year, 2) }}</strong>
                                        </td>
                                        <td class="text-end">
                                            <strong class="text-success">{{ number_format($total_income_year, 2) }}</strong>
                                        </td>
                                        <td class="text-end">
                                            <strong class="text-danger">{{ number_format($total_expense_year, 2) }}</strong>
                                        </td>
                                        <td class="text-end">
                                            <strong class="{{ $total_net_income_year >= 0 ? 'text-success' : 'text-danger' }}">
                                                {{ number_format($total_net_income_year, 2) }}
                                            </strong>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Detailed Information -->
        <div class="row">
            <!-- Loan Details -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0"><i class="fas fa-handshake me-2"></i>লোন বিস্তারিত ({{ $year }})</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">মোট লোন</small>
                                    <strong class="text-warning">{{ $total_loans }}টি</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">লোন পরিমাণ</small>
                                    <strong class="text-warning">{{ number_format($loan_amount, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">পরিশোধিত</small>
                                    <strong class="text-success">{{ number_format($paid_amount, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">বাকি</small>
                                    <strong class="text-danger">{{ number_format($remaining_balance, 2) }} টাকা</strong>
                                </div>
                            </div>
                        </div>
                        <div class="progress mb-3" style="height: 20px;">
                            @if($loan_amount > 0)
                                @php
                                    $paid_percentage = ($paid_amount / $loan_amount) * 100;
                                @endphp
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {{ $paid_percentage }}%" 
                                     aria-valuenow="{{ $paid_percentage }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                    পরিশোধিত: {{ number_format($paid_percentage, 1) }}%
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Member Details -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-users me-2"></i>সদস্য বিস্তারিত ({{ $year }})</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">নতুন সদস্য</small>
                                    <strong class="text-primary">{{ $total_members }} জন</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">সক্রিয় সদস্য</small>
                                    <strong class="text-success">{{ $active_members }} জন</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">নিষ্ক্রিয় সদস্য</small>
                                    <strong class="text-secondary">{{ $total_members - $active_members }} জন</strong>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <div class="p-3 border rounded text-center">
                                    <small class="text-muted d-block">সদস্য বৃদ্ধি</small>
                                    <strong class="text-info">
                                        @if($total_members > 0)
                                            {{ number_format(($active_members / $total_members) * 100, 1) }}%
                                        @else
                                            0%
                                        @endif
                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="progress mb-3" style="height: 20px;">
                            @if($total_members > 0)
                                @php
                                    $active_percentage = ($active_members / $total_members) * 100;
                                @endphp
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {{ $active_percentage }}%" 
                                     aria-valuenow="{{ $active_percentage }}" 
                                     aria-valuemin="0" 
                                     aria-valuemax="100">
                                    সক্রিয়: {{ number_format($active_percentage, 1) }}%
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Year Summary -->
        <div class="row mt-4 no-print">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="mb-3">{{ $year }} সালের সারাংশ</h5>
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট আয়</small>
                                    <strong class="text-success">{{ number_format($total_income, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট ব্যয়</small>
                                    <strong class="text-danger">{{ number_format($total_expense, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">মোট সঞ্চয়</small>
                                    <strong class="text-info">{{ number_format($total_savings, 2) }} টাকা</strong>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <div class="p-3 border rounded">
                                    <small class="text-muted d-block">নিট আয়</small>
                                    <strong class="{{ $net_income >= 0 ? 'text-success' : 'text-danger' }}">
                                        {{ number_format($net_income, 2) }} টাকা
                                    </strong>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a href="{{ route('reports.summary') }}" class="btn btn-outline-primary me-2">
                                <i class="fas fa-chart-line me-1"></i> সারাংশ রিপোর্ট
                            </a>
                            <a href="{{ route('reports.monthly') }}" class="btn btn-outline-secondary me-2">
                                <i class="fas fa-calendar-alt me-1"></i> মাসিক রিপোর্ট
                            </a>
                            <button onclick="window.print()" class="btn btn-primary">
                                <i class="fas fa-print me-1"></i> প্রিন্ট রিপোর্ট
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Report Info -->
        <div class="row mt-4">
            <div class="col-12 text-center">
                <hr>
                <p class="text-muted small">
                    <i class="fas fa-clock me-1"></i>
                    রিপোর্ট তৈরি হয়েছে: {{ now()->format('d F Y, h:i A') }}
                    | 
                    <i class="fas fa-user me-1"></i>
                    ব্যবহারকারী: {{ Auth::user()->name ?? 'অজানা' }}
                    |
                    <i class="fas fa-calendar me-1"></i>
                    বছর: {{ $year }} সাল
                </p>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Font Awesome -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Monthly Chart Data
            const monthlyData = {
                labels: [
                    @foreach($monthly_breakdown as $month => $data)
                        "{{ $data['month_name'] }}",
                    @endforeach
                ],
                datasets: [
                    {
                        label: 'আয়',
                        data: [
                            @foreach($monthly_breakdown as $month => $data)
                                {{ $data['income'] }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(40, 167, 69, 0.2)',
                        borderColor: 'rgba(40, 167, 69, 1)',
                        borderWidth: 2,
                        fill: true
                    },
                    {
                        label: 'ব্যয়',
                        data: [
                            @foreach($monthly_breakdown as $month => $data)
                                {{ $data['expense'] }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(220, 53, 69, 0.2)',
                        borderColor: 'rgba(220, 53, 69, 1)',
                        borderWidth: 2,
                        fill: true
                    },
                    {
                        label: 'সঞ্চয়',
                        data: [
                            @foreach($monthly_breakdown as $month => $data)
                                {{ $data['savings'] }},
                            @endforeach
                        ],
                        backgroundColor: 'rgba(23, 162, 184, 0.2)',
                        borderColor: 'rgba(23, 162, 184, 1)',
                        borderWidth: 2,
                        fill: true
                    }
                ]
            };

            // Chart Configuration
            const config = {
                type: 'line',
                data: monthlyData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                font: {
                                    family: "'SolaimanLipi', 'Siyam Rupali', Arial, sans-serif",
                                    size: 12
                                }
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y.toLocaleString('bn-BD') + ' টাকা';
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return value.toLocaleString('bn-BD') + ' টাকা';
                                },
                                font: {
                                    family: "'SolaimanLipi', 'Siyam Rupali', Arial, sans-serif"
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        x: {
                            ticks: {
                                font: {
                                    family: "'SolaimanLipi', 'Siyam Rupali', Arial, sans-serif"
                                }
                            },
                            grid: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        }
                    }
                }
            };

            // Initialize Chart
            const ctx = document.getElementById('monthlyChart').getContext('2d');
            new Chart(ctx, config);

            // Print function
            function printReport() {
                window.print();
            }

            // Format numbers with comma
            function formatNumber(num) {
                return new Intl.NumberFormat('bn-BD').format(num);
            }

            // Update all numbers on page
            document.querySelectorAll('.number-format').forEach(function(element) {
                const num = parseFloat(element.textContent);
                if (!isNaN(num)) {
                    element.textContent = formatNumber(num);
                }
            });
        });
    </script>
</body>
</html>