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

@section('css')
    <!-- Styles -->
    <style>
        #chartdiv {
            width: 100%;
            height: 300px;
        }
        #chartPresupuesto {
            width: 100%;
            height: 500px;
        }
    </style>
    <link rel="Stylesheet" href="{{ asset('assets/gantt-dhtmlx/skins/dhtmlxgantt_material.css') }}" type="text/css" />

    <style>
        .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:hover {
			background: rgba(150, 150, 150, 0.5);
			opacity: 1;
		}
    </style>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-lg-3 col-md-3">
            <select class="form-control" name="cod_proyecto" placeholder="..." id="selectProyecto">
                <option value="">Seleccione un proyecto</option>
                @foreach ($proyectos as $proyecto)
                    <option value="{{$proyecto->id}}" data-kt-select2-country="{{asset($proyecto->logo)}}">{{$proyecto->nombre}}</option>
                @endforeach
            </select>
        </div>
        <div class="col-lg-3 col-md-3">
            <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 del proyecto</div>
                <div class="d-flex align-items-center">
                    <i class="fas 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-success" id="seccionPresupuestoGeneral" data-kt-countup="true" data-kt-countup-value="0" data-kt-countup-prefix="$">
                        $0
                    </div>
                </div>
                <!--end::Number-->
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <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">Costo Real del proyecto</div>
                <div class="d-flex align-items-center">
                    <i class="fas fa-arrow-up text-success fs-3 me-2" id="flechasGastados">
                        <span class="path1"></span>
                        <span class="path2"></span>
                    </i>
                    <div class="fs-4 fw-bold text-success" id="seccionPresupuestoGastado" data-kt-countup="true" data-kt-countup-value="0" data-kt-countup-prefix="$">
                        $0
                    </div>
                </div>
                <!--end::Number-->
            </div>
        </div>
        <div class="col-lg-3 col-md-3">
            <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">Fechas proyecto</div>
                <div class="d-flex align-items-center">
                    <div class="fs-4 fw-bold" id="fechasProyecto">--/--/----</div>
                </div>
                <!--end::Number-->
            </div>
        </div>
    </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">
                <div class="flex-column flex-lg-row-auto w-100 mb-10 mb-lg-0 h-100">
                    <div class="row">
                        <div class="col-lg-8 col-md-8">
                            <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">Componente</th>
                                                        <th width="10%" class="text-center all">Actividad</th>
                                                        <th width="10%" class="text-center all">Presupuesto</th>
                                                        <th width="10%" class="text-center all">Costo Real</th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-md-4">
                            <div class="card card-flush h-100">
                                <div class="card-body pt-5" id="kt_chat_contacts_body">
                                    <div id="chartdiv"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 mt-5">
                            <div class="card card-flush h-100">
                                <div class="card-body pt-5" id="kt_chat_contacts_body">
                                    <div id="chartPresupuesto"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 col-md-12 mt-5">
                            <div class="card card-flush h-100">
                                <div class="card-body pt-5" id="kt_chat_contacts_body">
                                    <div class="gantt_control mb-4">
                                        <input value="Exportar PDF" class="btn btn-eliminar btnExportarPDF" disabled type="button">
                                        <input value="Exportar PNG" class="btn btn-iniciar btnExportarPNG" disabled type="button">
                                    </div>
                                    
                                    <div id="gantt_here" style='width:100%; height:100%;'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
@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>
@endsection