@extends('layouts.app')

@section('title', 'Meter Reading Details')

@section('content')
<div class="container-fluid" style="max-width: 700px;">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="bi bi-speedometer"></i> Meter Reading Details</h2>
            <p class="text-muted">Reading Date: {{ $reading->reading_date->format('F d, Y H:i') }}</p>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h5 class="card-title mb-0">Client Information</h5>
        </div>
        <div class="card-body">
            <p>
                <strong>Account Number:</strong> {{ $reading->client->account_number }}<br>
                <strong>Name:</strong> {{ $reading->client->name }}<br>
                <strong>Meter Number:</strong> {{ $reading->client->meter_number ?? 'N/A' }}<br>
                <strong>Address:</strong> {{ $reading->client->address ?? '-' }}
            </p>
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h5 class="card-title mb-0">Reading Data</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <p>
                        <strong>Current Reading:</strong> {{ number_format($reading->reading_value, 2) }} cu.m<br>
                        <strong>Previous Reading:</strong> {{ number_format($reading->previous_reading ?? 0, 2) }} cu.m
                    </p>
                </div>
                <div class="col-md-6">
                    <p>
                        <strong>Units Consumed:</strong> {{ number_format($reading->units_consumed ?? 0, 2) }} cu.m<br>
                        <strong>Recorded By:</strong> {{ $reading->recorded_by ?? '-' }}
                    </p>
                </div>
            </div>
            
            @if ($reading->notes)
                <p class="mt-2">
                    <strong>Notes:</strong><br>
                    {{ $reading->notes }}
                </p>
            @endif
        </div>
    </div>

    <div class="card mb-3">
        <div class="card-header">
            <h5 class="card-title mb-0">Status: 
                <span class="badge bg-{{ $reading->status === 'approved' ? 'success' : ($reading->status === 'rejected' ? 'danger' : 'warning') }}">
                    {{ ucfirst($reading->status) }}
                </span>
            </h5>
        </div>
        <div class="card-body">
            @if ($reading->status === 'draft')
                <p class="text-muted mb-3">This reading is pending approval. Review the data and approve to generate a billing statement.</p>
                <form method="POST" action="{{ route('meter-readings.approve', $reading) }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-success">
                        <i class="bi bi-check"></i> Approve & Generate Billing
                    </button>
                </form>

                <form method="POST" action="{{ route('meter-readings.reject', $reading) }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to reject this reading?')">
                        <i class="bi bi-x"></i> Reject
                    </button>
                </form>
            @elseif ($reading->status === 'approved')
                @if ($reading->isBillable())
                    {{-- Approved, but its bill was voided or cancelled: the consumption
                         is unbilled again and needs a replacement bill. --}}
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle"></i> This reading is approved but has no
                        billing standing against it — the previous bill was voided or cancelled.
                    </div>
                    <form method="POST" action="{{ route('meter-readings.generate-billing', $reading) }}" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-warning"
                                onclick="return confirm('Generate a new billing for {{ $reading->client->name }} from this reading?')">
                            <i class="bi bi-receipt"></i> Generate Billing
                        </button>
                    </form>
                @else
                    <div class="alert alert-success">
                        <i class="bi bi-check-circle"></i> This reading has been approved and a billing has been generated.
                    </div>
                @endif
                @if ($reading->billing)
                    <a href="{{ route('billings.show', $reading->billing) }}" class="btn btn-primary">
                        View Generated Billing
                    </a>
                @endif
            @else
                <div class="alert alert-danger">
                    <i class="bi bi-x-circle"></i> This reading has been rejected.
                </div>
            @endif
        </div>
    </div>

    <div>
        <a href="{{ route('meter-readings.index') }}" class="btn btn-secondary">Back to Readings</a>
    </div>
</div>
@endsection