@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 class="col-md-2">
          <form method="GET" action="{{ route('data-list-tabular') }}">
              <div class="input-group">
                <input type="text" class="form-control" name="search" placeholder="Search..." value="{{ Request::input('search') }}">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary" data-toggle="tooltip" data-original-title="Search"><i class="icon-search nav-icon" aria-hidden="true"></i></button>
                  <a href="{{ route('data-list-tabular') }}" class="btn btn-danger" data-toggle="tooltip" data-original-title="Clear Search"><i class="icon-close nav-icon" aria-hidden="true"></i></a>
                </span>
              </div>
          </form>
          </div>
</div>
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
			<table class="table table-hover table-bordered">
									<thead>
										<tr>
											 <td>Device ID </td>
											 <td> MSN</td>
											 <td> SIM No</td>
											 <td> Capacity (kva)</td>
											 <td> Mode</td>
											 <td> Type</td>
											 <td> Category</td>
											 <td> installed On</td>
											 <td>Peak Unit </td>
											 <td>Offpeak Unit </td>
											 <td>Switch Status</td>
											 <td> Action</td>

										</tr>
									</thead>
						@foreach($data as $k =>$row)






										<tr>

											<td>  {{$row->global_device_id}}</td>

											<td>  {{$row->msn}}</td>
											<td>  {{$row->sim_number}}</td>
											<td>  {{$row->kva}}</td>
											<td>  {{($row->dmdt_bidirectional_device) ? 'Gross Meter' :'Net Meter' }} </td>

											<td>  {{$row->dmdt_phase}} Phase</td>
											<td>  {{$row->category}}</td>
											<td>  {{$row->installed_on}}</td>
											<td>  {{$row->peak}}</td>
											<td>  {{$row->offpeak}}</td>

											<td>  @if($row->auxr_status) 
												 <span class="badge badge-success"> On</span> 
												 @else		
													<span class="badge badge-danger"> OFF</span>
													@endif	
											</td>
											
											<td>
											<a href="#"  data-g-id="{{$row->global_device_id}}" class="btn btn-primary btn-sm get_config">
											view Config
											</a>

											<a href="{{route('editTransformerForm',$row->global_device_id)}}" class="btn btn-primary btn-sm">
											Edit
											</a>

											<a href="{{route('item-data-delete',$row->global_device_id)}}" class="btn btn-danger btn-sm">
											Delete
											</a>

											{{-- <a href="{{route('item-data',$row->global_device_id)}}" class="btn btn-">
											View Details
										</a>
										@if($row->status=='On')
										<a href="{{route('item-switch',$row->global_device_id)}}" class="btn btn-danger ">
											Switch Off
										</a>
										@else

										<a href="{{route('item-switch',$row->global_device_id)}}" class="btn btn-success btn-xs" tad-tr-id="{{$row->trid}}">
											Switch On
										</a>
										@endif
										--}}
											</td>
										</tr>

				@endforeach
				</table>
				</div>
				{{ $data->appends(['search' => Request::input('search')])->links('vendor.pagination.bootstrap-4') }}

				<!-- Modal -->
					<div class="modal fade" id="deviceModal" tabindex="-1" aria-labelledby="deviceModalLabel" aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="deviceModalLabel">Device Configuration</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body">
						<div id="deviceDataFlex" class="d-flex flex-wrap gap-3">
						<!-- Dynamic content will be inserted here using Flexbox -->
						</div>
						</div>
						</div>
					</div>
					</div>
					</div>
					@push('scripts')
					<script>

$(document).ready(function() {
    $(document).on('click', '.get_config', function() {
        var id = $(this).data('g-id');
        
        $.ajax({
            url: "{{ url('get-cofiguration') }}/" + id,
            type: "GET",
            dataType: "json",
            success: function(response) {
                console.log("Device Data:", response);
				
                // Create dynamic content using Flexbox
                var deviceDataHtml = '';
                for (var key in response.data) {
                    if (response.data.hasOwnProperty(key)) {
                        // Create a card (flex item) for each key-value pair
                        deviceDataHtml += `
                            <div class="card p-2" style="width: 200px;">
                                <div class="card-body">
                                    <strong>${key}</strong>: ${response[key]}
                                </div>
                            </div>
                        `;
                    }
                }

                // Insert the generated HTML into the flex container
                $('#deviceDataFlex').html(deviceDataHtml);

                // Show the modal
                var myModal = new bootstrap.Modal(document.getElementById('deviceModal'));
                myModal.show();
            },
            error: function(xhr) {
                console.error("Error fetching data:", xhr);
            }
        });
    });
});
					</script>
					@endpush
@endsection()