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

     <!-- Modales -->    
     <div class="modal" id="espera-modal-preview">
        <div class="modal__content modal__content--xl p-10">
            <div class="p-5 text-center"> <i data-loading-icon="ball-triangle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Procesando</div>
                <div class="text-gray-600 mt-2">Esperando la respuesta del servidor</div>
            </div>
            <div class="p-5 text-center border-t border-gray-200"> <p class="text-theme-1">Este proceso tardara unos segundos</p> </div>
        </div>
    </div>

    <div class="modal" id="exito-modal-preview">
        <div class="modal__content">
            <div class="p-5 text-center"> <i data-feather="check-circle" class="w-16 h-16 text-theme-9 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Procesado!</div>
                <div class="text-gray-600 mt-2">El cambio de status fue exitoso!</div>
            </div>
            <div class="px-5 pb-8 text-center"> <button type="button" data-dismiss="modal" class="button w-24 bg-theme-1 text-white">Ok</button> </div>
        </div>
    </div>

    <div class="modal" id="error-modal-preview">
        <div class="modal__content">
            <div class="p-5 text-center"> <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">Ocurrio un error!</div>
                <div class="text-gray-600 mt-2">Intente de nuevo</div>
            </div>
            <div class="px-5 pb-8 text-center"> <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Salir</button></div>
        </div>
    </div>

    <div class="modal" id="error2-modal-preview">
        <div class="modal__content">
            <div class="p-5 text-center"> <i data-feather="x-circle" class="w-16 h-16 text-theme-6 mx-auto mt-3"></i>
                <div class="text-3xl mt-5">El Bomba se encuentra en estatus "Local"</div>
                <div class="text-gray-600 mt-2">Comunicar con el administrador del dispositivo</div>
            </div>
            <div class="px-5 pb-8 text-center"> <button type="button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Salir</button></div>
        </div>
    </div>

    <div class="modal" id="sure-modal-preview"> 
        <div class="modal__content"> 
            <div class="p-5 text-center"> 
                <i data-feather="alert-triangle" class="w-16 h-16 text-theme-12 mx-auto mt-3"></i> 
                    <div class="text-3xl mt-5">Esta seguro de realizar esta operación?</div> 
                        <div class="text-gray-600 mt-2">Realmente esta seguro de realizar esta operación? Esta operación no se puede revertir.</div> 
            </div> 
            <div class="px-5 pb-8 text-center"> 
                <button type="button" id="sure_cancel_button" data-dismiss="modal" class="button w-24 border text-gray-700 mr-1">Cancelar</button> 
                <button type="button" id="sure_button" class="button w-24 bg-theme-1 text-white">Si</button> 
            </div> 
        </div> 
    </div>         

    <!-- Monitoreo y Operación -->

    <div class="intro-y box p-5">
        <div class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200" style="padding-bottom: 5px;">
            <h2 class="font-medium text-base mr-auto">Sistema de riego "El Rincon"</h2>

            <div class="w-full sm:w-auto flex items-center sm:ml-auto mt-3 sm:mt-0">
                <div id ="variador_button_label" class="mr-3 off" style="display: none;">Encender</div>
                <input id="variador_button" class="input input--switch border" style="display: none;" type="checkbox">
            </div>
        </div>
        <div class="mt-5" id="hoverable-table">
            <div class="preview">
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr class="bg-gray-200 text-gray-700">                                
                                <th class="border border-b-2 whitespace-no-wrap">Bomba</th>
                                <th id="var_fecha" class="border border-b-2 whitespace-no-wrap var_effect"></th>
                                <th class="border border-b-2 whitespace-no-wrap">Red Eléctrica</th>
                                <th id="med_fecha" class="border border-b-2 whitespace-no-wrap var_effect"></th>
                                <th class="border border-b-2 whitespace-no-wrap">Generación Solar</th>
                                <th id="inv_fecha" class="border border-b-2 whitespace-no-wrap var_effect"></th>                                                           
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border">Potencia</td>    
                                <td id="var_pot" class="border">-</td>                                                            
                                <td class="border">Pot Act Total</td>
                                <td id="med_pat" class="border">-</td>
                                <td class="border">Pot Act Total</td>
                                <td id="inv_pat" class="border">-</td>
                            </tr>
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border">Velocidad</td>
                                <td id="var_rpm" class="border">-</td>
                                <td class="border">Pot Act F1</td>
                                <td id="med_pa_1" class="border">-</td>
                                <td class="border">MPPT 1</td>
                                <td id="inv_mppt_1" class="border">-</td>
                            </tr>
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border">Corriente</td>
                                <td id="var_corriente" class="border">-</td>
                                <td class="border">Pot Act F2</td>
                                <td id="med_pa_2" class="border">-</td>
                                <td class="border">MPPT 2</td>
                                <td id="inv_mppt_2" class="border">-</td>
                            </tr>       
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border">% Torque</td>
                                <td id="var_torque" class="border">-</td> 
                                <td class="border">Pot Act F3</td>
                                <td id="med_pa_3" class="border">-</td>
                                <td class="border">MPPT 3</td>
                                <td id="inv_mppt_3" class="border">-</td>
                            </tr>   
                            <tr class="hover:bg-gray-200 var_effect">
                            <td class="border">Frencuencia</td>
                                <td id="var_frec" class="border">-</td>  
                                <td class="border">Voltaje F1</td>
                                <td id="med_volt_1" class="border">-</td>
                                <td class="border">T° Inversor</td>
                                <td id="inv_temp" class="border">-</td>    
                            </tr>   
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border" rowspan="2" >Status</td>
                                <td id="var_status" class="border" rowspan="2">-</td>                             
                                <td class="border">Voltaje F2</td>
                                <td id="med_volt_2" class="border">-</td>
                                <td class="border">-</td>
                                <td class="border">-</td>
                            </tr>        
                            <tr class="hover:bg-gray-200 var_effect">
                                <td class="border">Voltaje F3</td>
                                <td id="med_volt_3" class="border">-</td>
                                <td class="border">-</td>
                                <td class="border">-</td>
                            </tr>                                                                                                                       
                        </tbody>
                    </table>
                </div>
            </div>
        </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" id="medidor_nav_tab" data-target="#medidor_tab" href="javascript:;" class="flex-1 py-2 rounded-md text-center active">Medidor</a> 
                    <a data-toggle="tab" id="inversor_nav_tab" data-target="#inversor_tab" href="javascript:;" class="flex-1 py-2 rounded-md text-center">Inversor</a> 
                    <a data-toggle="tab" id="flujometro_nav_tab" data-target="#flujometro_tab" href="javascript:;" class="flex-1 py-2 rounded-md text-center">Flujómetro</a> 
                    <a data-toggle="tab" id="variador_nav_tab" data-target="#variador_tab" href="javascript:;" class="flex-1 py-2 rounded-md text-center">Bomba</a> 
                </div>
            </div>
        </div>
    </div>
    </div>
    <!-- END: Chat Side Menu -->

    <div class="col-span-12 lg:col-span-6 mt-8 p-5">
            <small class="text-gray-700">RANGO DE FECHAS</small>
                <input id="dateRangePicker" class="input w-56 border block">
            </div>

            <div class="tab-content">    
        <div class="tab-content__pane active" id="medidor_tab">
            <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 class="tab-content__pane" id="inversor_tab">
            <div id="potencia_inversor" class="col-span-12 lg:col-span-6 mb-8">

            </div>

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

            </div>
        </div>

        <div class="tab-content__pane" id="flujometro_tab">
            <div id="instant_flow" class="col-span-12 lg:col-span-6 mb-8">

            </div>

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

            </div>
        </div>

        <div class="tab-content__pane" id="variador_tab">
            <div id="variador_1" class="col-span-12 lg:col-span-6 mb-8">

            </div>

            <div id="variador_2" 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 urlPotenciaRange = @json(route('modulos.sgemelrincon.potenciaRange'));
            var urlVoltajeRange = @json(route('modulos.sgemelrincon.voltajeRange'));
            var urlEnergiaRange = @json(route('modulos.sgemelrincon.energiaRange'));
            var urlPotenciaInversorRange = @json(route('modulos.sgemelrincon.potenciaInversorRange'));
            var urlTempInversorRange = @json(route('modulos.sgemelrincon.TempInversorRange'));
            var urlInstantFlowFlujRange = @json(route('modulos.sgemelrincon.InstantFlowFlujRange'));
            var urlPositiveTotalFlujRange = @json(route('modulos.sgemelrincon.PositiveTotalFlujRange'));
            var urlButtonVariador = @json(route('modulos.sgemelrincon.ButtonVariador'));
            var urlLastCallButtonVariador = @json(route('modulos.sgemelrincon.LastCallButtonVariador'));
            var urlRpmVariadorRange = @json(route('modulos.sgemelrincon.RpmVariadorRange'));
            var urlFrecuenciaVariadorRange = @json(route('modulos.sgemelrincon.FrecuenciaVariadorRange'));
        </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-sgem-trifasico.js') }}"></script>
        <!-- END: JS MasterApp-->

        <script>
    startDate = "{{ date('d/m/Y')}}"+" 00:00";
    endtDate = "{{ date('d/m/Y')}}"+" 23:59";
  </script>

  <script>
    /*
     Documentacion màs detallada: https://www.daterangepicker.com/
    */
    $('#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,
      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>
@endpush