@extends('layout.side-menu')


@section('subcontent')
    <div class="intro-y box  px-5 pt-5">
        <div class="grid grid-cols-12 gap-1">
            <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">Sensor partículas</h3>
            </div>
            <div class="col-span-12 md:col-span-6  lg:col-span-3">
                {{-- @selectProjects --}}
                @includeIf('layout.components.select-projects')
            </div>
        </div>

        <!-- BEGIN: Chat Side Menu -->
        <div class="intro-y chat col-span-12 grid grid-cols-12 gap-5 mt-5">
            <div class="col-span-12 lg:col-span-4 xxl:col-span-3">
                <div class="intro-y">
                    <div class="box p-2 bg-white">
                        <div class="chat__tabs nav-tabs justify-center flex">
                            <a data-toggle="tab" id="medidor_nav_tab" data-target="#tab-1" href="javascript:;"
                                class="flex-1 py-2 rounded-md text-center active">
                                Control neblina ácida
                            </a>
                            <a data-toggle="tab" id="inversor_nav_tab" data-target="#tab-2" href="javascript:;" class="flex-1 py-2 rounded-md text-center">
                                {{ isset($project) ? $project->name : 'Partículas' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-span-12 lg:col-span-8 xxl:col-span-9 | flex items-end justify-end"  id="response-estatus">
            </div>

            <div class="col-span-12 tab-content" id="response-ultima_ubicacion">
            </div>

            <!-- END: Chat Side Menu -->
            <div class="col-span-12 tab-content">
                <div class="tab-content__pane" id="tab-2">
                    <div class="grid grid-cols-12 gap-1 p-5">
                        <form method="POST" action="{{ route('minera-antucoya.graficas.dashboard.export') }}" class="col-span-12 | flex items-center justify-between">
                            @csrf

                            <input type="hidden" name="project">

                            <div class="contaner-grafic loading--full max-w-full" style="width: 265px; max-width: 100%">
                                <input id="dateRangePicker" name="range" class="input border block max-w-full w-full">
                            </div>

                            <div>
                                <button type="submit" class="button bg-theme-1 text-white">
                                    Exportar datos
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="grid grid-cols-12 gap-1 p-5" id="container-graphics">
                        <div class="col-span-12" style="display: none">
                            <div class="w-full | flex item gap-1 items-end">
                                <div class="flex flex-1 gap-1">
                                    <div class="flex-1">
                                        <label class="text-sm pl-3">β1</label>
                                        <input type="number" value="1" placeholder="β1" name="neblina-v1" id="neblina-v1" class="input border block max-w-full w-full px-1 xl:px-2">
                                    </div>
                                    <div class="flex-1">
                                        <label class="text-sm pl-3">β2</label>
                                        <input type="number" value="1" placeholder="β2" name="neblina-v2" id="neblina-v2" class="input border block max-w-full w-full px-1 xl:px-2">
                                    </div>
                                    <div class="flex-1">
                                        <label class="text-sm pl-3">β3</label>
                                        <input type="number" value="1" placeholder="β3" name="neblina-v3" id="neblina-v3" class="input border block max-w-full w-full px-1 xl:px-2">
                                    </div>
                                    <div class="flex-1">
                                        <label class="text-sm pl-3">β4</label>
                                        <input type="number" value="1" placeholder="β4" name="neblina-v4" id="neblina-v4" class="input border block max-w-full w-full px-1 xl:px-2">
                                    </div>
                                </div>
                                <div class="">
                                    <button type="button" id="search-neblina" class="button contaner-grafic loading--full text-white bg-theme-1">
                                        <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path></svg>
                                    </button>
                                </div>
                            </div>
                            <div class="w-full p-1 text-center">
                                <p>
                                    NEW PMn= β1 + β2*PM1 + β3*PM25 + β4*PM10
                                </p>
                            </div>
                        </div>

                        <div class="col-span-12">
                            <div id="grafica-particulas-ambiente" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                        </div>

                        <div class="col-span-12 mt-5">
                            <div id="grafica-densidad-particulas" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                        </div>

                        <div class="col-span-12 mt-5">
                            <div id="grafica-tipico_particulas" style="min-height: 300px" class="contaner-grafic w-full loading--full"></div>
                        </div>
                    </div>
                </div>

                <div class="tab-content__pane active" id="tab-1">
                    <div class="col-span-12 p-5">
                        <div class="contaner-grafic loading--full max-w-full" style="width: 265px; max-width: 100%">
                            <input id="dateRangePickerNeblina" name="range-neblina" class="input border block max-w-full w-full">
                        </div>
                    </div>

                    <div class="col-span-12 mt-5">
                        <div id="grafica-neblina-acida" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                    </div>

                    <div class="col-span-12 mt-5">
                        <div id="grafica-weather" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                    </div>

                    <div class="col-span-12 mt-5">
                        <div id="grafica-weather-velocity" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                    </div>


                    <div class="col-span-12 mt-5">
                        <div id="grafica-weather-direction" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                    </div>

                    <div class="col-span-12 mt-5">
                        <div class="grid grid-cols-12 gap-1">
                            <div class="col-span-6 flex items-center text-xl flex-col h-full justify-center">
                                <div id="grafica-polar1" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                            </div>
                            <div class="col-span-6 flex items-center text-xl flex-col h-full justify-center">
                                <div id="grafica-polar2" style="min-height: 600px" class="contaner-grafic w-full loading--full"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <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>

    @php
        use Carbon\Carbon;
        $startDate = Carbon::today()->subDays(7)->startOfDay()->format('d/m/Y 00:00:00');
        $endDate = Carbon::today()->format('d/m/Y 23:59:59');
    @endphp

    <script>
        $('input[name="project"]').val($("#project-id").val());

        let endtDate = @json($endDate);
        let startDate = @json($startDate);
        let configurations = {
            use: false,
            project: $("#project-id").val(),
            range:  {
                'range': @json($startDate . ' - ' . $endDate),
                'startDate': @json($startDate),
                'endDate': @json($endDate),
            },
            routes: {
                dashboard: @json(route('minera-antucoya.graficas.dashboard')),
            }
        };

        let endtDateNeblina = @json($endDate);
        let startDateNebline = @json($startDate);
        let configurations_neblina_acida = {
            use: false,
            project: $("#project-id").val(),
            range:  {
                'range': @json($startDate . ' - ' . $endDate),
                'startDate': @json($startDate),
                'endDate': @json($endDate),
            },
            routes: {
                dashboard: @json(route('minera-antucoya-default-neblina.graficas.dashboard')),
            }
        };
    </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-antucoya-default.js?2121') }}?v=2026090402"></script>
@endpush