@extends('layouts.app')

@section('title', 'Maombi Yanayosubiri')
@section('page-title', 'Maombi Yanayosubiri')

@section('content')
<div class="space-y-8">
    <!-- Header -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <div class="w-12 h-12 bg-orange-100 dark:bg-orange-900/20 rounded-xl flex items-center justify-center">
                        <span class="material-icons text-orange-600 dark:text-orange-400 text-xl">message</span>
                    </div>
                    <div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center">
                        <span class="text-xs text-white font-bold">!</span>
                    </div>
                </div>
                <div>
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Maombi Yanayosubiri</h1>
                    <p class="text-gray-600 dark:text-gray-400 mt-1">
                        @if($userRole === 'representative')
                            Maombi yako ya makato yanayosubiri kukaguliwa
                        @elseif($userRole === 'manager')
                            Maombi ya makato yanayosubiri kutoka wilaya za tawi lako
                        @else
                            Maombi yote ya makato yanayosubiri kukaguliwa mfumoni
                        @endif
                    </p>
                </div>
            </div>
            <div class="text-right">
                <p class="text-sm text-gray-500 dark:text-gray-400">Jumla ya Yanayosubiri</p>
                <p class="text-3xl font-bold text-orange-600 dark:text-orange-400">{{ $pendingApplications->total() }}</p>
            </div>
        </div>
    </div>

    <!-- Statistics by District/Branch -->
    @if($districtStats->isNotEmpty())
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
        <!-- District Statistics -->
        <div class="xl:col-span-2 bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class=" p-6">
               <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span class="material-icons text-purple-600">bar_chart</span>
                    <span>Mgawanyiko wa maombi kwa wilaya</span>
                </h2>
            </div>
            <div class="p-6">
                @if($userRole === 'admin')
                    <!-- Admin view: Group by Branch -->
                    @foreach($branchStats as $branchName => $districts)
                    <div class="mb-8 last:mb-0">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center space-x-3">
                                <div class="w-8 h-8 bg-gradient-to-br from-green-500 to-emerald-500 rounded-lg flex items-center justify-center">
                                    <span class="material-icons text-white text-sm">business</span>
                                </div>
                                <span>{{ ucfirst($branchName) }}</span>
                            </h3>
                            <div class="flex items-center space-x-2">
                                <span class="text-xs bg-gradient-to-r from-green-500 to-emerald-500 text-white px-3 py-1 rounded-full font-medium">
                                    {{ $districts->sum('pending_count') }} maombi
                                </span>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 ml-4">
                            @foreach($districts as $district)
                            <div class="group bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/50 dark:to-gray-600/50 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hover:shadow-md transition-all duration-300 hover:scale-105">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
                                            <span class="material-icons text-white text-xs">location_on</span>
                                        </div>
                                        <span class="font-medium text-gray-700 dark:text-gray-300">{{ ucfirst($district->district_name) }}</span>
                                    </div>
                                    <span class="text-sm font-bold text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30 px-3 py-1 rounded-full">
                                        {{ $district->pending_count }}
                                    </span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                @else
                    <!-- Manager/Representative view: Show districts only -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($districtStats as $district)
                        <div class="group bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700/50 dark:to-gray-600/50 p-4 rounded-xl border border-gray-200 dark:border-gray-600 hover:shadow-md transition-all duration-300 hover:scale-105">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3">
                                    <div class="w-6 h-6 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-lg flex items-center justify-center">
                                        <span class="material-icons text-white text-xs">location_on</span>
                                    </div>
                                    <span class="font-medium text-gray-700 dark:text-gray-300">{{ ucfirst($district->district_name) }}</span>
                                </div>
                                <span class="text-sm font-bold text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30 px-3 py-1 rounded-full">
                                    {{ $district->pending_count }}
                                </span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
        <!-- Chart Visualization -->
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700">
            <div class="p-6 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center space-x-2">
                    <span class="material-icons text-purple-600">bar_chart</span>
                    <span>Mchoro wa Maombi</span>
                </h2>
            </div>
            <div class="p-6">
                <div class="relative h-80">
                    <canvas id="pendingChart" class="w-full h-full"></canvas>
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Quick Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 p-6 rounded-xl border border-orange-200 dark:border-orange-800">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-orange-800 dark:text-orange-300">Jumla ya Maombi</p>
                    <p class="text-2xl font-bold text-orange-900 dark:text-orange-100">{{ $pendingApplications->total() }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-200 dark:bg-orange-800 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-orange-700 dark:text-orange-300">pending_actions</span>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 p-6 rounded-xl border border-blue-200 dark:border-blue-800">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-blue-800 dark:text-blue-300">Leo</p>
                    <p class="text-2xl font-bold text-blue-900 dark:text-blue-100">
                        {{ $pendingApplications->where('created_at', '>=', today())->count() }}
                    </p>
                </div>
                <div class="w-12 h-12 bg-blue-200 dark:bg-blue-800 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-blue-700 dark:text-blue-300">today</span>
                </div>
            </div>
        </div>

        <div class="bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 p-6 rounded-xl border border-purple-200 dark:border-purple-800">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-purple-800 dark:text-purple-300">Wiki Hii</p>
                    <p class="text-2xl font-bold text-purple-900 dark:text-purple-100">
                        {{ $pendingApplications->where('created_at', '>=', now()->startOfWeek())->count() }}
                    </p>
                </div>
                <div class="w-12 h-12 bg-purple-200 dark:bg-purple-800 rounded-lg flex items-center justify-center">
                    <span class="material-icons text-purple-700 dark:text-purple-300">date_range</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Pending Applications List -->
   <!-- Pending Applications List - Mobile Responsive Version -->
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 p-4 sm:p-6 border-b border-gray-200 dark:border-gray-600">
        <h2 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white flex items-center space-x-2 sm:space-x-3">
            <span class="material-icons text-xl sm:text-2xl text-gray-600 dark:text-gray-300">list_alt</span>
            <span class="text-sm sm:text-base lg:text-xl">Orodha ya Maombi Yanayosubiri</span>
        </h2>
    </div>

    @forelse($pendingApplications as $application)
    <div class="group p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 last:border-b-0 hover:bg-gradient-to-r hover:from-gray-50 hover:to-white dark:hover:from-gray-700/50 dark:hover:to-gray-800/50 transition-all duration-300">
        <!-- Mobile Layout (< md) -->
        <div class="block md:hidden space-y-4">
            <!-- Header with Icon and Title -->
            <div class="flex items-start space-x-3">
                <div class="flex-shrink-0">
                    <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-amber-500 rounded-xl flex items-center justify-center shadow-lg">
                        <span class="material-icons text-white text-lg">schedule</span>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white truncate">
                        @if($userRole !== 'representative')
                            {{ $application->names }}
                        @else
                            Ombi lako la makato
                        @endif
                    </h3>
                    <div class="flex flex-wrap gap-2 mt-2">
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-sm">
                            <span class="material-icons text-xs mr-1">schedule</span>
                            Inasubiri
                        </span>
                        
                        @if($application->new_contribution_amount > $application->current_contribution_amount)
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-sm">
                            <span class="material-icons text-xs mr-1">trending_up</span>
                            Kuongeza
                        </span>
                        @else
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-sm">
                            <span class="material-icons text-xs mr-1">trending_down</span>
                            Kupunguza
                        </span>
                        @endif
                    </div>
                </div>
            </div>
            
            <!-- Application Details -->
            <div class="bg-gray-50 dark:bg-gray-700/30 rounded-xl p-4 space-y-3">
                <!-- Basic Info -->
                <div class="space-y-2">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1">tag</span>
                            Namba ya Uhakiki:
                        </span>
                        <span class="font-bold text-gray-900 dark:text-white">{{ $application->check_number }}</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1">phone</span>
                            Simu:
                        </span>
                        <span class="font-medium text-gray-900 dark:text-white">{{ $application->phone_number ?? 'N/A' }}</span>
                    </div>
                    
                    @if($userRole !== 'representative')
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1 text-blue-500">location_on</span>
                            Wilaya:
                        </span>
                        <span class="font-bold text-blue-600 dark:text-blue-400">{{ ucfirst($application->district->name ?? 'N/A') }}</span>
                    </div>
                    @if($userRole === 'admin')
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1 text-green-500">business</span>
                            Tawi:
                        </span>
                        <span class="font-bold text-green-600 dark:text-green-400">{{ ucfirst($application->district->branch->name ?? 'N/A') }}</span>
                    </div>
                    @endif
                    @endif
                </div>
                
                <!-- Financial Info -->
                <div class="border-t border-gray-200 dark:border-gray-600 pt-3 space-y-2">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1 text-green-500">arrow_upward</span>
                            Kiasi Kipya:
                        </span>
                        <span class="font-bold text-green-600 dark:text-green-400">
                            TSh {{ number_format($application->new_contribution_amount, 0) }}
                        </span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400 flex items-center">
                            <span class="material-icons text-xs mr-1">horizontal_rule</span>
                            Kiasi cha Sasa:
                        </span>
                        <span class="font-medium text-gray-700 dark:text-gray-300">
                            TSh {{ number_format($application->current_contribution_amount, 0) }}
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- Date and Actions -->
            <div class="flex flex-col space-y-3">
                <div class="text-center bg-gray-100 dark:bg-gray-700 rounded-lg p-2">
                    <p class="text-sm font-medium text-gray-900 dark:text-white">
                        {{ $application->created_at->format('d/m/Y H:i') }}
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        {{ $application->created_at->diffForHumans() }}
                    </p>
                </div>
                
                @if(Auth::user()->hasAnyRole(['admin', 'manager']))
                <div class="flex flex-col space-y-2">
                    <button onclick="approveApplication({{ $application->id }})" 
                            class="w-full inline-flex items-center justify-center px-4 py-2.5 bg-gradient-to-r from-green-500 to-emerald-500 border border-transparent text-sm font-medium rounded-xl text-white hover:from-green-600 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 shadow-lg transition-all duration-300">
                        <span class="material-icons text-sm mr-2">check</span>
                        Idhinisha
                    </button>
                    
                    <button onclick="rejectApplication({{ $application->id }})" 
                            class="w-full inline-flex items-center justify-center px-4 py-2.5 bg-gradient-to-r from-red-500 to-pink-500 border border-transparent text-sm font-medium rounded-xl text-white hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-lg transition-all duration-300">
                        <span class="material-icons text-sm mr-2">close</span>
                        Kataa
                    </button>
                </div>
                @endif
            </div>
        </div>

        <!-- Desktop Layout (md and above) -->
        <div class="hidden md:flex items-start space-x-6">
        <div class="flex-shrink-0">
    <div class="w-14 h-14 bg-gray-600 rounded-2xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
        <span class="material-icons text-white text-xl">person</span>
    </div>
</div>

            
            <div class="flex-1 min-w-0">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors duration-300">
                            @if($userRole !== 'representative')
                                {{ $application->names }}
                            @else
                                Ombi lako la makato
                            @endif
                        </h3>
                        <div class="mt-4 grid grid-cols-1 lg:grid-cols-3 gap-6">
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-gray-500">tag</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Namba ya Uhakiki:</span>
                                    <span class="text-sm font-bold text-gray-900 dark:text-white">{{ $application->check_number }}</span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-gray-500">phone</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Simu:</span>
                                    <span class="text-sm text-gray-900 dark:text-white">{{ $application->phone_number ?? 'N/A' }}</span>
                                </div>
                            </div>
                            
                            @if($userRole !== 'representative')
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-blue-500">location_on</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Wilaya:</span>
                                    <span class="text-sm font-bold text-blue-600 dark:text-blue-400">{{ ucfirst($application->district->name ?? 'N/A') }}</span>
                                </div>
                                @if($userRole === 'admin')
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-green-500">business</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Tawi:</span>
                                    <span class="text-sm font-bold text-green-600 dark:text-green-400">{{ ucfirst($application->district->branch->name ?? 'N/A') }}</span>
                                </div>
                                @endif
                            </div>
                            @endif
                            
                            <div class="space-y-2">
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-green-500">arrow_upward</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Kiasi Kipya:</span>
                                    <span class="text-sm font-bold text-green-600 dark:text-green-400">
                                        TSh {{ number_format($application->new_contribution_amount, 2) }}
                                    </span>
                                </div>
                                <div class="flex items-center space-x-2">
                                    <span class="material-icons text-sm text-gray-500">horizontal_rule</span>
                                    <span class="text-sm font-medium text-gray-600 dark:text-gray-400">Kiasi cha Sasa:</span>
                                    <span class="text-sm text-gray-700 dark:text-gray-300">TSh {{ number_format($application->current_contribution_amount, 2) }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-4 flex items-center space-x-3">
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-md">
                                <span class="material-icons text-xs mr-1">schedule</span>
                                Inasubiri
                            </span>
                            
                            @if($application->new_contribution_amount > $application->current_contribution_amount)
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-md">
                                <span class="material-icons text-xs mr-1">trending_up</span>
                                Kuongeza
                            </span>
                            @else
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-bold bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-md">
                                <span class="material-icons text-xs mr-1">trending_down</span>
                                Kupunguza
                            </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="flex flex-col items-end space-y-3">
                        <div class="text-right">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                {{ $application->created_at->format('d/m/Y H:i') }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                {{ $application->created_at->diffForHumans() }}
                            </p>
                        </div>
                        
                        @if(Auth::user()->hasAnyRole(['admin', 'manager']))
                        <div class="flex space-x-3">
                            <button onclick="approveApplication({{ $application->id }})" 
                                    class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 border border-transparent text-sm font-medium rounded-xl text-white hover:from-green-600 hover:to-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 shadow-lg transition-all duration-300 hover:scale-105">
                                <span class="material-icons text-sm mr-2">check</span>
                                Idhinisha
                            </button>
                            
                            <button onclick="rejectApplication({{ $application->id }})" 
                                    class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-500 to-pink-500 border border-transparent text-sm font-medium rounded-xl text-white hover:from-red-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-lg transition-all duration-300 hover:scale-105">
                                <span class="material-icons text-sm mr-2">close</span>
                                Kataa
                            </button>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    @empty
    <div class="p-8 sm:p-16 text-center">
        <div class="w-20 h-20 sm:w-24 sm:h-24 mx-auto bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center mb-4 sm:mb-6 shadow-lg">
            <span class="material-icons text-gray-400 text-3xl sm:text-4xl">assignment_turned_in</span>
        </div>
        <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-2 sm:mb-3">Hakuna maombi yanayosubiri</h3>
        <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg max-w-md mx-auto px-4">Maombi yote yameshatatuliwa au hakuna maombi yaliyowasilishwa.</p>
    </div>
    @endforelse
</div>

    <!-- Pagination -->
    @if($pendingApplications->hasPages())
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        {{ $pendingApplications->links() }}
    </div>
    @endif
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Chart visualization
@if($chartData->isNotEmpty())
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('pendingChart').getContext('2d');
    
    const chartData = @json($chartData);
    const labels = chartData.map(item => item.label);
    const data = chartData.map(item => item.value);
    
    // Create gradients for bars
    const gradients = [];
    for (let i = 0; i < data.length; i++) {
        const gradient = ctx.createLinearGradient(0, 0, 0, 400);
        const colors = [
            ['#f97316', '#fb923c'], // orange
            ['#3b82f6', '#60a5fa'], // blue  
            ['#8b5cf6', '#a78bfa'], // purple
            ['#ef4444', '#f87171'], // red
            ['#10b981', '#34d399'], // green
            ['#f59e0b', '#fbbf24'], // amber
            ['#6366f1', '#818cf8'], // indigo
            ['#ec4899', '#f472b6'], // pink
            ['#14b8a6', '#5eead4'], // teal
            ['#f43f5e', '#fb7185']  // rose
        ];
        const colorPair = colors[i % colors.length];
        gradient.addColorStop(0, colorPair[0]);
        gradient.addColorStop(1, colorPair[1]);
        gradients.push(gradient);
    }
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Maombi',
                data: data,
                backgroundColor: gradients,
                borderColor: gradients.map(g => g.addColorStop(0, 'rgba(255,255,255,0.2)')),
                borderWidth: 2,
                borderRadius: 8,
                borderSkipped: false,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    titleColor: '#fff',
                    bodyColor: '#fff',
                    borderColor: 'rgba(255, 255, 255, 0.2)',
                    borderWidth: 1,
                    cornerRadius: 12,
                    displayColors: false,
                    callbacks: {
                        title: function(context) {
                            return context[0].label;
                        },
                        label: function(context) {
                            return `${context.parsed.y} maombi yanayosubiri`;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)',
                        drawBorder: false,
                    },
                    ticks: {
                        color: '#6b7280',
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        callback: function(value) {
                            return Number.isInteger(value) ? value : '';
                        }
                    }
                },
                x: {
                    grid: {
                        display: false,
                    },
                    ticks: {
                        color: '#6b7280',
                        font: {
                            size: 11,
                            weight: '600'
                        },
                        maxRotation: 45,
                        minRotation: 0
                    }
                }
            },
            animation: {
                duration: 2000,
                easing: 'easeInOutQuart'
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
});
@endif

@if(Auth::user()->hasAnyRole(['admin', 'manager']))
function approveApplication(id) {
    Swal.fire({
        title: 'Idhinisha Ombi',
        text: 'Je, una uhakika unataka kuidhinisha ombi hili?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#10b981',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Ndio, Idhinisha',
        cancelButtonText: 'Ghairi',
        customClass: {
            popup: 'rounded-2xl',
            confirmButton: 'rounded-xl',
            cancelButton: 'rounded-xl'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            // Add your approval logic here
            window.location.href = `/deductions/${id}/approve`;
        }
    });
}

function rejectApplication(id) {
    Swal.fire({
        title: 'Kataa Ombi',
        text: 'Andika sababu ya kukataa ombi hili:',
        input: 'textarea',
        inputPlaceholder: 'Sababu ya kukataa...',
        inputValidator: (value) => {
            if (!value) {
                return 'Lazima uandike sababu ya kukataa!';
            }
        },
        showCancelButton: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#6b7280',
        confirmButtonText: 'Kataa',
        cancelButtonText: 'Ghairi',
        customClass: {
            popup: 'rounded-2xl',
            confirmButton: 'rounded-xl',
            cancelButton: 'rounded-xl'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            // Add your rejection logic here
            const reason = result.value;
            window.location.href = `/deductions/${id}/reject?reason=${encodeURIComponent(reason)}`;
        }
    });
}
@endif
</script>
@endpush
@endsection