@extends('layouts.app')

@section('center')
<style>

	.success{
		border-top: 5px solid green !important;
	}

	.gray{
		border-top: 5px solid gray !important;
	}
	.warning{
		border-top: 5px solid yellow !important;
	}
	.info{
		border-top: 5px solid blue !important;
	}

</style>
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/datepicker/css/classic.date.css" />
    <link rel="stylesheet" href="{{asset('assets')}}/vendor/bs-select/bs-select.css" />

<div class="row gutters">
	<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

		<div class="card mb-3">
			<div class="card-body">
				<form action="{{ route('monthly-billing') }}" method="GET" class="form-row align-items-end">
					<div class="form-group col-md-2 mb-2">
						<label class="label">Device ID</label>
						<select class="form-control selectpicker" data-live-search="true" name="DeviceId">
							<option value="">Select Device ID</option>
							@foreach($tr_data as $k => $row)
								<option value="{{ $row->global_device_id }}" @isset($_GET["DeviceId"])
									@if($_GET["DeviceId"] == $row->global_device_id) {{ 'selected' }} @endif
								@endisset>{{ $row->global_device_id }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-group col-md-2 mb-2">
						<label class="label">From</label>
						<input type="date" name="from" class="form-control" value="{{ request('from') }}">
					</div>
					<div class="form-group col-md-2 mb-2">
						<label class="label">To</label>
						<input type="date" name="to" class="form-control" value="{{ request('to') }}">
					</div>
					<div class="form-group col-md-2 mb-2">
						<button type="submit" class="btn btn-primary">Generate</button>
						<a href="{{ route('monthly-billing') }}" class="btn btn-secondary">Reset</a>
					</div>
				</form>
			</div>
		</div>

		<table class="table table-hover table-bordered">
			<thead>
				<tr>
					<td>ID</td>
					<td>MSN</td>
					<td>Device ID</td>
					<td>Meter Date &amp; Time</td>
					<td>Total Active kWh (Import)</td>
					<td>Total Active kWh (Export)</td>
					<td>Total Absolute Active kWh</td>
					<td>Total Reactive kVARh (Import)</td>
					<td>Reading Mode</td>
					<td>Sync Status</td>
					<td colspan="2">Action</td>
				</tr>
			</thead>
			<tbody>
				@forelse($data as $k => $row)
					<tr>
						<td>{{ $row->id }}</td>
						<td>{{ $row->msn }}</td>
						<td>{{ $row->global_device_id }}</td>
						<td>{{ optional($row->meter_datetime)->format('Y-m-d H:i') }}</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>
						<td>{{ number_format($row->reactive_energy_pos_tl, 2) }}</td>
						<td>
							@if($row->reading_mode == 1)
								<span class="badge badge-info">Automatic</span>
							@else
								<span class="badge badge-secondary">Manual</span>
							@endif
						</td>
						<td>
							@if($row->is_synced == 1)
								<span class="badge badge-success">Synced</span>
							@else
								<span class="badge badge-danger">Pending</span>
							@endif
						</td>
						<td colspan="2">
							<a href="{{ route('monthly-billing-show', $row->id) }}" class="btn btn-primary">
								View Details
							</a>
						</td>
					</tr>
				@empty
					<tr>
						<td colspan="11" class="text-center">
							@if(request()->filled('from') || request()->filled('to') || request()->filled('DeviceId'))
								No billing data found for the selected filters.
							@else
								Select a Device ID and/or date range above and click Filter to view billing records.
							@endif
						</td>
					</tr>
				@endforelse
			</tbody>
		</table>

		<div class="d-flex justify-content-center">
			{{ $data->links() }}
		</div>

	</div>
</div>

@push('scripts')
		<script src="{{asset('assets')}}/vendor/datepicker/js/picker.js"></script>
		<script src="{{asset('assets')}}/vendor/datepicker/js/picker.date.js"></script>
		<script src="{{asset('assets')}}/vendor/datepicker/js/custom-picker.js"></script>
		<script src="{{asset('assets')}}/vendor/bs-select/bs-select.min.js"></script>
		<script src="{{asset('assets')}}/js/main.js"></script>
		<script>
				
		</script>
		@endpush
@endsection()