@extends('layouts.app')

@section('content')
@if(in_array(auth()->user()->role->name, ['super_admin', 'company_admin', 'company_owner']))
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="mb-4">
        <a href="{{ route('disconnections.index') }}" class="btn btn-link btn-sm text-primary mb-3" style="padding: 0;">
            <i class="fas fa-arrow-left"></i> Back to Disconnections
        </a>
        <h1 class="h3 text-dark font-weight-bold">Late Payment & Disconnection Report</h1>
        <p class="text-muted small">Statistical analysis of late fees, disconnections, and revenue impact</p>
    </div>

    <!-- Filter Section -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <label class="form-label">Start Date</label>
                    <input type="date" id="startDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">End Date</label>
                    <input type="date" id="endDate" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label">Period</label>
                    <select id="period" class="form-select">
                        <option value="this_month">This Month</option>
                        <option value="last_month">Last Month</option>
                        <option value="this_year">This Year</option>
                        <option value="custom">Custom Range</option>
                    </select>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                    <button onclick="generateReport()" class="btn btn-primary w-100">
                        <i class="fas fa-refresh me-2"></i> Generate Report
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-12 col-lg-2-4">
            <div class="card border-top-orange mb-3">
                <div class="card-body">
                    <small class="text-muted text-uppercase font-weight-bold">Total Late Fees This Period</small>
                    <p class="h5 text-warning font-weight-bold mt-2">₱{{ number_format($stats['total_late_fees'] ?? 0, 2) }}</p>
                    <small class="text-muted">{{ $stats['late_fee_count'] ?? 0 }} fees applied</small>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-2-4">
            <div class="card border-top-danger mb-3">
                <div class="card-body">
                    <small class="text-muted text-uppercase font-weight-bold">Outstanding Balance</small>
                    <p class="h5 text-danger font-weight-bold mt-2">₱{{ number_format($stats['total_outstanding_balance'] ?? 0, 2) }}</p>
                    <small class="text-muted">From {{ $stats['overdue_billings_count'] ?? 0 }} billings</small>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-2-4">
            <div class="card border-top-primary mb-3">
                <div class="card-body">
                    <small class="text-muted text-uppercase font-weight-bold">Total Disconnections</small>
                    <p class="h5 text-primary font-weight-bold mt-2">{{ $stats['total_disconnections'] ?? 0 }}</p>
                    <small class="text-muted">{{ $stats['reconnections'] ?? 0 }} reconnected</small>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-2-4">
            <div class="card border-top-success mb-3">
                <div class="card-body">
                    <small class="text-muted text-uppercase font-weight-bold">Reconnection Revenue</small>
                    <p class="h5 text-success font-weight-bold mt-2">₱{{ number_format($stats['total_reconnection_fees'] ?? 0, 2) }}</p>
                    <small class="text-muted">{{ $stats['reconnection_fee_count'] ?? 0 }} reconnections</small>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-lg-2-4">
            <div class="card border-top-info mb-3">
                <div class="card-body">
                    <small class="text-muted text-uppercase font-weight-bold">Affected Clients</small>
                    <p class="h5 text-info font-weight-bold mt-2">{{ $stats['affected_clients_count'] ?? 0 }}</p>
                    <small class="text-muted">With overdue accounts</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true">
                <i class="fas fa-chart-bar me-2"></i> Summary
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="top-delinquent-tab" data-bs-toggle="tab" data-bs-target="#top-delinquent" type="button" role="tab" aria-controls="top-delinquent" aria-selected="false">
                <i class="fas fa-exclamation-triangle me-2"></i> Top Delinquent Clients
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="daily-trend-tab" data-bs-toggle="tab" data-bs-target="#daily-trend" type="button" role="tab" aria-controls="daily-trend" aria-selected="false">
                <i class="fas fa-chart-line me-2"></i> Daily Trend
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="revenue-impact-tab" data-bs-toggle="tab" data-bs-target="#revenue-impact" type="button" role="tab" aria-controls="revenue-impact" aria-selected="false">
                <i class="fas fa-money-bill me-2"></i> Revenue Impact
            </button>
        </li>
    </ul>

    <!-- Tab Content -->
    <div class="tab-content">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Late Fee Breakdown -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Late Fee Breakdown</h3>
                <div class="space-y-3">
                    <div class="flex justify-between pb-3 border-b">
                        <span class="text-gray-600">Total Applied:</span>
                        <span class="font-bold text-lg text-orange-600">₱{{ number_format($stats['total_late_fees'] ?? 0, 2) }}</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b">
                        <span class="text-gray-600">Collected:</span>
                        <span class="font-bold text-lg text-green-600">₱{{ number_format($stats['late_fees_collected'] ?? 0, 2) }}</span>
                    </div>
                    <div class="flex justify-between pb-3">
                        <span class="text-gray-600">Outstanding:</span>
                        <span class="font-bold text-lg text-red-600">₱{{ number_format(($stats['total_late_fees'] ?? 0) - ($stats['late_fees_collected'] ?? 0), 2) }}</span>
                    </div>
                    <div class="mt-4 p-4 bg-blue-50 rounded">
                        <p class="text-sm text-gray-700">
                            <strong>Average Late Fee:</strong> ₱{{ number_format($stats['average_late_fee'] ?? 0, 2) }}
                        </p>
                        <p class="text-sm text-gray-700 mt-2">
                            <strong>Collection Rate:</strong> 
                            <span class="font-bold {{ ($stats['late_fee_collection_rate'] ?? 0) > 50 ? 'text-green-600' : 'text-red-600' }}">
                                {{ number_format($stats['late_fee_collection_rate'] ?? 0, 1) }}%
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Disconnection Statistics -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Disconnection Statistics</h3>
                <div class="space-y-3">
                    <div class="flex justify-between pb-3 border-b">
                        <span class="text-gray-600">Total Disconnections:</span>
                        <span class="font-bold text-lg text-red-600">{{ $stats['total_disconnections'] ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b">
                        <span class="text-gray-600">Reconnected:</span>
                        <span class="font-bold text-lg text-green-600">{{ $stats['reconnections'] ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between pb-3 border-b">
                        <span class="text-gray-600">Still Disconnected:</span>
                        <span class="font-bold text-lg text-orange-600">{{ ($stats['total_disconnections'] ?? 0) - ($stats['reconnections'] ?? 0) }}</span>
                    </div>
                    <div class="mt-4 p-4 bg-blue-50 rounded">
                        <p class="text-sm text-gray-700">
                            <strong>Reconnection Rate:</strong>
                            <span class="font-bold text-blue-600">
                                {{ $stats['total_disconnections'] > 0 ? number_format(($stats['reconnections'] ?? 0) / ($stats['total_disconnections'] ?? 1) * 100, 1) : 0 }}%
                            </span>
                        </p>
                        <p class="text-sm text-gray-700 mt-2">
                            <strong>Avg Days Disconnected:</strong>
                            <span class="font-bold">{{ $stats['average_days_disconnected'] ?? 0 }} days</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Delinquent Clients Tab -->
    <div id="top-delinquent" class="report-tab-content hidden">
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900">Top 20 Most Delinquent Clients</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Rank</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Client</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Account #</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Overdue Balance</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Late Fees</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Days Overdue</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">Risk Level</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($topDelinquent ?? [] as $index => $client)
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-blue-600 text-white font-bold text-sm">
                                        {{ $index + 1 }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <a href="{{ route('disconnections.client-details', $client->id) }}" class="text-sm font-medium text-blue-600 hover:text-blue-800">
                                        {{ $client->name ?? 'Unknown' }}
                                    </a>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ $client->account_number ?? 'N/A' }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-red-600">₱{{ number_format($client->overdue_balance ?? 0, 2) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-orange-600">₱{{ number_format($client->late_fees ?? 0, 2) }}</td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ ($client->days_overdue ?? 0) > 60 ? 'bg-red-100 text-red-800' : ($client->days_overdue > 30 ? 'bg-orange-100 text-orange-800' : 'bg-yellow-100 text-yellow-800') }}">
                                        {{ $client->days_overdue ?? 0 }} days
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @php
                                        $totalRisk = ($client->overdue_balance ?? 0) + ($client->late_fees ?? 0);
                                        $riskLevel = $totalRisk > 50000 ? 'CRITICAL' : ($totalRisk > 20000 ? 'HIGH' : ($totalRisk > 5000 ? 'MEDIUM' : 'LOW'));
                                        $riskClass = $riskLevel === 'CRITICAL' ? 'bg-red-100 text-red-800' : ($riskLevel === 'HIGH' ? 'bg-orange-100 text-orange-800' : ($riskLevel === 'MEDIUM' ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'));
                                    @endphp
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {{ $riskClass }}">
                                        {{ $riskLevel }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                                    No delinquent clients found.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Daily Trend Tab -->
    <div id="daily-trend" class="report-tab-content hidden">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Daily Trend Analysis</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
                <div class="p-4 bg-blue-50 rounded-lg">
                    <p class="text-sm text-gray-600">Total Days in Period</p>
                    <p class="text-3xl font-bold text-blue-600 mt-2">{{ $stats['report_days'] ?? 0 }}</p>
                </div>
                <div class="p-4 bg-orange-50 rounded-lg">
                    <p class="text-sm text-gray-600">Avg Late Fees Per Day</p>
                    <p class="text-3xl font-bold text-orange-600 mt-2">₱{{ number_format(($stats['total_late_fees'] ?? 0) / max($stats['report_days'] ?? 1, 1), 2) }}</p>
                </div>
                <div class="p-4 bg-red-50 rounded-lg">
                    <p class="text-sm text-gray-600">Avg Disconnections Per Day</p>
                    <p class="text-3xl font-bold text-red-600 mt-2">{{ number_format(($stats['total_disconnections'] ?? 0) / max($stats['report_days'] ?? 1, 1), 2) }}</p>
                </div>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
                <p class="text-sm text-gray-600 mb-4">Note: Detailed daily trend chart would be rendered here using Chart.js or similar library</p>
                <div class="h-64 bg-white rounded flex items-center justify-center border-2 border-dashed border-gray-300">
                    <p class="text-gray-400">Chart placeholder - Daily trend visualization</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Revenue Impact Tab -->
    <div id="revenue-impact" class="report-tab-content hidden">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Revenue Summary -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Revenue Impact Summary</h3>
                <div class="space-y-4">
                    <div class="p-4 bg-green-50 rounded-lg">
                        <p class="text-sm text-gray-600">Late Fees Collected</p>
                        <p class="text-2xl font-bold text-green-600 mt-2">₱{{ number_format($stats['late_fees_collected'] ?? 0, 2) }}</p>
                    </div>
                    <div class="p-4 bg-purple-50 rounded-lg">
                        <p class="text-sm text-gray-600">Reconnection Fees Collected</p>
                        <p class="text-2xl font-bold text-purple-600 mt-2">₱{{ number_format($stats['total_reconnection_fees'] ?? 0, 2) }}</p>
                    </div>
                    <div class="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-600">
                        <p class="text-sm text-gray-600">Total Collections From Fees</p>
                        <p class="text-3xl font-bold text-blue-600 mt-2">₱{{ number_format(($stats['late_fees_collected'] ?? 0) + ($stats['total_reconnection_fees'] ?? 0), 2) }}</p>
                    </div>
                </div>
            </div>

            <!-- Lost Revenue -->
            <div class="bg-white rounded-lg shadow p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Lost Revenue Analysis</h3>
                <div class="space-y-4">
                    <div class="p-4 bg-red-50 rounded-lg">
                        <p class="text-sm text-gray-600">Outstanding Late Fees</p>
                        <p class="text-2xl font-bold text-red-600 mt-2">₱{{ number_format(($stats['total_late_fees'] ?? 0) - ($stats['late_fees_collected'] ?? 0), 2) }}</p>
                    </div>
                    <div class="p-4 bg-orange-50 rounded-lg">
                        <p class="text-sm text-gray-600">Uncollected Billings</p>
                        <p class="text-2xl font-bold text-orange-600 mt-2">₱{{ number_format($stats['uncollected_billings'] ?? 0, 2) }}</p>
                    </div>
                    <div class="p-4 bg-red-50 rounded-lg border-l-4 border-red-600">
                        <p class="text-sm text-gray-600">Total Lost Revenue</p>
                        <p class="text-3xl font-bold text-red-600 mt-2">₱{{ number_format(($stats['total_late_fees'] ?? 0) - ($stats['late_fees_collected'] ?? 0) + ($stats['uncollected_billings'] ?? 0), 2) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- ROI Analysis -->
        <div class="bg-white rounded-lg shadow p-6 mt-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Collection Effectiveness</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="p-4 border rounded-lg">
                    <p class="text-sm text-gray-600">Late Fee Collection Rate</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-green-600 h-2 rounded-full" style="width: {{ min($stats['late_fee_collection_rate'] ?? 0, 100) }}%"></div>
                    </div>
                    <p class="text-lg font-bold mt-2">{{ number_format($stats['late_fee_collection_rate'] ?? 0, 1) }}%</p>
                </div>
                <div class="p-4 border rounded-lg">
                    <p class="text-sm text-gray-600">Billing Collection Rate</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-blue-600 h-2 rounded-full" style="width: {{ min($stats['billing_collection_rate'] ?? 0, 100) }}%"></div>
                    </div>
                    <p class="text-lg font-bold mt-2">{{ number_format($stats['billing_collection_rate'] ?? 0, 1) }}%</p>
                </div>
                <div class="p-4 border rounded-lg">
                    <p class="text-sm text-gray-600">Overall Recovery Rate</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-purple-600 h-2 rounded-full" style="width: {{ min($stats['overall_recovery_rate'] ?? 0, 100) }}%"></div>
                    </div>
                    <p class="text-lg font-bold mt-2">{{ number_format($stats['overall_recovery_rate'] ?? 0, 1) }}%</p>
                </div>
                <div class="p-4 border rounded-lg">
                    <p class="text-sm text-gray-600">Reconnection Rate</p>
                    <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
                        <div class="bg-orange-600 h-2 rounded-full" style="width: {{ min(($stats['total_disconnections'] > 0 ? ($stats['reconnections'] ?? 0) / ($stats['total_disconnections'] ?? 1) * 100 : 0), 100) }}%"></div>
                    </div>
                    <p class="text-lg font-bold mt-2">{{ $stats['total_disconnections'] > 0 ? number_format(($stats['reconnections'] ?? 0) / ($stats['total_disconnections'] ?? 1) * 100, 1) : 0 }}%</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function showReportTab(tabName) {
    document.querySelectorAll('.report-tab-content').forEach(tab => {
        tab.classList.add('hidden');
    });
    
    document.querySelectorAll('.report-tab-button').forEach(btn => {
        btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
        btn.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
    });
    
    document.getElementById(tabName).classList.remove('hidden');
    event.target.closest('.report-tab-button').classList.add('active', 'border-blue-500', 'text-blue-600');
    event.target.closest('.report-tab-button').classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
}

function generateReport() {
    // This would typically make an AJAX call to refresh the report with new filters
    alert('Report generation with custom filters would be handled here');
}
</script>
</div>
@else
<div class="container mx-auto px-4 py-8">
    <div class="text-center py-16">
        <svg class="mx-auto h-16 w-16 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4v2m0 4v2M6.172 6.172a4 4 0 015.656 0L12 7.343l.172-.171a4 4 0 00-5.656 0m11.313 1.172l-.707.707M12 12a3 3 0 11-6 0 3 3 0 016 0zm0 0a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <h2 class="mt-4 text-2xl font-bold text-gray-900">Access Denied</h2>
        <p class="mt-2 text-gray-600">Only Super Admin and Company Admin users can access the Disconnection Management system.</p>
        <a href="{{ route('dashboard') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
            Back to Dashboard
        </a>
    </div>
</div>
@endif
@endsection