@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 Solar</h3>
        </div>
        <div class="col-span-12 md:col-span-6 lg:col-span-3">
            @selectProjects
            <small class="text-gray-700">RANGO DE FECHAS</small>
        </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 class="grid grid-cols-12">
                <div class="col-span-12 px-5">
                    <input id="dateRangePicker" class="input w-56 border block">
                </div>

                <div id="potencia_radiacion"
                    class="col-span-12 mb-8"></div>

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

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

                <div id="energia_consumida"
                    class="col-span-12 mb-8"></div>

                <div id="energia_generada"
                    class="col-span-12 lg:col-span-6 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>
        var url_data_sc = @json(route('sc.data'));
        let startDate   = "{{ date('d/m/Y')}}"+" 00:00";
        let endtDate    = "{{ date('d/m/Y')}}"+" 23:59";
    </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-sc.js?v=12') }}"></script>
    <!-- END: JS MasterApp-->
@endpush