@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:
                @php
                    $statusColor = [
                        'approved' => 'success',
                        'rejected' => 'danger',
                        'disregarded' => 'secondary',
                    ][$reading->status] ?? 'warning';
                @endphp
                <span class="badge bg-{{ $statusColor }}">{{ ucfirst($reading->status) }}</span>
            </h5>
        </div>
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @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 &amp; 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 ($activeBilling ?? $reading->billing)
                    <a href="{{ route('billings.show', $activeBilling ?? $reading->billing) }}" class="btn btn-primary">
                        View Generated Billing
                    </a>
                @endif
            @elseif ($reading->status === 'disregarded')
                <div class="alert alert-secondary mb-0">
                    <i class="bi bi-slash-circle"></i>
                    <strong>This reading was disregarded.</strong> It no longer counts as a reading, so
                    {{ $reading->client->name }}'s next reading is measured from the last good reading
                    before it.
                    <hr>
                    <div class="mb-0">
                        <strong>Reason:</strong> {{ $reading->disregard_reason ?? '—' }}<br>
                        <strong>By:</strong> {{ $reading->disregardedByUser->name ?? '—' }}
                        @if ($reading->disregarded_at)
                            on {{ $reading->disregarded_at->format('M d, Y h:i A') }}
                        @endif
                    </div>
                </div>
            @else
                <div class="alert alert-danger mb-0">
                    <i class="bi bi-x-circle"></i> This reading has been rejected.
                </div>
            @endif
        </div>
    </div>

    {{-- A reading found to be wrong after it was approved and billed. Correcting
         it recalculates the bill; disregarding it throws the reading out so the
         next one measures from the last good reading. Admin level only. --}}
    @if ($canEdit || $canDisregard || $canVoidReading)
        <div class="card mb-3 border-warning">
            <div class="card-header bg-warning-subtle">
                <h5 class="card-title mb-0"><i class="bi bi-tools"></i> Wrong Reading?</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">
                    @if ($requiresVoidCode)
                        Billing #{{ $activeBilling->billing_number }} already has
                        ₱{{ number_format($activeBilling->amount_paid, 2) }} collected against it, so either action
                        voids that bill and reverses the payments. The company owner's 6-digit code is required.
                    @elseif ($activeBilling)
                        Nothing has been paid on billing #{{ $activeBilling->billing_number }} yet.
                        Correcting recalculates it in place; disregarding cancels it.
                    @else
                        No billing stands against this reading.
                    @endif
                </p>

                <div class="d-flex gap-2 flex-wrap">
                    @if ($canEdit)
                        <a href="{{ route('meter-readings.edit', $reading) }}" class="btn btn-outline-primary">
                            <i class="bi bi-pencil-square"></i> Edit Reading
                        </a>
                    @endif
                    @if ($canDisregard)
                        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#disregardModal">
                            <i class="bi bi-slash-circle"></i> Disregard Reading
                        </button>
                    @endif
                    @if ($canVoidReading)
                        <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#voidReadingModal">
                            <i class="bi bi-x-octagon"></i> Void Reading
                        </button>
                    @endif
                </div>

                @if ($canVoidReading && !$canDisregard)
                    {{-- The stranded case: newer readings sit after this one, so Edit
                         and Disregard are both closed and Void is the only way out. --}}
                    <div class="alert alert-secondary mt-3 mb-0 small">
                        <i class="bi bi-info-circle"></i>
                        Newer approved readings exist for {{ $reading->client->name }}, so this one can no
                        longer be corrected or disregarded. <strong>Void Reading</strong> takes it out
                        together with its billing; the readings after it keep the figures they were
                        already billed on.
                    </div>
                @endif
            </div>
        </div>
    @endif

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

@if ($canVoidReading)
    <div class="modal fade" id="voidReadingModal" tabindex="-1" aria-labelledby="voidReadingModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('meter-readings.void', $reading) }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header bg-dark text-white">
                        <h5 class="modal-title" id="voidReadingModalLabel">
                            <i class="bi bi-x-octagon"></i> Void Meter Reading
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <strong>Reading #{{ $reading->id }}</strong> for {{ $reading->client->name }}
                            ({{ number_format((float) $reading->reading_value, 2) }} cu.m taken
                            {{ $reading->reading_date->format('M d, Y') }}) will be voided.
                            <ul class="mb-0 mt-2 small">
                                @if ($activeBilling)
                                    <li>Billing #{{ $activeBilling->billing_number }} is <strong>voided</strong> with it.
                                        @if ((float) $activeBilling->amount_paid > 0)
                                            The ₱{{ number_format($activeBilling->amount_paid, 2) }} collected against it
                                            is reversed and the client's outstanding balance is restored.
                                        @endif
                                    </li>
                                @else
                                    <li>No billing stands against this reading, so there is nothing to reverse.</li>
                                @endif
                                @if ($hasLaterReadings)
                                    <li>Newer approved readings stay exactly as they are — each keeps the
                                        previous reading it was billed on.</li>
                                @else
                                    <li>{{ $reading->client->name }}'s next reading will measure from the
                                        last good reading before this one.</li>
                                @endif
                                <li>Nothing is deleted — the reading stays on record.</li>
                            </ul>
                        </div>

                        <div class="mb-3">
                            <label for="reading_void_reason" class="form-label">
                                Reason <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" id="reading_void_reason" name="void_reason"
                                      rows="2" maxlength="500" required
                                      placeholder="e.g. Duplicate of a later reading, date encoded wrong">{{ old('void_reason') }}</textarea>
                            @error('void_reason')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        @if ($activeBilling)
                            <div class="mb-1">
                                <label for="reading_void_code" class="form-label">
                                    Owner Authorization Code <span class="text-danger">*</span>
                                </label>
                                <input type="password" inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
                                       class="form-control form-control-lg text-center" id="reading_void_code"
                                       name="void_code" autocomplete="off" placeholder="••••••"
                                       style="letter-spacing: .5rem;" required>
                                <small class="form-text text-muted">
                                    Voiding billing #{{ $activeBilling->billing_number }} needs the company
                                    owner's 6-digit code.
                                </small>
                                @error('void_code')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                                @unless ($hasVoidAuthorizer)
                                    <div class="alert alert-danger mt-2 mb-0 small">
                                        No company owner has set an authorization code, so this billing cannot
                                        be voided. Ask the owner to set their void code in their profile first.
                                    </div>
                                @endunless
                            </div>
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-dark"
                                {{ $activeBilling && !$hasVoidAuthorizer ? 'disabled' : '' }}>
                            <i class="bi bi-x-octagon"></i> Void Reading
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endif

@if ($canDisregard)
    <div class="modal fade" id="disregardModal" tabindex="-1" aria-labelledby="disregardModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form method="POST" action="{{ route('meter-readings.disregard', $reading) }}">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="disregardModalLabel">
                            <i class="bi bi-slash-circle text-danger"></i> Disregard Meter Reading
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>
                            Reading of <strong>{{ number_format($reading->reading_value, 2) }} cu.m</strong> for
                            <strong>{{ $reading->client->name }}</strong> will be thrown out.
                        </p>
                        <ul class="small text-muted">
                            <li>The next reading will measure from
                                <strong>{{ number_format($reading->previous_reading ?? 0, 2) }} cu.m</strong> instead.</li>
                            @if ($requiresVoidCode)
                                <li>Billing #{{ $activeBilling->billing_number }} will be <strong>voided</strong> and its
                                    ₱{{ number_format($activeBilling->amount_paid, 2) }} in payments reversed.</li>
                            @elseif ($activeBilling)
                                <li>Billing #{{ $activeBilling->billing_number }} will be <strong>cancelled</strong>.</li>
                            @endif
                            <li>Nothing is deleted — the reading stays on record as disregarded.</li>
                        </ul>

                        <div class="mb-3">
                            <label for="disregard_reason" class="form-label">
                                Reason <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control" id="disregard_reason" name="disregard_reason"
                                      rows="3" maxlength="500" required
                                      placeholder="e.g. Reading taken from the wrong meter"></textarea>
                        </div>

                        @if ($requiresVoidCode)
                            <div class="mb-3">
                                <label for="disregard_void_code" class="form-label">
                                    Owner Authorization Code <span class="text-danger">*</span>
                                </label>
                                <input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="6"
                                       class="form-control" id="disregard_void_code" name="void_code"
                                       placeholder="6-digit code" autocomplete="off" required>
                            </div>

                            @unless ($hasVoidAuthorizer)
                                <div class="alert alert-danger mb-0">
                                    <i class="bi bi-x-octagon"></i>
                                    No company owner has set an authorization code, so this billing cannot be voided.
                                    Ask the owner to set their void code in their profile first.
                                </div>
                            @endunless
                        @endif
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger"
                                {{ $requiresVoidCode && !$hasVoidAuthorizer ? 'disabled' : '' }}>
                            <i class="bi bi-slash-circle"></i> Disregard Reading
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endif
@endsection

@section('scripts')
<script>
    // The Angle template makes .wrapper (.modal-open .wrapper { z-index: 0 })
    // and .section-container (z-index: 111) stacking contexts, and both modals
    // on this page are declared inside the content section, inside both.
    // Bootstrap appends the backdrop straight to <body>, so from there it
    // paints over the whole wrapper - the dark overlay covers the page and the
    // dialog sits behind it, unclickable. Re-parenting each modal to <body>
    // puts it back above the backdrop. Same fix as components/void-billing-modal.
    // (Careful with Blade directive names in these comments: Blade compiles
    // them even inside a script block.)
    document.addEventListener('DOMContentLoaded', function () {
        ['voidReadingModal', 'disregardModal'].forEach(function (id) {
            var el = document.getElementById(id);
            if (el && el.parentNode !== document.body) {
                document.body.appendChild(el);
            }
        });

        // Digits only, so the 6-digit rule is met before the request is sent.
        var code = document.getElementById('reading_void_code');
        if (code) {
            code.addEventListener('input', function () {
                this.value = this.value.replace(/\D/g, '').slice(0, 6);
            });
        }
    });
</script>
@endsection