@push('dhtmlxgantt')
    <link href="{{ secure_asset('assets/css/dhtmlxgantt.css') }}" rel="stylesheet">


    <script src="{{ secure_asset('assets/js/dhtmlxgantt.js') }}"></script>
    <script>
//         window.ganttModules = {};

//         function addClass(node, className) {
//             node.classList.add(className);
//         }

//         function removeClass(node, className) {
//             node.classList.remove(className);
//         }

//         function getButton(name) {
//             return document.querySelector(".demo-actions [data-action='" + name + "']");
//         }

//         function highlightButton(name) {
//             addClass(getButton(name), "menu-item-active");
//         }

//         function unhighlightButton(name) {
//             removeClass(getButton(name), "menu-item-active");
//         }

//         function disableButton(name) {
//             addClass(getButton(name), "disabled");
//         }

//         function enableButton(name) {
//             removeClass(getButton(name), "disabled");
//         }

//         function refreshUndoBtns() {
//             if (!gantt.getUndoStack || !gantt.getUndoStack().length) {
//                 disableButton("undo");
//             } else {
//                 enableButton("undo");
//             }

//             if (!gantt.getRedoStack || !gantt.getRedoStack().length) {
//                 disableButton("redo");
//             } else {
//                 enableButton("redo");
//             }
//         }

//         setInterval(refreshUndoBtns, 1000);


//         const toolbarMenu = {
//             undo: function() {
//                 gantt.undo();
//                 refreshUndoBtns();
//             },
//             redo: function() {
//                 gantt.redo();
//                 refreshUndoBtns();
//             },
//             zoomToFit: function() {
//                 ganttModules.zoomToFit.toggle();
//                 toggleCheckbox(zoomToFitCheckbox, config.zoom_to_fit);
//                 const scalesDropdown = document.querySelector("#scale_combo");
//                 const zoomLevelName = zoomConfig.levels[gantt.ext.zoom.getCurrentLevel()].name;
//                 scalesDropdown.value = zoomLevelName;
//             },
//             fullscreen: function() {
//                 gantt.ext.fullscreen.toggle();
//             },
//             collapseAll: function() {
//                 gantt.eachTask(function(task) {
//                     task.$open = false;
//                 });
//                 gantt.render();

//             },
//             expandAll: function() {
//                 gantt.eachTask(function(task) {
//                     task.$open = true;
//                 });
//                 gantt.render();
//             },
//             toggleAutoScheduling: function() {
//                 gantt.config.auto_scheduling = !gantt.config.auto_scheduling;

//                 if (gantt.config.auto_scheduling) {
//                     gantt.autoSchedule();
//                 }
//             },
//             toggleCriticalPath: function() {
//                 gantt.config.highlight_critical_path = !gantt.config.highlight_critical_path;

//                 gantt.render();
//             },
//             toPDF: function() {
//                 gantt.exportToPDF({
//                     header: `<style>.timeline_cell{width: ${gantt.$task_data.scrollWidth}px !important;}</style>`,
//                     raw: true
//                 });
//             },
//             toPNG: function() {
//                 gantt.exportToPNG({
//                     header: `<style>.timeline_cell{width: ${gantt.$task_data.scrollWidth}px !important;}</style>`,
//                     raw: true
//                 });
//             },
//             toExcel: function() {
//                 gantt.exportToExcel();
//             },
//             toMSProject: function() {
//                 gantt.exportToMSProject();
//             }
//         };

//         const zoomConfig = {
//             levels: [{
//                     name: "hours",
//                     scales: [{
//                             unit: "day",
//                             step: 1,
//                             format: "%j %M"
//                         },
//                         {
//                             unit: "hour",
//                             step: 1,
//                             format: "%H:%i"
//                         },
//                     ],
//                     round_dnd_dates: true,
//                     min_column_width: 30,
//                     scale_height: 60
//                 },
//                 {
//                     name: "days",
//                     scales: [{
//                             unit: "week",
//                             step: 1,
//                             format: "%W"
//                         },
//                         {
//                             unit: "day",
//                             step: 1,
//                             format: "%j"
//                         },
//                     ],
//                     round_dnd_dates: true,
//                     min_column_width: 60,
//                     scale_height: 60
//                 },
//                 {
//                     name: "weeks",
//                     scales: [{
//                             unit: "month",
//                             step: 1,
//                             format: "%M"
//                         },
//                         {
//                             unit: "week",
//                             step: 1,
//                             format: function(date) {
//                                 const dateToStr = gantt.date.date_to_str("%d %M");
//                                 const endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
//                                 return dateToStr(date) + " - " + dateToStr(endDate);
//                             }
//                         }
//                     ],
//                     round_dnd_dates: false,
//                     min_column_width: 60,
//                     scale_height: 60
//                 },
//                 {
//                     name: "months",
//                     scales: [{
//                             unit: "year",
//                             step: 1,
//                             format: "%Y"
//                         },
//                         {
//                             unit: "month",
//                             step: 1,
//                             format: "%M"
//                         }
//                     ],
//                     round_dnd_dates: false,
//                     min_column_width: 50,
//                     scale_height: 60
//                 },
//                 {
//                     name: "quarters",
//                     scales: [{
//                             unit: "year",
//                             step: 1,
//                             format: "%Y"
//                         },
//                         {
//                             unit: "quarter",
//                             step: 1,
//                             format: function quarterLabel(date) {
//                                 const month = date.getMonth();
//                                 let q_num;

//                                 if (month >= 9) {
//                                     q_num = 4;
//                                 } else if (month >= 6) {
//                                     q_num = 3;
//                                 } else if (month >= 3) {
//                                     q_num = 2;
//                                 } else {
//                                     q_num = 1;
//                                 }

//                                 return "Q" + q_num;
//                             }
//                         },
//                         {
//                             unit: "month",
//                             step: 1,
//                             format: "%M"
//                         }
//                     ],
//                     round_dnd_dates: false,
//                     min_column_width: 50,
//                     scale_height: 60
//                 },
//                 {
//                     name: "years",
//                     scales: [{
//                             unit: "year",
//                             step: 1,
//                             format: "%Y"
//                         },
//                         {
//                             unit: "year",
//                             step: 5,
//                             format: function(date) {
//                                 const dateToStr = gantt.date.date_to_str("%Y");
//                                 const endDate = gantt.date.add(gantt.date.add(date, 5, "year"), -1, "day");
//                                 return dateToStr(date) + " - " + dateToStr(endDate);
//                             }
//                         }
//                     ],
//                     round_dnd_dates: false,
//                     min_column_width: 50,
//                     scale_height: 60
//                 },
//                 {
//                     name: "years",
//                     scales: [{
//                             unit: "year",
//                             step: 10,
//                             format: function(date) {
//                                 const dateToStr = gantt.date.date_to_str("%Y");
//                                 const endDate = gantt.date.add(gantt.date.add(date, 10, "year"), -1, "day");
//                                 return dateToStr(date) + " - " + dateToStr(endDate);
//                             }
//                         },
//                         {
//                             unit: "year",
//                             step: 100,
//                             format: function(date) {
//                                 const dateToStr = gantt.date.date_to_str("%Y");
//                                 const endDate = gantt.date.add(gantt.date.add(date, 100, "year"), -1,
//                                     "day");
//                                 return dateToStr(date) + " - " + dateToStr(endDate);
//                             }
//                         }
//                     ],
//                     round_dnd_dates: false,
//                     min_column_width: 50,
//                     scale_height: 60
//                 }
//             ]
//         }

//         gantt.ext.zoom.init(zoomConfig);


//         let zoomToFitMode = false;
//         ganttModules.zoomToFit = (function(gantt) {
//             let cachedSettings = {};

//             function saveConfig() {
//                 const config = gantt.config;
//                 cachedSettings = {};
//                 cachedSettings.scales = config.scales;
//                 cachedSettings.template = gantt.templates.date_scale;
//                 cachedSettings.start_date = config.start_date;
//                 cachedSettings.end_date = config.end_date;
//                 cachedSettings.zoom_level = gantt.ext.zoom.getCurrentLevel();
//             }

//             function restoreConfig() {
//                 applyConfig(cachedSettings);
//             }

//             function applyConfig(config, dates) {
//                 if (config.scales[0].date) {
//                     gantt.templates.date_scale = null;
//                 } else {
//                     gantt.templates.date_scale = config.scales[0].template;
//                 }

//                 gantt.config.scales = config.scales;

//                 if (dates && dates.start_date && dates.start_date) {
//                     const unit = config.scales[config.scales.length - 1].unit
//                     gantt.config.start_date = gantt.date.add(dates.start_date, -1, unit);
//                     gantt.config.end_date = gantt.date.add(gantt.date[unit + "_start"](dates.end_date), 2, unit);
//                 } else {
//                     gantt.config.start_date = gantt.config.end_date = null;
//                 }

//                 if (config.zoom_level !== undefined) {
//                     gantt.ext.zoom.setLevel(config.zoom_level);
//                 }
//             }


//             function zoomToFit() {
//                 const project = gantt.getSubtaskDates(),
//                     areaWidth = gantt.$task.offsetWidth;
//                 const scaleConfigs = zoomConfig.levels

//                 let zoomLevel = 0;
//                 for (let i = 0; i < scaleConfigs.length; i++) {
//                     zoomLevel = i;
//                     const level = scaleConfigs[i].scales;
//                     const lowestScale = level[level.length - 1]
//                     const columnCount = getUnitsBetween(project.start_date, project.end_date, lowestScale.unit,
//                         lowestScale.step || 1);
//                     if ((columnCount + 2) * gantt.config.min_column_width <= areaWidth) {
//                         break;
//                     }
//                 }

//                 if (zoomLevel == scaleConfigs.length) {
//                     zoomLevel--;
//                 }

//                 gantt.ext.zoom.setLevel(scaleConfigs[zoomLevel].name);
//                 applyConfig(scaleConfigs[zoomLevel], project);

//                 gantt.render();
//             }

//             // get number of columns in timeline
//             function getUnitsBetween(from, to, unit, step) {
//                 let start = new Date(from),
//                     end = new Date(to);
//                 let units = 0;
//                 while (start.valueOf() < end.valueOf()) {
//                     units++;
//                     start = gantt.date.add(start, step, unit);
//                 }
//                 return units;
//             }

//             return {
//                 enable: function() {
//                     zoomToFitMode = true;
//                     saveConfig();
//                     zoomToFit();
//                     gantt.render();
//                 },
//                 toggle: function() {
//                     if (zoomToFitMode) {
//                         this.disable();
//                     } else {
//                         this.enable();
//                     }
//                 },
//                 disable: function() {
//                     zoomToFitMode = false;
//                     restoreConfig();
//                     gantt.render();
//                 }
//             };
//         })(gantt);


//         gantt.templates.grid_row_class = function(start, end, task) {
//             return gantt.hasChild(task.id) ? "gantt_parent_row" : "";
//         };

//         const font_width_ratio = 7;

//         gantt.templates.leftside_text = function leftSideTextTemplate(start, end, task) {
//             if (getTaskFitValue(task) === "left") {
//                 return task.text;
//             }
//             return "";
//         };

//         gantt.templates.rightside_text = function rightSideTextTemplate(start, end, task) {
//             if (getTaskFitValue(task) === "right") {
//                 return task.text;
//             }
//             return "";
//         };

//         gantt.templates.task_text = function taskTextTemplate(start, end, task) {
//             if (getTaskFitValue(task) === "center") {
//                 return task.text;
//             }
//             return "";
//         };

//         function getTaskFitValue(task) {
//             let taskStartPos = gantt.posFromDate(task.start_date),
//                 taskEndPos = gantt.posFromDate(task.end_date);

//             const width = taskEndPos - taskStartPos;
//             const textWidth = (task.text || "").length * font_width_ratio;

//             if (width < textWidth) {
//                 let ganttLastDate = gantt.getState().max_date;
//                 let ganttEndPos = gantt.posFromDate(ganttLastDate);
//                 if (ganttEndPos - taskEndPos < textWidth) {
//                     return "left"
//                 } else {
//                     return "right"
//                 }
//             } else {
//                 return "center";
//             }
//         }

//         gantt.config.static_background = true;

//         gantt.plugins({
//             marker: true,
//             fullscreen: true,
//             critical_path: true,
//             auto_scheduling: true,
//             tooltip: true,
//             undo: true,
//             export_api: true,
//         });

//         const date_to_str = gantt.date.date_to_str(gantt.config.task_date);
//         const today = new Date();
//         gantt.addMarker({
//             start_date: today,
//             css: "today",
//             text: "Today",
//             title: "Today: " + date_to_str(today)
//         });

//         const start = new Date(2019, 9, 28);
//         gantt.addMarker({
//             start_date: start,
//             css: "status_line",
//             text: "Start project",
//             title: "Start project: " + date_to_str(start)
//         });

//         gantt.attachEvent("onTaskCreated", function(item) {
//             if (item.duration == 1) {
//                 item.duration = 72;
//             }
//             return true;
//         });

//         gantt.ext.fullscreen.getFullscreenElement = function() {
//             return document.querySelector(".demo-main-container");
//         };

//         const durationFormatter = gantt.ext.formatters.durationFormatter({
//             enter: "day",
//             store: "day",
//             format: "day",
//             hoursPerDay: 24,
//             hoursPerWeek: 40,
//             daysPerMonth: 30,
//             short: true
//         });

//         const linksFormatter = gantt.ext.formatters.linkFormatter({
//             durationFormatter: durationFormatter
//         });

//         gantt.config.layout = {
//             css: "gantt_container",
//             cols: [{
//                     width: 424,
//                     min_width: 300,

//                     // adding horizontal scrollbar to the grid via the scrollX attribute
//                     rows: [{
//                             view: "grid",
//                             scrollX: "gridScroll",
//                             scrollable: true,
//                             scrollY: "scrollVer"
//                         },
//                         {
//                             view: "scrollbar",
//                             id: "gridScroll",
//                             group: "horizontalScrolls"
//                         }
//                     ]
//                 },
//                 {
//                     resizer: true,
//                     width: 1
//                 },
//                 {
//                     rows: [{
//                             view: "timeline",
//                             scrollX: "scrollHor",
//                             scrollY: "scrollVer"
//                         },
//                         {
//                             view: "scrollbar",
//                             id: "scrollHor",
//                             group: "horizontalScrolls"
//                         }
//                     ]
//                 },
//                 {
//                     view: "scrollbar",
//                     id: "scrollVer"
//                 }
//             ]
//         };

//         const hourFormatter = gantt.ext.formatters.durationFormatter({
//             enter: "day",
//             store: "day",
//             format: "day",
//             short: true
//         });

//         const textEditor = {
//             type: "text",
//             map_to: "text"
//         };
//         const dateEditor = {
//             type: "date",
//             map_to: "start_date",
//             min: new Date(2018, 0, 1),
//             max: new Date(2050, 0, 1)
//         };
//         const durationEditor = {
//             type: "duration",
//             map_to: "duration",
//             formatter: durationFormatter,
//             min: 0,
//             max: 10000
//         };
//         const hourDurationEditor = {
//             type: "duration",
//             map_to: "duration",
//             formatter: hourFormatter,
//             min: 0,
//             max: 10000
//         };
//         const predecessorEditor = {
//             type: "predecessor",
//             map_to: "auto",
//             formatter: linksFormatter
//         };
// // // console.log(dateEditor);
//         gantt.config.columns = [{
//                 name: "",
//                 width: 15,
//                 resize: false,
//                 template: function(task) {
//                     return "<span class='gantt_grid_wbs'>" + gantt.getWBSCode(task) + "</span>"
//                 }
//             },
//             {
//                 name: "text",
//                 tree: true,
//                 width: 180,
//                 resize: true,
//                 editor: textEditor
//             },
//             {
//                 name: "start_date",
//                 label: "Start",
//                 align: "center",
//                 resize: true,
//                 width: 80,
//                 editor: dateEditor
//             },
//             {
//                 name: "duration_formatted",
//                 label: "Duration",
//                 resize: true,
//                 align: "center",
//                 width: 60,
//                 template: function(task) {
//                     return durationFormatter.format(task.duration);
//                 },
//                 editor: durationEditor
//             },
//             {
//                 name: "duration_hours",
//                 label: "<div style='white-space: normal;line-height: 20px;margin: 10px 0;'>Duration (hours)</div>",
//                 resize: true,
//                 align: "center",
//                 width: 65,
//                 template: function(task) {
//                     return hourFormatter.format(task.duration * 24);
//                 },
//                 editor: hourDurationEditor
//             },
//             {
//                 name: "predecessors",
//                 label: "Predecessors",
//                 width: 80,
//                 align: "left",
//                 editor: predecessorEditor,
//                 resize: true,
//                 template: function(task) {
//                     const links = task.$target;
//                     const labels = [];
//                     for (let i = 0; i < links.length; i++) {
//                         const link = gantt.getLink(links[i]);
//                         labels.push(linksFormatter.format(link));
//                     }
//                     return labels.join(", ")
//                 }
//             },
//             // {
//             //     name: "add",
//             //     "width": 44
//             // }
//         ];


//         gantt.config.lightbox.sections = [{
//                 name: "description",
//                 height: 70,
//                 map_to: "text",
//                 type: "textarea",
//                 focus: true
//             },
//             {
//                 name: "type",
//                 type: "typeselect",
//                 map_to: "type",
//                 filter: function(name, value) {
//                     return !!(value != gantt.config.types.project);
//                 }
//             },
//             {
//                 name: "time",
//                 type: "duration",
//                 map_to: "auto",
//                 formatter: durationFormatter
//             }
//         ];
//         gantt.config.lightbox.project_sections = [{
//                 name: "description",
//                 height: 70,
//                 map_to: "text",
//                 type: "textarea",
//                 focus: true
//             },

//             {
//                 name: "time",
//                 type: "duration",
//                 readonly: true,
//                 map_to: "auto",
//                 formatter: durationFormatter
//             }
//         ];
//         gantt.config.lightbox.milestone_sections = [{
//                 name: "description",
//                 height: 70,
//                 map_to: "text",
//                 type: "textarea",
//                 focus: true
//             },
//             {
//                 name: "type",
//                 type: "typeselect",
//                 map_to: "type",
//                 filter: function(name, value) {
//                     return !!(value != gantt.config.types.project);
//                 }
//             },
//             {
//                 name: "time",
//                 type: "duration",
//                 single_date: true,
//                 map_to: "auto",
//                 formatter: durationFormatter
//             }
//         ];

// //         //Make resize marker for two columns
//         gantt.attachEvent("onColumnResizeStart", function(ind, column) {
//             if (!column.tree || ind == 0) return;

//             setTimeout(function() {
//                 const marker = document.querySelector(".gantt_grid_resize_area");
//                 if (!marker) return;
//                 const cols = gantt.getGridColumns();
//                 const delta = cols[ind - 1].width || 0;
//                 if (!delta) return;

//                 marker.style.boxSizing = "content-box";
//                 marker.style.marginLeft = -delta + "px";
//                 marker.style.paddingRight = delta + "px";
//             }, 1);
//         });

//         gantt.templates.tooltip_text = function(start, end, task) {
//             const links = task.$target;
//             const labels = [];
//             for (let i = 0; i < links.length; i++) {
//                 const link = gantt.getLink(links[i]);
//                 labels.push(linksFormatter.format(link));
//             }
//             const predecessors = labels.join(", ");

//             let html = "<b>Task:</b> " + task.text + "<br/><b>Start:</b> " +
//                 gantt.templates.tooltip_date_format(start) +
//                 "<br/><b>End:</b> " + gantt.templates.tooltip_date_format(end) +
//                 "<br><b>Duration:</b> " + durationFormatter.format(task.duration);
//             if (predecessors) {
//                 html += "<br><b>Predecessors:</b>" + predecessors;
//             }
//             return html;
//         };

//         gantt.config.auto_types = true;
//         gantt.config.date_format = "%m-%d-%Y";
//         gantt.config.duration_unit = "day";

//         gantt.config.row_height = 23;
//         gantt.config.order_branch = "marker";
//         gantt.config.order_branch_free = true;
//         gantt.config.grid_resize = true;

//         gantt.config.fit_tasks = true;

//         gantt.config.auto_scheduling_strict = true;
//         gantt.ext.zoom.setLevel("months");
//         // gantt.init(document.getElementById('gantt_here'));

//         const navBar = document.querySelector(".demo-actions");

//         gantt.event(navBar, "click", function(e) {
//             let target = e.target || e.srcElement;

//             while (!target.hasAttribute("data-action") && target !== document.body) {
//                 target = target.parentNode;
//             }

//             if (target && target.hasAttribute("data-action")) {
//                 const action = target.getAttribute("data-action");
//                 if (toolbarMenu[action]) {
//                     toolbarMenu[action]();
//                 }
//             }
//         });

//         let config = {
//             collapse: false,
//             auto_scheduling: false,
//             critical_path: false,
//             zoom_to_fit: false
//         };

        // function toggleCheckbox(checkbox, state, disabled) {
        //     state
        //         ?
        //         checkbox.classList.add("checked") :
        //         checkbox.classList.remove("checked");
        //     disabled
        //         ?
        //         checkbox.classList.add("disabled") :
        //         checkbox.classList.remove("disabled");
        // }

        // let collapseCheckbox = document.querySelector("#collapse"),
        //     autoSchedulingCheckbox = document.querySelector("#auto-scheduling"),
        //     criticalPathCheckbox = document.querySelector("#critical-path"),
        //     zoomToFitCheckbox = document.querySelector("#zoom-to-fit"),
        //     scaleComboElement = document.getElementById("scale_combo");

        // collapseCheckbox.addEventListener("click", function() {
        //     let action = "expandAll";

        //     config.collapse = !config.collapse;
        //     toggleCheckbox(collapseCheckbox, config.collapse);

        //     if (config.collapse) {
        //         action = "collapseAll";
        //     }

        //     if (toolbarMenu[action]) {
        //         toolbarMenu[action]();
        //     }
        // });

        // autoSchedulingCheckbox.addEventListener("click", function() {
        //     let action = "toggleAutoScheduling";

        //     config.auto_scheduling = !config.auto_scheduling;
        //     toggleCheckbox(autoSchedulingCheckbox, config.auto_scheduling);

        //     if (toolbarMenu[action]) {
        //         toolbarMenu[action]();
        //     }
        // });

        // criticalPathCheckbox.addEventListener("click", function() {
        //     let action = "toggleCriticalPath";

        //     config.critical_path = !config.critical_path;
        //     toggleCheckbox(criticalPathCheckbox, config.critical_path);

        //     if (toolbarMenu[action]) {
        //         toolbarMenu[action]();
        //     }
        // });

        // zoomToFitCheckbox.addEventListener("click", function() {
        //     let action = "zoomToFit";

        //     config.zoom_to_fit = !config.zoom_to_fit;
        //     toggleCheckbox(zoomToFitCheckbox, config.zoom_to_fit);

        //     if (toolbarMenu[action]) {
        //         toolbarMenu[action]();
        //     }
        // });

        // scaleComboElement.addEventListener("change", function() {
        //     let scaleValue = this.value;

        //     gantt.ext.zoom.setLevel(scaleValue);
        //     config.zoom_to_fit = false;
        //     zoomToFitMode = false;
        //     // toggleCheckbox(zoomToFitCheckbox, false);
        // });


        // const currentYear = new Date().getFullYear();
        // const tasks = {};

        // //gantt.parse(tasks);

        // gantt.ext.inlineEditors.attachEvent("onSave", function(state) {
        //     if (["duration"].indexOf(state.columnName) > -1) {
        //         updateDurations(state.id, state.columnName, state.newValue)
        //         gantt.updateTask(state.id);
        //     }
        // });

        // function updateDurations(id, type, value) {
        //     const task = gantt.getTask(id);
        //     if (task.type == "project") {
        //         gantt.message("Project tasks ignore the date parameters, so changes won't make any effect");
        //         return
        //     }

        //     task.actual_duration = Math.floor(task.duration * task.progress);
        //     task.remaining_duration = task.duration - task.actual_duration;

        //     if (type == "actual_duration") {
        //         task.progress = value / task.duration;
        //         updateDurations(task.id);
        //     } else if (type == "remaining_duration") {
        //         task.duration += value - task.remaining_duration;
        //         // end_date has a higher priority, so changing only duration won't make effect
        //         task.end_date = gantt.calculateEndDate(task.start_date, task.duration);

        //         task.remaining_duration = value;
        //     }
        // }
    </script>

    <script type="text/javascript">



        function loadInfoGantt($id) {
            // var getGantt = document.getElementById('gantt_here');
            // Keep date_format consistent with API payloads (see App\Models\Gantt::processTask)
            gantt.config.date_format = "%m-%d-%Y";
            // Display dates to users as MM/DD/YYYY in the grid
            gantt.templates.date_grid = gantt.date.date_to_str("%n/%j/%Y");
            gantt.config.editable = true;
            gantt.config.drag_links = true; // Permitir arrastrar enlaces
            gantt.config.readonly = false; // Permitir edición
            gantt.init(document.getElementById('gantt_here'));
            gantt.createDataProcessor({
                url: "/api",
                mode: "REST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                },
                deleteAfterConfirmation: true
            });
            gantt.load("/api/gantt/data/" + $id);
        }

        function loadGantV2($id) {
            // Keep date_format consistent with API payloads (see App\Models\Gantt::processTask)
            gantt.config.date_format = "%m-%d-%Y";
            // Display dates to users as MM/DD/YYYY in the grid
            gantt.templates.date_grid = gantt.date.date_to_str("%n/%j/%Y");

            gantt.init(document.getElementById('gantt_here'));

            let url = "/api";
            gantt.createDataProcessor({
                task: {
                    create: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.post(url + "/" + entity, data);
                    },
                    update: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.put(url + "/" + entity + "/" + id, data);
                    },
                    delete: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.del(url + "/" + entity + "/" + id);
                    }
                },

                link: {
                    create: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.post(url + "/" + entity, data);
                    },
                    update: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.put(url + "/" + entity + "/" + id, data);
                    },
                    delete: function(entity, action, data, id) {
                        alert(server);
                        return gantt.ajax.del(url + "/" + entity + "/" + id);
                    }
                }
            });

        }
    </script>
@endpush