@extends('layout.side-menu')


@section('subcontent')

<div class="intro-y box">
    <style>
        #live_view_for,
        #auto_fill_for {
            width: 166px;
            max-width: 100%;
        }
        #auto_fill[type=checkbox]:disabled + div,
        #live_view[type=checkbox]:disabled + div {
            opacity: .2;
        }
        #auto_fill[type=checkbox],
        #live_view[type=checkbox] {
            display: none;
        }
        #auto_fill[type=checkbox]:checked + div,
        #live_view[type=checkbox]:checked + div {
            background: gray
        }
        #auto_fill[type=checkbox]:checked + div > div,
        #live_view[type=checkbox]:checked + div > div {
            right: .25rem
        }
        </style>

    <form action="{{ route('modulos.hks.voltajeRange') }}" method="POST">
        @csrf
        <input type="hidden" value="export" name="export">
        <input type="hidden" name="autoFillC" value="1">
        <div class="grid grid-cols-12 gap-1 p-5">
            <div class="col-span-12 md:col-span-6  lg:col-span-9">
                <h3 class="text-2xl text-gray-700 font-medium leading-none mt-3">GRAFICOS ELÉCTRICOS</h3>
            </div>
            <div class="col-span-12 md:col-span-6 lg:col-span-3">
                @selectProjects
            </div>
        </div>

        <div class="flex px-5 mt-5 mb-1">
            <label class="flex -mx-2 w-auto items-center cursor-pointer" for="live_view" id="live_view_for">
                <div class="w-10 py-1 relative my-1 cursor-pointer mx-2">
                    <input type="checkbox" id="live_view" checked="false" disabled="true">
                    <div class="h-4 bg-teal-600 rounded-full">
                        <div class="ml-1 w-3 h-3 absolute transition-all transform ease-linear duration-100 flex items-center justify-center rounded-full bg-white shadow-toggle border-gray-500" style="top: .35rem"></div>
                    </div>
                </div>
                <span class="mx-2">
                    Live view&trade;
                </span>
            </label>

            <label class="flex -mx-2 w-auto items-center cursor-pointer" for="auto_fill">
                <div class="w-10 py-1 relative my-1 cursor-pointer mx-2">
                    <input type="checkbox" id="auto_fill" disabled="true">
                    <div class="h-4 bg-teal-600 rounded-full">
                        <div class="ml-1 w-3 h-3 absolute transition-all transform ease-linear duration-100 flex items-center justify-center rounded-full bg-white shadow-toggle border-gray-500" style="top: .35rem"></div>
                    </div>
                </div>
                <span class="mx-2">
                    Autofill&trade;
                </span>
            </label>

            <div class="w-auto ml-auto">
                <button type="submit" class="button bg-theme-1 text-white">DESCARGAR</button>
            </div>
        </div>

        <div class="col-span-12 lg:col-span-6 pb-5 px-5">
            <small class="text-gray-700">RANGO DE FECHAS</small>
            <input id="dateRangePicker" name="dateRange" class="input w-56 border block">
        </div>

    </form>
    {{--
    <div class="grid grid-cols-12 gap-1 p-5">
        <div class="col-span-12 md:col-span-12  lg:col-span-12">
            <div id="live_view_on" class="ml-auto flex text-theme-9 font-medium" style="display: none"> <i data-loading-icon="rings" class="w-5 h-5"></i>Live view&trade;</div>
            <div id="live_view_off" class="ml-auto flex text-theme-6 font-medium"> <i data-loading-icon="rings" class="w-5 h-5"></i>Live view&trade;</div>
        </div>
        <div class="col-span-12 md:col-span-12  lg:col-span-12">
            <div id="auto_fill_on" class="ml-auto flex text-theme-9 font-medium"> <i data-loading-icon="rings" class="w-5 h-5"></i>Autofill&trade;</div>
            <div id="auto_fill_off" class="ml-auto flex text-theme-6 font-medium" style="display: none"> <i data-loading-icon="rings" class="w-5 h-5"></i>Autofill&trade;</div>
        </div>
    </div>
     --}}

    <!-- BEGIN: Chat Side Menu -->
    <!-- <div class="intro-y chat grid grid-cols-12 gap-5">
    <div class="col-span-12 lg:col-span-4 xxl:col-span-3">
        <div class="intro-y pr-1">
            <div class="box p-2" style="background-color: #FFFFFF;">
                <div class="chat__tabs nav-tabs justify-center flex"> <a data-toggle="tab" data-target="#day" href="javascript:;" class="flex-1 py-2 rounded-md text-center active">Dia</a> <a data-toggle="tab" data-target="#month" href="javascript:;" class="flex-1 py-2 rounded-md text-center">Mes</a> <a data-toggle="tab" data-target="#year" href="javascript:;" class="flex-1 py-2 rounded-md text-center">Año</a> </div>
            </div>
        </div>
    </div>
    </div> -->
    <!-- END: Chat Side Menu -->

    <div class="tab-content">
        <div class="tab-content__pane active" id="day">
            <div id="voltaje" class="col-span-12 lg:col-span-6 mb-8">
            </div>

            <div id="voltaje_otros" class="col-span-12 lg:col-span-6 mb-8">
            </div>
        </div>
        <div class="tab-content__pane" id="month">
        </div>
        <div class="tab-content__pane" id="year">
        </div>
    </div>

    <input type="hidden" id="fecha_actual" name="fecha_actual" value="{{date('d/m/Y')}}" />
</div>
@endsection

@push('scripts')
        <!-- BEGIN: JS MasterApp-->
        <script>
            var urlVoltajeRange = @json(route('modulos.hks.voltajeRange'));
        </script>

        <script src="{{ asset('plugins/zingcharts/zingchart.min.js') }}"></script>
        <script src="{{ asset('plugins/highcharts/highcharts.js') }}"></script>
        <script src="{{ asset('plugins/highcharts/exporting.js') }}"></script>
        <script src="{{ asset('plugins/highcharts/export-data.js') }}"></script>
        <script src="{{ asset('plugins/highcharts/moment.min.js') }}"></script>
        <script src="{{ asset('plugins/highcharts/moment-timezone-with-data-2012-2022.min.js') }}"></script>
        <script src="{{ asset('js/modulos/modulo-hks2.js') }}"></script>
        <!-- END: JS MasterApp-->


        <script>
    startDate = "{{ date('d/m/Y')}}"+" 00:00";
    endtDate = "{{ date('d/m/Y')}}"+" 23:59";
  </script>

  <script>
    /*
     Documentacion màs detallada: https://www.daterangepicker.com/
    */
    $('#dateRangePicker').daterangepicker({
      timePicker: true,
      timePicker24Hour: true,
      showDropdowns: true,
      minYear: 2010, // El año mminimo.
      startDate: startDate, // Obtiene la fecha actual
      endDate: endtDate, // El fin de fecha es un dia adicional a la fecha actual.
      autoclose: false,
      locale: {
        format: 'DD/M/Y HH:mm',
          separator: " - ",
          applyLabel: "Aplicar",
          cancelLabel: "Cancelar",
          fromLabel: "de",
          toLabel: "hasta",
          customRangeLabel: "Custom",
          daysOfWeek: [
            "dom",
            "lun",
            "mar",
            "mie",
            "jue",
            "vie",
            "sab"
          ],
          monthNames: [
              "enero",
              "febrero",
              "marzo",
              "abril",
              "mayo",
              "junio",
              "julio",
              "agosto",
              "septiembre",
              "octubre",
              "noviembre",
              "diciembre"
          ],
          firstDay: 1
      },
    });
  </script>
@endpush