@extends('layouts/layoutMaster')

@title('Utility Meter Readings')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">Property Management /</span> Utility Readings
  </h4>

  @if(session('success'))
    <div class="alert alert-success alert-dismissible" role="alert">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  @if($errors->has('current_reading'))
    <div class="alert alert-danger alert-dismissible" role="alert">
      {{ $errors->first('current_reading') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  <div class="row">
    <!-- Readings Ledger Table -->
    <div class="col-md-8">
      <div class="card">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0">Meter Logs</h5>
          @if($properties->isNotEmpty())
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-table me-1"></i> Bulk Enter by Property
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                @foreach($properties as $prop)
                  <li>
                    <a class="dropdown-item" href="{{ route('utility-readings.bulk', $prop->id) }}">
                      {{ $prop->name }}
                    </a>
                  </li>
                @endforeach
              </ul>
            </div>
          @endif
        </div>
        <div class="table-responsive text-nowrap">
          <table class="table table-hover">
            <thead class="table-light">
              <tr>
                <th>Property / Unit</th>
                <th>Utility</th>
                <th>Readings (Prev &rarr; Curr)</th>
                <th>Consumption</th>
                <th>Rate / Cost</th>
                <th>Billed Status</th>
                <th>Date</th>
              </tr>
            </thead>
            <tbody class="table-border-bottom-0">
              @forelse($readings as $reading)
                @php
                  $consumption = max(0, $reading->current_reading - $reading->previous_reading);
                  $totalCost = $consumption * $reading->rate_per_unit;
                @endphp
                <tr>
                  <td>
                    <div class="d-flex flex-column">
                      <span class="fw-semibold text-body">{{ $reading->unit->property->name }}</span>
                      <small class="text-muted">Unit {{ $reading->unit->unit_number }}</small>
                    </div>
                  </td>
                  <td>
                    @if($reading->utility_type === 'water')
                      <span class="badge bg-label-info"><i class="bi bi-droplet-fill me-1"></i> Water</span>
                    @else
                      <span class="badge bg-label-warning"><i class="bi bi-lightning-charge-fill me-1"></i> Electricity</span>
                    @endif
                  </td>
                  <td>
                    {{ number_format($reading->previous_reading, 2) }} &rarr; <strong>{{ number_format($reading->current_reading, 2) }}</strong>
                  </td>
                  <td>
                    <span class="fw-bold">{{ number_format($consumption, 2) }} units</span>
                  </td>
                  <td>
                    <div class="d-flex flex-column">
                      <span>Ksh {{ number_format($reading->rate_per_unit, 2) }} / unit</span>
                      <span class="fw-semibold text-primary">Ksh {{ number_format($totalCost, 2) }}</span>
                    </div>
                  </td>
                  <td>
                    @if($reading->billing_invoice_id)
                      <span class="badge bg-success" title="Invoiced on statement ID">
                        Billed: {{ $reading->invoice->invoice_number }}
                      </span>
                    @else
                      <span class="badge bg-secondary">Unbilled (Pending Invoice)</span>
                    @endif
                  </td>
                  <td>{{ $reading->reading_date->format('M d, Y') }}</td>
                </tr>
              @empty
                <tr>
                  <td colspan="7" class="text-center py-4">
                    <i class="bi bi-speedometer-off fs-1 text-muted mb-2 d-block"></i>
                    <span class="text-muted">No meter readings logged yet.</span>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Record New Reading Card -->
    <div class="col-md-4">
      <div class="card mb-4">
        <div class="card-header border-bottom">
          <h5 class="mb-0">Record Meter Reading</h5>
        </div>
        <div class="card-body pt-3">
          @if($units->isEmpty())
            <div class="alert alert-warning mb-0" role="alert">
              You must register at least one property and unit before recording utility readings.
            </div>
          @else
            <form action="{{ route('utility-readings.store') }}" method="POST">
              @csrf
              <div class="mb-3">
                <label for="unit_id" class="form-label fw-semibold">Select Unit</label>
                <select class="form-select select2" id="unit_id" name="unit_id" data-placeholder="Search unit by property, code, or meter..." required>
                  <option value="" disabled selected>Search unit...</option>
                  @foreach($properties as $property)
                    <optgroup label="{{ $property->name }}">
                      @foreach($property->units as $u)
                        <option value="{{ $u->id }}" {{ old('unit_id') == $u->id ? 'selected' : '' }}>
                          Unit {{ $u->unit_number }} (Rent: Ksh {{ number_format($u->rental_rate, 2) }}{{ $u->electricity_meter_no ? ' • EL: ' . $u->electricity_meter_no : '' }}{{ $u->water_meter_no ? ' • WAT: ' . $u->water_meter_no : '' }})
                        </option>
                      @endforeach
                    </optgroup>
                  @endforeach
                </select>
              </div>

              <div class="mb-3">
                <label for="utility_type" class="form-label">Utility Type</label>
                <select class="form-select" id="utility_type" name="utility_type" required>
                  <option value="water" {{ old('utility_type') == 'water' ? 'selected' : '' }}>Water (Ksh/Unit)</option>
                  <option value="electricity" {{ old('utility_type') == 'electricity' ? 'selected' : '' }}>Electricity (Ksh/Unit)</option>
                </select>
              </div>

              <div class="mb-3">
                <label for="current_reading" class="form-label">Current Meter Reading</label>
                <input type="number" step="0.01" class="form-control" id="current_reading" name="current_reading" value="{{ old('current_reading') }}" placeholder="e.g. 1540.20" required />
                <span class="small text-muted">Initial readings defaults to 0.00 if no logs exist.</span>
              </div>

              <div class="mb-3">
                <label for="rate_per_unit" class="form-label">Rate per Unit (Ksh)</label>
                <input type="number" step="0.01" class="form-control" id="rate_per_unit" name="rate_per_unit" value="{{ old('rate_per_unit', '120.00') }}" placeholder="e.g. 120.00" required />
              </div>

              <div class="mb-3">
                <label for="reading_date" class="form-label">Reading Date</label>
                <input type="date" class="form-control" id="reading_date" name="reading_date" value="{{ date('Y-m-d') }}" required />
              </div>

              <button type="submit" class="btn btn-primary w-100">
                <i class="bi bi-plus-lg me-1"></i> Record Reading
              </button>
            </form>
          @endif
        </div>
      </div>
    </div>
  </div>
</div>
@endsection