@extends('layouts.app')

@section('content')
    <div class="row">
        {!! $filter_area !!}
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="card collapsible">
                <div id="dashboard_tickets" class="header card-inside-title">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <h2 class="pointer mb-0">
                                Timeline
                                <span class="expander ms-2">
                                    <i class="material-icons">timeline</i>
                                </span>
                            </h2>
                        </div>
                    </div>
                </div>
                <div id="timelineChart" style="min-height:400px"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = @json($data);
        var parsedData = JSON.parse(data);
        var container = document.getElementById('timelineChart');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn({ type: 'string', id: 'User' });
        dataTable.addColumn({ type: 'string', id: 'Action' });
        dataTable.addColumn({ type: 'datetime', id: 'Start' });
        dataTable.addColumn({ type: 'datetime', id: 'End' });

        var rows = parsedData.map(function(item) {
            return [
                item.name,
                item.description,
                new Date(item.created_at),
                new Date(item.finished_at)
            ];
        });

        dataTable.addRows(rows);

        chart.draw(dataTable);
    }
    </script>
@endsection