@extends('layouts.app')

@section('content')
<style>
    /* Analytics Cards */
    .analytics-card {
        transition: all 0.3s ease;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }

    .analytics-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }

    .analytics-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #007bff, #0056b3);
    }

    /* Table Styling */
    .table {
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

    .table thead th {
        background: #1e40af !important;
        color: white !important;
        font-weight: 700;
        border: none !important;
        padding: 15px 18px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        text-align: center;
        border-bottom: 3px solid #0f3470 !important;
    }

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

    .table tbody tr:hover {
        background: linear-gradient(to right, #f0f9ff 0%, #e0f2fe 100%) !important;
        transform: scale(1.01);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.1);
    }

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

    .table tbody tr:nth-child(even):hover {
        background: linear-gradient(to right, #f0f9ff 0%, #e0f2fe 100%) !important;
    }

    .table tbody td {
        padding: 14px 18px !important;
        vertical-align: middle;
        border: none;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.875rem;
        color: #374151;
        text-align: center;
    }

    .table tbody td:first-child {
        font-weight: 600;
        color: #1e293b;
    }

    .badge {
        padding: 6px 14px;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn {
        transition: all 0.3s ease;
        font-weight: 600;
        border-radius: 8px;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    }

    .dropdown-menu {
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        border: none;
        padding: 8px 0;
    }

    .dropdown-item {
        padding: 10px 20px;
        transition: all 0.2s;
        font-size: 0.875rem;
    }

    .dropdown-item:hover {
        background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%);
        color: white !important;
    }

    .dropdown-item i {
        width: 20px;
        text-align: center;
        margin-right: 8px;
    }
</style>

<div class="container-fluid py-4">
    <!-- Breadcrumb -->
    <div class="card modern-breadcrumb-card border-0 mb-4">
        <div class="card-body p-3">
            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="breadcrumb-icon-box" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 10px; color: white;">
                        <i class="fas fa-user-tie"></i>
                    </div>
                    <h5 class="breadcrumb-title" style="font-size: 1.15rem; font-weight: 700; color: #1e293b; margin: 0;">Head of Accountant Department</h5>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0" style="background: transparent;">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fas fa-home"></i> Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">HOD Accountant Dashboard</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <!-- Page Header -->
    <div class="mb-4" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); padding: 32px; border-radius: 6px; color: white; box-shadow: 0 2px 6px rgba(23, 71, 158, 0.15);">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
            <div>
                <h1 class="mb-1" style="font-size: 28px; font-weight: 700; color: white;">Accountant Department Dashboard</h1>
                <p class="mb-0" style="color: rgba(255,255,255,0.9); font-size: 14px;">Monitor and manage accountants' workload</p>
            </div>
            <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#filterModal">
                <i class="fas fa-filter"></i> Filters
            </button>
        </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: 15px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
                <div class="modal-header" style="background: linear-gradient(135deg, #17479E 0%, #87CEEB 100%); border-radius: 15px 15px 0 0; padding: 20px 25px;">
                    <h5 class="modal-title" style="color: white; font-weight: 700; font-size: 1.2rem;">
                        <i class="fas fa-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>

    <!-- Analytics Cards -->
    <div class="row g-3 mb-4">
        <!-- Total Enquiries -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Total Payments</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['total'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 10px;">
                            <i class="fas fa-money-bill-wave text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Assigned -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Assigned</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['assigned'] ?? 0) }}</h3>
                            <p class="mb-0 text-muted" style="font-size: 0.75rem;">{{ $analytics['total'] > 0 ? round((($analytics['assigned'] ?? 0) / $analytics['total']) * 100, 1) : 0 }}% assigned</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); border-radius: 10px;">
                            <i class="fas fa-user-check text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Initiated -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Initiated</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['initiated'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 10px;">
                            <i class="fas fa-paper-plane text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Approved -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Approved</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['approved'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 10px;">
                            <i class="fas fa-check-circle text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paid -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Paid</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['paid'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #059669 0%, #047857 100%); border-radius: 10px;">
                            <i class="fas fa-money-check-alt text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rejected -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Rejected</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['rejected'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); border-radius: 10px;">
                            <i class="fas fa-times-circle text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Overdue -->
        <div class="col-6 col-md-4 col-lg-3 col-xl">
            <div class="card border-0 shadow-sm h-100 analytics-card" style="background: #fff; border-radius: 12px;">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">Overdue (3+ Days)</p>
                            <h3 class="fw-bold mb-0" style="color: #1e293b; font-size: 1.75rem;">{{ number_format($analytics['overdue'] ?? 0) }}</h3>
                        </div>
                        <div class="d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 10px;">
                            <i class="fas fa-exclamation-triangle text-white" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Accountants Workload -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 2px solid #dee2e6;">
            <h5 class="mb-0 fw-bold">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 class="text-center">Assigned Enquiries</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($userWorkload as $item)
                        <tr>
                            <td class="text-center"><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 class="text-center">
                                <span class="badge bg-primary" style="font-size: 1rem;">{{ $item['assigned_count'] }}</span>
                            </td>
                            <td class="text-center">
                                @if($item['is_overloaded'])
                                    <span class="badge bg-danger">OVERLOADED</span>
                                @else
                                    <span class="badge bg-success">OK</span>
                                @endif
                            </td>
                            <td class="text-center">
                                <a href="{{ route('hod.accountant.user.enquiries', $item['user']->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-eye"></i> View Enquiries
                                </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 border-0 shadow-sm">
                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 2px solid #dee2e6;">
                    <h5 class="mb-0 fw-bold">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 border-0 shadow-sm">
                <div class="card-header" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-bottom: 2px solid #dee2e6;">
                    <h5 class="mb-0 fw-bold">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 border-0 shadow-sm">
        <div class="card-header" style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-bottom: 2px solid #f59e0b;">
            <h5 class="mb-0 fw-bold text-warning"><i class="fas fa-exclamation-triangle"></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);
                        @endphp
                        <tr>
                            <td class="text-center"><strong>{{ $loop->iteration }}</strong></td>
                            <td><strong>{{ $enquiry->check_number }}</strong></td>
                            <td>{{ ucwords($enquiry->full_name) }}</td>
                            <td>
                                <span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}</span>
                            </td>
                            <td>
                                @foreach($enquiry->assignedUsers as $assignee)
                                    <span class="badge bg-info">{{ $assignee->name }}</span>
                                @endforeach
                            </td>
                            <td>
                                @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 == 'approved')
                                    <span class="badge bg-success">Approved</span>
                                @else
                                    <span class="badge bg-warning text-dark">{{ ucfirst($enquiry->status) }}</span>
                                @endif
                            </td>
                            <td>
                                <span class="badge bg-danger">{{ $daysSinceCreated }} days</span>
                            </td>
                            <td>
                                <span class="badge bg-warning text-dark">{{ $daysInCurrentStatus }} days</span>
                            </td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" style="white-space: nowrap;">
                                        <i class="fas fa-bars"></i> Actions
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('enquiries.show', $enquiry->id) }}" target="_blank">
                                                <i class="fas fa-eye"></i> View More
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </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>

<style>
    .modern-breadcrumb-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    @media (max-width: 768px) {
        .analytics-card .card-number { font-size: 1.5rem !important; }
        .analytics-card .card-icon-box { width: 36px !important; height: 36px !important; }
    }

    @media (max-width: 576px) {
        .analytics-card .card-number { font-size: 1.35rem !important; }
        .analytics-card .card-icon-box { width: 32px !important; height: 32px !important; }
        .analytics-card .card-body { padding: 0.75rem !important; }
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Type Distribution Chart
    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}%)`;
                        }
                    }
                }
            }
        }
    });

    // Status Distribution Chart
    const statusCtx = document.getElementById('statusChart').getContext('2d');
    new Chart(statusCtx, {
        type: 'doughnut',
        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: 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}%)`;
                        }
                    }
                }
            }
        }
    });
});
</script>
@endsection