@extends('admin.partial.admin_master')
@section('title')
<title>Project Tracking | Aplikasi Project Management</title>
@endsection
@section('css')
    <link href="{{ asset('backend/assets/css/vendor/frappe-gantt.css') }}" rel="stylesheet" type="text/css" />       
    <link href="{{ asset('backend/assets/css/icons.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend/assets/css/app.min.css') }}" rel="stylesheet" type="text/css" id="app-style"/>
    <script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
    <link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">

    <style type="text/css">
        html, body{
            height:100%;
            padding:0px;
            margin:0px;
            overflow: hidden;
        }

        .gantt_task_progress{
            background: green;
        }
        .gantt_task_line {
            background: red;
            border: 1px solid #ffffff;
        }
    </style>

@endsection
@section('main')


    
    
<div class="ganttchart" style="display: inline-block; width: 100%; height: 500px;">
    <div id="gantt_here" style='width:100%; height:100%;'></div>
    {{-- <div id="gantt_here"></div> --}}
</div>    


    


@endsection
@section('js')
<script type="text/javascript">
    $(document).ready(function(){
        var id = response['data'].id;
        $.ajax({
            url: '/project-tracking/gantt/' + id,
            type: 'get',
            dataType: 'JSON',
            success: function(response)
            {
               
                gantt.config.xml_date = "%Y-%m-%d %H:%i:%s";
                gantt.config.order_branch = true;
                gantt.config.order_branch_free = true;
                gantt.init("gantt_here");
                gantt.load('/api/data/'+id);

                var dp = new gantt.dataProcessor("/api");
                dp.init(gantt);
                dp.setTransactionMode("REST");

            }
        })
    })
    

</script>
    <script src="{{ asset('backend/assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/app.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/vendor/frappe-gantt.min.js') }}"></script>
    <script src="{{ asset('backend/assets/js/pages/demo.project-gantt.js') }}"></script>
@endsection