@extends('layout.side-menu')

@push('styles')
    <style>
        #live_view_for,
        #auto_fill_for {
            width: 166px;
            max-width: 100%;
        }
        #auto_fill[type=checkbox]:disabled + div,
        #live_view[type=checkbox]:disabled + div {
            opacity: .2;
        }
        #auto_fill[type=checkbox],
        #live_view[type=checkbox] {
            display: none;
        }
        #auto_fill[type=checkbox]:checked + div,
        #live_view[type=checkbox]:checked + div {
            background: gray
        }
        #auto_fill[type=checkbox]:checked + div > div,
        #live_view[type=checkbox]:checked + div > div {
            right: .25rem
        }
    </style>
@endpush

@section('subcontent')
    <form action="{{ route('dashboard.hks.voltaje') }}" method="POST" class="intro-y box">
        @csrf
        <input type="hidden" value="export" name="export">
        <input type="hidden" name="autoFillC" value="1">
        <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="flex px-2">
            <label class="flex -mx-2 w-full md:w-auto items-center cursor-pointer" for="live_view" id="live_view_for">
                <div class="w-10 py-1 relative my-1 cursor-pointer mx-2">
                    <input type="checkbox" id="live_view" checked="false" disabled="true">
                    <div class="h-4 bg-teal-600 rounded-full">
                        <div class="ml-1 w-3 h-3 absolute transition-all transform ease-linear duration-100 flex items-center justify-center rounded-full bg-white shadow-toggle border-gray-500" style="top: .35rem"></div>
                    </div>
                </div>
                <span class="mx-2">
                    Live view&trade;
                </span>
            </label>

            <label class="flex -mx-2 w-full md:w-auto items-center cursor-pointer" for="auto_fill">
                <div class="w-10 py-1 relative my-1 cursor-pointer mx-2">
                    <input type="checkbox" id="auto_fill" disabled="true">
                    <div class="h-4 bg-teal-600 rounded-full">
                        <div class="ml-1 w-3 h-3 absolute transition-all transform ease-linear duration-100 flex items-center justify-center rounded-full bg-white shadow-toggle border-gray-500" style="top: .35rem"></div>
                    </div>
                </div>
                <span class="mx-2">
                    Autofill&trade;
                </span>
            </label>

            <div class="w-auto ml-auto">
                <button type="submit" class="button bg-theme-1 text-white">DESCARGAR</button>
            </div>
        </div>

        <div class="grid grid-cols-12 gap-1 p-5 hidden">
            <div class="col-span-12 md:col-span-12  lg:col-span-12">
                <div id="live_view_on" class="ml-auto flex text-theme-9 font-medium" style="display: none">
                    <i data-loading-icon="rings" class="w-5 h-5"></i>Live view&trade;</div>
                <div id="live_view_off" class="ml-auto flex text-theme-6 font-medium"> <i data-loading-icon="rings" class="w-5 h-5"></i>Live view&trade;</div>
            </div>
            <div class="col-span-12 md:col-span-12 lg:col-span-12">
                <div id="auto_fill_on" class="ml-auto flex text-theme-9 font-medium"> <i data-loading-icon="rings" class="w-5 h-5"></i>Autofill&trade;</div>
                <div id="auto_fill_off" class="ml-auto flex text-theme-6 font-medium" style="display: none"> <i data-loading-icon="rings" class="w-5 h-5"></i>Autofill&trade;</div>
            </div>
        </div>

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

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

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

@push('scripts')
    <!-- BEGIN: JS MasterApp-->
    <script>
        var urlVoltaje = @json(route('dashboard.hks.voltaje'));
    </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-hks2.js') }}"></script>
    <!-- END: JS MasterApp-->
@endpush