@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <h1 class="text-2xl font-bold mb-6">My Meters</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4" id="meter-grid">
        @foreach (auth()->user()->meters as $meter)
            <a href="{{ route('dashboard.meter', $meter) }}"
               class="block bg-white rounded-xl shadow p-5 hover:shadow-md transition">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-semibold">{{ $meter->meter_number }}</span>
                    <span class="w-2.5 h-2.5 rounded-full {{ $meter->isOnline() ? 'bg-emerald-500' : 'bg-slate-300' }}"></span>
                </div>
                <p class="text-sm text-slate-500">{{ $meter->property_label ?? 'Unnamed property' }}</p>
                <p class="mt-4 text-3xl font-bold {{ $meter->isLowBalance() ? 'text-red-600' : 'text-slate-900' }}">
                    {{ number_format($meter->remaining_units, 1) }} <span class="text-sm font-normal">kWh</span>
                </p>
                @if ($meter->isLowBalance())
                    <p class="text-xs text-red-500 mt-1">Low balance — recharge soon</p>
                @endif
            </a>
        @endforeach
    </div>
@endsection