@extends('layouts.index', ['titulo' => 'Proyecto', 'nombre_titulo' => 'Proyecto - ' . $proyecto?->nombre])

@section('btns')
@endsection

@section('css')
    {{-- <link rel="Stylesheet" href="{{ asset('assets/gantt-dlhsoft/app.css') }}" type="text/css" /> --}}
    {{-- <link rel="Stylesheet" href="{{ asset('assets/gantt-dhtmlx/dhtmlxgantt.css') }}" type="text/css" /> --}}
    {{-- <link rel="Stylesheet" href="{{ asset('assets/gantt-dhtmlx/skins/dhtmlxgantt_meadow.css') }}" type="text/css" /> --}}
    {{--     <link rel="Stylesheet" href="{{ asset('assets/gantt-dhtmlx/skins/dhtmlxgantt_material.css') }}" type="text/css" />
 --}}
    <style>
        #tablaComponentes tbody td {
            vertical-align: top;
        }

        #tablaDeHistorialPresupuesto tbody td {
            vertical-align: top !important;
        }

        /*   .gantt-fullscreen {
                                                                                        position: absolute;
                                                                                        bottom: 20px;
                                                                                        right: 20px;
                                                                                        width: 30px;
                                                                                        height: 30px;
                                                                                        padding: 2px;
                                                                                        font-size: 32px;
                                                                                        background: transparent;
                                                                                        cursor: pointer;
                                                                                        opacity: 0.5;
                                                                                        text-align: center;
                                                                                        -webkit-transition: background-color 0.5s, opacity 0.5s;
                                                                                        transition: background-color 0.5s, opacity 0.5s;
                                                                                    } */

        .gantt-fullscreen {
            position: absolute;
            top: 10px;
            right: 15px;
            z-index: 100;
            cursor: pointer;
            font-size: 20px;
            color: #555;
        }

        .gantt_container.gantt-completo {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            /* Fondo blanco para que no se vea la página de atrás */
            z-index: 10000;
            /* Un z-index alto para que se ponga por encima de todo */
        }

        .gantt-fullscreen:hover {
            background: rgba(150, 150, 150, 0.5);
            opacity: 1;
        }

        .gantt_task_line.gantt_dependent_task {
            background-color: #65c16f;
            border: 1px solid #3c9445;

        }

        .gantt_task_line.gantt_dependent_task .gantt_task_progress {
            background-color: #46ad51;
        }

        .gantt_task_cell.week_end {
            background-color: #EFF5FD;
        }

        .gantt_selected .gantt_task_cell.week_end {
            background-color: #f0e493;
        }

        .gantt_marker {
            background-color: rgba(255, 0, 0, 0.8);
        }

        .gantt_task_line,
        .gantt_task_link {
            transition: opacity 200ms;
        }

        .overlay_visible .gantt_task_line,
        .overlay_visible .gantt_task_link {
            opacity: 0.6;
        }

        .gantt_marker.today {
            background: #ffb121;
        }

        .gantt_here {
            z-index: 999999999 !important;
        }

        .gantt-completo {
            height: 100vh !important;
        }

        .gantt_tooltip {
            height: 140px !important;
        }

        .gantt_task_line.critical {
            background-color: #ff0000;
            border-color: #cc0000;
        }

        .gantt_task_line.critical .gantt_task_progress {
            background-color: #ff5555;
        }

        .gantt_row.critical {
            background-color: #fff0f0;
        }

        .gantt_task_line.critical.milestone {
            background-color: #ff0000;
            border-color: #cc0000;
        }

        .gantt_task_line.critical.project {
            background-color: #ff6666;
            border-color: #cc0000;
        }

        /* Mejorar visibilidad de los marcadores */
        .gantt_marker {
            z-index: 10;
        }

        .gantt_marker.today {
            width: 3px;
            background-color: #ffb121;
        }

        .gantt_marker.status_line {
            width: 3px;
            background-color: #36c26c;
        }

        .ods-item {
            transition: transform 0.3s ease;
        }

        .ods-item:hover {
            transform: translateY(-3px);
        }

        .ods-image:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .ods-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #0d6efd;
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .ods-container {
                order: 3;
                width: 100%;
                margin-top: 1rem;
            }
        }

        .gestor-crown-badge {
            position: absolute;
            display: grid;
            /* La forma más moderna de centrar algo */
            place-items: center;
            width: 18px;
            height: 18px;
            bottom: -3px;
            /* Posicionamiento fino */
            right: -3px;
            /* Posicionamiento fino */
            background-color: #ffc107;
            /* Color de advertencia de Bootstrap */
            border: 2px solid white;
            border-radius: 50%;
            z-index: 2;
            /* Asegura que esté por encima de la imagen */
        }

        .gestor-crown-badge i {
            font-size: 9px;
            /* Tamaño del icono */
            color: white;
        }
    </style>

    <style>
        /*#jkanbanDetalleCampana .kanban-board {
                                                                                width: 32%;
                                                                            }*/


        .kanban-container {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            /* Espacio entre columnas */
        }

        .kanban-board {
            flex: 1 1 100%;
            max-width: 100%;
            margin: 0;
        }

        /* Para pantallas medianas (tablets en adelante) */
        @media (min-width: 768px) {
            .kanban-board {
                flex: 1 1 50%;
                max-width: 50%;
            }
        }

        /* Para pantallas grandes (escritorio en adelante) */
        @media (min-width: 1024px) {
            .kanban-board {
                flex: 1 1 43%;
                max-width: 43%;
            }
        }
    </style>
@endsection

@section('content')
    <div class="card mb-6 mb-xl-9">
        <div class="card-body pt-9 pb-0">
            <!--begin::Details-->
            <div class="d-flex flex-wrap flex-sm-nowrap mb-6">
                <!--begin::Image-->
                <div
                    class="d-flex flex-center flex-shrink-0 bg-light rounded w-100px h-100px w-lg-150px h-lg-150px me-7 mb-4">
                    <img class="mw-50px mw-lg-75px" src="{{ asset($proyecto->logo) }}" alt="image">
                </div>
                <!--end::Image-->

                <!--begin::Wrapper-->
                <div class="flex-grow-1">
                    <!--begin::Head-->
                    <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                        <!--begin::Details-->
                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-2">
                            <!-- Contenedor principal izquierdo (Nombre y Estado) -->
                            <div class="d-flex align-items-center flex-grow-1 me-4">
                                <a href="#" class="text-negro f-titulo fs-2hx fw-bold me-3">
                                    {{ $proyecto?->nombre }}
                                </a>
                                <span class="badge badge-light-{{ $proyecto?->infoEstado?->color }}">
                                    {{ $proyecto?->infoEstado?->nombre }}
                                </span>
                            </div>

                            <!-- Contenedor ODS alineado horizontalmente -->
                            <div class="card"
                                style="border: 1px solid #e4e6ef;
                                        border-radius: 8px;
                                        padding: 0.75rem;
                                        background: #f8f9fa;
                                        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
                                        margin-right: auto;">
                                <div class="d-flex flex-wrap gap-2 align-items-center">
                                    @foreach ($ods as $od)
                                        <div class="position-relative ods-item">
                                            <img src="{{ asset('img/assets/ods/' . basename($od->url_imagen)) }}"
                                                class="ods-image" title="ODS {{ $od->nombre }}"
                                                style="height: 3.5rem;
                                                        width: 3.5rem;
                                                        object-fit: cover;
                                                        border-radius: 6px;
                                                        transition: all 0.3s ease;">
                                            <span class="ods-badge">{{ $od->id }}</span>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        {{-- @canany(['tareas.crear'])
                            <div class="d-flex mb-4" style="display: none">
                                <a href="#" class="btn btn-sm btn-archivo me-3 d-flex align-items-center"
                                    data-bs-toggle="modal" style="display: none;" data-bs-target="#modalCrearTarea">
                                    <i class="bi bi-plus-lg text-white me-2"></i> Nueva tarea
                                </a>
                            </div>
                        @endcanany --}}

                        @canany(['componentes.crear'])
                            <div class="d-flex mb-4" style="display: none">
                                <a href="#" class="btn btn-sm btn-archivo me-3 d-flex align-items-center"
                                    data-bs-toggle="modal" style="display: none;" data-bs-target="#modalCrearComponente">
                                    <i class="bi bi-plus-lg text-white me-2"></i> Crear Componente
                                </a>
                            </div>
                        @endcanany
                        <!--end::Actions-->
                    </div>

                    <!--end::Head-->
                    <br>
                    <!-- Descripción -->
                    <div class="d-flex flex-wrap fw-semibold mb-4 fs-5 text-gray-500">
                        {!! substr(html_entity_decode($proyecto?->descripcion ?? '', ENT_QUOTES, 'UTF-8'), 0, 200) !!}
                    </div>
                    <!--end::Details-->
                    <br>

                    <!--begin::Info-->
                    <div class="d-flex flex-wrap justify-content-start">
                        <!--begin::Stats-->
                        <div class="d-flex flex-wrap">
                            <!--begin::Stat-->
                            <div class="border border-gray-300 border-1 rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="fw-semibold fs-6 text-gray-500">Fecha entrega</div>


                                <div class="d-flex align-items-center">
                                    <div class="fs-4 fw-bold">{{ $proyecto->fecha_fin->format('d/m/Y') }}</div>
                                </div>
                                <!--end::Number-->

                                <!--begin::Label-->
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->

                            <!--begin::Stat-->
                            <div class="border border-gray-300 border-1 rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="fw-semibold fs-6 text-gray-500">Tareas abiertas</div>


                                <div class="d-flex align-items-center">
                                    <i
                                        class="fas {{ count($proyecto?->tareasEnProgreso) <= count($proyecto?->tareasPendientes) ? 'fa-arrow-down text-danger' : 'fa-arrow-up text-success' }} fs-3 me-2"><span
                                            class="path1"></span><span class="path2"></span></i>
                                    <div class="fs-4 fw-bold" data-kt-countup="true"
                                        data-kt-countup-value="{{ count($proyecto?->tareasEnProgreso) }}">0
                                    </div>
                                </div>
                                <!--end::Number-->

                                <!--begin::Label-->
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->

                            <!--begin::Stat-->
                            <div class="border border-gray-300 border-1 rounded min-w-125px py-3 px-4 me-6 mb-3">
                                <!--begin::Number-->
                                <div class="fw-semibold fs-6 text-gray-500">Presupuesto gastado</div>


                                <div class="d-flex align-items-center">
                                    <i
                                        class="fas {{ $proyecto?->costoProyectoActivo?->costo > $proyecto?->presupuestoActivo?->valor ? 'fa-arrow-down text-danger' : 'fa-arrow-up text-success' }} fs-3 me-2"><span
                                            class="path1"></span><span class="path2"></span></i>
                                    <div class="fs-4 fw-bold text-{{ $proyecto?->costoProyectoActivo?->costo > $proyecto?->presupuestoActivo?->valor ? 'danger' : 'success' }}"
                                        data-kt-countup="true"
                                        data-kt-countup-value="{{ $proyecto?->costoProyectoActivo?->costo ?? 0 }}"
                                        data-kt-countup-prefix="$">
                                        $0</div>
                                </div>
                                <!--end::Number-->

                                <!--begin::Label-->
                                <!--end::Label-->
                            </div>
                            <!--end::Stat-->
                        </div>
                        <!--end::Stats-->

                        <!--begin::Users-->
                        <div class="symbol-group symbol-hover mb-3">
                            @foreach ($todosLosResponsables as $responsable)
                                <!--begin::User-->
                                <div class="symbol symbol-35px symbol-circle" data-bs-toggle="tooltip"
                                    aria-label="{{ $responsable->nombre_completo }}"
                                    data-bs-original-title="{{ $responsable->nombre_completo }}">

                                    <img alt="Pic"
                                        src="{{ asset($responsable->foto ? $responsable->foto : 'assets/media/avatars/blank.png') }}">

                                    @if ($responsable->es_gestor)
                                        {{-- Simplemente aplicamos nuestra clase personalizada --}}
                                        <span class="gestor-crown-badge" title="Responsable Gestor"
                                            data-bs-toggle="tooltip">
                                            <i class="fas fa-crown"></i>
                                        </span>
                                    @endif
                                </div>
                                <!--begin::User-->
                            @endforeach
                        </div>
                        <!--end::Users-->
                    </div>
                    <!--end::Info-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Details-->

            <div class=""></div>

            <!--begin::Nav-->
            <ul class="nav nav-tabs nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold">
                <!--begin::Nav item-->
                <li class="nav-item">
                    <a class="nav-link text-active-primary py-5 me-6 active fs-4 btnTabMetricas" data-bs-toggle="tab"
                        href="#tabMetricas">
                        Resumen </a>
                </li>
                <!--end::Nav item-->
                @canany(['componentes.crear', 'componentes.listado', 'componentes.editar', 'componentes.eliminar'])
                    {{-- @hasanyrole('admin|Super Admin|director.proyectos|admin.proyectos') --}}
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4 tabComponentes" data-bs-toggle="tab"
                            href="#tabComponentes">
                            Componentes </a>
                    </li>
                    <!--end::Nav item-->
                    {{-- @endhasanyrole --}}
                @endcanany
                @canany(['tareas.crear', 'tareas.listado', 'tareas.editar', 'tareas.eliminar'])
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4 tabLinkTareas" data-bs-toggle="tab"
                            href="#tabTareas">
                            Tareas </a>
                    </li>
                    <!--end::Nav item-->
                @endcanany
                {{-- @hasanyrole('admin|Super Admin|director.proyectos|monitor.proyectos|admin.proyectos')
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4 tabPresupuestos" data-bs-toggle="tab"
                            href="#tabPresupuestos">
                            Presupuesto </a>
                    </li>
                    <!--end::Nav item-->
                @endhasanyrole --}}
                @canany(['presupuestos.crear', 'presupuestos.listado', 'presupuestos.editar', 'presupuestos.eliminar'])
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4 tabPresupuestos" data-bs-toggle="tab"
                            href="#tabPresupuestos">
                            Presupuesto </a>
                    </li>
                    <!--end::Nav item-->
                @endcanany
                @canany(['archivos.crear', 'archivos.listado', 'archivos.editar', 'archivos.eliminar'])
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4 tabLinkArchivos" data-bs-toggle="tab"
                            href="#tabArchivos">
                            Archivos </a>
                    </li>
                    <!--end::Nav item-->
                @endcanany
                {{-- @hasanyrole('admin|Super Admin|director.proyectos|monitor.proyectos|admin.proyectos') --}}
                @canany(['proyectos.editar', 'proyectos.ver.configuracion'])
                    <!--begin::Nav item-->
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4" data-bs-toggle="tab" href="#tabConfiguraciones">
                            Configuraciones </a>
                    </li>
                    <!--end::Nav item-->
                @endcanany
                {{-- @endhasanyrole --}}
                <!--begin::Nav item-->
                @canany(['gantt.ver'])
                    {{-- @hasanyrole('admin|Super Admin|director.proyectos|monitor.proyectos|admin.proyectos') --}}
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4" id="tabChatProyectos" data-bs-toggle="tab"
                            href="#tabChatProyecto">
                            Chat </a>
                    </li>
                    {{-- @endhasanyrole --}}
                @endcanany
                <!--end::Nav item-->
                @canany(['gantt.ver'])
                    <!--begin::Nav item-->
                    {{-- @hasanyrole('admin|Super Admin|director.proyectos|monitor.proyectos|admin.proyectos') --}}
                    <li class="nav-item">
                        <a class="nav-link text-active-primary py-5 me-6 fs-4" id="btnGantt" data-bs-toggle="tab"
                            href="#tabGantt">
                            Gantt </a>
                    </li>
                    {{-- @endhasanyrole --}}
                    <!--end::Nav item-->
                @endcanany
            </ul>
            <!--end::Nav-->
        </div>
    </div>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="tabMetricas" role="tabpanel">
            @component('procesos.componentes-editar.metricas.index')
                @slot('proyecto', $proyecto)
                @slot('tareasAtrazadas', $tareasAtrazadas)
                @slot('cantidad_total', $cantidad_total)
                @slot('cantidad_pendientes', $cantidad_pendientes)
                @slot('cantidad_completados', $cantidad_completados)
                @slot('cantidad_ejecucion', $cantidad_ejecucion)
                @slot('daysOfWeek', $daysOfWeek)
                @slot('responsables', $responsables)
                {{-- @slot('total_archivos', $total_archivos)
                @slot('listado_archivos', $listado_archivos) --}}
            @endcomponent
        </div>
        <div class="tab-pane fade" id="tabTareas" role="tabpanel">
            @component('procesos.componentes-editar.tareas.index')
                @slot('proyecto', $proyecto)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="tabComponentes" role="tabpanel">
            @component('procesos.componentes-editar.componentes.index')
                @slot('proyecto', $proyecto)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="tabPresupuestos" role="tabpanel">
            @component('procesos.componentes-editar.presupuestos.index')
                @slot('proyecto', $proyecto)
                @slot('presupuesto', $proyecto?->presupuestoActivo ?? null)
            @endcomponent
        </div>
        {{-- <div class="tab-pane fade" id="tabFacturacion" role="tabpanel">
            @component('procesos.componentes-editar.facturacion.index')
                @slot('proyecto', $proyecto)
                @slot('presupuesto', $proyecto?->presupuestoActivo ?? null)
                @slot('total_tareas', count($proyecto?->tareasActivas) ?? 0)
            @endcomponent
        </div> --}}
        <div class="tab-pane fade" id="tabArchivos" role="tabpanel">
            @component('procesos.componentes-editar.archivos.index')
                @slot('proyecto', $proyecto)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="tabConfiguraciones" role="tabpanel">
            @component('procesos.componentes-editar.configuraciones.index')
                @slot('proyecto', $proyecto)
                @slot('responsables', $responsables)
                @slot('programas', $programas)
                @slot('tiposContratos', $tiposContratos)
            @endcomponent
        </div>
        <div class="tab-pane fade" id="tabChatProyecto" role="tabpanel">
            @component('procesos.componentes-editar.chat.index')
                @slot('proyecto', $proyecto)
            @endcomponent
        </div>
        <div class="tab-pane fade card p-4" id="tabGantt" role="tabpanel">
            @component('procesos.componentes-editar.gantt.index')
            @endcomponent
        </div>
    </div>
@endsection

@section('modal')
    @component('procesos.componentes-editar.tareas.modals.crear')
        @slot('proyecto', $proyecto)
    @endcomponent
    @component('procesos.componentes-editar.tareas.modals.editar')
    @endcomponent

    @component('procesos.componentes-editar.tareas.modals.detalleTarea')
    @endcomponent

    @component('google.drive.cargar')
    @endcomponent

    @component('procesos.componentes-editar.chat.indexChatPro')
    @endcomponent

    @component('procesos.componentes-editar.componentes.crear')
    @endcomponent

    @component('procesos.componentes-editar.componentes.editar')
    @endcomponent

    @component('procesos.componentes-editar.componentes.cargar')
    @endcomponent

    @component('procesos.componentes-editar.componentes.actividades.listadoActividades')
    @endcomponent

    @component('procesos.componentes-editar.componentes.actividades.editar')
    @endcomponent

    @component('procesos.componentes-editar.componentes.actividades.cargar')
    @endcomponent

    @component('procesos.componentes-editar.componentes.actividades.detalleActividades')
    @endcomponent

    @component('procesos.componentes-editar.componentes.detalleComponente')
    @endcomponent
@endsection

@section('scripts')
    <script>
        window.id_proyecto = {{ $proyecto->id }};
        window.id_archivo = '{{ $proyecto->id_carpeta }}';
        window.nombre_archivo = '{{ $proyecto->nombre ?? 'N/A' }}';
    </script>
    <script src="{{ mix('/js/proyectos-clientes/editar.js') }}"></script>
    <script src="{{ mix('js/drive/principal.js') }}"></script>
    <script src="{{ mix('js/chat/principal.js') }}"></script>

    {{-- <script src="{{ asset('assets/gantt-dlhsoft/Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/gantt-dlhsoft/Scripts/DlhSoft.Data.HTML.Controls.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/gantt-dlhsoft/Scripts/DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/gantt-dlhsoft/Scripts/DlhSoft.ProjectData.PertChart.HTML.Controls.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets/gantt-dlhsoft/themes.js') }}" type="text/javascript"></script> --}}

    {{--     <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <script src="{{ asset('assets/gantt-dhtmlx/dhtmlxgantt.js') }}"></script>
    <script src="https://export.dhtmlx.com/gantt/api.js"></script> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.dhtmlx.com/gantt/8.3.0/dhtmlxgantt.js"></script>
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/8.3.0/dhtmlxgantt.css">
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" type="text/css">
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
@endsection