@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">Analizador de Redes</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-voltaje -->
                <div class="col-span-12">
                    <div id="grafica-voltaje" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                </div>
                <!-- CONTENEDOR:grafica-potencia -->
                <div class="col-span-12">
                    <div id="grafica-potencia" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                </div>

                <!-- CONTENEDOR:grafica-energia -->
                <div class="col-span-12">
                    <div id="grafica-energia" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <style>
        button.contaner-grafic_loading.loading--full:before {
            pointer-events: none
        }
        .contaner-grafic_loading.loading--full > svg {
            visibility: hidden;
        }
        .contaner-grafic_loading.loading--full:before {
            width: 100%;
            height: 100%;
        }
    </style>

    <script>
        let configurations = {
            use: false,
            project: $("#project-id").val(),
            range:   $("#range").val(),
            routes: {
                dashboard: @json(route('analizador-redes.graficas.dashboard')),
            },
        };
        let startDate = @json(date('d/m/Y', strtotime('0 days')) . ' 00:00');
        let endtDate = @json(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/dashboard/dashboard-analizador-redes.js') }}"></script>

@endpush