@extends('layouts.app')

@section('content')
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
<style>
/* Reference Table Styling - Matching manager views */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.table thead th {
    background: #CEEDF5 !important;
    color: #17479E !important;
    font-weight: 600;
    border: 1px solid #dee2e6 !important;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.table thead th:hover {
    background: #B8E2F0 !important;
}

.table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

.table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.table tbody tr:hover {
    background: #e3f2fd !important;
}

.table tbody td {
    padding: 0.75rem 1rem !important;
    vertical-align: middle;
    border: 1px solid #dee2e6;
    font-size: 0.875rem;
    color: #495057;
}

.card {
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card-header {
    color: white !important;
}

.card-header h5 {
    color: white !important;
}

.page-header-modern {
    background: #17479E;
    border-radius: 4px;
    padding: 1.5rem;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #6c757d;
}

.breadcrumb-item a {
    color: #17479E;
    text-decoration: none;
    transition: all 0.2s;
}

.breadcrumb-item a:hover {
    color: #00BCD4;
}

.breadcrumb-item.active {
    color: #6c757d;
}
</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 active">HOD Accountant Dashboard</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-calculator'></i> Accountant Department Dashboard</h2>
                <p class="mb-0 opacity-75">
                    <i class='bx bx-user-pin'></i> Monitor and manage accountants' workload
                </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>

    {{-- Filter Modal --}}
    <div class="modal fade" id="filterModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="border-radius: 4px;">
                <div class="modal-header" style="background: #17479E;">
                    <h5 class="modal-title text-white">
                        <i class='bx bx-filter'></i> Filter Dashboard
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('hod.accountant.dashboard') }}" method="GET">
                    <div class="modal-body" style="padding: 25px;">
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label fw-bold" style="color: #1e293b;">
                                    <i class="fas fa-tag text-primary"></i> Enquiry Type
                                </label>
                                <select name="type" class="form-select" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                                <option value="">All Types</option>
                                <option value="refund" {{ request('type') == 'refund' ? 'selected' : '' }}>Refund</option>
                                <option value="share_enquiry" {{ request('type') == 'share_enquiry' ? 'selected' : '' }}>Share</option>
                                <option value="retirement" {{ request('type') == 'retirement' ? 'selected' : '' }}>Retirement</option>
                                <option value="deduction_add" {{ request('type') == 'deduction_add' ? 'selected' : '' }}>Deduction Adjustment</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="unjoin_membership" {{ request('type') == 'unjoin_membership' ? 'selected' : '' }}>Unjoin Membership</option>
                                <option value="join_membership" {{ request('type') == 'join_membership' ? 'selected' : '' }}>Join Membership</option>
                                <option value="ura_mobile" {{ request('type') == 'ura_mobile' ? 'selected' : '' }}>URA Mobile</option>
                                <option value="sick_for_30_days" {{ request('type') == 'sick_for_30_days' ? 'selected' : '' }}>Sick Leave 30+ Days</option>
                                <option value="condolences" {{ request('type') == 'condolences' ? 'selected' : '' }}>Condolences</option>
                                <option value="injured_at_work" {{ request('type') == 'injured_at_work' ? 'selected' : '' }}>Work Injury</option>
                                <option value="residential_disaster" {{ request('type') == 'residential_disaster' ? 'selected' : '' }}>Residential Disaster</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-list-ul text-primary"></i> Status
                            </label>
                            <select name="status" class="form-select" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                                <option value="">All Statuses</option>
                                <option value="assigned" {{ request('status') == 'assigned' ? 'selected' : '' }}>Assigned</option>
                                <option value="processed" {{ request('status') == 'processed' ? 'selected' : '' }}>Processed</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>Paid</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-user text-primary"></i> Accountant
                            </label>
                            <select name="user_id" class="form-select" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                                <option value="">All Accountants</option>
                                @foreach(\App\Models\User::whereHas('roles', function($q) { $q->where('name', 'accountant'); })->get() as $accountant)
                                <option value="{{ $accountant->id }}" {{ request('user_id') == $accountant->id ? 'selected' : '' }}>{{ $accountant->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-calendar-alt text-primary"></i> Date From
                            </label>
                            <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold" style="color: #1e293b;">
                                <i class="fas fa-calendar-alt text-primary"></i> Date To
                            </label>
                            <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" style="border-radius: 8px; padding: 10px 15px; border: 2px solid #e5e7eb;">
                        </div>
                        </div>
                    </div>
                    <div class="modal-footer" style="background: #f8f9fa; border-radius: 0 0 15px 15px; padding: 15px 25px;">
                        <a href="{{ route('hod.accountant.dashboard') }}" class="btn btn-secondary" style="border-radius: 8px; padding: 10px 20px;">
                            <i class="fas fa-times"></i> Clear
                        </a>
                        <button type="submit" class="btn btn-primary" style="border-radius: 8px; padding: 10px 25px; background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); border: none;">
                            <i class="fas fa-check"></i> Apply Filters
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Simple 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" style="border-left:4px solid #17479E;"><div class="card-body text-center" style="background:#e3f2fd;">
                <i class="fa fa-money-bill-wave mb-2" style="font-size:28px;color:#17479E;"></i>
                <p class="mb-1 small text-muted">TOTAL PAYMENTS</p>
                <h3 class="mb-0 text-primary">{{ number_format($analytics['total'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #2196f3;"><div class="card-body text-center" style="background:#e1f5fe;">
                <i class="fa fa-user-check mb-2" style="font-size:28px;color:#2196f3;"></i>
                <p class="mb-1 small text-muted">ASSIGNED</p>
                <h3 class="mb-0 text-info">{{ number_format($analytics['assigned'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #9c27b0;"><div class="card-body text-center" style="background:#f3e5f5;">
                <i class="fa fa-paper-plane mb-2" style="font-size:28px;color:#9c27b0;"></i>
                <p class="mb-1 small text-muted">INITIATED</p>
                <h3 class="mb-0" style="color:#9c27b0;">{{ number_format($analytics['initiated'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #4caf50;"><div class="card-body text-center" style="background:#e8f5e9;">
                <i class="fa fa-check-circle mb-2" style="font-size:28px;color:#4caf50;"></i>
                <p class="mb-1 small text-muted">APPROVED</p>
                <h3 class="mb-0 text-success">{{ number_format($analytics['approved'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #00bcd4;"><div class="card-body text-center" style="background:#e0f7fa;">
                <i class="fa fa-money-check-alt mb-2" style="font-size:28px;color:#00bcd4;"></i>
                <p class="mb-1 small text-muted">PAID</p>
                <h3 class="mb-0" style="color:#00bcd4;">{{ number_format($analytics['paid'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #f44336;"><div class="card-body text-center" style="background:#ffebee;">
                <i class="fa fa-times-circle mb-2" style="font-size:28px;color:#f44336;"></i>
                <p class="mb-1 small text-muted">REJECTED</p>
                <h3 class="mb-0 text-danger">{{ number_format($analytics['rejected'] ?? 0) }}</h3>
            </div></div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card h-100" style="border-left:4px solid #ff9800;"><div class="card-body text-center" style="background:#fff3e0;">
                <i class="fa fa-exclamation-triangle mb-2" style="font-size:28px;color:#ff9800;"></i>
                <p class="mb-1 small text-muted">OVERDUE</p>
                <h3 class="mb-0 text-warning">{{ number_format($analytics['overdue'] ?? 0) }}</h3>
            </div></div>
        </div>
    </div>

    {{-- Accountants Workload --}}
    <div class="card mb-4">
        <div class="card-header" style="background:#17479E;color:white;">
            <h5 class="mb-0 text-white">Accountants Workload</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width: 50px;">SN</th>
                            <th>Accountant</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Assigned Enquiries</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($userWorkload as $item)
                        <tr>
                            <td><strong>{{ $loop->iteration }}</strong></td>
                            <td><strong>{{ $item['user']->name }}</strong></td>
                            <td>{{ $item['user']->email }}</td>
                            <td>{{ $item['user']->phone_number ?? 'N/A' }}</td>
                            <td>
                                <strong style="font-size: 1rem;">Total: {{ $item['assigned_count'] }}</strong><br>
                                <small class="text-muted">
                                    Pending: <span class="badge bg-warning text-dark">{{ $item['pending_count'] }}</span> |
                                    Overdue: <span class="badge bg-danger">{{ $item['overdue_count'] }}</span>
                                </small>
                            </td>
                            <td>
                                @if($item['is_overloaded'])
                                    <span class="badge bg-danger">OVERLOADED</span>
                                @else
                                    <span class="badge bg-success">OK</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('hod.accountant.user.enquiries', $item['user']->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-eye"></i> View
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No accountants found in the department</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Charts Row --}}
    <div class="row g-3 mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <h5 class="mb-0 text-white">Enquiries by Type</h5>
                </div>
                <div class="card-body">
                    <canvas id="typeChart" height="120"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background:#17479E;color:white;">
                    <h5 class="mb-0 text-white">Payment Status Distribution</h5>
                </div>
                <div class="card-body">
                    <canvas id="statusChart" height="120"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- Overdue Enquiries --}}
    @if($overdueEnquiries->count() > 0)
    <div class="card">
        <div class="card-header" style="background:#ff9800;color:white;">
            <h5 class="mb-0 text-white"><i class='bx bx-error-circle'></i> Overdue Payment Enquiries (3+ Days)</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width: 50px;">SN</th>
                            <th>Check Number</th>
                            <th>Full Name</th>
                            <th>Type</th>
                            <th>Assigned To</th>
                            <th>Current Status</th>
                            <th>Days Since Created</th>
                            <th>Days in Current Status</th>
                            <th style="width: 120px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($overdueEnquiries as $enquiry)
                        @php
                            $daysSinceCreated = now()->diffInDays($enquiry->created_at);
                            $daysInCurrentStatus = now()->diffInDays($enquiry->updated_at);

                            // Determine overdue type based on current status
                            $isOverdue = false;
                            $overdueType = '';

                            if ($enquiry->status == 'pending' && $daysSinceCreated >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Pending Overdue';
                            } elseif ($enquiry->status == 'assigned' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Assigned Overdue';
                            } elseif ($enquiry->status == 'initiated' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Initiated Overdue';
                            } elseif ($enquiry->status == 'approved' && $daysInCurrentStatus >= 3) {
                                $isOverdue = true;
                                $overdueType = 'Approved Overdue';
                            }
                        @endphp
                        <tr>
                            <td><strong>{{ $loop->iteration }}</strong></td>
                            <td><strong>{{ $enquiry->check_number }}</strong></td>
                            <td>{{ ucwords($enquiry->full_name) }}</td>
                            <td>
                                {{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}
                            </td>
                            <td>
                                @foreach($enquiry->assignedUsers as $assignee)
                                    {{ $assignee->name }}@if(!$loop->last), @endif
                                @endforeach
                            </td>
                            <td>
                                @if($isOverdue)
                                    <span class="badge bg-danger">{{ $overdueType }}</span>
                                @else
                                    @if($enquiry->status == 'pending')
                                        <span class="badge bg-secondary">Pending</span>
                                    @elseif($enquiry->status == 'assigned')
                                        <span class="badge bg-primary">Assigned</span>
                                    @elseif($enquiry->status == 'initiated')
                                        <span class="badge bg-info">Initiated</span>
                                    @elseif($enquiry->status == 'approved')
                                        <span class="badge bg-success">Approved</span>
                                    @else
                                        <span class="badge bg-warning text-dark">{{ ucfirst($enquiry->status) }}</span>
                                    @endif
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-danger">{{ $daysSinceCreated }} days</span>
                            </td>
                            <td>
                                {{ $daysInCurrentStatus }} days
                            </td>
                            <td style="white-space: nowrap;">
                                <a href="{{ route('enquiries.show', $enquiry->id) }}" target="_blank" class="btn btn-sm btn-info" title="View Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @if($overdueEnquiries->hasPages())
        <div class="card-footer">
            {{ $overdueEnquiries->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
        @endif
    </div>
    @endif
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enquiries by Type Distribution Chart (Doughnut)
    const typeCtx = document.getElementById('typeChart').getContext('2d');
    new Chart(typeCtx, {
        type: 'doughnut',
        data: {
            labels: [
                @if(isset($chartData['type_data']))
                    @foreach($chartData['type_data'] as $type => $count)
                        '{{ ucfirst(str_replace("_", " ", $type)) }}',
                    @endforeach
                @endif
            ],
            datasets: [{
                data: [
                    @if(isset($chartData['type_data']))
                        @foreach($chartData['type_data'] as $type => $count)
                            {{ $count }},
                        @endforeach
                    @endif
                ],
                backgroundColor: [
                    '#3b82f6',
                    '#10b981',
                    '#8b5cf6',
                    '#f59e0b',
                    '#ef4444',
                    '#06b6d4',
                    '#ec4899',
                    '#84cc16',
                    '#fb923c',
                    '#6366f1',
                    '#0ea5e9',
                    '#a855f7',
                    '#22c55e'
                ],
                borderWidth: 3,
                borderColor: '#fff',
                hoverOffset: 10,
                hoverBorderWidth: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            cutout: '65%',
            plugins: {
                legend: {
                    position: 'right',
                    align: 'center',
                    labels: {
                        padding: 12,
                        font: {
                            size: 11,
                            weight: '600',
                            family: "'Inter', 'Segoe UI', 'Roboto', sans-serif"
                        },
                        usePointStyle: true,
                        pointStyle: 'rectRounded',
                        boxWidth: 12,
                        boxHeight: 12,
                        color: '#374151',
                        generateLabels: function(chart) {
                            const data = chart.data;
                            if (data.labels.length && data.datasets.length) {
                                return data.labels.map((label, i) => {
                                    const value = data.datasets[0].data[i];
                                    const total = data.datasets[0].data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return {
                                        text: `${label}: ${value} (${percentage}%)`,
                                        fillStyle: data.datasets[0].backgroundColor[i],
                                        hidden: false,
                                        index: i
                                    };
                                });
                            }
                            return [];
                        }
                    }
                },
                title: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(30, 41, 59, 0.95)',
                    titleFont: {
                        size: 13,
                        weight: 'bold',
                        family: "'Inter', sans-serif"
                    },
                    bodyFont: {
                        size: 12,
                        family: "'Inter', sans-serif"
                    },
                    padding: 12,
                    cornerRadius: 8,
                    displayColors: true,
                    boxWidth: 12,
                    boxHeight: 12,
                    boxPadding: 6,
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                            return ` ${label}: ${value} payments (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });

    // Payment Status Distribution Chart (Bar Graph)
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'bar',
        data: {
            labels: ['Assigned', 'Initiated', 'Approved', 'Paid', 'Rejected'],
            datasets: [{
                data: [
                    {{ $analytics['assigned'] ?? 0 }},
                    {{ $analytics['initiated'] ?? 0 }},
                    {{ $analytics['approved'] ?? 0 }},
                    {{ $analytics['paid'] ?? 0 }},
                    {{ $analytics['rejected'] ?? 0 }}
                ],
                backgroundColor: [
                    '#3b82f6',
                    '#8b5cf6',
                    '#10b981',
                    '#06b6d4',
                    '#ef4444'
                ],
                borderWidth: 2,
                borderColor: '#fff',
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'top',
                    align: 'center',
                    labels: {
                        padding: 12,
                        font: {
                            size: 11,
                            weight: '600',
                            family: "'Inter', 'Segoe UI', 'Roboto', sans-serif"
                        },
                        usePointStyle: true,
                        pointStyle: 'rectRounded',
                        boxWidth: 12,
                        boxHeight: 12,
                        color: '#374151',
                        generateLabels: function(chart) {
                            const data = chart.data;
                            if (data.labels.length && data.datasets.length) {
                                return data.labels.map((label, i) => {
                                    const value = data.datasets[0].data[i];
                                    const total = data.datasets[0].data.reduce((a, b) => a + b, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                    return {
                                        text: `${label}: ${value} (${percentage}%)`,
                                        fillStyle: data.datasets[0].backgroundColor[i],
                                        hidden: false,
                                        index: i
                                    };
                                });
                            }
                            return [];
                        }
                    }
                },
                title: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(30, 41, 59, 0.95)',
                    titleFont: {
                        size: 13,
                        weight: 'bold',
                        family: "'Inter', sans-serif"
                    },
                    bodyFont: {
                        size: 12,
                        family: "'Inter', sans-serif"
                    },
                    padding: 12,
                    cornerRadius: 8,
                    displayColors: true,
                    boxWidth: 12,
                    boxHeight: 12,
                    boxPadding: 6,
                    callbacks: {
                        label: function(context) {
                            const label = context.label || '';
                            const value = context.parsed;
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                            return ` ${label}: ${value} payments (${percentage}%)`;
                        }
                    }
                }
            }
        }
    });
});
</script>
@endsection