{% extends 'base.html.twig' %}


{% block title %}{{ 'Plan execution Gantt'|trans  }}{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/lib/daypilot/themes/adbp.css') }}">
<link rel="stylesheet" href="{{ asset('css/actionsgantt.css') }}">
{{ parent() }}
{% endblock %}

{% block extra_breadcrumb_buttons %}
    <div class="breadcrumb_button" style="display:none">
        <a href="#!" class="waves-effect button_print_gantt"><i class="fas fa-print"></i></a>
    </div>
{% endblock %}
{% block body %}
<div class="container-fluid">
    {% if plan %}
        <div class="selection_plan">
            <div class="row">
                <div class="col-md-12">
                    {% if active_plans is not empty and active_plans|length > 1 %}
                    <select id="plan_selection" class="mdb-select md-form"}}">
                        {% for active_plan in active_plans %}
                        <option value="{{active_plan.rowid}}" {% if plan.rowid == active_plan.rowid %}selected="selected"{%endif%} >{{active_plan.title}}</option>
                        {% endfor %}
                    </select>
                    <label class="mdb-main-label">{{ 'execution_gantt.choose_plans'|trans }}</label>
                    {% elseif plan %}
                    {{plan.title}}
                    {% endif %}
                </div>
            </div>
        </div>

        <div id="dp" class="gantt"></div>
        <form id="actions_gantt" action="{{path("update_execution_gantt", {"plan_rowid":plan.rowid})}}" method="post" name="actions_gantt"  enctype="multipart/form-data"> 
            <div class="row">
                <div class="md-form col-sm">
                    <button type="submit" id="submit_gantt" name="submit_gantt" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect" data-path="{{path("update_execution_gantt", {"plan_rowid":plan.rowid})}}">{{ 'gantt_actions.enviar'|trans  }}</button>
                </div>
            </div>
        </form>
    {% endif %}
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/plan/executionGantt.js') }}"></script>
<script src="{{ asset('js/lib/daypilot/daypilot-all.min.js') }}"></script>
<script type="text/javascript">

    //$(document).ready(function () {

    //        var dp = new DayPilot.Scheduler("dp");
    //        var bubble = new DayPilot.Bubble({
    //                cssOnly: true,
    //                cssClassPrefix: "bubble_default",
    //                onLoad: function(args) {
    //                  var r = args.source;
    //                  args.async = true;  // notify manually using .loaded()
            
    //                  // simulating slow server-side load
    //                  setTimeout(function() {
    //                    args.html = "testing bubble for: <br>" + r.id;
    //                    args.loaded();
    //                  }, 500);
    //                }
    //        });

    //        // behavior and appearance
    //        dp.cellWidth = 100;
    //        dp.width = "auto";

    //        // view
    //        var tmpd = new Date();

    //        var departments = {
    //        'SALES': { color: '#006bb3', title: 'Sales' }, 'BDEV': { color: '#9500a0', title: 'Business Development' }, 'AFS': { color: '#ad4906', title: 'Aftersales' }};
    //        var contracts = {
    //        'AG': { color: '#ff8300', title: 'Agricultural' }, 'GC': { color: '#34bb0a', title: 'Groundcare' }, 'CN': { color: '#00abff', title: 'Construction' } };
    //        var conditions = {
    //            'off': { title: 'Action start date not reached.' },
    //            'red': { title: 'Action deadline reached, not marked as \'Started\' or \'Finished\'.' },
    //            'amber': { title: 'Action started' },
    //            'green': { title: 'Action finished' }};

    //        var tmpdy = tmpd.getFullYear();
    //        var tmpdm = ("0" + (tmpd.getMonth() + 1)).slice(-2);
    //        var tmpdd = ("0" + (tmpd.getDay() + 1)).slice(-2);

    //        dp.startDate = tmpdy + "-01-01";
    //        dp.cellGroupBy = "Month";
    //        dp.days = 365;
    //        dp.moveBy = 'Full';

    //        dp.snapToGrid = false;
    //        dp.useEventBoxes = "Never";

    //        dp.timeHeaders = [
    //            { groupBy: "Year" },
    //            { groupBy: "Quarter" },
    //            { groupBy: "Cell" }
    //        ];
    //        dp.scale = "Month";

    //        // bubble, sync loading
    //        // see also DayPilot.Event.data.staticBubbleHTML property
    //        dp.bubble = new DayPilot.Bubble();

    //        dp.contextMenu = new DayPilot.Menu({
    //            items: [
    //                { text: "Show event ID", onclick: function () { alert("Event value: " + this.source.value()); } },
    //                { text: "Show event text", onclick: function () { alert("Event text: " + this.source.text()); } },
    //                { text: "Show event start", onclick: function () { alert("Event start: " + this.source.start().toStringSortable()); } },
    //            ]
    //        });

    //        dp.theme = "adbp";
    //        // dp.treeEnabled = true;
    //        dp.rowHeaderWidth = 260;
    //        dp.rowMinHeight = 55;
    //        dp.eventHeight = 55;
    //        dp.resources = [
    //            { name: "ACTION #1 NAME", id: "ACTION.1",   tags: { rowid: 1, level: 0, mandatory: true, department: 'SALES', contracts: 'AG,GC', status: 'done', condition: 'green', editable: false } },
    //            { name: "ACTION #2 NAME", id: "ACTION.2",   tags: { rowid: 2, level: 0, mandatory: false, department: 'SALES', contracts: 'AG', status: 'undone', condition: 'red', editable: false } },
    //            { name: "ACTION #3 NAME", id: "ACTION.3",   tags: { rowid: 3, level: 1, mandatory: true, department: 'SALES', contracts: 'AG', status: 'undone', condition: 'red', editable: false } },
    //            { name: "ACTION #4 NAME", id: "ACTION.4",   tags: { rowid: 4, level: 1, mandatory: false, department: 'BDEV', contracts: 'AG', status: 'pending', condition: 'amber', editable: true } },
    //            { name: "ACTION #5 NAME", id: "ACTION.5",   tags: { rowid: 5, level: 2, mandatory: false, department: 'AFS', contracts: 'GC', status: 'undone', condition: 'off', editable: true } },
    //            { name: "ACTION #6 NAME", id: "ACTION.6",   tags: { rowid: 6, level: 1, mandatory: true, department: 'AFS', contracts: 'AG,GC', status: 'undone', condition: 'off', editable: true } },
    //            { name: "ACTION #7 NAME", id: "ACTION.7",   tags: { rowid: 7, level: 2, mandatory: false, department: 'BDEV', contracts: 'GC', status: 'undone', condition: 'off', editable: true } },
    //            { name: "ACTION #8 NAME", id: "ACTION.8",   tags: { rowid: 8, level: 1, mandatory: false, department: 'AFS', contracts: 'AG,GC,CN', status: 'undone', condition: 'off', editable: true } },
    //            { name: "ACTION #9 NAME", id: "ACTION.9",   tags: { rowid: 9, level: 0, mandatory: true, department: 'SALES', contracts: 'AG', status: 'undone', condition: 'off', editable: true } },
    //            { name: "ACTION #10 NAME", id: "ACTION.10", tags: { rowid: 10, level: 2, mandatory: false, department: 'SALES', contracts: 'AG,GC', status: 'undone', condition: 'off', editable: true } }
    //        ];

    //        dp.separators = [
    //            { color: "red", location: tmpdy + "-" + tmpdm + "-" + tmpdd + "T12:00:00" }
    //        ];



    //        // generate and load events
    //        for (var i = 0; i < 1; i++) {
    //            var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
    //            var start = Math.floor(Math.random() * 6) - 3; // -3 to 3

    //            var e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-01-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-03-31T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.1",
    //                text: "Event",
    //                tags: { durationdescription: 'JAN - MAR' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-02-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-02-28T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.2",
    //                text: "Event",
    //                tags: { durationdescription: 'FEB' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-02-15T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-03-31T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.3",
    //                text: "Event",
    //                tags: { durationdescription: '15/FEB - 31/MAR' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-04-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-05-30T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.4",
    //                text: "Event",
    //                tags: { durationdescription: 'APR - MAY' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-06-15T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-06-30T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.5",
    //                text: "Event",
    //                tags: { durationdescription: '15/JUN - 30/JUN' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-07-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-07-31T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.6",
    //                text: "Event",
    //                tags: { durationdescription: 'JUL' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-08-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-08-31T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.7",
    //                text: "Event",
    //                tags: { durationdescription: 'AUG' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-08-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-09-30T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.8",
    //                text: "Event",
    //                tags: { durationdescription: '01/AUG - 30/SEP' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-10-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-11-15T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.9",
    //                text: "Event",
    //                tags: { durationdescription: '01/OCT - 15/NOV' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);

    //            e = new DayPilot.Event({
    //                start: new DayPilot.Date(tmpdy + "-11-01T00:00:00"),
    //                end: new DayPilot.Date(tmpdy + "-12-31T12:00:00"),
    //                id: DayPilot.guid(),
    //                resource: "ACTION.10",
    //                text: "Event",
    //                tags: { durationdescription: 'NOV - DEC' },
    //                moveVDisabled: true,
    //                moveHDisabled: true
    //            });

    //            dp.events.add(e);
    //        }

    //        dp.eventHoverHandling = "Bubble";

    //        dp.onBeforeEventRender = function (args) {

    //            var rowitem = dp.rows.find(args.e.resource).data;
    //            var department = rowitem.tags.department;

    //            args.data.barColor = departments[department].color;

    //            args.e.html = '<div style="position: absolute;right: 2px;top: 2px;height: 17px;text-align: right;">';


    //            if (rowitem.tags.level <= 1) {
    //                args.e.html += '<i class="fas fa-star fa-xs" style="color: ' + (!rowitem.tags.editable ? '#797979' : '#004c82') + ';"></i>';
    //            }
    //            if (rowitem.tags.level == 0) {
    //                args.e.html += '<i class="fas fa-star fa-xs" style="color: ' + (!rowitem.tags.editable ? '#797979' : '#004c82') + ';"></i>';
    //            }
    //            if (rowitem.tags.mandatory) {
    //                args.e.html += '<i class="fas fa-lock fa-xs" style="color: ' + (!rowitem.tags.editable ? '#797979' : 'red') + ';"></i>';
    //            }

    //            args.e.html += '</div>';
    //            args.e.html += '<div style="position: absolute; left: 2px; bottom: 1px; font-size: 9px;">' + args.e.tags.durationdescription + '</div>';

    //            args.e.bubbleHtml = '<b>' + rowitem.name + '</b><br>' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' + '<br>' + args.e.tags.durationdescription;

    //            if (!rowitem.tags.editable) {
    //                args.data.barColor = "#797979";
    //                args.e.backColor = "#e8e8e8";
    //            }
    //        };



    //        dp.onBeforeResHeaderRender = function (args) {

    //            if (args.resource.loaded != null && args.resource.loaded !== false)
    //                return;

    //            var beditable = args.resource.tags.editable;
    //            var stractionstatus = args.resource.tags.status;
    //            var bactionstarted = (stractionstatus != 'undone');
    //            var bactionfinished = (stractionstatus == 'pending' || stractionstatus == 'done');
    //            var bactioncanbefinished = (stractionstatus == 'started' || stractionstatus == 'pending');
    //            var dpt = args.resource.tags.department;

    //            // status: done, undone, started, pending

    //            args.resource.html = '<div class="agrowheader' + (!beditable ? ' disabledaction' : '') + '">';

    //            args.resource.html+=    '<div class="agtlights material-tooltip-email" id="actiontlights' + args.resource.tags.rowid + '" data-toggle="tooltip" title="' + conditions[args.resource.tags.condition].title + '">';
    //            args.resource.html+=        '<div class="agtlight ' + (args.resource.tags.condition !== 'red' ? 'off' : 'red') + '"></div>';
    //            args.resource.html+=        '<div class="agtlight ' + (args.resource.tags.condition !== 'amber' ? 'off' : 'amber') + '"></div>';
    //            args.resource.html+=        '<div class="agtlight ' + (args.resource.tags.condition !== 'green' ? 'off' : 'green') + '"></div>';
    //            args.resource.html+=    '</div>';

    //            args.resource.html +=   '<div class="agchecks">';
    //            args.resource.html +=       '<input type="checkbox" class="form-check-input agactionstarted agactionstatus' + stractionstatus + '" id="actioncheck' + args.resource.tags.rowid + 'start"' + (!beditable ? ' disabled' : '') + (bactionstarted ? ' checked' : '') + '>';
    //            args.resource.html +=       '<label class="form-check-label agactionstarted agactionstatus' + stractionstatus + '" for="actioncheck' + args.resource.tags.rowid + 'start" style="padding-left: 26px;"></label>';
    //            args.resource.html +=       '<input type="checkbox" class="form-check-input agactionfinished agactionstatus' + stractionstatus + '" id="actioncheck' + args.resource.tags.rowid + 'end"' + (!beditable || !bactioncanbefinished ? ' disabled' : '') + (bactionfinished ? ' checked' : '') + '>';
    //            args.resource.html +=       '<label class="form-check-label agactionfinished agactionstatus' + stractionstatus + '" for="actioncheck' + args.resource.tags.rowid + 'end" style="padding-left: 26px;"></label>';
    //            args.resource.html +=   '</div>';

    //            args.resource.html +=   '<div class="agtextarea">' +
    //                                        '<div class="agtitle">' + args.resource.name + '</div>' +
    //                                        '<div class="agdescription">' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua' + '</div>' +
    //                                    '</div>';


    //            var actionleveltitle;
                
    //            if (args.resource.tags.level == 0) {
    //                actionleveltitle = 'Market level action';
    //            }
    //            else if (args.resource.tags.level == 1) {
    //                actionleveltitle = 'European level action';
    //            }
    //            else {
    //                actionleveltitle = 'Dealer action';
    //            }

    //            if (args.resource.tags.mandatory) {
    //                actionleveltitle+= ', Mandatory';
    //            }

    //            args.resource.html +=   '<div class="agactionlevel material-tooltip-email" data-toggle="tooltip" title="' + actionleveltitle + '">';

    //            if (args.resource.tags.level <= 1) {
    //                args.resource.html += '<i class="fas fa-star" style="color: #ff8300;"></i>';
    //            }
    //            if (args.resource.tags.level == 0) {
    //                args.resource.html += '<i class="fas fa-star" style="color: #ff8300;"></i>';
    //            }
    //            if (args.resource.tags.mandatory) {
    //                args.resource.html += '<br><i class="fas fa-lock" style="color: red;"></i>';
    //            }

    //            args.resource.html +=   '</div>';

    //            args.resource.html +=   '<div class="agactiondepartment material-tooltip-email" data-toggle="tooltip" title="'+departments[dpt].title+'" style="background-color: ' + departments[dpt].color + '; color: white;">';
    //            args.resource.html +=       dpt;
    //            args.resource.html +=   '</div>';

    //            args.resource.html += '<div class="agactioncontracts">';

    //            var acontracts = args.resource.tags.contracts.split(',');

    //            if (acontracts.length < 3) {
    //                acontracts.forEach(function (cn) {
    //                    args.resource.html += '<div class="agactioncontract material-tooltip-email" data-toggle="tooltip" title="'+contracts[cn].title+'" style="background-color: ' + contracts[cn].color + '; color: white;">' + cn + '</div>';
    //                })
    //            }
    //            else {
    //                args.resource.html += '<div class="agactioncontract material-tooltip-email" data-toggle="tooltip" title="All contracts" style="background-color: #2F2F2F; color: white;">' + 'ALL' + '</div>';
    //            }

    //            args.resource.html += '</div>';

    //            if (!beditable) {
    //                args.resource.backColor = "#f7f7f7";
    //            }
    //        };

    //        // event moving
    //        dp.onEventMoved = function (args) {
    //            dp.message("Moved: " + args.e.text());
    //        };

    //        // event resizing
    //        dp.onEventResized = function (args) {
    //            dp.message("Resized: " + args.e.text());
    //        };

    //        // event creating
    //        dp.onTimeRangeSelected = function (args) {
    //            var name = prompt("New event name:", "Event");
    //            dp.clearSelection();
    //            if (!name) return;
    //            var e = new DayPilot.Event({
    //                start: args.start,
    //                end: args.end,
    //                id: DayPilot.guid(),
    //                resource: args.resource,
    //                text: name
    //            });
    //            dp.events.add(e);
    //            dp.message("Created");
    //        };

    //        dp.onEventClicked = function (args) {
    //            alert("clicked: " + args.e.id());
    //        };

    //        dp.onTimeHeaderClick = function (args) {
    //            alert("clicked: " + args.header.start);
    //        };

    //        /*
    //            dp.onAfterRender = function() {
    //                var remaining = $(dp.nav.scroll).innerWidth();
    //                var columns = dp.itline.length;
    //                var newCellWidth = Math.floor(remaining/columns);
    //                dp.cellWidth = newCellWidth;
    //                dp.update();
    //            };
    //        */
    //        dp.init();

    //    dp.scrollTo("2013-03-25");

    //    //$('body').on('click', '.adbp_main .agrowheader > .agtlights', function (e) {
    //    //    var $this = $(this);

    //    //    $this.tooltip({title:"<em>Tooltip</em> <u>with</u> <b>HTML</b>"});

    //    //    });

    //    $('body').tooltip({
    //        selector: '.material-tooltip-email',
    //        template: '<div class="tooltip md-tooltip-email"><div class="tooltip-arrow md-arrow"></div><div class="tooltip-inner md-inner-email"></div></div>'
    //    });

    //    $('body').on('change', '.agactionstarted[type="checkbox"]', function () {
    //        var $checkbox = $(this);
    //        var $altcheckbox = $checkbox.parent().children('.agactionfinished[type="checkbox"]');

    //        if (!$checkbox.prop('checked')) {
    //            $altcheckbox.prop('disabled', true);
    //            $altcheckbox.prop('checked', false);
    //        }
    //        else {
    //            $altcheckbox.prop('disabled', false);
    //        }

    //    });

    //});
</script>
{% endblock %}