@extends('layouts.dashboard_layout')

@section('title', 'Gantt')

@section('head')
    <link rel="stylesheet" href="{{ asset('assets/css/style.bundle.css') }}">
    <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;
        }

        .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: 90vh !important;
        }
        
        .highlighted-column {
			background-color: #fff3a1;
		}

		.gantt_task_scale .gantt_scale_cell {
			cursor: default;
		}

		.gantt_task_scale .gantt_scale_cell.highlighted-column {
			color: #454545;
			font-weight: bold;
		}
    </style>
@endsection

@section('content')
    <div class="container-fluid p-3 table-acta">

        @include('partials.alerts', ['success' => 'success', 'error' => 'error', 'warning' => 'warning'])

        <label class="text-align">Gantt</label>
        <div id="myCover" class="p-2 bg-white">
            <div class="gantt_control mb-4">
                <div class="row mt-2">
                    <div class="col-lg-2 col-md-2">
                        <input value="Exportar PDF" class="btn btn-eliminar btnExportarPDF" type="button">
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <input value="Exportar PNG" class="btn btn-iniciar btnExportarPNG" type="button">
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <input value="Export to MS Project" class="btn btn-iniciar btnExportarMS" type="button">
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <input value="Export to Excel" class="btn btn-success btnExportarExcel" type="button">
                    </div>
                </div>
                <div class="row mt-2">
                    <div class="col-lg-2 col-md-2">
                        <button class="btn btn-iniciar btnZoomToFit" type="button">
                            <i class="fas fa-search-plus fs-1 text-white"></i>
                            Zoom to Fit
                        </button>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <button class="btn btn-iniciar btnZoomIn" type="button">
                            <i class="fas fa-search-plus fs-1 text-white"></i>
                            Zoom In
                        </button>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <button class="btn btn-iniciar btnZoomOut" type="button">
                            <i class="fas fa-search-minus fs-1 text-white"></i>
                            Zoom Out
                        </button>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <button class="btn btn-iniciar btnProgresoLinea" type="button">
                            <i class="fas fa-chart-line fs-1 text-white"></i>
                            Toggle Progress Line
                        </button>
                    </div>
                    <div class="col-lg-2 col-md-2">
                        <div class="form-check form-switch form-check-custom form-check-solid">
                            <input class="form-check-input" type="checkbox" value="1" id="rutaCritica" />
                            <label class="form-check-label" for="rutaCritica">
                                Ruta Critica
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="gantt_here" style='width:100%; height:100%;'></div>
        </div>
    </div>
@endsection

@section('scripts')
    <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>
    <script>
        window.id_gantt = {{ $gantt->id }};
    </script>
    <script src="{{ mix('js/gantt/ver.js') }}"></script>
@endsection