@extends('layouts.app')

@section('title', 'Monthly Usage per Account')

@section('content')
@php
    $cur = ($filters['currency'] ?? 'PHP') === 'PHP' ? '₱' : $filters['currency'] . ' ';
@endphp

<div class="container-fluid">
    <div class="mb-4">
        <a href="{{ route('reports.index') }}" class="btn btn-link btn-sm px-0 text-primary">
            <i class="fas fa-arrow-left me-1"></i> Back to Reports
        </a>
        <h2 class="mb-1"><i class="fas fa-droplet me-2"></i>Monthly Usage per Account</h2>
        <p class="text-muted small mb-0">Water consumption per client account, broken down by month</p>
    </div>

    @include('reports.partials.filter', ['route' => 'reports.usage', 'showSearch' => true])

    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-info">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Total Consumption</small>
                    <h4 class="mb-0 mt-2 text-info">{{ number_format($totals['total_units'], 2) }}</h4>
                    <small class="text-muted">cu.m across {{ number_format($rows->count()) }} accounts</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-primary">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Average per Account</small>
                    <h4 class="mb-0 mt-2 text-primary">
                        {{ $rows->count() > 0 ? number_format($totals['total_units'] / $rows->count(), 2) : '0.00' }}
                    </h4>
                    <small class="text-muted">cu.m for the whole range</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-secondary">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Bills Covered</small>
                    <h4 class="mb-0 mt-2">{{ number_format($totals['bills']) }}</h4>
                    <small class="text-muted">over {{ count($months) }} month(s)</small>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card h-100 border-start border-4 border-success">
                <div class="card-body">
                    <small class="text-muted text-uppercase fw-bold">Value of Consumption</small>
                    <h4 class="mb-0 mt-2 text-success">{{ $cur }}{{ number_format($totals['total_amount'], 2) }}</h4>
                    <small class="text-muted">total billed for this usage</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0">Consumption by Account (cu.m)</h6>
            <small class="text-muted">Sorted by highest total consumption</small>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-sm mb-0 report-table">
                <thead class="table-light">
                    <tr>
                        <th class="report-sticky-col">Account</th>
                        @foreach($months as $label)
                            <th class="text-end">{{ $label }}</th>
                        @endforeach
                        <th class="text-end">Bills</th>
                        <th class="text-end">Total</th>
                        <th class="text-end">Avg</th>
                        <th class="text-end">Peak</th>
                        <th class="text-end">Billed</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($paginated as $row)
                        <tr>
                            <td class="report-sticky-col">
                                <div class="fw-semibold">{{ $row['client_name'] }}</div>
                                <small class="text-muted">{{ $row['account_number'] }}</small>
                            </td>
                            @foreach(array_keys($months) as $key)
                                <td class="text-end {{ $row['months'][$key] > 0 ? '' : 'text-muted' }}">
                                    {{ $row['months'][$key] > 0 ? number_format($row['months'][$key], 2) : '—' }}
                                </td>
                            @endforeach
                            <td class="text-end">{{ number_format($row['bills']) }}</td>
                            <td class="text-end fw-semibold">{{ number_format($row['total_units'], 2) }}</td>
                            <td class="text-end">{{ number_format($row['average_units'], 2) }}</td>
                            <td class="text-end">{{ number_format($row['peak_units'], 2) }}</td>
                            <td class="text-end">{{ $cur }}{{ number_format($row['total_amount'], 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($months) + 6 }}" class="text-center text-muted py-5">
                                No consumption recorded in this period.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($rows->isNotEmpty())
                    <tfoot>
                        <tr>
                            <td class="report-sticky-col">All Accounts</td>
                            @foreach(array_keys($months) as $key)
                                <td class="text-end">{{ number_format($totals['months'][$key], 2) }}</td>
                            @endforeach
                            <td class="text-end">{{ number_format($totals['bills']) }}</td>
                            <td class="text-end">{{ number_format($totals['total_units'], 2) }}</td>
                            <td class="text-end">—</td>
                            <td class="text-end">—</td>
                            <td class="text-end">{{ $cur }}{{ number_format($totals['total_amount'], 2) }}</td>
                        </tr>
                    </tfoot>
                @endif
            </table>
        </div>
        @if($paginated->hasPages())
            <div class="card-footer bg-white">
                {{ $paginated->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
    <p class="text-muted small mt-2 mb-0">
        Totals in the footer cover every matching account, not just the accounts shown on this page.
        Consumption is taken from the approved billings for each month.
    </p>
</div>
@endsection