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

@section('btns')
    <div class="d-flex flex-column flex-sm-row gap-2">
        @canany(['proyectos.crear'])
            <button type="button" class="btn btn-archivo w-100 w-md-auto" data-bs-toggle="modal"
                data-bs-target="#modalCrearProyectos">
                Crear Nuevo Proyecto
            </button>
        @endcanany

        @canany(['dashboard.ver'])
            <a href="{{ route('dashboard.index') }}" class="btn btn-archivo w-100 w-md-auto">
                Dashboard de proyectos
            </a>
        @endcanany
    </div>
@endsection




@section('content')
    <style>
        /* Skeleton Loader Styles */
        .skeleton-loader {
            animation: pulse 1.5s ease-in-out infinite;
        }

        .skeleton-item {
            padding: 1rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .skeleton-line {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
            border-radius: 4px;
            height: 16px;
            margin-bottom: 8px;
        }

        .skeleton-title {
            height: 20px;
            width: 70%;
        }

        .skeleton-text {
            width: 90%;
        }

        .skeleton-text-short {
            width: 50%;
        }

        @keyframes loading {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.8;
            }
        }
    </style>
    <div class="row gx-6 gy-6 gx-xl-9">
        <div class="col-lg-6 col-xxl-5">
            <!--begin::Card-->
            <div class="card h-100">
                <!--begin::Card body-->
                <div class="card-body p-9">
                    <!--begin::Heading-->
                    <h1 class="fs-2hx fw-bold ">Proyectos actualizados</h1>
                    <div class="fs-2hx fw-bold texto-azul">{{ $cantidad_total ?? 0 }}</div>
                    <!--end::Heading-->

                    <!--begin::Wrapper-->
                    <div class="d-flex flex-wrap">
                        <!--begin::Chart-->
                        <div class="d-flex flex-center h-100px w-100px me-9 mb-5">
                            <canvas id="kt_project_list_chart"
                                style="display: block; box-sizing: border-box; height: 100px; width: 100px;" width="100"
                                height="100"></canvas>
                        </div>
                        <!--end::Chart-->

                        <!--begin::Labels-->
                        <div class="d-flex flex-column justify-content-center flex-row-fluid pe-11 mb-5">
                            <!--begin::Label-->
                            <div class="d-flex fs-6 fw-semibold align-items-center mb-3">
                                <div class="bullet bg-primary me-3"></div>
                                <div class="text-gray-500">Pendiente</div>
                                <div class="ms-auto fw-bold text-gray-700">{{ $cantidad_pendientes ?? 0 }}</div>
                            </div>
                            <!--end::Label-->

                            <!--begin::Label-->
                            <div class="d-flex fs-6 fw-semibold align-items-center mb-3">
                                <div class="bullet bg-warning me-3"></div>
                                <div class="text-gray-500">En proceso</div>
                                <div class="ms-auto fw-bold text-gray-700">{{ $cantidad_ejecucion ?? 0 }}</div>
                            </div>
                            <!--end::Label-->

                            <!--begin::Label-->
                            <div class="d-flex fs-6 fw-semibold align-items-center mb-3">
                                <div class="bullet bg-success me-3"></div>
                                <div class="text-gray-500">Completado</div>
                                <div class="ms-auto fw-bold text-gray-700">{{ $cantidad_completados ?? 0 }}</div>
                            </div>
                            <!--end::Label-->
                        </div>
                        <!--end::Labels-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->
        </div>
        {{-- <div class="col-lg-6 col-xxl-7">
            <!--begin::Finaciazión-->
            <div class="card h-100">
                <div class="card-body p-9">
                    <h1 class="fs-2hx fw-bold">Pendiente Definir</h1>
                </div>
            </div>
            <!--end::Finaciazión-->
        </div> --}}
    </div>

    <div class="d-flex flex-wrap flex-stack my-5" data-select2-id="select2-data-121-8xd9">
        <!--begin::Heading-->
        <h2 class="fs-2 fw-bold my-2">
            Listado de proyectos
            <span class="fs-6 text-gray-500 ms-1">por estado</span>
        </h2>
        <!--end::Heading-->

        <!--begin::Controls-->
        <div class="d-flex flex-wrap my-1" data-select2-id="select2-data-120-tj9x">
            <!--begin::Select wrapper-->
            <div class="m-0" data-select2-id="select2-data-119-gjyx">
                <!--begin::Select-->
                <select name="estado" data-control="select2" id="selectEstadosListados" data-hide-search="true"
                    class="form-select form-select-sm form-select-solid fw-bold w-125px">
                    <option value="0">Todos</option>
                    <option value="2">En progreso</option>
                    <option value="3">Completados</option>
                    <option value="4">En riesgo</option>
                </select>
                <!--end::Select-->
            </div>
            <!--end::Select wrapper-->
        </div>
        <!--end::Controls-->
    </div>

    <div class="seccionListadoProyectos">
        <!-- Skeleton loader que se mostrará mientras carga -->
        <div class="skeleton-loader" style="display: none;">
            <div class="card">
                <div class="card-body">
                    <!-- Repite este bloque según cuantos items quieres mostrar en el skeleton -->
                    <div class="skeleton-item mb-4">
                        <div class="skeleton-line skeleton-title mb-2"></div>
                        <div class="skeleton-line skeleton-text mb-1"></div>
                        <div class="skeleton-line skeleton-text-short"></div>
                    </div>
                    <div class="skeleton-item mb-4">
                        <div class="skeleton-line skeleton-title mb-2"></div>
                        <div class="skeleton-line skeleton-text mb-1"></div>
                        <div class="skeleton-line skeleton-text-short"></div>
                    </div>
                    <div class="skeleton-item mb-4">
                        <div class="skeleton-line skeleton-title mb-2"></div>
                        <div class="skeleton-line skeleton-text mb-1"></div>
                        <div class="skeleton-line skeleton-text-short"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="divContenidosProjectosListado">
        </div>
    </div>
@endsection

@section('modal')
    @component('procesos.crear')
        @slot('responsables', $responsables)
        @slot('programas', $programas)
        @slot('tiposContratos', $tiposContratos)
    @endcomponent
@endsection

@section('scripts')
    <script src="{{ mix('/js/proyectos-clientes/principal.js') }}"></script>
@endsection