@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>

        <div class="grid grid-cols-12 gap-1 p-5">
            <div class="col-span-12">
                <ul role="list" class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-3" x-max="1">
                    <li class="relative col-span-1 sm:col-span-3 flex shadow-sm rounded-md">
                        <div
                            class="flex-shrink-0 flex items-center justify-center w-16 bg-purple-500 text-white text-sm font-medium rounded-l-md">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                        </div>
                        <div
                            class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                            <div class="flex-1 px-4 py-2 text-sm truncate w-full">
                                <div class="text-gray-900 font-medium hover:text-gray-600">
                                    Sagrados Corazones
                                </div>
                                <ul class="flex flex-col md:flex-row flex-wrap gap-2">
                                    <li class="rounded bg-white px-1 border shadow">
                                        * Planta Solar Colegio
                                    </li>
                                    <li class="rounded bg-white px-1 border shadow">
                                        * Providencia R.M. Santiago
                                    </li>
                                    <li class="rounded bg-white px-1 border shadow">
                                        * 1 Inversor SMA STP40
                                    </li>
                                    <li class="rounded bg-white px-1 border shadow">
                                        * 1 Medidor Trifasico
                                    </li>
                                    <li class="rounded bg-white px-1 border shadow">
                                        * 1 Piranometro Genérico
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>

                    <li class="relative col-span-1 flex shadow-sm rounded-md">
                        <div
                            class="flex-shrink-0 flex items-center justify-center w-16 bg-yellow-500 text-white text-sm font-medium rounded-l-md">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        </div>
                        <div
                            class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                            <div class="flex-1 px-4 py-2 text-sm truncate">
                                <div class="text-gray-900 font-medium hover:text-gray-600">
                                    Generación Total
                                </div>
                                <p class="text-gray-600 text-lg" id="generacion_total_value">Cargando...</p>
                            </div>
                        </div>
                    </li>

                    <li class="relative col-span-1 flex shadow-sm rounded-md">
                        <div
                            class="flex-shrink-0 flex items-center justify-center w-16 bg-red-600 text-white text-sm font-medium rounded-l-md">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                        </div>
                        <div
                            class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                            <div class="flex-1 px-4 py-2 text-sm truncate">
                                <div class="text-gray-900 font-medium hover:text-gray-600">
                                    Inyección Total
                                </div>
                                <p class="text-gray-600 text-lg" id="energia_inyectada_value">Cargando...</p>
                            </div>
                        </div>
                    </li>

                    <li class="relative col-span-1 flex shadow-sm rounded-md">
                        <div
                            class="flex-shrink-0 flex items-center justify-center w-16 bg-green-500 text-white text-sm font-medium rounded-l-md">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
                        </div>
                        <div
                            class="flex-1 flex items-center justify-between border-t border-r border-b border-gray-200 bg-white rounded-r-md truncate">
                            <div class="flex-1 px-4 py-2 text-sm truncate">
                                <div class="text-gray-900 font-medium hover:text-gray-600">
                                    Consumo Total
                                </div>
                                <p class="text-gray-600 text-lg" id="energia_consumida_value">Cargando...</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="col-span-12">
                <ul role="list" class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-4 mt-3" x-max="1">
                    <li class="relative col-span-1">
                        <x-card-sc title="Potencia Medidor 1">
                            <x-slot name="value">
                                <span id="card_pot_act_total_med1">---</span>
                            </x-slot>
                            <x-slot name="date">
                                <span id="card_fch_med1">---</span>
                            </x-slot>
                            <x-slot name="icon">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </x-slot>
                        </x-card-sc>
                    </li>
                    <li class="relative col-span-1">
                        <x-card-sc color="red-400" title="Potencia Medidor 2">
                            <x-slot name="value">
                                <span id="card_pot_act_total_med2">---</span>
                            </x-slot>
                            <x-slot name="date">
                                <span id="card_fch_med2">---</span>
                            </x-slot>
                            <x-slot name="icon">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </x-slot>
                        </x-card-sc>
                    </li>
                    <li class="relative col-span-1">
                        <x-card-sc color="yellow-400" title="Potencia Medidor 3">
                            <x-slot name="value">
                                <span id="card_pot_act_total_med3">---</span>
                            </x-slot>
                            <x-slot name="date">
                                <span id="card_fch_med3">---</span>
                            </x-slot>
                            <x-slot name="icon">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </x-slot>
                        </x-card-sc>
                    </li>
                    <li class="relative col-span-1 sm:col-span-2 md:col-span-1">
                        <x-card-sc color="blue-400">
                            <x-slot name="title">
                                Potencia inversor - <span id="card_estatus_inv" class="font-semibold text-gray-600"></span>
                            </x-slot>
                            <x-slot name="value">
                                <span id="card_pot_act_total_inv">---</span>
                            </x-slot>
                            <x-slot name="date">
                                <span id="card_fch_inv">---</span>
                            </x-slot>
                            <x-slot name="icon">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </x-slot>
                        </x-card-sc>
                    </li>
                    <li class="relative col-span-1">
                        <x-card-sc color="gray-400" title="Radiación">
                            <x-slot name="value">
                                <span id="card_radiacion">---</span>
                            </x-slot>
                            <x-slot name="date">
                                <span id="card_fch_rad">---</span>
                            </x-slot>
                            <x-slot name="icon">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.636 18.364a9 9 0 010-12.728m12.728 0a9 9 0 010 12.728m-9.9-2.829a5 5 0 010-7.07m7.072 0a5 5 0 010 7.07M13 12a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
                            </x-slot>
                        </x-card-sc>
                    </li>
                </ul>
            </div>

            <div class="col-span-12">
                <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="energiaRange" class="col-span-12 lg:col-span-6 mb-8"></div>
            </div>
        </div>

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

@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <script>
        var urlRadiacion      = @json(route('dashboard.sc.radiacion-last-days'));
        var urlInyeccionMonth = @json(route('dashboard.sc.inyeccion-month'));
        var urlInyeccionYear  = @json(route('dashboard.sc.inyeccion-year'));
        var url_data_sc       = @json(route('dashboard.sc.data'));
        var url_data_cards    = @json(route('dashboard.sc.data-cards'));
    </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-sc.js?v=1234') }}"></script>
    <!-- END: JS MasterApp-->
@endpush