@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">Chuspa Solar</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">
            <div class="grid grid-cols-12">
                <div class="col-span-12 px-5">
                    <input id="dateRangePicker" class="input w-56 border block">
                </div>

                <!-- CONTENEDOR:grafica-inversor -->
                <div id="grafica-inversor" class="col-span-12 mb-8"></div>

                <div id="grafica-inversor-voltaje" class="col-span-12 mb-8"></div>

                <!-- CONTENEDOR:grafica-piranometro -->
                <div id="grafica-piranometro" class="col-span-12 mb-8"></div>

                <!-- CONTENEDOR:grafica-MPPT -->
                <div id="grafica-MPPT" class="col-span-12 mb-8"></div>
            </div>
        </div>
    </div>

    <input type="hidden" id="range" name="range" />

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


@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <script>
        const url_data_grafica_inversor = @json(route('modulos.chuspa-solar.grafica-inversor')),
            url_data_grafica_piranometro = @json(route('modulos.chuspa-solar.grafica-piranometro')),
            url_data_grafica_MPPT = @json(route('modulos.chuspa-solar.grafica-MPPT'));

        let startDate   = "{{ date('d/m/Y')}}"+" 00:00"
            endtDate    = "{{ date('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: {
                'days': 31
            },
            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>

    <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-chuspa-solar.js') }}"></script>
    <!-- END: JS MasterApp-->

@endpush