@extends('layouts.dashboard_layout')

@section('title', 'Gantt')

@section('head')
    @parent
    <link rel="stylesheet" href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@endsection

@section('content')
<div class="container-fluid container-column d-flex justify-content-between align-items-center">
    <div class="search-bar">
      <select class="form-select mb-3" id="projectSelect">
          <option value="">Selecciona un proyecto</option>
          @foreach($projectNames as $projectId => $projectName)
              <option value="{{ $projectId }}">{{ $projectName }}</option>
          @endforeach
      </select>
    </div>
</div>

<div class="container-fluid p-3 mt-3 table-acta">
  <label class="text-align mb-3">Gantt</label>
  <div id="gantt_here" style='width:100%; height:50vh;'></div>
</div>
@endsection

@section('scripts')
  @parent
  <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  <script type="text/javascript"></script>
  <script src="{{ asset('js/gantt/gantt.js') }}"></script>
  <script src="{{ asset('js/gantt/select2.js') }}"></script>
@endsection