{{-- <link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet"> --}}
@prepend('dhtmlxgantt')
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
@endprepend





<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            @lang('gantt')
        </h2>
    </x-slot>
    <x-slot name="headerAction">
    </x-slot>

    @isset($breadcrumbs)
        <x-slot name="breadcrumbsComponent">
            <livewire:breadcrumbs :breadcrumbs="$breadcrumbs" />
        </x-slot>
    @endisset

    <div class="overflow-hidden bg-white flex grow">
        <div class="mx-auto flex grow">
            <div x-data="ganttComponent()" class="gantt-container flex grow !h-full">
                <div class="gantt-main-container col-12 flex grow">
                    <div class="header gantt-header">
                        <button class='zoom_toggle btn btn-dark btn-sm mr-1' @click.prevent="toFit()">Zoom to Fit</button>
                        <button class="btn btn-dark btn-sm mr-1" type="button" @click.prevent="zoomGantt('in')">Zoom In</button>
                        <button class="btn btn-dark btn-sm mr-1" type="button" @click.prevent="zoomGantt('out')">Zoom Out</button>
                    </div>
                </div>
                <div id="gantt_here" class="gantt-body  grow"></div>
            </div>
        </div>
    </div>
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<script>
    function ganttComponent() {
        console.log('initted');
        return {
            ganttData: [],
            apiUrl: "/api/gantt/data",
            updateUrl: "{{ route('ganttUpdate') }}",
            zoomConfig: {
                levels: [
                    {
                        name: "day",
                        scale_height: 60,
                        min_column_width: 60,
                        scales: [
                            { unit: "month", step: 1, format: "%M %Y" },
                            { unit: "day", step: 1, format: "%d %D" }
                        ]
                    },
                    {
                        name: "week",
                        scale_height: 60,
                        min_column_width: 90                    },
                    {
                        name: "month",
                        scale_height: 60,
                        min_column_width: 50,
                        scales: [
                            { unit: "year", step: 1, format: "%Y" },
                            { unit: "month", step: 1, format: "%M" }
                        ]
                    },
                    {
                        name: "quarter",
                        scale_height: 60,
                        min_column_width: 100,
                        scales: [
                            { unit: "year", step: 1, format: "%Y" },
                            { unit: "quarter", step: 1, format: function(date) {
                                var dateToStr = gantt.date.date_to_str("%M");
                                var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
                                return dateToStr(date) + " - " + dateToStr(endDate);
                            }}
                        ]
                    },
                    {
                        name: "year",
                        scale_height: 60,
                        min_column_width: 120,
                        scales: [
                            { unit: "year", step: 1, format: "%Y" },
                            { unit: "quarter", step: 1, format: "Q%q" }
                        ]
                    }
                ],
                useKey: "ctrlKey",
                trigger: "wheel",
                element: function(){
                    return gantt.$root.querySelector(".gantt_task");
                }
            },
            initializeGantt() {
                let getGantt = document.getElementById('gantt_here');
                const updateUrl = this.updateUrl;
                const csrfToken = document.head.querySelector('meta[name="csrf-token"]').content;

                if (getGantt) {
                    gantt.config.fit_tasks = true;
                    gantt.ext.zoom.init(this.zoomConfig);
                    gantt.ext.zoom.setLevel("month");
                    gantt.$zoomToFit = true;
                    gantt.config.columns = [
                        {name: "text", label: "Task name", width: "*", tree: true},
                        {name: "start_date", label: "Start time", align: "center"},
                        {name: "duration", label: "Duration", align: "center"}
                    ];
                    gantt.config.scales = [
                        {unit: "month", step: 1, format: "%M"},
                        {unit: "year", step: 1, format: "%Y"}
                    ];
                    gantt.config.date_format = "%m-%d-%Y";
                    gantt.init(getGantt);

                    gantt.createDataProcessor(function(entity, action, data, id) {
                        data['_token'] = csrfToken;
                        switch(action) {
                            case "create":

                            break;
                            case "update":

                                gantt.ajax.post(updateUrl, data).then(function(response) {
                                    // console.log(response);
                                }).catch(function(error) {
                                    // console.error("Error:", error);
                                });

                            break;
                            case "delete":

                             break;
                       }
                    });

                    // Load data from the API
                    gantt.load(`${this.apiUrl}`);
                }
            },

            zoomGantt(action) {
                if (action === 'in') {
                    gantt.ext.zoom.zoomIn();
                    gantt.$zoomToFit = false;
                    document.querySelector(".zoom_toggle").innerHTML = "Zoom to Fit";
                } else if (action === 'out') {
                    gantt.ext.zoom.zoomOut();
                    gantt.$zoomToFit = false;
                    document.querySelector(".zoom_toggle").innerHTML = "Zoom to Fit";
                }
            },
            toFit() {
                const project = gantt.getSubtaskDates();
                const areaWidth = gantt.$task.offsetWidth;
                const scaleConfigs = this.zoomConfig.levels;

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

                gantt.ext.zoom.setLevel(scaleConfigs[i].name);
                this.applyConfig(scaleConfigs[i], project);
            },
            getUnitsBetween(from, to, unit, step) {
                let start = new Date(from);
                let end = new Date(to);
                let units = 0;
                while (start.valueOf() < end.valueOf()) {
                    units++;
                    start = gantt.date.add(start, step, unit);
                }
                return units;
            },
            applyConfig(config, dates) {
                gantt.config.scales = config.scales;
                if (config.scroll_position) {
                    setTimeout(function () {
                        gantt.scrollTo(config.scroll_position.x, config.scroll_position.y);
                    }, 4);
                }
            },
            init() {
                console.log('init');
                this.initializeGantt();
            }
        };
    }
    document.addEventListener('alpine:init', () => {
        Alpine.data('ganttComponent', ganttComponent);
    });

</script>

</x-app-layout>