@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>
            Dashboard
            <small>Welcome back, {{ Auth::user()->name }}!</small>
        </div>
    </div>

    <!-- START KPI cards box -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-primary-dark justify-content-center rounded-left">
                    <em class="fas fa-users fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-primary rounded-right">
                    <div class="h2 mt-0">{{ \App\Models\Client::count() }}</div>
                    <div class="text-uppercase">Total Clients</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-purple-dark justify-content-center rounded-left">
                    <em class="fas fa-file-invoice-dollar fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-purple rounded-right">
                    <div class="h2 mt-0">{{ \App\Models\Billing::count() }}</div>
                    <div class="text-uppercase">Billings</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-green-dark justify-content-center rounded-left">
                    <em class="fas fa-money-bill-wave fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-green rounded-right">
                    <div class="h2 mt-0">${{ number_format(\App\Models\Billing::sum('total_amount_due') ?? 0, 0) }}</div>
                    <div class="text-uppercase">Total Revenue</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-info-dark justify-content-center rounded-left">
                    <em class="fas fa-hand-holding-usd fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-info rounded-right">
                    <div class="h2 mt-0">${{ number_format(\App\Models\Payment::sum('amount') ?? 0, 0) }}</div>
                    <div class="text-uppercase">Collected</div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <!-- START card -->
            <div class="card flex-row align-items-center align-items-stretch border-0">
                <div class="col-4 d-flex align-items-center bg-teal-dark justify-content-center rounded-left">
                    <em class="fas fa-check-circle fa-3x"></em>
                </div>
                <div class="col-8 py-3 bg-teal rounded-right">
                    <div class="h2 mt-0">${{ number_format(\App\Models\Payment::where('status', 'completed')->sum('amount') ?? 0, 0) }}</div>
                    <div class="text-uppercase">Completed Payments</div>
                </div>
            </div>
        </div>
    </div>
    <!-- END KPI cards box -->

    <div class="row">
        <!-- START dashboard main content -->
        <div class="col-xl-9">
            <!-- START Recent Billings -->
            <div class="row">
                <div class="col-xl-12">
                    <!-- START card -->
                    <div class="card card-default card-demo">
                        <div class="card-header">
                            <a class="float-right" href="{{ route('billings.index') }}" data-toggle="tooltip" title="View all billings">
                                <em class="fas fa-arrow-right"></em>
                            </a>
                            <div class="card-title">Recent Billings</div>
                        </div>
                        <div class="card-wrapper">
                            <div class="card-body">
                                @if(\App\Models\Billing::count() > 0)
                                    <div class="table-responsive">
                                        <table class="table table-sm table-hover mb-0">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th>Client</th>
                                                    <th>Amount</th>
                                                    <th>Status</th>
                                                    <th>Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach(\App\Models\Billing::latest()->limit(5)->get() as $billing)
                                                    <tr>
                                                        <td class="text-truncate">{{ $billing->client->name ?? 'N/A' }}</td>
                                                        <td>${{ number_format($billing->total_amount_due, 2) }}</td>
                                                        <td>
                                                            @if($billing->is_paid)
                                                                <span class="badge badge-success">Paid</span>
                                                            @elseif($billing->is_overdue)
                                                                <span class="badge badge-danger">Overdue</span>
                                                            @else
                                                                <span class="badge badge-warning">Pending</span>
                                                            @endif
                                                        </td>
                                                        <td>{{ $billing->created_at->format('M d, Y') }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                @else
                                    <div class="text-center py-4 text-muted">
                                        <em class="fas fa-inbox fa-3x mb-2"></em>
                                        <p>No billings yet</p>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- END card -->
                </div>
            </div>
            <!-- END Recent Billings -->

            <div class="row">
                <!-- START Completed Payments -->
                <div class="col-xl-6">
                    <!-- START card -->
                    <div class="card card-default">
                        <div class="card-header">
                            <a class="float-right" href="{{ route('payments.index', ['status' => 'completed']) }}" data-toggle="tooltip" title="View all completed payments">
                                <em class="fas fa-arrow-right"></em>
                            </a>
                            <div class="card-title">Completed Payments</div>
                        </div>
                        <!-- START list group -->
                        <div class="list-group" data-height="300" data-scrollable="">
                            @php
                                $completedPayments = \App\Models\Payment::where('status', 'completed')->latest()->limit(5)->get();
                            @endphp
                            @if($completedPayments->count() > 0)
                                @foreach($completedPayments as $payment)
                                    <div class="list-group-item list-group-item-action">
                                        <div class="media">
                                            <div class="align-self-start mr-2">
                                                <span class="fa-stack">
                                                    <em class="fa fa-circle fa-stack-2x text-success"></em>
                                                    <em class="fas fa-check fa-stack-1x fa-inverse text-white"></em>
                                                </span>
                                            </div>
                                            <div class="media-body text-truncate">
                                                @php
                                                    $clientName = $payment->client->name ?? 'Unknown';
                                                    $typeLabel = match($payment->payment_type) {
                                                        'installation' => 'Installation Fee',
                                                        'reconnection' => 'Reconnection Fee',
                                                        'late_fee' => 'Late Fee',
                                                        'deposit' => 'Deposit',
                                                        'other' => 'Other',
                                                        default => 'Billing Payment'
                                                    };
                                                @endphp
                                                <p class="mb-1"><strong class="text-success">{{ $typeLabel }}</strong></p>
                                                <p class="m-0"><small>{{ $clientName }} - ${{ number_format($payment->amount, 2) }}</small></p>
                                            </div>
                                            <div class="ml-auto"><small class="text-muted ml-2">{{ $payment->created_at->diffForHumans() }}</small></div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="list-group-item text-center text-muted py-4">
                                    <em class="fas fa-inbox fa-2x mb-2"></em>
                                    <p>No completed payments yet</p>
                                </div>
                            @endif
                        </div>
                        <!-- END list group -->
                    </div>
                    <!-- END card -->
                </div>
                <!-- END Completed Payments -->

                <!-- START Company Stats -->
                <div class="col-xl-6">
                    <!-- START card -->
                    <div class="card card-default">
                        <div class="card-header">
                            <div class="card-title">Companies Overview</div>
                        </div>
                        <!-- START list group -->
                        <div class="list-group" data-height="300" data-scrollable="">
                            @if(auth()->user()->role->name === 'super_admin')
                                @if(\App\Models\Company::count() > 0)
                                    @foreach(\App\Models\Company::latest()->limit(5)->get() as $company)
                                        <div class="list-group-item">
                                            <div class="media">
                                                <div class="align-self-start mr-2">
                                                    <span class="fa-stack">
                                                        <em class="fa fa-circle fa-stack-2x text-info"></em>
                                                        <em class="fas fa-building fa-stack-1x fa-inverse text-white"></em>
                                                    </span>
                                                </div>
                                                <div class="media-body text-truncate">
                                                    <p class="mb-1"><strong class="text-info">{{ $company->name }}</strong></p>
                                                    <p class="m-0"><small>{{ $company->clients->count() }} clients • {{ $company->billings->count() }} billings</small></p>
                                                </div>
                                                <div class="ml-auto"><small class="text-muted ml-2">{{ $company->created_at->format('M d') }}</small></div>
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="list-group-item text-center text-muted py-4">
                                        <em class="fas fa-inbox fa-2x mb-2"></em>
                                        <p>No companies yet</p>
                                    </div>
                                @endif
                            @else
                                <div class="list-group-item">
                                    <div class="media">
                                        <div class="align-self-start mr-2">
                                            <span class="fa-stack">
                                                <em class="fa fa-circle fa-stack-2x text-info"></em>
                                                <em class="fas fa-building fa-stack-1x fa-inverse text-white"></em>
                                            </span>
                                        </div>
                                        <div class="media-body text-truncate">
                                            <p class="mb-1"><strong class="text-info">{{ auth()->user()->company->name }}</strong></p>
                                            <p class="m-0"><small>{{ auth()->user()->company->clients->count() }} clients • {{ auth()->user()->company->billings->count() }} billings</small></p>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                        <!-- END list group -->
                    </div>
                    <!-- END card -->
                </div>
                <!-- END Company Stats -->
            </div>
        </div>
        <!-- END dashboard main content -->

        <!-- START dashboard sidebar -->
        <aside class="col-xl-3">
            <!-- START Quick Stats -->
            <div class="card card-default">
                <div class="card-body">
                    <div class="text-info">Collection Rate</div>
                    <div class="text-center py-4">
                        @php
                            $totalRevenue = \App\Models\Billing::sum('total_amount_due') ?? 0;
                            $totalCollected = \App\Models\Payment::sum('amount') ?? 0;
                            $collectionRate = $totalRevenue > 0 ? ($totalCollected / $totalRevenue) * 100 : 0;
                        @endphp
                        <div class="h2 mt-0">{{ number_format($collectionRate, 1) }}%</div>
                        <div class="progress progress-xs mb-3">
                            <div class="progress-bar bg-info progress-bar-striped" role="progressbar" aria-valuenow="{{ (int)$collectionRate }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $collectionRate }}%">
                                <span class="sr-only">{{ (int)$collectionRate }}% Complete</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Quick Stats -->

            <!-- START Activity Timeline -->
            <div class="card card-default">
                <div class="card-header">
                    <div class="card-title">Recent Activities</div>
                </div>
                <!-- START list group -->
                <div class="list-group">
                    @if(\App\Models\Client::latest()->limit(3)->count() > 0)
                        @foreach(\App\Models\Client::latest()->limit(3)->get() as $client)
                            <div class="list-group-item">
                                <div class="media">
                                    <div class="align-self-start mr-2">
                                        <span class="fa-stack">
                                            <em class="fa fa-circle fa-stack-2x text-success"></em>
                                            <em class="fas fa-user-plus fa-stack-1x fa-inverse text-white"></em>
                                        </span>
                                    </div>
                                    <div class="media-body text-truncate">
                                        <p class="mb-1"><a class="text-success m-0" href="#">NEW CLIENT</a></p>
                                        <p class="m-0"><small><a href="#">{{ $client->name }}</a></small></p>
                                    </div>
                                    <div class="ml-auto"><small class="text-muted ml-2">{{ $client->created_at->diffForHumans() }}</small></div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    @if(\App\Models\Billing::latest()->limit(2)->count() > 0)
                        @foreach(\App\Models\Billing::latest()->limit(2)->get() as $billing)
                            <div class="list-group-item">
                                <div class="media">
                                    <div class="align-self-start mr-2">
                                        <span class="fa-stack">
                                            <em class="fa fa-circle fa-stack-2x text-warning"></em>
                                            <em class="fas fa-file-invoice-dollar fa-stack-1x fa-inverse text-white"></em>
                                        </span>
                                    </div>
                                    <div class="media-body text-truncate">
                                        <p class="mb-1"><a class="text-warning m-0" href="#">NEW BILLING</a></p>
                                        <p class="m-0"><small><a href="#">{{ $billing->client->name ?? 'N/A' }}</a> - ${{ number_format($billing->total_amount_due, 2) }}</small></p>
                                    </div>
                                    <div class="ml-auto"><small class="text-muted ml-2">{{ $billing->created_at->diffForHumans() }}</small></div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- END list group -->
                <!-- START card footer -->
                <div class="card-footer"><a class="text-sm" href="{{ route('clients.index') }}">View all activities</a></div>
                <!-- END card footer -->
            </div>
            <!-- END Activity Timeline -->
        </aside>
        <!-- END dashboard sidebar -->
    </div>
@endsection

@section('styles')
    <style>
        .bg-primary-dark {
            background-color: #5b68ff !important;
        }
        .bg-purple-dark {
            background-color: #7266ba !important;
        }
        .bg-green-dark {
            background-color: #27a376 !important;
        }
        .bg-info-dark {
            background-color: #1b9d9e !important;
        }
        .bg-teal-dark {
            background-color: #0da29d !important;
        }
        .bg-teal {
            background-color: #13b5ab !important;
        }
    </style>
@endsection

            <div class="card mt-3">
                <div class="card-header">
                    <i class="fas fa-cog me-2"></i>System Info
                </div>
                <div class="card-body" style="font-size: 13px;">
                    <div class="mb-2">
                        <strong>Laravel Version:</strong><br>
                        <code>12.44.0</code>
                    </div>
                    <div class="mb-2">
                        <strong>PHP Version:</strong><br>
                        <code>{{ phpversion() }}</code>
                    </div>
                    <div>
                        <strong>Environment:</strong><br>
                        <code>{{ config('app.env') }}</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection