@extends('layouts.app')

@section('center')
<style>

	.success{
		border-top: 5px solid green !important;
		/* color:white; */
	}

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

</style>
<div class="row gutters mb-1">

</div>
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
	<h5>Devices list</h5>
			<table class="table table-hover table-bordered">
        <thead>
            <tr>
				<th>#</th>
                <th>Global Device ID</th>
				<th>Mode </th>
				<th>Meter Type</th>
                <th>Meter Category</th>
				<th>installed On</th>
            </tr>
        </thead>
        <tbody>
		@php
			
                function renderDeviceRows($device, $level = 0) {
					static $counter = 1; 
                    echo '<tr>';
					echo '<td> '.$counter++ .'</td>';
                    echo '<td class="indent" style="padding-left:' . ($level * 20) . 'px;">' . $device->global_device_id . '</td>';

					
					echo '<td>';
					if($device->dmdt_bidirectional_device) 
					echo 'Gross Meter';	
					else
					echo 'Net Meter';
					echo '</td>';

					echo '<td>' . $device->dmdt_phase .'Phase</td>';
					
					echo '<td>' . $device->category . '</td>';

					echo '<td>' . $device->installed_on . '</td>';


                    echo '</tr>';

                    if ($device->children && $device->children->count()) {
                        foreach ($device->children as $child) {
                            renderDeviceRows($child, $level + 1);
                        }
                    }
                }
            @endphp

            @foreach ($devices as $device)
                @php renderDeviceRows($device); @endphp
            @endforeach
        </tbody>
    </table>
				</div>

				
					</div>
					@push('scripts')
					
					@endpush
@endsection()