@extends('adminlte::page')

@section('title', 'Overview Dashboard')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Overview Dashboard</h1>
        <div>
            <form method="GET" class="d-inline">
                <select name="period" class="form-control d-inline-block" style="width: auto;" onchange="this.form.submit()">
                    <option value="7" {{ $period == 7 ? 'selected' : '' }}>Last 7 days</option>
                    <option value="30" {{ $period == 30 ? 'selected' : '' }}>Last 30 days</option>
                    <option value="90" {{ $period == 90 ? 'selected' : '' }}>Last 90 days</option>
                    <option value="365" {{ $period == 365 ? 'selected' : '' }}>Last year</option>
                </select>
            </form>
            <a href="{{ route('reports.index') }}" class="btn btn-secondary ml-2">
                <i class="fas fa-arrow-left"></i> Back to Reports
            </a>
        </div>
    </div>
@stop

@section('content')
<!-- Key Metrics Cards -->
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $caseStats['active'] }}</h3>
                <p>Active Cases</p>
            </div>
            <div class="icon">
                <i class="fas fa-briefcase"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>${{ number_format($financialStats['this_month_revenue'], 0) }}</h3>
                <p>This Month Revenue</p>
            </div>
            <div class="icon">
                <i class="fas fa-dollar-sign"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ number_format($timeStats['this_month_hours'], 0) }}</h3>
                <p>This Month Hours</p>
            </div>
            <div class="icon">
                <i class="fas fa-clock"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-danger">
            <div class="inner">
                <h3>{{ $taskStats['overdue'] }}</h3>
                <p>Overdue Tasks</p>
            </div>
            <div class="icon">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Case Statistics -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Case Statistics</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="description-block">
                            <span class="description-percentage text-success">
                                <i class="fas fa-caret-up"></i> {{ $caseStats['closed_this_period'] }}
                            </span>
                            <h5 class="description-header">{{ $caseStats['total'] }}</h5>
                            <span class="description-text">TOTAL CASES</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="description-block">
                            <span class="description-percentage text-info">
                                <i class="fas fa-caret-up"></i> {{ $caseStats['active'] }}
                            </span>
                            <h5 class="description-header">{{ $caseStats['active'] }}</h5>
                            <span class="description-text">ACTIVE CASES</span>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <strong>By Status:</strong>
                    @foreach($caseStats['by_status'] as $status => $count)
                        <div class="progress-group">
                            <span class="float-right"><b>{{ $count }}</b>/{{ $caseStats['total'] }}</span>
                            <span class="progress-text">{{ ucfirst($status) }}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-primary" style="width: {{ $caseStats['total'] > 0 ? ($count/$caseStats['total'])*100 : 0 }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Overview -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Financial Overview</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <div class="description-block border-right">
                            <span class="description-percentage text-success">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                            <h5 class="description-header">${{ number_format($financialStats['total_paid'], 0) }}</h5>
                            <span class="description-text">TOTAL PAID</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="description-block">
                            <span class="description-percentage text-warning">
                                <i class="fas fa-exclamation-triangle"></i>
                            </span>
                            <h5 class="description-header">${{ number_format($financialStats['outstanding'], 0) }}</h5>
                            <span class="description-text">OUTSTANDING</span>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <div class="row">
                        <div class="col-12">
                            <div class="info-box">
                                <span class="info-box-icon bg-danger">
                                    <i class="fas fa-clock"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Overdue Amount</span>
                                    <span class="info-box-number">${{ number_format($financialStats['overdue'], 0) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Time Tracking Stats -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Time Tracking</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">{{ number_format($timeStats['total_hours'], 1) }}</h5>
                            <span class="description-text">TOTAL HOURS</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">{{ number_format($timeStats['billable_hours'], 1) }}</h5>
                            <span class="description-text">BILLABLE</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">${{ number_format($timeStats['avg_hourly_rate'], 0) }}</h5>
                            <span class="description-text">AVG RATE</span>
                        </div>
                    </div>
                </div>

                @php
                    $utilizationRate = $timeStats['total_hours'] > 0 ? ($timeStats['billable_hours'] / $timeStats['total_hours']) * 100 : 0;
                @endphp
                <div class="mt-3">
                    <div class="progress-group">
                        <span class="float-right"><b>{{ number_format($utilizationRate, 1) }}%</b></span>
                        <span class="progress-text">Utilization Rate</span>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-success" style="width: {{ $utilizationRate }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Task Overview -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Task Overview</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">{{ $taskStats['total'] }}</h5>
                            <span class="description-text">TOTAL</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">{{ $taskStats['completed'] }}</h5>
                            <span class="description-text">COMPLETED</span>
                        </div>
                    </div>
                    <div class="col-4">
                        <div class="description-block">
                            <h5 class="description-header">{{ $taskStats['pending'] }}</h5>
                            <span class="description-text">PENDING</span>
                        </div>
                    </div>
                </div>

                @php
                    $completionRate = $taskStats['total'] > 0 ? ($taskStats['completed'] / $taskStats['total']) * 100 : 0;
                @endphp
                <div class="mt-3">
                    <div class="progress-group">
                        <span class="float-right"><b>{{ number_format($completionRate, 1) }}%</b></span>
                        <span class="progress-text">Completion Rate</span>
                        <div class="progress progress-sm">
                            <div class="progress-bar bg-info" style="width: {{ $completionRate }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Case Types Distribution -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Cases by Type</h3>
            </div>
            <div class="card-body">
                <canvas id="caseTypesChart" width="400" height="200"></canvas>
            </div>
        </div>
    </div>

    <!-- Communication Statistics -->
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Communication Statistics</h3>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-6">
                        <div class="description-block">
                            <h5 class="description-header">{{ $commStats['total'] }}</h5>
                            <span class="description-text">TOTAL COMMUNICATIONS</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="description-block">
                            <h5 class="description-header">{{ $commStats['this_month'] }}</h5>
                            <span class="description-text">THIS MONTH</span>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <strong>By Type:</strong>
                    @foreach($commStats['by_type'] as $type => $count)
                        <div class="progress-group">
                            <span class="float-right"><b>{{ $count }}</b></span>
                            <span class="progress-text">{{ ucfirst($type) }}</span>
                            <div class="progress progress-sm">
                                <div class="progress-bar bg-warning" style="width: {{ $commStats['total'] > 0 ? ($count/$commStats['total'])*100 : 0 }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Client Statistics -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Client Statistics</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $clientStats['total'] }}</h5>
                            <span class="description-text">TOTAL CLIENTS</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $clientStats['individual'] }}</h5>
                            <span class="description-text">INDIVIDUAL</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $clientStats['corporate'] }}</h5>
                            <span class="description-text">CORPORATE</span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="description-block">
                            <h5 class="description-header">{{ $clientStats['new_this_month'] }}</h5>
                            <span class="description-text">NEW THIS MONTH</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Case Types Chart
const caseTypesCtx = document.getElementById('caseTypesChart').getContext('2d');
const caseTypesChart = new Chart(caseTypesCtx, {
    type: 'doughnut',
    data: {
        labels: [
            @foreach($caseStats['by_type'] as $type => $count)
                '{{ ucfirst($type) }}',
            @endforeach
        ],
        datasets: [{
            data: [
                @foreach($caseStats['by_type'] as $type => $count)
                    {{ $count }},
                @endforeach
            ],
            backgroundColor: [
                '#FF6384',
                '#36A2EB',
                '#FFCE56',
                '#4BC0C0',
                '#9966FF',
                '#FF9F40'
            ]
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>
@stop