@extends('layouts.index', ['subHeader' => 'Dashboard'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard / home</a>
@endsection

@section('content')
    <link href="{{ mix('css/estilosnew.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ mix('css/sidebar.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('fuentes/stylesheet.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('assets/plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatables.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('css/datatable-whatsking.css') }}" rel="stylesheet" type="text/css" />

    {{-- Estilos --}}
    <style>
        #chartdiv {
            width: 100%;
            height: 600px;
        }
    </style>

    <div class="container-fluid">
        <div class="mb-2 mt-4 shadow-s p-4">
            <h1 class="fs-4 fw-bolder mb-4 mt-3">Servicios Macro</h1>
            <div class="row g-4">
                <div class="col-12 col-md-2">
                    <div class="p-4 shadow-s cardh d-flex align-items-center">
                        <div class="d-flex flex-row justify-content-between">
                            <div class="d-flex flex-column">
                                <span class="fs-4 fw-bolder purple">Mes</span>
                                <div class="form-group">
                                    <select class="form-select" id="selectMes">
                                        <option value="todos">Todos</option>
                                        <option value="enero">Enero</option>
                                        <option value="febrero">Febrero</option>
                                        <option value="marzo">Marzo</option>
                                        <option value="abril">Abril</option>
                                        <option value="mayo">Mayo</option>
                                        <option value="junio">Junio</option>
                                        <option value="julio">Julio</option>
                                        <option value="agosto">Agosto</option>
                                        <option value="septiembre">Septiembre</option>
                                        <option value="octubre">Octubre</option>
                                        <option value="noviembre">Noviembre</option>
                                        <option value="diciembre">Diciembre</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="p-4 shadow-s cardh d-flex align-items-center">
                        <div class="d-flex flex-row justify-content-between">
                            <div class="d-flex flex-column">
                                <span class="fs-4 fw-bolder purple">Exportaciones</span>
                                <span class="fs-3x fw-bolder estilost" id="totalRegistros">0</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-7">
                    <div class="p-4 shadow-s cardh d-flex align-items-center">
                        <div class="d-flex flex-row justify-content-between">
                            <div class="d-flex flex-column">
                                <span class="fs-4 fw-bolder purple">Total Valor FOB</span>
                                <span class="fs-3x fw-bolder estilost text-break" id="totalValorFob">0</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Graficas --}}
        <div class="row g-4 mb-3 mt-2">
            <div class="col-12 col-md-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder">Cantidad por Categoría</span>
                    <div id="cantidadPorCategoria" style="height: 350px; width: 100%;"></div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder">Ciudades de Origen</span>
                    <div id="ciudadesOrigen" style="height: 350px; width: 100%;"></div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder">Ciudades de Destino</span>
                    <div id="ciudadesDestino" style="height: 350px; width: 100%;"></div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="p-4 shadow-s cardh">
                    <div style="display: flex; justify-content: space-between;">
                        <span class="fs-4 fw-bolder">Cantidad de Exportaciones por Periodo</span>
                        <div class="me-2">
                            <select class="form-select" id="yearFilter" onchange="cambiarAnio()">
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <!-- Opciones para otros años -->
                            </select>
                        </div>
                    </div>
                    <div id="graficaExportacionesPeriodos" style="min-width: 310px; height: 350px; margin: 0 auto"></div>
                </div>
            </div>
        </div>


        <div class="row g-4 mb-2 mt-1">
            <div class="col-12">
                <div class="p-4 shadow-s cardh">
                    <span class="fs-4 fw-bolder">Mapa de Países de Destino</span>
                    <div id="chartdiv"></div>
                </div>
            </div>
        </div>


        {{-- <div class="row g-4 mb-2 mt-1">
        <div class="col-xl-6">
            <div class="p-4 shadow-s cardh">
                <span class="fs-4 fw-bolder">Evolución de valor de carga crítica</span>
                <div id="evaluadorDeCargas" style="height: 350px;"></div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="p-4 shadow-s cardh">
                <span class="fs-4 fw-bolder">Recursos Solicitados por Ciudad y Tipo</span>
                <div id="recursosTipoCiudad" style="height: 350px;"></div>
            </div>
        </div>
    </div>
    <div class="row g-4 mb-3 mt-2">
        <div class="col-xl-6">
            <div class="p-4 shadow-s cardh">
                <span class="fs-4 fw-bolder">Seguimiento de Servicios</span>
                <div id="seguimientoServicios" style="height: 350px;"></div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="p-4 shadow-s cardh">
                <span class="fs-4 fw-bolder">Carga Crítica por Mes</span>
                <div id="cargasCriticasMes" style="height: 350px;"></div>
            </div>
        </div>
    </div> --}}
    </div>
    <script>
        $(document).ready(function() {
            analisisExportaciones();
            cantidadPorCategoria();
            ciudadesOrigen();
            ciudadesDestino();
            paisesDestinoMapa();
            cargarCantidadExportacionesPeriodos();
        });
    </script>
@endsection