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

        <x-rio-choapa.bombas/>

        <div class="grid grid-cols-12 gap-1 p-5">
            {{-- <div class="col-span-12">
                <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 class="col-span-12">
                <div id="grafica-flujometro" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12">
                <div id="grafica-profundidad" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12">
                <div id="grafica-bombas-agua" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12">
                <div id="grafica-potencia-medidor" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12 lg:col-span-6">
                <div id="grafica-energia-consumida" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12 lg:col-span-6">
                <div id="grafica-volumen-liquido" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12">
                <div id="grafica-voltajes-baterias" class="contaner-grafic w-full"></div>
            </div>
            <div class="col-span-12">
                <div id="grafica-voltaje_panel" class="contaner-grafic w-full"></div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <script>
        let configurations = {
            use: false,
            project: $("#project-id").val(),
            range:   $("#range").val(),
            routes: {
                dashboard: @json(route('rio-choapa.graficas.dashboard')),
                potencia_medidor: @json(route('rio-choapa.piscina-bomba-piscina'))
            }
        };
        let endtDate = "{{ date('d/m/Y') }}"+" 23:59";
        let startDate = "{{ date('d/m/Y', strtotime('-7 days')) }}"+" 00:00";
    </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-rio-choapa.js') }}?v=1121"></script>
    <!-- END: JS MasterApp-->
@endpush