@extends('layouts.app')

@section('center')
<style>
.logo-container {
  position: relative;
  top: 150px; /* Adjust the value to move the logo slightly upward */
}


	</style>



<div class="site-award">
<div class="row gutters">
{{--  
<div class="col-12 text-center mb-4">
	
            <div class="logo-container">
                <img src="{{env('LOGO')}}" width="200" class="imageSpin" alt="Logo" />
            </div> 
					

			
        </div>
		--}}
		<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
							<div style="width: 400px; margin: auto;"> 
						<canvas id="summaryDonutChart" width="200" height="200"></canvas>
						</div>
						</div>
						{{--<div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-12">
							<div class="hospital-tiles">
								<img src="{{asset('assets')}}/img/hospital/appointment.svg" alt="Appointments" />
								<p>Total Meter</p>
								<h2>{{$data['t_trans']}}</h2>
							</div>
						</div>
						<div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-12">
							<div class="hospital-tiles">
								<img src="{{asset('assets')}}/img/hospital/patient.svg" alt="Patients" />
								<p>On Meter</p>
								<h2>{{$data['i_trans']}}</h2>
							</div>
						</div>
						<div class="col-xl-3 col-lg-3 col-md-4 col-sm-4 col-12">
							<div class="hospital-tiles">
								<img src="{{asset('assets')}}/img/hospital/operation.svg" alt="Operations" />
								<p>Off Meter</p>
								<h2>{{$data['o_trans']}}</h2>
							</div>
						</div>
						--}}

						

						<!-- <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6">
							<div class="hospital-tiles">
								<img src="{{asset('assets')}}/img/hospital/revenue.svg" alt="Earnings" />
								<p>Earnings</p>
								<h2>$900k</h2>
							</div>
						</div> -->
						<div class="col-md-6">
<div style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; padding: 15px; background: #fff;">
    <h4>Recent Alerts</h4>
    <ul class="list-group">
      @if($alerts && empty(!$alerts))
        @foreach($alerts as $alert)
            <li class="list-group-item d-flex justify-content-between align-items-center" 
                style="border-left: 5px solid 
                    @if(str_contains(strtolower($alert->event_code), 'critical')) #dc3545
                    @elseif(str_contains(strtolower($alert->event_code), 'warning')) #ffc107
                    @else #17a2b8 @endif;">
                <div>
                    <strong>{{ $alert->event_code }}</strong> - {{ $alert->event_description }}<br>
                    <small>Device: {{ $alert->global_device_id }}</small>
                </div>
                <span class="badge badge-pill badge-secondary">{{ $alert->created_at ?? '' }}</span>
            </li>
        @endforeach
        @else
        <li class="list-group-item d-flex justify-content-between align-items-center" 
                style="border-left: 5px solid 
                    @if(str_contains(strtolower($alert->event_code), 'critical')) #dc3545
                    @elseif(str_contains(strtolower($alert->event_code), 'warning')) #ffc107
                    @else #17a2b8 @endif;">
                <div>
                    <strong>Alert</strong> - Not Found<br>
                    
                </div>
                <span class="badge badge-pill badge-secondary"></span>
            </li>
        @endif
    </ul>
</div>
</div>
					</div>
					
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- resources/views/dashboard.blade.php -->

<script>
  const ctx = document.getElementById('summaryDonutChart').getContext('2d');

  // Replace these with real counts from your Laravel controller passed as variables
  const data = {
    labels: ['Transformer Meters', 'Users Meter'],
    datasets: [{
      label: 'Total',
      data: [{{ $data['trans']}}, {{$data['connect']}}],
      backgroundColor: [
        '#42a5f5', // blue
        '#66bb6a'
      ],
      hoverOffset: 30,
      cutout: '60%'  // creates donut hole
    }]
  };

  const config = {
    type: 'doughnut',
    data: data,
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            font: {
              size: 14
            }
          }
        },
        tooltip: {
          enabled: true
        }
      }
    }
  };

  new Chart(ctx, config);
</script>

@endpush
@endsection()