@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">HKS Antucoya</h3>
                </div>
            </div>
            <div class="flex items-center flex-wrap gap-x-2 justify-between">
                <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>

                <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>
            </div>
        </form>

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

                <div id="antucoya-voltimetro2" class="col-span-12 lg:col-span-6 mb-8"></div>

                <div id="antucoya-voltimetro3" class="col-span-12 lg:col-span-6 mb-8"></div>

                <div id="antucoya-medidor-particules" class="col-span-12 lg:col-span-6 mb-8"></div>

                <div id="antucoya-medidor-voltajes" class="col-span-12 lg:col-span-6 mb-8"></div>
            </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'));
        var urlAntucoyaVoltimetro1 = @json(route('modulos.hks.antucoya.voltimetro1'));
        var urlAntucoyaVoltimetro2 = @json(route('modulos.hks.antucoya.voltimetro2'));
        var urlAntucoyaVoltimetro3 = @json(route('modulos.hks.antucoya.voltimetro3'));
        var urlMedidorParticulas = @json(route('modulos.hks.antucoya.medidorParticulas'));
        var urlMedidoresVoltajes = @json(route('modulos.hks.antucoya.medidoresVoltajes'));
    </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-antucoya-hks.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