@extends('layouts.app')
@php
use \App\Helpers\GlobalHelpers as GlobalHelpers;
use \App\Helpers\TMR\TMRHelpers as TMRHelpers;
@endphp
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/tree.css') }}">

<style>
  .scrollable-div {
      max-height: 62vh; /* Adjust the height as needed */
      overflow-y: auto; /* Enable vertical scrolling */
  }
</style>

@endsection

@section('content')

<div class="main main-app p-3 p-lg-3">
    <div class="d-md-flex align-items-center justify-content-between mb-4">
      <div>
        <ol class="breadcrumb fs-sm mb-1 mt-2">
          <li class="breadcrumb-item" aria-current="page">
            <span class="badge bg-primary"><i class="ri-building-2-fill"></i> {{ $Sites->site_name }}</span>
          </li>
          <li class="breadcrumb-item">{{$Title}} / <a href="{{ route('module_ems.sitesmeteredit', $Sites->sites_id)}}"> Sites Meter Profile </a></li>
          <li class="breadcrumb-item active" aria-current="page">{{$Subtitle}}</li>
        </ol>
      </div>
      <div class="d-flex gap-2 mt-3 mt-md-0">
        <a href="{{ route('module_ems.sitesmeteredit', $Sites->sites_id)}}" class="btn btn-white d-flex align-items-center gap-2"><i class="ri-share-line fs-18 lh-1"></i>Sites Meter Profile</a>
        <a href="{{route('home')}}" class="btn btn-primary d-flex align-items-center gap-2"><i class="ri-bar-chart-2-line fs-18 lh-1"></i>Back To Dashboard</a>
      </div>
    </div>

    <div class="row g-3">

    <div class="col-xl-12">

      <div class="row">

        <div class="col-5">
          <div class="card card-post mb-2">

            <div class="card-header">
              <h5 class="main-subtitle mb-0">{{$Subtitle}}</h5>
            </div>

            <form id="form_get_meterprofile" action="{{ route('module_ems.meterprofile') }}" method="GET" onsubmit="spinbtn()">
              @csrf
              <div class="card-body">
                <h5 class="main-subtitle mb-0">Site : {{ $Sites->site_name }}</h5>
                <p class="mb-3">Explore More about Smart Meter Profile Information.</p>

                <div class="row">

                  <div class="col-7">
                    <div class="mb-3">
                      <select required name="emsprf" class="form-select form-select-lg" aria-label=".form-select-lg">
                          <option value="" disabled {{ old('emsprf', $SelectedSiteName->tmr_id ?? '') == '' ? 'selected' : '' }}>Please Choose: </option>
                          @foreach ($EMSProfile as $emsprf)
                              <option value="{{ $emsprf->tmr_id }}" {{ old('emsprf', $SelectedSiteName->tmr_id ?? '') == $emsprf->tmr_id ? 'selected' : '' }}>
                                  {{ $emsprf->ems_tmr_name }}
                              </option>
                          @endforeach
                      </select>
                    </div>
                  </div>

                  <div class="col-5">
                    <div class="d-grid">
                      <button id="btnSubmit" type="submit" class="btn btn-primary btn-lg">
                          Search
                      </button>
                    </div>
                  </div>

                </div>

              </div>
            </form>

          </div>
        </div>

      </div> <!-- end row -->

      <div class="row">
        <div class="col-5">

          @if (isset($SelectedSiteName))
            <div class="card card-post">

              <div class="card-header">
                <h5 class="main-subtitle mb-0">Profile Hierarchy</h5>
              </div>

              <div class="card-body scrollable-div">
                <h5 class="main-subtitle mb-0"></h5>
                <div class="mb-3">

                  <ul class="tree tree-margin mb-3">
                    <li>
                      <a class="btn tier-one flex-fill bg-gradient">{{ $SelectedSiteName->ems_tmr_name }}</a>
                      @php $nodes = TMRHelpers::getPowerGridDetail($SelectedSiteName->tmr_id) @endphp
                      <ul>

                        @foreach($nodes as $node)
                          @if(!TMRHelpers::isMeterType($node->grid_model_tree_node_type))
                            <li>
                              <a class="btn tier-two">{{ $node->grid_model_tree_node_name }}</a>
                              @php $nodes = TMRHelpers::getPowerGridDetail($node->grid_model_tree_node_id) @endphp


                              <ul>
                                @foreach($nodes as $node)
                                  @if(!TMRHelpers::isMeterType($node->grid_model_tree_node_type))
                                    <li>
                                      <a class="btn tier-three">{{ $node->grid_model_tree_node_name }}</a>
                                      @php $nodes = TMRHelpers::getPowerGridDetail($node->grid_model_tree_node_id) @endphp


                                      <ul>
                                        @foreach($nodes as $node)
                                          @if(!TMRHelpers::isMeterType($node->grid_model_tree_node_type))
                                            <li>
                                              <a class="btn tier-four">{{ $node->grid_model_tree_node_name }}</a>
                                            </li>
                                          @else
                                            <li>
                                                <a class="btn tier-device flex-fill bg-gradient">{{ $node->meterManage->meter_name }}</a>
                                                <a class="btn tier-device-sub flex-fill bg-gradient load-meter-profile" href="#" meter-id="{{ $node->meterManage->meter_id }}" meter-grid="{{ $node->grid_model_tree_node_id }}">{{ $node->meterManage->meter_no }}</a>
                                                @if ($node->meterManage->meterProfile)
                                                  <a class="btn tier-device-sub bg-success" alt="Data Linked"><i class="fa-duotone fa-solid fa-link"></i></a>
                                                @else
                                                  <a class="btn tier-device-sub bg-danger" alt="Data Unlink"><i class="fa-duotone fa-solid fa-link-slash"></i></a>
                                                @endif
                                            </li>
                                          @endif
                                        @endforeach
                                      </ul>



                                    </li>
                                  @else
                                    <li>
                                        <a class="btn tier-device flex-fill bg-gradient">{{ $node->meterManage->meter_name }}</a>
                                        <a class="btn tier-device-sub flex-fill bg-gradient load-meter-profile" href="#" meter-id="{{ $node->meterManage->meter_id }}" meter-grid="{{ $node->grid_model_tree_node_id }}">{{ $node->meterManage->meter_no }}</a>
                                        @if ($node->meterManage->meterProfile)
                                          <a class="btn tier-device-sub bg-success" alt="Data Linked"><i class="fa-duotone fa-solid fa-link"></i></a>
                                        @else
                                          <a class="btn tier-device-sub bg-danger" alt="Data Unlink"><i class="fa-duotone fa-solid fa-link-slash"></i></a>
                                        @endif
                                    </li>
                                  @endif
                                @endforeach
                              </ul>

                            </li>

                          @else

                          <li>
                              <a class="btn tier-device flex-fill bg-gradient">{{ $node->meterManage->meter_name }}</a>
                              <a class="btn tier-device-sub flex-fill bg-gradient load-meter-profile" href="#" meter-id="{{ $node->meterManage->meter_id }}" meter-grid="{{ $node->grid_model_tree_node_id }}">{{ $node->meterManage->meter_no }}</a>
                              @if ($node->meterManage->meterProfile)
                                <a class="btn tier-device-sub bg-success" alt="Data Linked"><i class="fa-duotone fa-solid fa-link"></i></a>
                              @else
                                <a class="btn tier-device-sub bg-danger" alt="Data Unlink"><i class="fa-duotone fa-solid fa-link-slash"></i></a>
                              @endif
                          </li>


                          @endif
                        @endforeach
                      </ul>




                    </li>
                  </ul>

                </div>
              </div>
            </div>
          @endif

        </div>

        <div class="col-7">
          <div class="card card-post">

            <div class="card-header">
              <h5 class="main-subtitle mb-0">Meter Details</h5>
            </div>

            <div class="card-body scrollable-div">
              <h5 class="main-subtitle mb-0"></h5>

              {{-- this data-container will be swap partial meter-details --}}
              <div id="data-container">
                Please Select Meter
              </div>

            </div>

          </div>

        </div>

      </div> <!-- end row -->



    </div>

    </div><!-- row -->
    @include('layouts.inc.footer')

</div><!-- main -->

@endsection

@section('js')
  <script type="text/javascript">
    function spinbtn()
    {
        document.getElementById("btnSubmit").innerHTML = '<span id="ShowSpinner" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...';
        document.getElementById("btnSubmit").disabled = true;
        document.getElementById('form_get_meterprofile').submit();
        localStorage.removeItem('meterId');
        localStorage.removeItem('meterGrid');
    }
  </script>

  <script>
    $(document).ready(function() {
    $('.load-meter-profile').on('click', function(e) {
        e.preventDefault();
        var meterId = $(this).attr('meter-id');
        var meterGrid = $(this).attr('meter-grid');
        var uniqueParam = new Date().getTime(); // You can also use Math.random() for a random number

        // Save the state to local storage
        localStorage.setItem('meterId', meterId);
        localStorage.setItem('meterGrid', meterGrid);

        // Load the placeholder template asynchronously
        $('#data-container').load('{{ route("module_placeholder.theme_b") }}', function(response, status, xhr) {
            if (status == "error") {
                console.log("Error loading placeholder: " + xhr.status + " " + xhr.statusText);
            }
        });

        $.ajax({
            url: '{{ route("meterprofile.getMeterDetail", [":meterid", ":metergrid"]) }}'
                .replace(':meterid', meterId)
                .replace(':metergrid', meterGrid) + '?_=' + uniqueParam,
            type: 'GET',

            success: function(response) {
                $('#data-container').html(response);
            },
            error: function(xhr) {
                console.log('AJAX request failed: ' + xhr.responseText);
            }
        });
    });

    // Check if there is saved state in local storage
    var savedMeterId = localStorage.getItem('meterId');
    var savedMeterGrid = localStorage.getItem('meterGrid');

    if (savedMeterId && savedMeterGrid) {
        var uniqueParam = new Date().getTime(); // Ensure unique request

        console.log('Starting AJAX request with saved state...');
        $.ajax({
            url: '{{ route("meterprofile.getMeterDetail", [":meterid", ":metergrid"]) }}'
                .replace(':meterid', savedMeterId)
                .replace(':metergrid', savedMeterGrid) + '?_=' + uniqueParam,
            type: 'GET',

            beforeSend: function() {
                console.log('Before send with saved state...');
                // Load the placeholder template asynchronously
                $('#data-container').load('{{ route("module_placeholder.theme_b") }}', function(response, status, xhr) {
                    if (status == "error") {
                        console.log("Error loading placeholder: " + xhr.status + " " + xhr.statusText);
                    }
                });
            },

            success: function(response) {
                $('#data-container').html(response);
            },
            error: function(xhr) {
                console.log('AJAX request with saved state failed: ' + xhr.responseText);
            }
        });
    }
});

  </script>

@endsection