@extends('layouts.index', ['titulo' => 'Home', 'nombre_titulo' => 'Home'])

@section('css')
    <!-- Styles -->
    <style>
        #chartdiv {
            width: 90%;
            height: 300px;
        }

        #chartPresupuesto {
            width: 90%;
            height: 500px;
        }
    </style>
    <link rel="Stylesheet" href="{{ asset('assets/gantt-dhtmlx/skins/dhtmlxgantt_material.css') }}" type="text/css" />
    {{-- Este es el CSS de dashboard se encuentra en resources/css/dashboard --}}
    <link href="{{ asset('css/dashboard.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    <div class="row mb-4 align-items-center">

        <!-- Columna para el Selector de Proyecto -->
        <div class="col-lg-6 col-md-6 mb-3 mb-lg-0">
            <select class="form-control" name="cod_proyecto" id="selectProyecto" style="width: 100%;">
                <option value="">Seleccione un proyecto</option>
                @foreach ($proyectos as $proyecto)
                    <option value="{{ $proyecto->id }}" data-kt-select2-country="{{ asset($proyecto->logo) }}"
                        data-estado="{{ $proyecto->estado }}">
                        {{ $proyecto->nombre }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Contenedor de intercambio: Selector de Estado / Botón de Restablecer -->
        <div class="col-lg-3 col-md-5 mb-3 mb-lg-0">
            <!-- Selector de Estado (visible por defecto) -->
            <div id="contenedroSelectEstadoProyectoDash">
                <select class="form-control" name="estado_proyecto" id="selectEstadoDashboard" style="width: 100%;">
                    <option value="Todos">Todos los estados</option>
                    <option value="1" data-icon-class="fas fa-check-circle text-success">Activo</option>
                    <option value="2" data-icon-class="fas fa-spinner text-warning">En Progreso</option>
                    <option value="3" data-icon-class="fas fa-flag-checkered text-primary">Completado</option>
                    <option value="4" data-icon-class="fas fa-exclamation-triangle text-danger">Riesgo</option>
                    <option value="0" data-icon-class="fas fa-trash text-muted">Eliminado</option>
                </select>
            </div>
            <!-- Botón de Restablecer (oculto por defecto) -->
            <div id="contenedorBotonesFiltrosDashboard" class="d-none w-100">
                <a id="btnRestablecerFiltrosDashboard" class="btn btn-light-primary w-100 fs-5">
                    <i class="fas fa-undo me-2"></i>Restablecer Filtros
                </a>
            </div>
        </div>

        <!-- Botón de Actualización (siempre visible) -->
        <div class="col-lg-1 col-md-1 mb-3 mb-lg-0 d-flex align-items-center">
            <a id="btnActualizarDatosDashboard"
                class="btn btn-success w-100 h-100 d-flex align-items-center justify-content-center"
                title="Actualizar datos del dashboard" style="min-height: 42px;">
                <i class="fas fa-sync-alt fs-3"></i>
            </a>
        </div>

    </div>

    <!-- Fila de Acciones - Solución con Flexbox -->
    <div id="contenedorAccionesProyecto" class="row d-flex flex-wrap gap-3 d-none mb-4">

        <a id="btnVerEstructuraModalDashboard" class="col-md-4 btn btn-archivo">
            Ver Estructura
        </a>

        <a id="btnVerGanttModal" class="col-md-4 btn btn-archivo">
            Ver Gantt
        </a>

        <a id="btnIrProyectoDashboard" class="col-md-4 btn btn-archivo">
            Ir al proyecto
        </a>

    </div>



    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="contenedor" id="kt_content_container">
            <div class="d-flex flex-column flex-lg-row justify-content-center">
                <div class="flex-column flex-lg-row-auto w-100 mb-10 mb-lg-0 h-100">
                    <!-- Fila de Métricas (Arriba) -->
                    <div class="row justify-content-center mb-5">
                        <!-- Valor del Proyecto -->
                        <div class="col-md-4">
                            <div class="metric-card h-100">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-coins text-primary fs-2 me-3"></i>
                                    <div>
                                        <span id="valorProyecto" class="metric-value">
                                            <span class="value">$0</span>
                                        </span>
                                        <div class="metric-label">Presupuesto Total</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Costo del Proyecto -->
                        <div class="col-md-4">
                            <div class="metric-card h-100">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-chart-line text-danger fs-2 me-3"></i>
                                    <div>
                                        <span id="costoProyecto" class="metric-value">
                                            <span class="value">$0</span>
                                        </span>
                                        <div class="metric-label">Costo Actual</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Facturado del Proyecto -->
                        <div class="col-md-4">
                            <div class="metric-card h-100">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-file-invoice-dollar text-success fs-2 me-3"></i>
                                    <div>
                                        <span id="facturadoProyecto" class="metric-value">
                                            <span class="value">$0</span>
                                        </span>
                                        <div class="metric-label">Total Facturado</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Fila de Gráficas (Abajo) -->
                    <div class="row justify-content-center">
                        <!-- Gráfica Progreso Físico -->
                        <div class="col-md-6 mb-4" id="colGraficaProyectos">
                            <div class="bk-cards" id="graficaProyectos">
                                {{-- <div id="graficaProyectosPolarArea"></div> --}}
                                <div class="row mb-5 mt-8">
                                    <div class="col-12">
                                        <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica"
                                            id="tituloGraficaProyectosPie"></h3>
                                    </div>
                                </div>
                                <div id="graficaProyectosPie"></div>
                            </div>
                        </div>

                        <!-- Gráfica Progreso Financiero -->
                        <div class="col-md-6 mb-4 d-none" id="divGraficaProgresoFinancieroDashboard">
                            <div class="bk-cards">
                                <div class="row mb-5 mt-8">
                                    <div class="col-12">
                                        <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica"
                                            id="tituloGraficaProgresoFinancieroDashboard">
                                            Progreso Financiero</h3>
                                    </div>
                                </div>
                                <div id="graficaProgresoFinancieroDashboard" style="width: 100%; height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div id="contenedorComponenteshboard">
                        <div class="row justify-content-center bk-cards d-none" id="contenedorTablaComponentesDashboard">
                            <div class="row mb-5 mt-8">
                                <div class="col-12">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Tabla Componentes</h3>
                                </div>
                            </div>
                            <div class="card-flush h-100">
                                <div class="card-body pt-5" id="kt_chat_contacts_body">
                                    <div class="scroll-y me-n5 pe-5 h-lg-auto tablasScroll" data-kt-scroll="true"
                                        data-kt-scroll-activate="{default: false, lg: true}"
                                        data-kt-scroll-max-height="auto"
                                        data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                        data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
                                        data-kt-scroll-offset="5px" style="max-height: 410px;">
                                        <div class="table-responsive">
                                            <table class="table table-white" id="tablaComponentesDashboardProyects">
                                                <thead>
                                                    <tr>
                                                        <th width="5%" class="text-center all">#</th>
                                                        <th width="10%" class="text-center all">Titulo</th>
                                                        <th width="10%" class="text-center all">Descripcion</th>
                                                        <th width="10%" class="text-center all">Valor</th>
                                                        <th width="10%" class="text-center all">Costo</th>
                                                        <th width="10%" class="text-center all">Progreso Financiero
                                                        </th>
                                                        <th width="10%" class="text-center all">Progreso Fisico</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-center bk-cards" id="contenedorGraficaProyectos">
                            <div class="row mb-5 mt-8">
                                <div class="col-12">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Gráfica Proyectos</h3>
                                </div>
                            </div>
                            <div id="graficaColumnasCostoProyectos" style="margin-top: 5rem;"></div>
                        </div>
                        <div class="row justify-content-center bk-cards d-none"
                            id="contenedorGraficaComponentesDashboard">
                            <div class="row mb-5 mt-8">
                                <div class="col-12">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Gráfica Componentes</h3>
                                </div>
                            </div>
                            <div id="graficaColumnasCostoComponentes" style="margin-top: 5rem;"></div>
                        </div>
                    </div>
                    <div class="row justify-content-center bk-cards d-none" id="contenedorTablaActividades">
                        <div class="row mb-5 mt-8">
                            <div class="col-12">
                                <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Tabla Actividades</h3>
                            </div>
                        </div>
                        <div class="card card-flush h-100">
                            <div class="card-body pt-5" id="kt_chat_contacts_body">
                                <div class="scroll-y me-n5 pe-5 h-lg-auto tablasScroll" data-kt-scroll="true"
                                    data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                                    data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                    data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
                                    data-kt-scroll-offset="5px" style="max-height: 410px;">
                                    <div class="table-responsive">
                                        <table class="table table-white" id="tablaActividades">
                                            <thead>
                                                <tr>
                                                    <th width="5%" class="text-center all">#</th>
                                                    <th width="10%" class="text-center all">Titulo</th>
                                                    <th width="10%" class="text-center all">Componente</th>
                                                    <th width="10%" class="text-center all">Descripcion</th>
                                                    <th width="10%" class="text-center all">Valor</th>
                                                    <th width="10%" class="text-center all">Costo</th>
                                                    <th width="10%" class="text-center all">Progreso Financiero</th>
                                                    <th width="10%" class="text-center all">Progreso Fisico</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center bk-cards d-none" id="contenedorGraficaActividadesDashboard">
                        <div class="row mb-5 mt-8">
                            <div class="col-12">
                                <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Gráfica Actividades</h3>
                            </div>
                        </div>
                        <div id="graficaColumnasCostoActividades" style="margin-top: 5rem;"></div>
                    </div>
                    <div id="contenedor-no-tareas-dashboard">

                    </div>
                    <div id="contenedorTareasDashboard">
                        <div class="row justify-content-center bk-cards d-none" id="contenedorTablaTareasDashboard">
                            <div class="row mb-5">
                                <div class="col-12">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Tabla Tareas</h3>
                                </div>
                            </div>
                            <div class="card card-flush h-100">
                                <div class="card-body pt-5" id="kt_chat_contacts_body">
                                    <div class="scroll-y me-n5 pe-5 h-lg-auto tablasScroll" data-kt-scroll="true"
                                        data-kt-scroll-activate="{default: false, lg: true}"
                                        data-kt-scroll-max-height="auto"
                                        data-kt-scroll-dependencies="#kt_header, #kt_toolbar, #kt_footer, #kt_chat_contacts_header"
                                        data-kt-scroll-wrappers="#kt_content, #kt_chat_contacts_body"
                                        data-kt-scroll-offset="5px" style="max-height: 410px;">
                                        <div class="table-responsive">
                                            <table class="table table-white" id="tablaTareasDashboardProyects">
                                                <thead>
                                                    <tr>
                                                        <th width="5%" class="text-center all">#</th>
                                                        <th width="10%" class="text-center all">Titulo</th>
                                                        <th width="10%" class="text-center all">Actividad</th>
                                                        <th width="10%" class="text-center all">Fecha inicio</th>
                                                        <th width="10%" class="text-center all">Fecha fin</th>
                                                        <th width="10%" class="text-center all">Valor</th>
                                                        <th width="10%" class="text-center all">Costo</th>
                                                        <th width="10%" class="text-center all">Progreso Financiero
                                                        </th>
                                                        <th width="10%" class="text-center all">Progreso Fisico</th>

                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row justify-content-center bk-cards d-none"
                            id="contenedorGraficaColumnasTareasDashboard">
                            <div class="row mb-5 mt-8">
                                <div class="col-12">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Gráfica Tareas</h3>
                                </div>
                            </div>
                            <div id="graficaColumnasCostoTareas" style="margin-top: 5rem;"></div>
                        </div>
                    </div>
                    <div id="contenedorCurvaSDashboard">
                        <div class="row justify-content-center bk-cards">
                            <div class="row mb-5 mt-8">
                                <div class="col-md-6 mb-8">
                                    <h3 class="fs-1 fw-bold text-gray-800 titulo-grafica">Gráfica Curva S</h3>
                                </div>
                                <div class="col-md-6 mb-8">
                                    <select id="selectTipoCalculoCUrvaSDash" class="form-control">
                                        <option value="AC" selected>AC</option>
                                        <option value="PV">PV</option>
                                        <option value="EV">EV</option>
                                    </select>
                                </div>
                            </div>
                            <div id="graficaCurvaSDashboard" style="margin-top: 5rem;"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @component('dashboard.modals.ganttModal')
    @endcomponent
    @component('dashboard.modals.estructuraModal')
    @endcomponent
@endsection

@section('scripts')
    <script src="{{ mix('/js/dashboard/principal.js') }}"></script>
    <script src="{{ asset('assets/gantt-dhtmlx/dhtmlxgantt.js') }}"></script>
    <script src="https://export.dhtmlx.com/gantt/api.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/radar.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
@endsection