@extends('layouts.app')

@section('css')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/tree.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/junixscroll.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/daterangepicker.css') }}?v=2">
@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 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-2">

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

      <form id="form_queryenergymeter" action="{{ route('module_ems.loadenergymeter')}}" method="POST" onsubmit="spinbtn()">
        @csrf
        @method('POST')
        <div class="row">

          <div class="col-12 col-md-5 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">

                  <div class="row">

                    <div class="col-12">
                      <div class="mb-2">
                        <label class="form-label">Range Selector</label>
                        <select required name="srcrange" id="range-selector" class="form-select form-select-lg" aria-label=".form-select-lg">
                          <option value="Daily Range" {{ old('srcrange', 'Daily Range') == 'Daily Range' ? 'selected' : '' }}>Daily Range</option>
                          <option value="Monthly Range" {{ old('srcrange') == 'Monthly Range' ? 'selected' : '' }}>Monthly Range</option>
                        </select>
                      </div>
                    </div>

                    <div class="col-12" id="daily-range" style="{{ old('srcrange', 'Daily Range') == 'Daily Range' ? 'display: block;' : 'display: none;' }}">
                      <div class="mb-2">
                        <label class="form-label">Select Date Range </label>
                        <input readonly required name="srcdaterange" type="text" class="form-control form-control-lg input-daterange-datepicker" value="{{ old('srcdaterange') }}"/>
                      </div>
                    </div>

                    <div class="col-12" id="monthly-range" style="{{ old('srcrange') == 'Monthly Range' ? 'display: block;' : 'display: none;' }}">
                      <div class="mb-2">
                        <label class="form-label"><text class="text-danger">Monthly Date Range (Coming Soon)<text></label>
                        <div class="row">
                          <div class="col-6">
                            <input disabled required name="srcfrmonth" id="srcfrmonth" type="month" class="form-control form-control-lg" value="{{ old('srcfrmonth') }}"/>
                          </div>
                          <div class="col-6">
                            <input disabled required name="srctomonth" id="srctomonth" type="month" class="form-control form-control-lg" value="{{ old('srctomonth') }}"/>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="col-12">
                      <div class="mb-2">
                        <label class="form-label">Visual Report </label>
                        <select required name="srcvisual" class="form-select form-select-lg" aria-label=".form-select-lg">
                          <option value="Graph Visual" {{ old('srcvisual') == 'Graph Visual' ? 'selected' : '' }}>Graph Visual</option>
                          <option value="Data Sheets" {{ old('srcvisual') == 'Data Sheets' ? 'selected' : '' }}>Data Sheets</option>
                        </select>
                      </div>
                    </div>

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

                  </div>

                </div>

            </div>
          </div>

          <div class="col-12 col-md-7 p-1">

            <div id="partial-view-sitemeter"></div>

          </div>

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

    </div>

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

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

@endsection

@section('js')

  <script src="{{ asset('assets/lib/jqueryui/jquery-ui.min.js') }}"></script>
  <script src="{{ asset('assets/lib/moment/min/moment.min.js') }}"></script>
  <script src="{{ asset('assets/lib/daterangepicker/daterangepicker.js') }}"></script>

  <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> Querying Data...';
        document.getElementById("btnSubmit").disabled = true;
        document.getElementById('form_queryenergymeter').submit();
    }
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      var selectedRange = "{{ old('srcrange', 'Daily Range') }}";
      toggleRange(selectedRange);

      $('#range-selector').change(function() {
          var selectedRange = $(this).val();
          toggleRange(selectedRange);
      });

      function toggleRange(selectedRange) {
        if (selectedRange === 'Daily Range') {
          $('#daily-range').show();
          $('#monthly-range').hide();
        } else if (selectedRange === 'Monthly Range') {
          $('#daily-range').hide();
          $('#monthly-range').show();
        }
      }
      var today = new Date();
      var firstDay = new Date(today.getFullYear(), today.getMonth(), 1);

      var oldDateRange = "{{ old('srcdaterange') }}";
      if (oldDateRange === "") {
        $('.input-daterange-datepicker').daterangepicker({
          buttonClasses: ['btn', 'btn-sm'],
          applyClass: 'btn-primary',
          cancelClass: 'btn-default',
          locale: {
              format: 'DD/MM/YYYY' // Ensure consistent date format
          },
          startDate: firstDay,
          endDate: today,
          maxDate: today
        }).val(moment(firstDay).format('DD/MM/YYYY') + ' - ' + moment(today).format('DD/MM/YYYY'));
      } else {
        $('.input-daterange-datepicker').daterangepicker({
          buttonClasses: ['btn', 'btn-sm'],
          applyClass: 'btn-primary',
          cancelClass: 'btn-default',
          locale: {
              format: 'DD/MM/YYYY' // Ensure consistent date format
          },
          maxDate: today,
          startDate: moment(oldDateRange.split(' - ')[0], 'DD/MM/YYYY'),
          endDate: moment(oldDateRange.split(' - ')[1], 'DD/MM/YYYY')
        }).val(oldDateRange);
      }

      var year = today.getFullYear();
      var month = ('0' + (today.getMonth() + 1)).slice(-2);
      var maxDate = year + '-' + month;

      $('#srcfrmonth').attr('max', maxDate);
      $('#srctomonth').attr('max', maxDate);

      var oldFrMonth = "{{ old('srcfrmonth') }}";
      var oldToMonth = "{{ old('srctomonth') }}";

      if (oldFrMonth === "") {
        $('#srcfrmonth').val(maxDate);
      } else {
        $('#srcfrmonth').val(oldFrMonth);
      }

      if (oldToMonth === "") {
        $('#srctomonth').val(maxDate);
      } else {
        $('#srctomonth').val(oldToMonth);
      }

      $('#srcfrmonth').on('change', function() {
        var selectedStartMonth = $(this).val();
        $('#srctomonth').attr('min', selectedStartMonth);
      });

      $('#srctomonth').on('change', function() {
        var selectedEndMonth = $(this).val();
        $('#srcfrmonth').attr('max', selectedEndMonth);
      });

      // Ensure the date picker can be triggered by clicking both the input field and the calendar icon
      $('.input-daterange-datepicker').on('click focus', function() {
        $(this).data('daterangepicker').show();
      });

      $('#srcfrmonth, #srctomonth').on('click', function() {
        this.showPicker(); // Ensures the date picker is shown
      });
    });
  </script>


  <script type="text/javascript">
    $(document).ready(function() {
      let _token = $('meta[name="csrf-token"]').attr('content');
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': _token
        },
      });

      var oldSrcsite = "{{ old('srcsite') }}";
      if (oldSrcsite) {
        loadPartialView(oldSrcsite);
      }

      $('#srcsite-dropdown').change(function() {
        var selectedValue = $(this).val();
        loadPartialView(selectedValue);
      });

      function loadPartialView(selectedValue) {
        $.ajax({
          url: '{{ route("module_ems.query.metertree") }}',
          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);
          }
        });
      }
    });


  </script>

@endsection