@extends('layouts.dashboard_layout')

@section('title', 'Seguimiento')

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

        #chartPresupuesto {
            width: 100%;
            height: 500px;
        }
        .select2-container--bootstrap5 .select2-selection--single {
            min-height: 6rem !important;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/style.bundle.css') }}">
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
    <style>
        div.gantt_layout_cell.gantt_layout_root.gantt_layout.gantt_layout_y.gantt_container.gantt_layout_cell_border_left.gantt_layout_cell_border_top.gantt_layout_cell_border_right.gantt_layout_cell_border_bottom {
            height: 30rem !important;
        }
    </style>
    <style>
        #chartdivFs {
          width: 100%;
          height: 400px;
        }
        </style>
@endsection

@section('content')

    <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6" style="display: ruby-text;">
        <li class="nav-item" style="width: 15%">
            <a class="nav-link active ms-3" data-bs-toggle="tab" href="#kt_tab_pane_1">Proyectos</a>
        </li>
        <li class="nav-item" style="width: 15%">
            <a class="nav-link btnMiembros" data-bs-toggle="tab" href="#kt_tab_pane_2">Miembros</a>
        </li>
        <li class="nav-item" style="width: 15%">
            <a class="nav-link btnFs" data-bs-toggle="tab" href="#kt_tab_pane_3">Metricas Fs</a>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">
            @component('dashboard.seguimiento.componentes.proyectos')
                @slot('proyectos', $proyectos)
                @slot('responsables', $responsables)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
            @component('dashboard.seguimiento.componentes.miembros')
                @slot('proyectos', $proyectos)
                @slot('responsables', $responsables)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="kt_tab_pane_3" role="tabpanel">
            @component('dashboard.seguimiento.componentes.fs')
                @slot('proyectos', $proyectos)
                @slot('responsables', $responsables)
            @endcomponent
        </div>
    </div>

@endsection

@section('scripts')
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script src="{{ mix('/js/seguimiento/principal.js') }}"></script>
@endsection