@extends('layouts.app')
@section('css')
<link rel="stylesheet" href="{{ asset('assets/css/tree.css') }}">
<link rel="stylesheet" href="{{ asset('assets/css/junixscroll.css') }}">
@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">
            <a href="#modal_sys_prf" data-bs-toggle="modal"><span class="badge bg-primary"><i class="ri-building-2-fill"></i> {{ $Sites->site_name }}</span></a>
          </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>

    <div class="row g-2">

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

      <div class="row">

        <div class="col-lg-6 col-md-4 p-1">
          <div class="card card-post mb-2">

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

              <div class="card-body">
                <p class="mb-3">Explore More about Smart Meter Profile Information.</p>
                <div class="row">
                  <div class="col-12">
                    <div class="mb-3">
                      <select required name="srcsite" id="srcsite-dropdown" class="form-select form-select-lg" aria-label=".form-select-lg">
                          <option value="" disabled selected>Please Choose:</option>
                          @foreach ($EMSProfile as $emsprf)
                              <option value="{{ $emsprf->tmr_id }}">
                                  {{ $emsprf->ems_tmr_name }}
                              </option>
                          @endforeach
                      </select>
                    </div>
                  </div>
                </div>
              </div>

          </div>
        </div>


        <div class="col-lg-6 col-md-8 p-1">
          <div class="card card-post mb-2">

              <div class="card-body">
                <p class="mb-3">Legend</p>
                <div class="row">
                  <div class="col-12">
                    <div class="mb-3">
                      <a class="btn tier-device-sub bg-success" alt="Data Linked"><i class="fa-duotone fa-solid fa-link"></i></a> : TMR Data Linked
                    </div>
                  </div>
                </div>
              </div>

          </div>
        </div>

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

      <div class="row">
        <div class="col-12 col-md-4 p-1">
          <div id="partial-view-sitemeter"></div>
        </div>

        <div class="col-12 col-md-8 p-1">
          <div id="js-meterprofile"></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> Updating...';
      document.getElementById("btnSubmit").disabled = true;
      document.getElementById('module_ems_update_meterprofile').submit();

    }
  </script>

  <script>
    $(document).ready(function() {

      let _token = $('meta[name="csrf-token"]').attr('content');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': _token
        },
      });

      // Load the selected value and partial view content from localStorage on page load
      var selectedValue = localStorage.getItem('selectedSite');
      if (selectedValue) {
        $('#srcsite-dropdown').val(selectedValue);
        loadPartialView(selectedValue, true);
      }

      // Save the selected value to localStorage when changed
      $('#srcsite-dropdown').change(function() {
        var selectedValue = $(this).val();
        localStorage.setItem('selectedSite', selectedValue);
        loadPartialView(selectedValue, false);
      });

      function loadPartialView(selectedValue,isInitialLoad) {
        $.ajax({
          url: '{{ route("module_ems.query.metertreearchy") }}',
          method: 'GET',
          data: {
            emsprf: selectedValue
          },
          cache: false,
          beforeSend: function() {
            $('#partial-view-sitemeter').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) {
            $('#partial-view-sitemeter').html(response);
          },
          error: function(xhr, status, error) {
            console.error('Error:', status, error);
            console.log(xhr.responseText);
          }
        });
      }

      // Reload the partial view content from localStorage
      var partialViewContent = localStorage.getItem('partialViewContent');
      if (partialViewContent) {
        $('#partial-view-sitemeter').html(partialViewContent);
      }

      $('#partial-view-sitemeter').on('click', '.load-meter-profile', function(e) {
          e.preventDefault();

          console.log('Starting load-meter-profile');
          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
          $('#js-meterprofile').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) {
              $('#js-meterprofile').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
                $('#js-meterprofile').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) {
              $('#js-meterprofile').html(response);
            },

            error: function(xhr) {
                console.log('AJAX request with saved state failed: ' + xhr.responseText);
            }
          });
        }
    });

    // for (let i = 0; i < localStorage.length; i++) {
    //   let key = localStorage.key(i);
    //   let value = localStorage.getItem(key);
    //   console.log(`${key}: ${value}`);
    // }

  </script>

@endsection