@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb Navigation -->
{{-- CSS ya Kisasa na Professional (kutoka kwenye mfano wa pili) --}}
{{-- CSS ya Unified Header --}}
<style>
    .unified-header-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    
    .header-top {
        padding: 0.75rem 1.25rem;
        border-bottom: 1px solid #f1f5f9;
    }
    
    .header-bottom {
        padding: 1rem 1.25rem;
    }
    
    .branch-icon {
        width: 42px;
        height: 42px;
        background: linear-gradient(135deg, #4587D1 0%, #3a73b8 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    
    .branch-title {
        font-size: 1.35rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }
    
    .branch-manager-badge {
        background: #4587D1;
        color: white;
        padding: 0.55rem 1.1rem;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 2px 6px rgba(69, 135, 209, 0.2);
    }
    
    .nav-breadcrumb {
        list-style: none;
        background: transparent;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
        font-size: 0.85rem;
    }
    
    .nav-breadcrumb a {
        color: #64748b;
        text-decoration: none;
        transition: color 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .nav-breadcrumb a:hover {
        color: #4587D1;
    }
    
    .nav-breadcrumb .active {
        color: #4587D1;
        font-weight: 600;
    }
    
    .nav-sep {
        color: #cbd5e1;
        font-size: 0.7rem;
        margin: 0 0.4rem;
    }
    
    @media (max-width: 768px) {
        .header-top,
        .header-bottom {
            padding: 0.75rem 1rem;
        }
        
        .branch-icon {
            width: 38px;
            height: 38px;
            font-size: 1rem;
        }
        
        .branch-title {
            font-size: 1.15rem;
        }
        
        .branch-manager-badge {
            font-size: 0.85rem;
            padding: 0.5rem 0.9rem;
        }
        
        .nav-breadcrumb {
            font-size: 0.8rem;
        }
    }
    
    @media (max-width: 576px) {
        .branch-title {
            font-size: 1.05rem;
        }
        
        .branch-manager-badge {
            width: 100%;
            justify-content: center;
        }
        
        .nav-breadcrumb {
            font-size: 0.75rem;
        }
    }
</style>

{{-- Unified Branch Management Header --}}
<div class="card unified-header-card mb-4">
    
    {{-- Top Section: Breadcrumb --}}
    <div class="header-top">
        <nav aria-label="breadcrumb">
            <ol class="nav-breadcrumb">
                <li>
                    <a href="{{ route('dashboard') }}">
                        <i class="fas fa-home"></i>
                        <span class="d-none d-sm-inline">Dashboard</span>
                    </a>
                </li>
                
                <span class="nav-sep">
                    <i class="fas fa-chevron-right"></i>
                </span>
                
                <li class="active" aria-current="page">
                    Branch Manager
                </li>
            </ol>
        </nav>
    </div>
    
    {{-- Bottom Section: Title & Badge --}}
    <div class="header-bottom">
        <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-3">
            
            {{-- Left: Icon & Title --}}
            <div class="d-flex align-items-center gap-3">
                <div class="branch-icon">
                    <i class="fas fa-code-branch"></i>
                </div>
                <h2 class="branch-title">Branch Management</h2>
            </div>
            
            {{-- Right: Manager Badge --}}
            <div>
                <span class="branch-manager-badge">
                    <i class="fas fa-user-tie"></i>
                    <span>{{ $branch->name }} Branch Manager</span>
                </span>
            </div>
            
        </div>
    </div>
    
</div>
    <style>
    /* CSS ya awali imebaki vile vile kwa ajili ya responsiveness */
    @media (max-width: 768px) {
        .analytics-card .card-number { font-size: 1.5rem !important; }
        .analytics-card .card-icon-box { width: 36px !important; height: 36px !important; }
        .analytics-card .card-icon { font-size: 0.95rem !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-icon { font-size: 0.85rem !important; }
        .analytics-card .card-body { padding: 0.75rem !important; }
    }
</style>

{{-- Row ya Cards Iliyorekebishwa Ili Kufanana na Muundo wa Kadi za Juu --}}
<div class="row g-3 mb-4">
    
    @php
        // Rangi na Icons zilizoainishwa kufuata muundo wa kadi za juu
        $cards_data = [
            [
                'title' => 'Total Enquiries',
                'key' => 'total',
                'icon' => 'fas fa-clipboard-list',
                'gradient' => 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', // Blue
                'number_color' => '#1e293b',
                'show_progress' => false,
                'sub_text' => '<i class="fas fa-file-alt me-1"></i> All Applications',
            ],
            [
                'title' => 'Pending Review',
                'key' => 'pending',
                'icon' => 'fas fa-clock',
                'gradient' => 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)', // Amber/Orange
                'number_color' => '#1e293b',
                'show_progress' => true,
                'badge_text' => 'ACTION',
            ],
            [
                'title' => 'Assigned',
                'key' => 'assigned',
                'icon' => 'fas fa-user-check',
                'gradient' => 'linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)', // Cyan/Teal
                'number_color' => '#1e293b',
                'show_progress' => true,
                'badge_text' => 'IN PROGRESS',
            ],
            [
                'title' => 'Approved',
                'key' => 'approved',
                'icon' => 'fas fa-check-circle',
                'gradient' => 'linear-gradient(135deg, #10b981 0%, #059669 100%)', // Green
                'number_color' => '#1e293b',
                'show_progress' => true,
                'badge_text' => 'COMPLETED',
            ],
            [
                'title' => 'Rejected',
                'key' => 'rejected',
                'icon' => 'fas fa-times-circle',
                'gradient' => 'linear-gradient(135deg, #dc3545 0%, #c41e30 100%)', // Red
                'number_color' => '#1e293b',
                'show_progress' => true,
                'badge_text' => 'BLOCKED',
            ],
            [
                'title' => 'Completed',
                'key' => 'completed',
                'icon' => 'fas fa-tasks',
                'gradient' => 'linear-gradient(135deg, #28a745 0%, #1a7a33 100%)', // Darker Green
                'number_color' => '#1e293b',
                'show_progress' => true,
                'badge_text' => 'DONE',
            ],
        ];
    @endphp

    @foreach ($cards_data as $card)
        @php
            $value = $analytics[$card['key']] ?? 0;
            $percentage = $analytics['total'] > 0 ? round(($value / $analytics['total']) * 100, 1) : 0;
            $col_class = 'col-6 col-md-4 col-lg-3 col-xl'; // Inafanana na muundo wa kadi za juu
            
            // Extract colors for progress bar and badge
            // Nimechukua rangi ya mwisho ya gradient kwa ajili ya progress bar na badge background
            preg_match('/#([a-fA-F0-9]{6})/', $card['gradient'], $matches);
            $main_color = $matches[0] ?? '#3b82f6';
            
            // Rangi hafifu ya badge (inaweza kuhitaji Utility Class au Rangi nyingine)
            $light_badge_bg = $card['key'] === 'pending' ? '#fef3c7' : 
                              ($card['key'] === 'assigned' ? '#ebf8ff' : 
                              ($card['key'] === 'approved' ? '#d1fae5' : 
                              ($card['key'] === 'rejected' ? '#fee2e2' : 
                              ($card['key'] === 'completed' ? '#d1fae5' : '#e0f2fe')))); // Default blue for 'total'
            
            // Rangi ya maandishi ya badge
            $badge_text_color = $card['key'] === 'pending' ? '#92400e' : 
                                ($card['key'] === 'assigned' ? '#075985' : 
                                ($card['key'] === 'approved' ? '#065f46' : 
                                ($card['key'] === 'rejected' ? '#991b1b' : 
                                ($card['key'] === 'completed' ? '#065f46' : '#075985'))));
        @endphp

        <div class="{{ $col_class }}">
            <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">
                        {{-- Left: Title & Number --}}
                        <div class="flex-grow-1">
                            <p class="text-muted mb-1 small fw-medium">{{ $card['title'] }}</p>
                            <h3 class="fw-bold mb-0 card-number" style="color: {{ $card['number_color'] }}; font-size: 1.75rem;">{{ number_format($value) }}</h3>
                            
                            {{-- Kuonyesha asilimia kwa kadi ambazo sio 'Total' --}}
                            @if($card['key'] !== 'total')
                                <p class="mb-0 text-muted" style="font-size: 0.75rem;">{{ $percentage }}% of total</p>
                            @endif
                        </div>
                        
                        {{-- Right: Icon ya Gradient --}}
                        <div class="d-flex align-items-center justify-content-center card-icon-box" style="width: 40px; height: 40px; background: {{ $card['gradient'] }}; border-radius: 10px;">
                            <i class="{{ $card['icon'] }} text-white card-icon" style="font-size: 1.1rem;"></i>
                        </div>
                    </div>

                    @if ($card['show_progress'])
                        {{-- Progress Bar na Badge (kama ilivyo kwenye kadi ya 'Pending Review') --}}
                        <div class="d-flex align-items-center gap-2 mt-2">
                            <div class="progress flex-grow-1" style="height: 4px; background: #f1f5f9; border-radius: 4px;">
                                <div class="progress-bar" role="progressbar" style="background: {{ $main_color }}; width: {{ $percentage }}%; border-radius: 4px;"></div>
                            </div>
                            <span class="badge d-none d-sm-inline" style="background: {{ $light_badge_bg }}; color: {{ $badge_text_color }}; font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 600;">{{ $card['badge_text'] }}</span>
                        </div>
                    @else
                        {{-- Sub Text kwa kadi ya 'Total Enquiries' --}}
                         <p class="mb-0 text-muted mt-3" style="font-size: 0.75rem;">{!! $card['sub_text'] ?? '&nbsp;' !!}</p>
                    @endif
                    
                </div>
            </div>
        </div>
    @endforeach
</div>


<!--
        <div class="{{ $col_class }}">
<div class="card border-0 shadow-lg h-100" style="background: linear-gradient(135deg, #dc3545 0%, #ff6b77 100%); overflow: hidden;">                <div class="card-body text-white p-3 position-relative">
                    <i class="fas fa-exclamation-triangle fa-3x position-absolute top-0 end-0 me-3 mt-3 opacity-25"></i>
                    <div class="d-flex flex-column">
                        <p class="mb-1 opacity-75 small fw-semibold text-uppercase">Overdue</p>
                        <h4 class="fw-bold mb-0 display-6 text-white">{{ number_format($analytics['pending_overdue']) }}</h4>
                        <p class="mb-0 small opacity-75 mt-1 text-white">Needs urgent attention</p>
                    </div>

                    <hr class="my-3 border-light opacity-50">

                    <div class="d-flex justify-content-between align-items-center">
                        <small class="opacity-75">
                            <i class="fas fa-exclamation-circle me-1"></i> {{ $analytics['total'] > 0 ? round(($analytics['pending_overdue'] / $analytics['total']) * 100, 1) : 0 }}% Overdue
                        </small>
                        <div class="progress flex-grow-1 ms-3" style="height: 5px; background: rgba(255,255,255,0.2);">
                            <div class="progress-bar bg-light" role="progressbar" style="width: {{ $analytics['total'] > 0 ? ($analytics['pending_overdue'] / $analytics['total']) * 100 : 0 }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
-->
    <!-- Filtered Analytics (Show when filters applied) -->
    @if(request()->hasAny(['region_id', 'district_id', 'type', 'status', 'date_from', 'date_to', 'search']))
    <div class="alert alert-info border-0 shadow-sm mb-4">
        <h5 class="alert-heading mb-3"><i class="fas fa-filter me-2"></i>Filtered Results</h5>
        <div class="row g-3">
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-primary text-white rounded-circle" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-list"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h4 class="mb-0 fw-bold">{{ number_format($filteredAnalytics['total']) }}</h4>
                        <small class="text-muted">Total Filtered</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-warning text-white rounded-circle" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-clock"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h4 class="mb-0 fw-bold">{{ number_format($filteredAnalytics['pending']) }}</h4>
                        <small class="text-muted">Pending</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-info text-white rounded-circle" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-user-check"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h4 class="mb-0 fw-bold">{{ number_format($filteredAnalytics['assigned']) }}</h4>
                        <small class="text-muted">Assigned</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="d-flex align-items-center">
                    <div class="flex-shrink-0">
                        <div class="bg-dark text-white rounded-circle" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-check-circle"></i>
                        </div>
                    </div>
                    <div class="flex-grow-1 ms-3">
                        <h4 class="mb-0 fw-bold">{{ number_format($filteredAnalytics['approved']) }}</h4>
                        <small class="text-muted">Approved</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

   {{-- CSS ya Modern Actions Bar --}}
<style>
    .actions-bar-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    
    .actions-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
    }
    
    .actions-icon {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #4587D1 0%, #3a73b8 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
    }
    
    .filter-active-badge {
        background: #10b981;
        color: white;
        padding: 0.25rem 0.65rem;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
    
    .action-btn-filter {
        background: #4587D1;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 7px;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .action-btn-filter:hover {
        background: #3a73b8;
        color: white;
        transform: translateY(-1px);
    }
    
    .action-btn-reports {
        background: #10b981;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 7px;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .action-btn-reports:hover {
        background: #059669;
        color: white;
    }
    
    .action-btn-reset {
        background: white;
        color: #64748b;
        border: 1px solid #e2e8f0;
        padding: 0.5rem 1rem;
        border-radius: 7px;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .action-btn-reset:hover {
        background: #f8fafc;
        color: #475569;
        border-color: #cbd5e1;
    }
    
    .reports-dropdown-menu {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0;
        margin-top: 0.5rem;
    }
    
    .reports-dropdown-item {
        padding: 0.6rem 1rem;
        font-size: 0.875rem;
        color: #334155;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .reports-dropdown-item:hover {
        background: #f8fafc;
        color: #4587D1;
    }
    
    .reports-dropdown-item i {
        width: 18px;
        text-align: center;
    }
    
    @media (max-width: 768px) {
        .actions-title {
            font-size: 0.9rem;
        }
        
        .actions-icon {
            width: 32px;
            height: 32px;
            font-size: 0.9rem;
        }
        
        .filter-active-badge {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
        }
        
        .action-btn-filter,
        .action-btn-reports,
        .action-btn-reset {
            padding: 0.45rem 0.85rem;
            font-size: 0.8rem;
        }
    }
    
    @media (max-width: 576px) {
        .actions-bar-card .card-body {
            padding: 0.75rem !important;
        }
        
        .action-btn-filter,
        .action-btn-reports,
        .action-btn-reset {
            flex: 1;
            justify-content: center;
        }
        
        .mobile-full {
            width: 100%;
        }
    }
</style>

{{-- Manager Actions Bar --}}
<div class="card actions-bar-card mb-4">
    <div class="card-body p-3">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3">
            
            {{-- Left: Title & Badge --}}
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <div class="actions-icon">
                    <i class="fas fa-tools"></i>
                </div>
                <span class="actions-title">Quick Actions</span>
                @if(request()->hasAny(['region_id', 'district_id', 'type', 'status', 'date_from', 'date_to', 'search']))
                    <span class="filter-active-badge">
                        <i class="fas fa-filter"></i>
                        <span>Filters Active</span>
                    </span>
                @endif
            </div>
            
            {{-- Right: Action Buttons --}}
            <div class="d-flex gap-2 flex-wrap mobile-full">
                
                {{-- Filter Button --}}
                <button type="button" class="action-btn-filter" data-bs-toggle="modal" data-bs-target="#filterModal">
                    <i class="fas fa-sliders-h"></i>
                    <span class="d-none d-md-inline">Filter</span>
                </button>
                
                {{-- Reports Dropdown --}}
                <div class="dropdown">
                    <button class="action-btn-reports dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-file-export"></i>
                        <span>Reports</span>
                    </button>
                    <ul class="dropdown-menu reports-dropdown-menu">
                        <li>
                            <button type="button" class="dropdown-item reports-dropdown-item" onclick="window.location.href='{{ route('branches.manager.dashboard', ['export' => 'excel_general']) }}'">
                                <i class="fas fa-file-excel"></i>
                                <span>General Report</span>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item reports-dropdown-item" onclick="exportCustomExcel()">
                                <i class="fas fa-file-excel"></i>
                                <span>Custom Report (Excel)</span>
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item reports-dropdown-item" onclick="exportCustomPDF()">
                                <i class="fas fa-file-pdf"></i>
                                <span>Summary Report</span>
                            </button>
                        </li>
                    </ul>
                </div>
                
                {{-- Reset Button --}}
                @if(request()->hasAny(['region_id', 'district_id', 'type', 'status', 'date_from', 'date_to', 'search']))
                    <a href="{{ route('branches.manager.dashboard') }}" class="action-btn-reset">
                        <i class="fas fa-refresh"></i>
                        <span class="d-none d-md-inline">Reset</span>
                    </a>
                @endif
                
            </div>
            
        </div>
    </div>
</div>

    <!-- Regional, District & Child Table Analytics Buttons -->
<!-- Regional, District & Child Table Analytics Buttons -->
{{-- CSS ya Compact Analytics Cards --}}
<style>
    .analytics-mini-card {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        transition: all 0.2s ease;
        overflow: hidden;
    }
    
    .analytics-mini-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .mini-icon-box {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1rem;
        flex-shrink: 0;
    }
    
    .mini-icon-blue {
        background: linear-gradient(135deg, #4587D1 0%, #3a73b8 100%);
    }
    
    .mini-icon-purple {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    }
    
    .mini-icon-cyan {
        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    }
    
    .mini-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }
    
    .mini-count-badge {
        background: #f1f5f9;
        color: #64748b;
        padding: 0.2rem 0.6rem;
        border-radius: 5px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    
    .mini-view-btn {
        background: #4587D1;
        color: white;
        border: none;
        padding: 0.4rem 0.9rem;
        border-radius: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
    
    .mini-view-btn:hover {
        background: #3a73b8;
        color: white;
        transform: scale(1.05);
    }
    
    .mini-view-btn-purple {
        background: #8b5cf6;
    }
    
    .mini-view-btn-purple:hover {
        background: #7c3aed;
        color: white;
    }
    
    .mini-view-btn-cyan {
        background: #06b6d4;
    }
    
    .mini-view-btn-cyan:hover {
        background: #0891b2;
        color: white;
    }
    
    @media (max-width: 768px) {
        .mini-icon-box {
            width: 36px;
            height: 36px;
            font-size: 0.9rem;
        }
        
        .mini-title {
            font-size: 0.9rem;
        }
        
        .mini-count-badge {
            font-size: 0.7rem;
        }
        
        .mini-view-btn {
            padding: 0.35rem 0.75rem;
            font-size: 0.75rem;
        }
    }
</style>

{{-- Compact Analytics Cards --}}
<div class="row g-3 mb-4">
    
    {{-- Regions Card --}}
    @if($analyticsByRegion->count() > 0)
    <div class="col-md-4">
        <div class="card analytics-mini-card h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="mini-icon-box mini-icon-blue">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <span class="mini-count-badge">{{ $analyticsByRegion->count() }} Total</span>
                </div>
                <h6 class="mini-title mb-2">Regions</h6>
                <button type="button" class="mini-view-btn w-100" 
                        data-bs-toggle="modal" data-bs-target="#regionalAnalyticsModal">
                    <i class="fas fa-eye"></i>
                    <span>View Details</span>
                </button>
            </div>
        </div>
    </div>
    @endif
    
    {{-- Districts Card --}}
    @if($analyticsByDistrict->count() > 0)
    <div class="col-md-4">
        <div class="card analytics-mini-card h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="mini-icon-box mini-icon-purple">
                        <i class="fas fa-city"></i>
                    </div>
                    <span class="mini-count-badge">{{ $analyticsByDistrict->count() }} Total</span>
                </div>
                <h6 class="mini-title mb-2">Districts</h6>
                <button type="button" class="mini-view-btn mini-view-btn-purple w-100" 
                        data-bs-toggle="modal" data-bs-target="#districtAnalyticsModal">
                    <i class="fas fa-eye"></i>
                    <span>View Details</span>
                </button>
            </div>
        </div>
    </div>
    @endif
    
    {{-- Categories Card --}}
    <div class="col-md-4">
        <div class="card analytics-mini-card h-100">
            <div class="card-body p-3">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <div class="mini-icon-box mini-icon-cyan">
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <span class="mini-count-badge">All Types</span>
                </div>
                <h6 class="mini-title mb-2">Categories</h6>
                <button type="button" class="mini-view-btn mini-view-btn-cyan w-100" 
                        data-bs-toggle="modal" data-bs-target="#childTableStatsModal">
                    <i class="fas fa-eye"></i>
                    <span>View Details</span>
                </button>
            </div>
        </div>
    </div>
    
</div>

<style>
    .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    }
    
    .card button:hover {
        transform: scale(1.05);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important;
    }
</style>

<style>
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    }
    
    .card button:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
</style>

    <!-- Modern Enquiries Table -->
     
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0 modern-enquiry-table">
                    <thead>
                        <tr>
                            <th width="60" class="text-center border-0">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-hashtag me-1"></i>
                                    <span class="fw-bold">SN</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-calendar me-2"></i>
                                    <span class="fw-bold">Date</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-receipt me-2"></i>
                                    <span class="fw-bold">CheckNo</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user me-2"></i>
                                    <span class="fw-bold">Member</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-file-alt me-2"></i>
                                    <span class="fw-bold">Type</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-map-marked-alt me-2"></i>
                                    <span class="fw-bold">Region</span>
                                </div>
                            </th>
                  
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-user-tie me-2"></i>
                                    <span class="fw-bold">Registered By</span>
                                </div>
                            </th>
                            <th class="border-0">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <span class="fw-bold">Status</span>
                                </div>
                            </th>
                            <th width="120" class="text-center border-0">
                                <div class="d-flex align-items-center justify-content-center">
                                    <i class="fas fa-tools me-2"></i>
                                    <span class="fw-bold">Actions</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($enquiries as $enquiry)
                        <tr>
                            <td class="text-center align-middle">
                                <div class="badge badge-counter" style="background: gray; color: white; font-weight: bold; padding: 0.5rem 0.75rem; border-radius: 8px;">
                                    {{ $loop->iteration + (($enquiries->currentPage() - 1) * $enquiries->perPage()) }} 
                                </div>
                            </td>
                            <td class="align-middle">
                                <div class="d-flex flex-column">
                                    <span class="fw-semibold text-primary">{{ $enquiry->created_at->format('d/m/Y') }}</span>
                                    <small class="text-muted">{{ $enquiry->created_at->format('H:i') }} HRS</small>
                                </div>
                            </td>
                            <td class="align-middle">
                                <span class="badge bg-secondary text-white" style="">
                                    {{ $enquiry->check_number }}
                                </span>
                            </td>
                            <td class="align-middle">
                                <div class="d-flex flex-column">
                                    <strong class="text-muted text-uppercase text-primary">{{ ucwords($enquiry->full_name) }}</strong>
                                    <small class="text-muted text-primary">
                                        <i class="fas fa-id-badge me-1"></i>{{ $enquiry->phone }}
                                    </small>
                                </div>
                            </td>
                            <td class="align-middle">
                                <strong class="text-muted text-uppercase text-primary">
                                    {{ ucfirst(str_replace('_', ' ', $enquiry->type)) }}
                                </strong>
                            </td>
                    
                               <td class="align-middle">
                                <div class="d-flex flex-column">
                                    <strong class="text-muted text-uppercase text-primary">{{ $enquiry->region->name ?? 'N/A' }}</strong>
                                    <small class="text-muted">
                                        <i class="fas fa-id-badge me-1 text-primary"></i>{{ $enquiry->district->name ?? 'N/A' }}
                                    </small>
                                </div>
                            </td> 

                          
                            <td class="align-middle">
                                @if($enquiry->registeredBy)
                                    <a href="{{ route('users.show', $enquiry->registeredBy->id) }}" class="text-decoration-none d-flex align-items-center" style="color: #17479E; font-weight: 600; transition: all 0.2s;">
                                        <i class="fas fa-user-circle me-2" style="font-size: 1.2rem;"></i>
                                        <span class="text-muted text-uppercase text-primary">{{ $enquiry->registeredBy->name }}</span>
                                    </a>
                                @else
                                    <span class="text-muted">
                                        <i class="fas fa-user-slash me-1"></i>N/A
                                    </span>
                                @endif
                            </td>
                            <td class="align-middle">
                                @php
                                    $statusConfig = [
                                        'pending' => ['class' => 'bg-warning', 'icon' => 'fa-clock', 'text' => 'text-dark'],
                                        'assigned' => ['class' => 'bg-info', 'icon' => 'fa-user-check', 'text' => 'text-white'],
                                        'approved' => ['class' => 'bg-success', 'icon' => 'fa-check-circle', 'text' => 'text-white'],
                                        'rejected' => ['class' => 'bg-danger', 'icon' => 'fa-times-circle', 'text' => 'text-white'],
                                    ];
                                    $config = $statusConfig[$enquiry->status] ?? ['class' => 'bg-secondary', 'icon' => 'fa-question', 'text' => 'text-white'];
                                @endphp
                                <span class="badge {{ $config['class'] }} {{ $config['text'] }}" style="padding: 0.5rem 0.75rem; font-size: 0.8rem; border-radius: 8px; font-weight: 700; letter-spacing: 0.5px;">
                                    <i class="fas {{ $config['icon'] }} me-1"></i>{{ strtoupper($enquiry->status) }}
                                </span>
                            </td>
                            <td class="text-center align-middle">
                                <a href="{{ route('enquiries.show', $enquiry->id) }}" class="btn btn-sm btn-outline-primary" style="border-radius: 8px; font-weight: 600; transition: all 0.2s; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; padding: 0.5rem 1rem;">
                                    <i class="fas fa-eye me-1"></i>View
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10" class="text-center py-5">
                                <div class="d-flex flex-column align-items-center justify-content-center" style="padding: 3rem 0;">
                                    <i class="fas fa-inbox fa-4x text-muted mb-3" style="opacity: 0.3;"></i>
                                    <h5 class="text-muted fw-bold mb-2">No Enquiries Found</h5>
                                    <p class="text-muted">Try adjusting your filters or search criteria</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($enquiries->hasPages())
        <div class="card-footer bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <div class="text-muted">
                    Showing {{ $enquiries->firstItem() }} to {{ $enquiries->lastItem() }} of {{ number_format($enquiries->total()) }} results
                </div>
                <div>
                    {{ $enquiries->appends(request()->query())->links('pagination::bootstrap-4') }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

{{-- CSS ya Modern Filter Modal --}}
<style>
    .filter-modal .modal-content {
        border: none;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }
    
    .filter-modal .modal-header {
        background: #4587D1;
        border: none;
        padding: 1.25rem 1.5rem;
        border-radius: 12px 12px 0 0;
    }
    
    .filter-modal .modal-title {
        font-size: 1.15rem;
        font-weight: 700;
        color: white;
    }
    
    .filter-modal .modal-body {
        padding: 1.75rem 1.5rem;
        background: #ffffff;
    }
    
    .filter-modal .form-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.5rem;
    }
    
    .filter-modal .form-control,
    .filter-modal .form-select {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.65rem 0.9rem;
        font-size: 0.9rem;
        transition: all 0.2s ease;
    }
    
    .filter-modal .form-control:focus,
    .filter-modal .form-select:focus {
        border-color: #4587D1;
        box-shadow: 0 0 0 3px rgba(69, 135, 209, 0.1);
    }
    
    .filter-modal .modal-footer {
        background: #f8fafc;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 0 0 12px 12px;
        gap: 0.75rem;
    }
    
    .filter-modal .btn-cancel {
        background: white;
        color: #64748b;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.6rem 1.25rem;
        font-weight: 600;
        font-size: 0.9rem;
        transition: all 0.2s ease;
    }
    
    .filter-modal .btn-cancel:hover {
        background: #f8fafc;
        color: #475569;
        border-color: #cbd5e1;
    }
    
    .filter-modal .btn-apply {
        background: #4587D1;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.6rem 1.5rem;
        font-weight: 600;
        font-size: 0.9rem;
        box-shadow: 0 2px 8px rgba(69, 135, 209, 0.3);
        transition: all 0.2s ease;
    }
    
    .filter-modal .btn-apply:hover {
        background: #3a73b8;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(69, 135, 209, 0.4);
    }
    
    .filter-section-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e2e8f0;
    }
    
    @media (max-width: 768px) {
        .filter-modal .modal-body {
            padding: 1.25rem 1rem;
        }
        
        .filter-modal .form-control,
        .filter-modal .form-select {
            font-size: 0.85rem;
        }
        
        .filter-modal .btn-cancel,
        .filter-modal .btn-apply {
            flex: 1;
        }
    }
</style>

{{-- Filter Modal --}}
<div class="modal fade filter-modal" id="filterModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            
            {{-- Header --}}
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-filter me-2"></i>Advanced Filters
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            
            {{-- Body --}}
            <form method="GET" action="{{ route('branches.manager.dashboard') }}">
                <div class="modal-body">
                    
                    {{-- Location Filters --}}
                    <h6 class="filter-section-title">Location</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Region</label>
                            <select class="form-select text-uppercase" name="region_id" id="regionSelect">
                                <option value="">All Regions</option>
                                @foreach($regionsInBranch as $region)
                                    <option value="{{ $region->id }}" {{ request('region_id') == $region->id ? 'selected' : '' }}>
                                        {{ $region->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">District</label>
                            <select class="form-select text-uppercase" name="district_id" id="districtSelect">
                                <option value="">All Districts</option>
                                @foreach($districtsInBranch as $district)
                                    <option value="{{ $district->id }}" {{ request('district_id') == $district->id ? 'selected' : '' }}>
                                        {{ $district->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- Enquiry Details --}}
                    <h6 class="filter-section-title">Enquiry Details</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Enquiry Type</label>
                            <select class="form-select" name="type">
                                <option value="">ALL ENQUIRY TYPES</option>
                                <option value="loan_application" {{ request('type') === 'loan_application' ? 'selected' : '' }}>LOAN APPLICATION (KUOMBA MKOPO)</option>
                                <option value="refund" {{ request('type') === 'refund' ? 'selected' : '' }}>REFUND (KUREJESHEWA FEDHA)</option>
                                <option value="share_enquiry" {{ request('type') === 'share_enquiry' ? 'selected' : '' }}>SHARE ENQUIRY (KUNUNUA HISA)</option>
                                <option value="retirement" {{ request('type') === 'retirement' ? 'selected' : '' }}>RETIREMENT (KUSTAAFU KAZI)</option>
                                <option value="deduction_add" {{ request('type') === 'deduction_add' ? 'selected' : '' }}>ADD DEDUCTION OF SAVINGS (KUONGEZA/KUPUNGUZA AKIBA)</option>
                                <option value="withdraw_savings" {{ request('type') === 'withdraw_savings' ? 'selected' : '' }}>WITHDRAW SAVINGS (KUOMBA SEHEMU YA AKIBA)</option>
                                <option value="withdraw_deposit" {{ request('type') === 'withdraw_deposit' ? 'selected' : '' }}>WITHDRAW DEPOSIT (KUTOA AMANA)</option>
                                <option value="unjoin_membership" {{ request('type') === 'unjoin_membership' ? 'selected' : '' }}>UNJOIN MEMBERSHIP (KUJITOA UANACHAMA)</option>
                                <option value="ura_mobile" {{ request('type') === 'ura_mobile' ? 'selected' : '' }}>URA MOBILE (URA MOBILE)</option>
                                <option value="sick_for_30_days" {{ request('type') === 'sick_for_30_days' ? 'selected' : '' }}>SICK LEAVE 30+ DAYS (UGONJWA SIKU 30)</option>
                                <option value="condolences" {{ request('type') === 'condolences' ? 'selected' : '' }}>CONDOLENCES (RAMBIRAMBI)</option>
                                <option value="injured_at_work" {{ request('type') === 'injured_at_work' ? 'selected' : '' }}>WORK INJURY (KUUMIA KAZINI)</option>
                                <option value="benefit_from_disasters" {{ request('type') === 'benefit_from_disasters' ? 'selected' : '' }}>RESIDENTIAL DISASTER (MAJANGA YA ASILI)</option>
                                <option value="join_membership" {{ request('type') === 'join_membership' ? 'selected' : '' }}>JOIN MEMBERSHIP (KUJIUNGA UANACHAMA)</option>
                            </select>
                        </div>

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

                    {{-- Date Range --}}
                    <h6 class="filter-section-title">Date Range</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label">From Date</label>
                            <input type="date" class="form-control" name="date_from" value="{{ request('date_from') }}">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">To Date</label>
                            <input type="date" class="form-control" name="date_to" value="{{ request('date_to') }}">
                        </div>
                    </div>

                    {{-- Search --}}
                    <h6 class="filter-section-title">Search</h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Search Keywords</label>
                            <input type="text" class="form-control" name="search" value="{{ request('search') }}" placeholder="Search by name, check number, force number, phone...">
                        </div>
                    </div>
                    
                </div>
                
                {{-- Footer --}}
                <div class="modal-footer">
                    <button type="button" class="btn btn-cancel" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-apply">
                        <i class="fas fa-search me-1"></i>Apply Filters
                    </button>
                </div>
            </form>
            
        </div>
    </div>
</div>

<div class="modal fade" id="regionalAnalyticsModal" tabindex="-1" aria-labelledby="regionalAnalyticsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-3">
            
            {{-- Header: Tumia gradient class na icon inayoelezea zaidi --}}
            <div class="modal-header text-white bg-gradient-primary">
                <h5 class="modal-title fw-bold text-white" id="regionalAnalyticsModalLabel">
                    <i class="fas fa-chart-line me-2"></i>REGIONAL ANALYTICS
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Funga dirisha"></button>
            </div>
            
            <div class="modal-body p-4">
                <div class="table-responsive">
                    {{-- Hapa ndio tumebadilisha: table-hover, table-striped, na table-bordered --}}
                    <table class="table table-hover table-striped table-bordered align-middle mb-0" id="regionalTable">
                        <thead class="table-primary"> {{-- Kichwa cha jedwali kimetumika rangi nyeusi kwa utofauti zaidi --}}
                            <tr>
                                <th>SN</th>
                                <th>REGION</th>
                                <th class="text-center">TOTAL</th>
                                <th class="text-center">PENDING</th>
                                <th class="text-center">ASSIGNED</th>
                                <th class="text-center">APPROVED</th>
                                <th class="text-center">REJECTED</th>
                                <th class="text-center">ACTIONS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($analyticsByRegion as $regionId => $statuses)
                                @php
                                    // LOGIC YAKO YA ASILI IMEBAKI HAPA
                                    $region = $regionsInBranch->firstWhere('id', $regionId);
                                    $total = $statuses->sum('count');
                                    $pending = $statuses->where('status', 'pending')->sum('count');
                                    $assigned = $statuses->where('status', 'assigned')->sum('count');
                                    $approved = $statuses->where('status', 'approved')->sum('count');
                                    $rejected = $statuses->where('status', 'rejected')->sum('count');
                                @endphp
                                
                                @if($region)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="fw-bold text-nowrap text-uppercase">{{ $region->name }}</td>
                                        {{-- Tumia rounded-pill kwa muonekano wa kisasa --}}
                                        <td class="text-center"><span class="badge rounded-pill bg-primary">{{ $total }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-warning text-dark">{{ $pending }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-info text-white">{{ $assigned }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-success">{{ $approved }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-danger">{{ $rejected }}</span></td>
                                        <td class="text-center">
                                            <a href="{{ route('branches.manager.region.analytics', $region->id) }}" class="btn btn-sm btn-outline-secondary" title="Angalia Maelezo">
                                                <i class="fas fa-external-link-alt"></i> Tazama
                                            </a>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                            
                            {{-- Ongeza row ikiwa hakuna data --}}
                            @if(count($analyticsByRegion) == 0)
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">Hakuna data ya uchambuzi wa mikoa iliyopatikana.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* CSS Fupi kwa ajili ya gradient (inapendekezwa kuiweka kwenye faili lako la CSS) */
.bg-gradient-primary {
    background: linear-gradient(135deg, #17479E 0%, #4facfe 100%) !important;
}
</style>

<div class="modal fade" id="districtAnalyticsModal" tabindex="-1" aria-labelledby="districtAnalyticsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-3">
            
            {{-- Modal Header: Use a custom utility class for the gradient and improve the title --}}
            <div class="modal-header text-white bg-primary">
                <h5 class="modal-title fw-bold" id="districtAnalyticsModalLabel">
                    <i class="fas fa-chart-area me-2 text-white"></i>DISTRICTS ANALYTICS
                </h5>
                {{-- Ensure the close button is accessible and visible --}}
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-4">

                <div class="table-responsive">
                    {{-- Added table-striped, table-bordered, and align-middle for clarity and structure --}}
                    <table class="table table-hover table-striped table-bordered align-middle mb-0" id="districtTable">
                        <thead class="table-primary "> {{-- Using table-dark for high contrast header --}}
                            <tr>
                                <th>#</th>
                                <th>NAME</th>
                                <th class="text-center">TOTAL</th>
                                <th class="text-center">PENDING</th>
                                <th class="text-center">ASSIGNED</th>
                                <th class="text-center">APPROVED</th>
                                <th class="text-center">REJECTED</th>
                                <th class="text-center">DETAILS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($analyticsByDistrict as $districtId => $statuses)
                                @php
                                    // Your existing data logic remains here
                                    $district = $districtsInBranch->firstWhere('id', $districtId);
                                    $total = $statuses->sum('count');
                                    $pending = $statuses->where('status', 'pending')->sum('count');
                                    $assigned = $statuses->where('status', 'assigned')->sum('count');
                                    $approved = $statuses->where('status', 'approved')->sum('count');
                                    $rejected = $statuses->where('status', 'rejected')->sum('count');
                                @endphp
                                
                                @if($district)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="fw-bold text-nowrap text-uppercase">{{ $district->name }}</td>
                                        {{-- Updated badges to rounded-pill for modern look --}}
                                        <td class="text-center"><span class="badge rounded-pill bg-primary">{{ $total }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-warning text-dark">{{ $pending }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-info text-white">{{ $assigned }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-success">{{ $approved }}</span></td>
                                        <td class="text-center"><span class="badge rounded-pill bg-danger">{{ $rejected }}</span></td>
                                        <td class="text-center">
                                            {{-- Simplified action button for cleaner cell presentation --}}
                                            <a href="{{ route('branches.manager.district.analytics', $district->id) }}" class="btn btn-sm btn-outline-secondary" title="View detailed analytics for {{ $district->name }}">
                                                <i class="fas fa-external-link-alt"></i> View
                                            </a>
                                        </td>
                                    </tr>
                                @endif
                            @endforeach
                            
                            {{-- Fallback message for empty data --}}
                            @if(count($analyticsByDistrict) == 0)
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">No district analytics data available.</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom CSS for the modal header gradient (Recommended to move this to your main CSS file) */
.bg-gradient-secondary {
    background: linear-gradient(135deg, #0d6efd 0%, #3dd5f3 100%) !important;
}
</style>
</div>

<div class="modal fade" id="childTableStatsModal" tabindex="-1" aria-labelledby="childTableStatsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content border-0 shadow-lg rounded-3">
            
            {{-- Modal Header: Use a custom utility class for the gradient --}}
            <div class="modal-header text-white bg-primary">
                <h5 class="modal-title fw-bold text-white" id="childTableStatsModalLabel">
                    ENQUIRY SUMMARY
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            
            <div class="modal-body p-4">

                <div class="table-responsive">
                    {{-- Table with table-hover, table-striped, table-bordered, and align-middle --}}
                    <table class="table table-hover table-striped table-bordered align-middle mb-0" id="childTableStatsTable">
                        <thead class="table-primary">
                            <tr>
                                <th style="width: 30%;">ENQUIRY</th>
                                <th class="text-center">RECORDS</th>
                                <th class="text-end">REQUESTED AMOUNT (GRAND)</th>
                      
                            </tr>
                        </thead>
                        <tbody>
                            
                            {{-- Loan Applications --}}
                            <tr>
                                <td><i class="fas fa-money-bill-wave me-2 text-primary"></i><strong>LOAN APPLICATIONS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['loan_applications']['total'] ?? 0) }}</td>
                                <td class="text-end fw-bold text-primary">TZS {{ number_format($childTableStats['loan_applications']['total_amount'] ?? 0) }}</td>
                                 
                            </tr>
                            
                            {{-- Payments --}}
                            <tr>
                                <td><i class="fas fa-money-check me-2 text-success"></i><strong>PAYMENTS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['payments']['total'] ?? 0) }}</td>
                                <td class="text-end fw-bold text-success">TZS {{ number_format($childTableStats['payments']['total_amount'] ?? 0) }}</td>
                            
                            </tr>
                            
                            {{-- Refunds --}}
                            <tr>
                                <td><i class="fas fa-undo me-2 text-warning"></i><strong>REFUNDS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['refunds']['total'] ?? 0) }}</td>
                                <td class="text-end fw-bold text-warning">TZS {{ number_format($childTableStats['refunds']['total_amount'] ?? 0) }}</td>
                                
                            </tr>
                            
                            {{-- Withdrawals --}}
                            <tr>
                                <td><i class="fas fa-hand-holding-usd me-2 text-danger"></i><strong>WITHDRAWALS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['withdrawals']['total'] ?? 0) }}</td>
                                <td class="text-end fw-bold text-danger">TZS {{ number_format($childTableStats['withdrawals']['total_amount'] ?? 0) }}</td>
                               
                            </tr>
                            
                            {{-- Shares --}}
                            <tr>
                                <td><i class="fas fa-chart-line me-2 text-info"></i><strong>SHARES</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['shares']['total'] ?? 0) }}</td>
                                <td class="text-end fw-bold text-info">TZS {{ number_format($childTableStats['shares']['total_amount'] ?? 0) }}</td>
                              
                            </tr>
                            
                            {{-- Membership Changes --}}
                            <tr>
                                <td><i class="fas fa-users me-2 text-primary"></i><strong>MEMBERSHIP CHANGES</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['membership_changes']['total'] ?? 0) }}</td>
                                <td class="text-end">
                                    <div class="d-flex justify-content-end align-items-center">
                                        <small class="text-success me-3"><i class="fas fa-plus-circle"></i> Joins: {{ $childTableStats['membership_changes']['joins'] ?? 0 }}</small>
                                        <small class="text-danger"><i class="fas fa-minus-circle"></i> Unjoins: {{ $childTableStats['membership_changes']['unjoins'] ?? 0 }}</small>
                                    </div>
                                </td>
                          
                            </tr>
                            
                            {{-- Retirements (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-user-clock me-2 text-secondary"></i><strong>RETIREMENTS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['retirements']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                              
                            </tr>
                            
                            {{-- Condolences (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-heart me-2 text-dark"></i><strong>CONDOLENCES</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['condolences']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                                
                            </tr>
                            
                            {{-- Injuries (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-ambulance me-2 text-danger"></i><strong>INJURIES</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['injuries']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                               
                            </tr>
                            
                            {{-- Sick Leaves (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-bed me-2 text-warning"></i><strong>SICK LEAVES</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['sick_leaves']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                              
                            </tr>
                            
                            {{-- Benefits (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-gift me-2 text-success"></i><strong>BENEFITS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['benefits']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                              
                            </tr>

                            {{-- Deductions (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-minus-circle me-2 text-info"></i><strong>DEDUCTIONS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['deductions']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                                
                            </tr>

                            {{-- URA Mobile (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-mobile-alt me-2 text-primary"></i><strong>URA MOBILE</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['ura_mobile']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                                
                            </tr>
                            
                            {{-- Residential Disasters (No Amount) --}}
                            <tr>
                                <td><i class="fas fa-home me-2 text-danger"></i><strong>RESIDENTIAL DISASTERS</strong></td>
                                <td class="text-center fw-bold">{{ number_format($childTableStats['residential_disasters']['total'] ?? 0) }}</td>
                                <td class="text-end text-muted">N/A</td>
                            
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
            
            {{-- Optional: Add a subtle footer --}}
            <div class="modal-footer d-flex justify-content-end py-2 border-top">
                <small class="text-muted">Statistics reflect overall data volumes.</small>
            </div>
        </div>
    </div>
</div>

<style>
/* Custom CSS for the modal header gradient (Recommended to move this to your main CSS file) */
.bg-gradient-success {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%) !important;
}
</style>
<!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header" style="background: linear-gradient(135deg, #198754 0%, #20c997 100%);">
                <h5 class="modal-title text-white fw-bold">
                    <i class="fas fa-download me-2"></i>Export Data
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <p class="mb-3 text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Export will include current filtered data
                    @if(request()->hasAny(['region_id', 'district_id', 'type', 'status', 'date_from', 'date_to', 'search']))
                        <span class="badge bg-primary ms-2">Filters Applied</span>
                    @endif
                </p>
                <div class="d-grid gap-3">
                    <a href="{{ route('branches.manager.export.excel', request()->query()) }}" class="btn btn-success btn-lg" onclick="showExportProgress()">
                        <i class="fas fa-file-excel me-2"></i>Export to Excel
                    </a>
                    <a href="{{ route('branches.manager.export.pdf', request()->query()) }}" class="btn btn-danger btn-lg" onclick="showExportProgress()">
                        <i class="fas fa-file-pdf me-2"></i>Export to PDF
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Export Progress Overlay -->
<div id="exportProgress" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; justify-content: center; align-items: center;">
    <div style="background: white; border-radius: 20px; padding: 40px; text-align: center; min-width: 400px;">
        <div style="width: 80px; height: 80px; border: 8px solid #f3f3f3; border-top: 8px solid #17479E; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px;"></div>
        <h5 class="mb-2">Generating Export...</h5>
        <p class="text-muted mb-0">Please wait while we prepare your data</p>
    </div>
</div>

<style>
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modern Enquiry Table Styling */
.modern-enquiry-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Reference Table CSS - Apply to all tables */
.table {
    border-collapse: collapse;
    border-spacing: 0;
    background: white;
    width: 100%;
    margin: 0;
    border: 1px solid #dee2e6;
}

.table thead th,
.modern-enquiry-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,
.modern-enquiry-table thead th:hover {
    background: #B8E2F0 !important;
}

.table tbody tr,
.modern-enquiry-table tbody tr {
    transition: all 0.2s ease;
    background: white;
}

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

.table tbody tr:hover,
.modern-enquiry-table tbody tr:hover {
    background: #e3f2fd !important;
}

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

.modern-enquiry-table .btn-sm {
    border-radius: 8px !important;
    font-weight: 600;
    transition: all 0.2s ease;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.5px;
}

.modern-enquiry-table .btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
}

.modern-enquiry-table .badge {
    transition: all 0.2s ease;
}

.modern-enquiry-table .badge:hover {
    transform: scale(1.05);
}

.table-responsive {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}
</style>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>

// Dynamic District Loading
document.getElementById('regionSelect').addEventListener('change', function() {
    const regionId = this.value;
    const districtSelect = document.getElementById('districtSelect');

    if (!regionId) {
        districtSelect.innerHTML = '<option value="">All Districts</option>';
        districtSelect.disabled = false;
        return;
    }

    districtSelect.innerHTML = '<option value="">Loading...</option>';
    districtSelect.disabled = true;

    fetch(`{{ route('branches.manager.districts.by.region') }}?region_id=${regionId}`)
        .then(response => response.json())
        .then(districts => {
            districtSelect.innerHTML = '<option value="">All Districts</option>';
            districts.forEach(district => {
                const option = document.createElement('option');
                option.value = district.id;
                option.textContent = district.name;
                districtSelect.appendChild(option);
            });
            districtSelect.disabled = false;
        })
        .catch(error => {
            console.error('Error:', error);
            districtSelect.innerHTML = '<option value="">Error loading districts</option>';
        });
});

// Export Progress
function showExportProgress() {
    document.getElementById('exportProgress').style.display = 'flex';
    setTimeout(() => {
        document.getElementById('exportProgress').style.display = 'none';
    }, 3000);
}

// Initialize DataTables when modals are shown
$('#regionalAnalyticsModal').on('shown.bs.modal', function () {
    if (!$.fn.DataTable.isDataTable('#regionalTable')) {
        $('#regionalTable').DataTable({
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            order: [[2, 'desc']], // Sort by Total column
            language: {
                search: "Search regions:",
                lengthMenu: "Show _MENU_ regions",
                info: "Showing _START_ to _END_ of _TOTAL_ regions",
                infoEmpty: "No regions found",
                zeroRecords: "No matching regions found"
            }
        });
    }
});

$('#districtAnalyticsModal').on('shown.bs.modal', function () {
    if (!$.fn.DataTable.isDataTable('#districtTable')) {
        $('#districtTable').DataTable({
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            order: [[2, 'desc']], // Sort by Total column
            language: {
                search: "Search districts:",
                lengthMenu: "Show _MENU_ districts",
                info: "Showing _START_ to _END_ of _TOTAL_ districts",
                infoEmpty: "No districts found",
                zeroRecords: "No matching districts found"
            }
        });
    }
});

// Custom Excel Export
function exportCustomExcel() {
    const params = new URLSearchParams(window.location.search);
    params.set('export', 'excel');
    window.location.href = '{{ route("branches.manager.dashboard") }}?' + params.toString();
}

// Custom PDF Export
function exportCustomPDF() {
    const params = new URLSearchParams(window.location.search);
    params.set('export', 'pdf');
    window.location.href = '{{ route("branches.manager.dashboard") }}?' + params.toString();
}
</script>

@endsection