@extends('adminlte::page')

@section('title', 'Reports & Analytics')

@section('content_header')
    <h1 class="font-condensed">Reports & Analytics</h1>
@stop

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">Available Reports</h3>
            </div>
            <div class="card-body p-compact">
                <div class="row report-grid">
                    <!-- Overview Report -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-chart-pie fa-2x text-primary mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Overview Dashboard</h5>
                                <p class="card-text text-compact">Comprehensive overview of key metrics including cases, finances, and team performance.</p>
                                <div class="mb-2">
                                    <span class="badge badge-info">{{ $metrics['activeCases'] ?? 0 }} Active</span>
                                    <span class="badge badge-danger">{{ $metrics['overdueTasks'] ?? 0 }} Overdue</span>
                                </div>
                                <a href="{{ route('reports.overview') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-chart-line"></i> View Overview
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Case Analytics -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-briefcase fa-2x text-success mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Case Analytics</h5>
                                <p class="card-text text-compact">Detailed analysis of case performance, duration, success rates, and lawyer efficiency.</p>
                                <div class="mb-2">
                                    <span class="badge badge-secondary">{{ $metrics['totalCases'] ?? 0 }} Cases</span>
                                </div>
                                <a href="{{ route('reports.case-analytics') }}" class="btn btn-success btn-sm">
                                    <i class="fas fa-analytics"></i> View Cases
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Financial Reports -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-dollar-sign fa-2x text-warning mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Financial Reports</h5>
                                <p class="card-text text-compact">Revenue analysis, outstanding invoices, billing efficiency, and client profitability.</p>
                                <div class="mb-2">
                                    <span class="badge badge-warning">${{ number_format($metrics['outstandingSum'] ?? 0, 0) }} Due</span>
                                    <span class="badge badge-light">{{ $metrics['outstandingCount'] ?? 0 }} Invoices</span>
                                </div>
                                <a href="{{ route('reports.financial') }}" class="btn btn-warning btn-sm">
                                    <i class="fas fa-money-bill-wave"></i> View Financial
                                </a>
                                <form class="d-inline" method="POST" action="{{ route('reports.export') }}">
                                    @csrf
                                    <input type="hidden" name="type" value="outstanding-invoices">
                                    <input type="hidden" name="format" value="csv">
                                    <button type="submit" class="btn btn-outline-warning btn-sm mt-2"><i class="fas fa-download"></i> Export CSV</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Time Tracking -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-clock fa-2x text-info mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Time Tracking</h5>
                                <p class="card-text text-compact">Analyze billable hours, utilization rates, and time distribution across cases and users.</p>
                                <div class="mb-2">
                                    <span class="badge badge-info">{{ number_format($metrics['hours30d'] ?? 0, 1) }}h last 30d</span>
                                </div>
                                <a href="{{ route('reports.time-tracking') }}" class="btn btn-info btn-sm">
                                    <i class="fas fa-stopwatch"></i> View Time
                                </a>
                                <form class="d-inline" method="POST" action="{{ route('reports.export') }}">
                                    @csrf
                                    <input type="hidden" name="type" value="time-by-user">
                                    <input type="hidden" name="format" value="csv">
                                    <button type="submit" class="btn btn-outline-info btn-sm mt-2"><i class="fas fa-download"></i> Export CSV</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Task Report -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-tasks fa-2x text-purple mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Task Reports</h5>
                                <p class="card-text text-compact">Task completion rates, overdue tasks, priority distribution, and team productivity.</p>
                                <div class="mb-2">
                                    <span class="badge badge-danger">{{ $metrics['overdueTasks'] ?? 0 }} Overdue</span>
                                </div>
                                <a href="{{ route('reports.tasks') }}" class="btn btn-purple btn-sm">
                                    <i class="fas fa-check-circle"></i> View Tasks
                                </a>
                                <form class="d-inline" method="POST" action="{{ route('reports.export') }}">
                                    @csrf
                                    <input type="hidden" name="type" value="tasks-by-user">
                                    <input type="hidden" name="format" value="csv">
                                    <button type="submit" class="btn btn-outline-secondary btn-sm mt-2"><i class="fas fa-download"></i> Export CSV</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <!-- Custom Reports (Future) -->
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card report-card h-100">
                            <div class="card-body text-center p-compact">
                                <i class="fas fa-cogs fa-2x text-secondary mb-compact"></i>
                                <h5 class="card-title font-condensed text-compact">Custom Reports</h5>
                                <p class="card-text text-compact">Create custom reports with specific filters and metrics tailored to your needs.</p>
                                <button class="btn btn-secondary btn-sm" disabled>
                                    <i class="fas fa-wrench"></i> Coming Soon
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Stats -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info small-box-modern">
                    <div class="inner">
                        <h3>{{ \App\Models\LegalCase::count() }}</h3>
                        <p>Total Cases</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-briefcase"></i>
                    </div>
                    <a href="{{ route('reports.case-analytics') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-success small-box-modern">
                    <div class="inner">
                        <h3>${{ number_format(\App\Models\Invoice::where('status', 'paid')->sum('total_amount'), 0) }}</h3>
                        <p>Total Revenue</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-dollar-sign"></i>
                    </div>
                    <a href="{{ route('reports.financial') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning small-box-modern">
                    <div class="inner">
                        <h3>{{ number_format(\App\Models\TimeEntry::sum('hours'), 0) }}</h3>
                        <p>Total Hours</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <a href="{{ route('reports.time-tracking') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger small-box-modern">
                    <div class="inner">
                        <h3>{{ \App\Models\Task::whereNull('completed_at')->where('due_date', '<', now())->count() }}</h3>
                        <p>Overdue Tasks</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <a href="{{ route('reports.tasks') }}" class="small-box-footer">
                        More info <i class="fas fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
.btn-purple {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}

.btn-purple:hover {
    background-color: #5a32a3;
    border-color: #5a32a3;
    color: white;
}

.text-purple {
    color: #6f42c1 !important;
}
.report-card {
    border: 1px solid #e7ebf0;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.report-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(16,24,40,.12);
}
.report-grid > [class^="col-"] {
    margin-bottom: 0.75rem;
}
</style>
@stop