@extends('layout.side-menu')


@section('subcontent')
    <div class="intro-y box">
        <div class="grid grid-cols-12 gap-1 px-5 pt-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">
            <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;">
                    <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>
@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>

    <script>
        $('input[name="project"]').val($("#project-id").val());
        let configurations = {
            use: false,
            project: $("#project-id").val(),
            range:   $("#range").val(),
            routes: {
                dashboard: @json(route('minera-antucoya.graficas.dashboard')),
            }
        };
        let endtDate = @json(date('d/m/Y') . ' 23:59');
        let startDate = @json(date('d/m/Y', strtotime('0 days')) . ' 00:00');
        let endtDateHistorico = @json(date('d/m/Y') . ' 23:59');
        let startDateHistorico = @json(date('d/m/Y', strtotime('-7 days')) . ' 00:00');
        let configurations_historico = {
            use: false,
            project: $("#project-id").val(),
            routes: {
                dashboard: @json(route('minera-antucoya.graficas.neblina-acida')),
            }
        };
    </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-minera-antucoya-2024.js?2121') }}?v=202421145"></script>
@endpush