@extends('layouts.app')
@inject('employeeRepository', 'Modules\Employee\Repositories\EmployeeRepository')
@push('css')
  <link rel="stylesheet" type="text/css" href="{{ asset('assets/libs/dragula/dragula.min.css') }}" />
@endpush
@section('content')
    <div class="container-fluid">

        <x-dashboard.breadcumb :title="$title" />


      @include('pms::task.gantt.filter')

      <div class="card">
        <div class="card-header">
          <h4 class="card-title mb-0">Gantt Chart</h4>
        </div>
        <div class="card-body">
          <div id="chart_div"></div>
        </div>
      </div>
    </div>
@endsection
@push('js')
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['gantt']
    });
    google.charts.setOnLoadCallback(drawChart);

    async function drawChart(formData) {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      const fetchData = await getData(formData)

      fetchData.data.forEach(element => {

        const startDateParts = element.startDate.split('-');
        const endDateParts = element.endDate.split('-');

        const startDate = new Date(startDateParts[0], startDateParts[1] - 1, startDateParts[2]);
        const endDate = new Date(endDateParts[0], endDateParts[1] - 1, endDateParts[2]);

        data.addRow([
          element.taskID.toString(),
          element.taskName,
          element.resource,
          startDate,
          endDate,
          element.duration,
          element.percentComplete,
          element.dependencies
        ]);
      });

      var options = {
        height: 400,
        responsive: true,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

    const getData = async (formData) => {
      const queryString = new URLSearchParams(formData).toString();
      return await fetch(`{{ route('task.getGantChartTask') }}?${queryString}`, {
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'url': '/task/get-gant-chart-ajax',
            "X-CSRF-Token": document.querySelector('input[name=_token]').value
          },
        })
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          return data;
        })
        .catch(error => {
          console.error('There was a problem with the fetch operation:', error);
        });
    }

    $('.ganttChartForm').on('submit', function(e) {
      e.preventDefault();
      formData = $(this).serialize();
      drawChart(formData);
    })

    $('.btn-reset').on('click', function(e) {
      e.preventDefault();
      $('.ganttChartForm')[0].reset();
      drawChart();
    })


    $(window).resize(function() {
      drawChart();
    });
  </script>
@endpush