@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="col-span-12 px-5">
        <div class="contaner-grafic max-w-full" style="width: 265px;">
            <input id="dateRangePicker" class="input border block max-w-full w-full">
        </div>
    </div>

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

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

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

@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <script>
        var urlPotencia = @json(route('dashboard.guillermo-solar.potencia'));
        var urlVoltaje = @json(route('dashboard.guillermo-solar.voltaje'));
        var urlEnergia = @json(route('dashboard.guillermo-solar.energia'));
    </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-guillermo-solar.js?v=13') }}"></script>
    <!-- END: JS MasterApp-->

    <script>
        @php
            $date = \Carbon\Carbon::now();
        @endphp
        startDate = "{{ $date->copy()->subDays(7)->format('d/m/Y') }}" + " 00:00";
        endtDate = "{{ $date->format('d/m/Y') }}"  + " 23:59";

        $('#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,
            dateLimit: {
                'months': 2
            },
            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