@extends('layouts.app')

@section('center')
<div class="row gutters">
	<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

		<div class="d-flex justify-content-between align-items-center mb-3">
			<h4>Billing Record #{{ $row->id }} &mdash; MSN: {{ $row->msn }}</h4>
			{{-- <a href="{{ route('monthly-billing') }}" class="btn btn-secondary">Back to List</a> --}}
		</div>

		<div class="card mb-3">
			<div class="card-header">Meter Info</div>
			<table class="table table-bordered mb-0">
				<tr><th style="width:30%">Device ID</th><td>{{ $row->global_device_id }}</td></tr>
				<tr><th>Meter Date &amp; Time</th><td>{{ optional($row->meter_datetime)->format('Y-m-d H:i:s') }}</td></tr>
				<tr><th>Longitude / Latitude</th><td>{{ $row->Longitude }} / {{ $row->Latitude }}</td></tr>
				<tr>
					<th>Reading Mode</th>
					<td>{{ $row->reading_mode == 1 ? 'Automatic' : 'Manual' }}</td>
				</tr>
			</table>
		</div>

		<div class="card mb-3">
			<div class="card-header">Active Energy (kWh)</div>
			<table class="table table-bordered mb-0">
				<tr>
					<th>Tariff</th><th>Import</th><th>Export</th><th>Absolute</th>
				</tr>
				@for($t = 1; $t <= 4; $t++)
					<tr>
						<td>T{{ $t }}</td>
						<td>{{ number_format($row->{"active_energy_pos_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"active_energy_neg_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"active_energy_abs_t$t"}, 2) }}</td>
					</tr>
				@endfor
				<tr class="font-weight-bold">
					<td>Total</td>
					<td>{{ number_format($row->active_energy_pos_tl, 2) }}</td>
					<td>{{ number_format($row->active_energy_neg_tl, 2) }}</td>
					<td>{{ number_format($row->active_energy_abs_tl, 2) }}</td>
				</tr>
			</table>
		</div>

		<div class="card mb-3">
			<div class="card-header">Reactive Energy (kVARh)</div>
			<table class="table table-bordered mb-0">
				<tr>
					<th>Tariff</th><th>Import</th><th>Export</th><th>Absolute</th>
				</tr>
				@for($t = 1; $t <= 4; $t++)
					<tr>
						<td>T{{ $t }}</td>
						<td>{{ number_format($row->{"reactive_energy_pos_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"reactive_energy_neg_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"reactive_energy_abs_t$t"}, 2) }}</td>
					</tr>
				@endfor
				<tr class="font-weight-bold">
					<td>Total</td>
					<td>{{ number_format($row->reactive_energy_pos_tl, 2) }}</td>
					<td>{{ number_format($row->reactive_energy_neg_tl, 2) }}</td>
					<td>{{ number_format($row->reactive_energy_abs_tl, 2) }}</td>
				</tr>
			</table>
		</div>

		<div class="card mb-3">
			<div class="card-header">MDI (kW)</div>
			<table class="table table-bordered mb-0">
				<tr>
					<th>Tariff</th><th>Import</th><th>Export</th><th>Absolute</th><th>Cumulative Import</th><th>Cumulative Export</th>
				</tr>
				@for($t = 1; $t <= 4; $t++)
					<tr>
						<td>T{{ $t }}</td>
						<td>{{ number_format($row->{"active_mdi_pos_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"active_mdi_neg_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"active_mdi_abs_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"cumulative_mdi_pos_t$t"}, 2) }}</td>
						<td>{{ number_format($row->{"cumulative_mdi_neg_t$t"}, 2) }}</td>
					</tr>
				@endfor
			</table>
			<div class="p-2">
				<strong>MDI Reset:</strong> {{ optional($row->mdi_reset_datetime)->format('Y-m-d H:i:s') ?? 'N/A' }}
				&nbsp;|&nbsp; <strong>Reset Count:</strong> {{ $row->reset_count }}
			</div>
		</div>

		<div class="card mb-3">
			<div class="card-header">Meter Pictures</div>
			<div class="card-body">
				@if($row->picture_1)
					<img src="data:image/jpeg;base64,{{ base64_encode($row->picture_1) }}" style="max-width:250px" class="mr-2">
				@endif
				@if($row->picture_2)
					<img src="data:image/jpeg;base64,{{ base64_encode($row->picture_2) }}" style="max-width:250px">
				@endif
				@if(!$row->picture_1 && !$row->picture_2)
					<span class="text-muted">No pictures available.</span>
				@endif
			</div>
		</div>

		<div class="card mb-3">
			<div class="card-header">Sync / Log Info</div>
			<table class="table table-bordered mb-0">
				<tr><th style="width:30%">MDC Read Date &amp; Time</th><td>{{ optional($row->mdc_read_datetime)->format('Y-m-d H:i:s') }}</td></tr>
				<tr><th>DB Entry Date &amp; Time</th><td>{{ optional($row->db_datetime)->format('Y-m-d H:i:s') }}</td></tr>
				<tr>
					<th>Sync Status</th>
					<td>
						@if($row->is_synced == 1)
							<span class="badge badge-success">Synced</span>
						@else
							<span class="badge badge-danger">Pending</span>
						@endif
					</td>
				</tr>
			</table>
		</div>

	</div>
</div>
@endsection()