@extends('layout.side-menu')


@section('subcontent')

<div class="intro-y box">
    <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">MONITOREO</h3>
        </div>
        <div class="col-span-12 md:col-span-6  lg:col-span-3">
            @selectProjects
        </div>
    </div>

    <div class="tab-content">
        <div class="tab-content__pane active" id="day">
            <div class="col-span-12 lg:col-span-6 mt-8 p-5">
            <small class="text-gray-700">RANGO DE FECHAS</small>
                <input id="dateRangePicker" class="input w-56 border block">
            </div>

            <div id="potencia" class="col-span-12 lg:col-span-6 mt-8"></div>

            <div id="voltaje" class="col-span-12 lg:col-span-6 mt-8"></div>

            <div id="energia" class="col-span-12 lg:col-span-6 mt-8"></div>

            <div id="energiaRange" class="col-span-12 lg:col-span-6 mt-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>
            @if (session('project_id') == 11)
                var urlPotencia = @json(route('dashboard.guillermo-solar.potencia'));
                var urlVoltaje = @json(route('dashboard.guillermo-solar.voltaje'));
                var urlEnergia = @json(route('dashboard.guillermo-solar.energia'));
            @else
                var urlPotenciaRange = @json(route('modulos.totalhome.potenciaRange'));
                var urlVoltajeRange = @json(route('modulos.totalhome.voltajeRange'));
                var urlEnergiaRange2 = @json(route('modulos.totalhome.energiaRange'));
            @endif
        </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>
        @if (session('project_id') == 11)
            <script src="{{ asset('js/modulos/modulo-guillermo-solar.js?v=13') }}"></script>
        @else
            <script src="{{ asset('js/modulos/modulo-totalhome2.js') }}"></script>
        @endif
        <!-- END: JS MasterApp-->

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

        /*
        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",
                dateLimit: {
                    'months': 0,
                    'days': 7
                },
                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