@php
$configData = Helper::appClasses();
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Bulk Meter Readings - ' . $property->name)

@section('content')
<div class="container-fluid">
  <!-- Breadcrumb and header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-0">Bulk Utility Meter Reader</h4>
      <p class="text-muted mb-0">Property: <strong>{{ $property->name }}</strong> &bull; Address: {{ $property->address }}</p>
    </div>
    <a href="{{ route('utility-readings.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i> Back to All Readings
    </a>
  </div>

  @if (session('warning'))
    <div class="alert alert-warning mb-4">{{ session('warning') }}</div>
  @endif

  <!-- Mode Selector Card -->
  <div class="card mb-4">
    <div class="card-body py-3">
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
        <div class="d-flex align-items-center gap-2">
          <span class="fw-semibold">Utility Mode:</span>
          <div class="btn-group" role="group">
            <a href="{{ route('utility-readings.bulk', ['property' => $property->id, 'utility_type' => 'water']) }}"
               class="btn btn-sm {{ $utilityType === 'water' ? 'btn-primary' : 'btn-outline-primary' }}">
              <i class="bi bi-droplet-fill me-1"></i> Water
            </a>
            <a href="{{ route('utility-readings.bulk', ['property' => $property->id, 'utility_type' => 'electricity']) }}"
               class="btn btn-sm {{ $utilityType === 'electricity' ? 'btn-warning' : 'btn-outline-warning' }}">
              <i class="bi bi-lightning-charge-fill me-1"></i> Electricity
            </a>
          </div>
        </div>

        <div class="badge bg-label-info p-2 fs-6">
          Total Units: {{ count($unitsData) }}
        </div>
      </div>
    </div>
  </div>

  <!-- Bulk Form -->
  <form action="{{ route('utility-readings.bulk.store', $property->id) }}" method="POST" id="bulkMeterForm">
    @csrf
    <input type="hidden" name="utility_type" value="{{ $utilityType }}" />

    <div class="card mb-4">
      <div class="card-header border-bottom">
        <div class="row align-items-center">
          <div class="col-md-6 mb-2 mb-md-0">
            <h5 class="mb-0">
              <i class="bi bi-{{ $utilityType === 'water' ? 'droplet-fill text-primary' : 'lightning-charge-fill text-warning' }} me-2"></i>
              Batch Meter Grid ({{ ucfirst($utilityType) }})
            </h5>
          </div>
          <div class="col-md-6">
            <div class="row g-2">
              <div class="col-sm-6">
                <div class="input-group input-group-sm">
                  <span class="input-group-text">Date</span>
                  <input type="date" class="form-control" name="reading_date" value="{{ date('Y-m-d') }}" required />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="input-group input-group-sm">
                  <span class="input-group-text">Ksh/Unit</span>
                  <input type="number" step="0.01" class="form-control" name="rate_per_unit" id="ratePerUnit" value="{{ $defaultRate }}" required />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="table-responsive text-nowrap">
        <table class="table table-hover table-striped mb-0" id="meterTable">
          <thead class="table-light">
            <tr>
              <th style="width: 120px;">Unit</th>
              <th style="width: 140px;">Status</th>
              <th style="width: 160px;">Previous Reading</th>
              <th style="width: 160px;">Last Date</th>
              <th style="width: 220px;">Current Reading</th>
              <th style="width: 160px;">Units Used</th>
              <th class="text-end" style="width: 160px;">Est. Cost (Ksh)</th>
            </tr>
          </thead>
          <tbody>
            @forelse($unitsData as $index => $item)
              @php
                $u = $item['unit'];
                $prev = $item['previous_reading'];
              @endphp
              <tr>
                <td>
                  <strong>Unit {{ $u->unit_number }}</strong>
                  @if($utilityType === 'electricity' && $u->electricity_meter_no)
                    <div class="small text-warning font-monospace"><i class="bi bi-lightning-charge me-1"></i>{{ $u->electricity_meter_no }}</div>
                  @elseif($utilityType === 'water' && $u->water_meter_no)
                    <div class="small text-primary font-monospace"><i class="bi bi-droplet me-1"></i>{{ $u->water_meter_no }}</div>
                  @elseif($u->floor_level || $u->wing_or_block)
                    <div class="small text-muted">{{ implode(' • ', array_filter([$u->wing_or_block, $u->floor_level])) }}</div>
                  @endif
                  <input type="hidden" name="readings[{{ $index }}][unit_id]" value="{{ $u->id }}" />
                </td>
                <td>
                  <span class="badge {{ $u->status === 'occupied' ? 'bg-label-success' : 'bg-label-secondary' }}">
                    {{ ucfirst($u->status) }}
                  </span>
                </td>
                <td>
                  <span class="fw-semibold text-muted prev-val" data-prev="{{ $prev }}">{{ number_format($prev, 2) }}</span>
                </td>
                <td>
                  <span class="small text-muted">{{ $item['last_reading_date'] ? \Carbon\Carbon::parse($item['last_reading_date'])->format('d M Y') : 'Never' }}</span>
                </td>
                <td>
                  <input type="number" step="0.01" min="{{ $prev }}"
                         name="readings[{{ $index }}][current_reading]"
                         class="form-control form-control-sm current-input"
                         placeholder="Enter current reading" />
                </td>
                <td>
                  <span class="fw-bold consumption-val text-primary">0.00</span>
                </td>
                <td class="text-end">
                  <span class="fw-bold cost-val text-success">0.00</span>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="7" class="text-center py-4 text-muted">No units found in this property.</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="card-footer d-flex justify-content-between align-items-center bg-light">
        <div>
          <span class="text-muted small">Total Batch Consumption:</span>
          <strong class="text-primary ms-1" id="totalConsumption">0.00</strong> units &bull;
          <span class="text-muted small ms-2">Total Estimated:</span>
          <strong class="text-success ms-1" id="totalCost">Ksh 0.00</strong>
        </div>
        <button type="submit" class="btn btn-primary" id="saveBulkBtn">
          <i class="bi bi-floppy me-1"></i> Save All Readings
        </button>
      </div>
    </div>
  </form>
</div>
@endsection

@section('page-script')
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const rateInput = document.getElementById('ratePerUnit');
    const table = document.getElementById('meterTable');

    function calculateRow(row) {
      const prevSpan = row.querySelector('.prev-val');
      const currentInput = row.querySelector('.current-input');
      const consumptionSpan = row.querySelector('.consumption-val');
      const costSpan = row.querySelector('.cost-val');

      const prev = parseFloat(prevSpan.getAttribute('data-prev')) || 0;
      const currentVal = currentInput.value.trim();
      const rate = parseFloat(rateInput.value) || 0;

      if (currentVal === '') {
        consumptionSpan.textContent = '0.00';
        costSpan.textContent = '0.00';
        currentInput.classList.remove('is-invalid');
        return { units: 0, cost: 0 };
      }

      const current = parseFloat(currentVal);
      if (current < prev) {
        currentInput.classList.add('is-invalid');
        consumptionSpan.textContent = 'Invalid';
        costSpan.textContent = '0.00';
        return { units: 0, cost: 0 };
      }

      currentInput.classList.remove('is-invalid');
      const consumption = Math.max(0, current - prev);
      const cost = consumption * rate;

      consumptionSpan.textContent = consumption.toFixed(2);
      costSpan.textContent = cost.toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

      return { units: consumption, cost: cost };
    }

    function calculateTotals() {
      let totalUnits = 0;
      let totalCost = 0;

      table.querySelectorAll('tbody tr').forEach(function(row) {
        if (row.querySelector('.current-input')) {
          const res = calculateRow(row);
          totalUnits += res.units;
          totalCost += res.cost;
        }
      });

      document.getElementById('totalConsumption').textContent = totalUnits.toFixed(2);
      document.getElementById('totalCost').textContent = 'Ksh ' + totalCost.toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    table.addEventListener('input', function(e) {
      if (e.target.classList.contains('current-input')) {
        calculateTotals();
      }
    });

    rateInput.addEventListener('input', calculateTotals);
  });
</script>
@endsection