@extends(backpack_view('blank'))
@section('content')
    <style>
        .weekend {
            background: #a0e7a0 !important;
        }

        .card-style {
            overflow: hidden;
            border-radius: 20px;
            border: none;
            box-shadow: 0 4px 24px 0 rgb(0 0 0 / 5%);
        }

        textarea:disabled {
            background-color: #9999992b;
        }

        .select2-container {
            z-index: 10002;
        }

        .dhx_calendar_cont input {
            width: 96px;
            padding: 0;
            margin: 3px 10px 10px 10px;
            font-size: 11px;
            height: 17px;
            text-align: center;
            border: 1px solid #ccc;
            color: #646464;
        }

        .select2-selection {
            margin-left: 11px;
            margin-right: 10px;
        }

        #vendor_id {
            padding: 6px 24px 6px 12px;
        }

        select[name="vendor_id"] {
            padding: 6px 24px 6px 12px;
        }

        .dhtmlxcalendar_dhx_skyblue,
        .dhtmlxcalendar_dhx_web,
        .dhtmlxcalendar_dhx_terrace {
            z-index: 999999 !important;
        }

        .gantt_cal_larea label {
            margin-bottom: 0px;
        }

        .gantt_cal_lsection {
            padding: 5px 0 5px 10px;
        }

        .gantt_btn_set.gantt_save_btn_set {
            background: #42ba96;
        }

        .gantt_task_line {
            background: #42ba96;
            border: 1px solid #307d66;
        }
    </style>
    <div class="card border-0 card-style">
        <div class="card-body ">
            <section class="container-fluid pl-0">
                <h2>
                    <span class="text-capitalize">Work Schedule</span>
                </h2>
            </section>
            <div class="row mt-4">
                <div class="form-group col-md-6">
                    <label for="project">Project</label>
                    <select name="project_id" class="form-control " id="project_id"></select>
                </div>
            </div>
            <div class="ml-2">
                <small id="projectInfo">
                </small>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <div class="btn-export">
                    <span onclick="sendWhatsapp()" class="btn btn-success btn-sm rounded-pill exportButton">Send <i
                            class="fa fa-whatsapp "></i></span>
                    <span class="copy-to-clipboard btn btn-secondary btn-sm rounded-pill exportButton">Copy <i
                            class="fa fa-files-o "></i></span>
                </div>
                <div class="btn-export">
                    <span class="btn btn-success btn-sm mr-2 rounded-pill exportButton " onclick=exportExcel()>Export Excel
                        <i class="las la-file-excel"></i></span>
                    <span class="btn btn-danger btn-sm mr-2 rounded-pill  exportButton" onclick=exportPDF()>Export PDF <i
                            class="las la-file-pdf"></i></span>
                </div>
            </div>
            <div id="gantt_here"></div>
        </div>
    </div>
@endsection
@section('after_styles')
    <link rel="stylesheet" href="{{ asset('vendors/dhtmlx/dhtmlxgantt.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/dhtmlx/controls_styles.css') }}">
    <link rel="stylesheet" href="{{ asset('packages/select2/dist/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('packages/select2-bootstrap-theme/dist/select2-bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('vendors/dhtmlx/dhtmlx.css') }}">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
@endsection
@section('after_scripts')
    <script src="{{ asset('js/erstudio.js') }}"></script>
    <script src="{{ asset('vendors/dhtmlx/dhtmlxgantt.js') }}"></script>
    <script src="{{ asset('vendors/dhtmlx/dhtmlx.js') }}"></script>
    <script src="{{ asset('packages/select2/dist/js/select2.full.js') }}"></script>
    <script src="http://export.dhtmlx.com/gantt/api.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').toggleClass("sidebar-lg-show");
        });
        var header, clientName, projectId, project,
            selectedCategory, selectedLegend, selectedWD,
            venue, createdAt, lightBoxHeight = 0,
            lightBoxArea = 0;
        var dataGanttChart = [];
        $('.exportButton').hide();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#project_id').select2({
            theme: "bootstrap",
            placeholder: 'Select Project..',
            allowClear: true,
            ajax: {
                url: "{{ route('ajax.project.index') }}",
                dataType: 'json',
                delay: 200,
                cache: true,
                data: function(params) {
                    return {
                        q: params.term || '',
                        page: params.page || 1
                    }
                },
                processResults: function(data, params) {
                    return {
                        results: $.map(data.data, function(item) {
                            return {
                                data: item,
                                text: item.project_no + ' - ' + item.name,
                                id: item.id
                            }
                        }),
                        pagination: {
                            more: data.next_page_url
                        }
                    }
                }
            }
        })

        $('#project_id').on('select2:select', function(e) {
            $('.exportButton').hide();
            let data = e.params.data.data;
            console.log('data', data);
            clientName = data.client_name;
            createdAt = formatDate(data.created_at);
            venue =
                `${data.block_no ? data.block_no : ''}  ${data.road_no ? data.road_no : ''}  ${data.road_name ? data.road_name : ''}  ${data.residence ? data.residence : ''}  ${data.country_name ? data.country_name : ''}  ${data.postal_code ? data.postal_code : ''}`;
            console.log('venue', venue);
            projectId = data.id;
            project = data;
            //INITIAL SELECT2 FOR SOW AND VENDOR
            initializeSelect2(projectId);
            $('#projectInfo').empty();
            $(`
       <div class="text-value ml-1"><small>Work Schedule : <span class="text-muted "> ${data.name}</span> </small></div>
       <table class="table table-responsive table-borderless text-left">
           <tbody>
              <tr class="pt-0">
                 <td class="pt-0 pb-0 text-muted">Project ID</td>
                 <td class="pt-0 pb-0 text-bold">${data.project_no}</td>
              </tr>
              <tr class="pt-0">
                <td class="pt-0 pb-0 text-muted">Name</td>
                <td class="pt-0 pb-0 text-bold">${data.name}</td>
              </tr>
              <tr class="pt-0">
                <td class="pt-0 pb-0 text-muted">Client Name</td>
                <td class="pt-0 pb-0 text-bold">${data.client_name}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 pb-0 text-muted">IC Number</td>
                 <td class="pt-0 pb-0 text-bold">${data.ic_number ? data.ic_number : ''}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 pb-0 text-muted">Created on</td>
                 <td class="pt-0 pb-0 text-bold">${createdAt}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 pb-0 text-muted">Designer</td>
                 <td class="pt-0 pb-0 text-bold">${(data.designer ? data.designer.name : ``)}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 pb-0 text-muted">Email</td>
                 <td class="pt-0 pb-0 text-bold">${data.email ? data.email : ''}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 pb-0 text-muted">Property Type</td>
                 <td class="pt-0 pb-0 text-bold">${(data.property_type ? data.property_type.name : ``)}</td>
              </tr>
              <tr class="pt-0 ">
                 <td class="pt-0 text-muted">Address</td>
                 <td class="pt-0">${venue}</td>
              </tr>
           </tbody>
        </table>`).appendTo('#projectInfo');

            header = `  <style>
           tr, td {
               width : 600px;
             }
             .container-fluid{
                 margin-left : 30px;
                 margin-bottom : 30px;
             }
             .no-margin {
               margin-left : 30px;
               margin-top : 0px;
               margin-bottom : 0px;
             }
           </style>
           <div class="container-fluid">
               <h1>WEEKLY WORK SCHEDULE </h1>
               <p> The weekly planned schedule below serves as guideline for preparation of works and
                   may subject to change*
               </p>
               <table border="1">
                   <tr>
                      <td>Owner Name : ${data.client_name}</td>
                      <td>Agreement number : ${data.agreement ? data.agreement.running_no : ''} </td>
                   </tr>
                   <tr>
                      <td>Site address: ${venue} </td>
                      <td>Person in Charge : ${data.designer ? data.designer.name : ''}</td>
                   </tr>
                   <tr >
                      <td>Date of commencement : ${createdAt}</td>
                      <td>Contact Number : ${data.contact_number}</td>
                   </tr>
                </table>
           </div>`;
            //CREATE CHART
            $('.exportButton').show();
            createGanttChart(data.id);
        });


        function createGanttChart(project_id) {
            dataGanttChart.length = 0;
            let dataSource = {};
            let data = [];
            let url = "{{ route('work-schedule.show', ':project_id') }}";
            url = url.replace(':project_id', project_id);
            $.ajax({
                    url: url,
                    datatype: "JSON",
                    type: "get",
                })
                .done(function(res) {
                    $.each(res, function(i, item) {
                        const date1 = new Date(item.start_date);
                        const date2 = new Date(item.end_date);
                        const endDate = moment(item.end_date, "YYYY-MM-DD").add(1, 'days').format('YYYY-MM-DD');
                        const diffTime = Math.abs(date2 - date1);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                        let itemx = {
                            id: item.id,
                            category_id: item.category_id ? item.category_id : "",
                            legend_id: item.legend_id ? item.legend_id : "",
                            legend: item.legend,
                            work_description_id: item.work_description_id,
                            work_description: item.work_description,
                            work_description_text: item.work_description_text,
                            category: item.category,
                            scope_of_work: item.scope_of_work ? item.scope_of_work : "",
                            text: item.scope_of_work ? item.scope_of_work : "",
                            vendor: item.vendor ? item.vendor.name : item.vendor_free_text,
                            vendor_id: item.vendor ? item.vendor.id : "",
                            vendor_free_text: item.vendor_free_text ? item.vendor_free_text : '',
                            vendor_contact: item.vendor_contact ? item.vendor_contact : '',
                            start_date: `${item.start_date}`,
                            end_date: endDate, // for bar chart 1 day
                            endDate: `${item.end_date}`,
                            duration: diffDays,
                            remark: item.remark,
                            parent: "0",
                            progress: 0,
                            venue: item.venue ? item.venue : "",
                            open: true,
                            work_schedule_id: item.id,
                            msg_status: !isEmpty(item.wa_log) ? item.wa_log[0].status : '',
                            msg_counter: !isEmpty(item.wa_log) ? item.wa_log.length : 0,
                        }
                        dataGanttChart.push(itemx);

                    });

                    dataSource = {
                        data: dataGanttChart,
                    };


                    var colHeaderAct =
                        '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>';
                    var colHeaderSendWA = `
                <div class="gantt_grid_head_cell" >
                    <div class="gantt_cell gantt_cell_tree">
                        <div class="form-check pt-1">
                            <input type="checkbox" onclick="checkAll()" class="form-check-input" id="checkAll">
                        </div>
                        <label>
                            All
                        </label>
                      </div>
                </div>
            `
                    var colHeaderCopyMsg = `
            <div class="gantt_grid_head_cell" >
                <span onclick="copyMsg()"><i class="fa fa-files-o fa-2x pt-1" ></i></span>
            </div>
            `
                    gantt.config.autosize = "y";
                    gantt.config.date_format = "%Y-%m-%d";
                    gantt.config.date_grid = "%d-%m-%Y";
                    gantt.config.scale_unit = "week";
                    gantt.config.open_tree_initially = true;
                    gantt.config.columns = [{
                            name: "buttons",
                            label: colHeaderSendWA,
                            width: 60,
                            template: function(task) {
                                const deliverStatus = ["queued", "sent", "delivered", "read"];


                                return (
                                    ` <div class="gantt_cell gantt_cell_tree">
                                <div class="form-check pt-1">
                                    <input type="checkbox" class="form-check-input" name="ws_ids" value="${task.id}" data-msg="">
                                </div>
                                <label style="font-size:10px" data-toggle="tooltip" data-placement="top" title="${task.msg_status}">
                                    ${deliverStatus.includes(task.msg_status) ? '<i class="fa fa-check text-success" ></i>' : '<i class="fa fa-exclamation-triangle text-danger" ></i>'}
                                </label>
                              </div>
                              `
                                );
                            }
                        },
                        {
                            name: 'msg_counter',
                            label: 'Sent',
                            width: 24,
                            template: function(task) {
                                return task.msg_counter;
                            }
                        },
                        {
                            name: "text",
                            label: "SOW",
                            tree: true,
                            min_width: 100,
                            width: '*',
                            resize: true
                        },
                        {
                            name: "vendor",
                            label: "Vendor",
                            tree: true,
                            min_width: 100,
                            width: '*',
                            resize: false,
                        },
                        {
                            name: "start_date",
                            label: "Start",
                            min_width: 97,
                            tree: true,
                            width: '*',
                            resize: false
                        },
                        {
                            name: "endDate",
                            label: "End",
                            min_width: 97,
                            tree: true,
                            width: '*',
                            resize: false,
                            template: function(task) {
                                return moment(task.endDate).format('DD-MM-YYYY');
                            }
                        },
                        {
                            name: "buttons",
                            label: colHeaderAct,
                            width: 50,
                            template: function(task) {
                                return (
                                    '<i class="fa fa-pencil text-success mx-2" data-action="edit"></i>' +
                                    '<i class="fa fa-trash text-danger" data-action="delete"></i>'
                                );
                            }
                        }

                    ];

                    gantt.attachEvent("onBeforeParse", function() {
                        gantt.clearAll();
                    });

                    gantt.init("gantt_here");
                    gantt.parse(dataSource);
                    gantt.sort("start_date", false);
                    gantt.refreshData();
                });

        }


        function sendWhatsapp() {
            let ws_ids = [];
            let values = $('input[name="ws_ids"]:checked').map(function() {
                ws_ids.push(this.value);
            }).get();

            if (ws_ids.length === 0) {
                new Noty({
                    text: 'Select data first',
                    type: "error"
                }).show();
            } else {
                let url = "{{ route('work-schedule.send-notification') }}";
                getDataWithAjax(url, 'POST', {
                    ws_ids: ws_ids
                }).done((res) => {
                    gantt.hideLightbox();
                    gantt.clearAll();
                    createGanttChart(projectId)
                    new Noty({
                        text: res.message,
                        type: "success"
                    }).show();

                }).fail((res) => {
                    new Noty({
                        text: 'failed send whatsapp message',
                        type: "error"
                    }).show();
                })
            }
        }

        function checkAll() {
            let checked = $("#checkAll").is(':checked');;
            $('input:checkbox[name="ws_ids"]').not(this).prop('checked', checked);
        }


        //MAKE CUSTOM INPUT GANTT CHART
        gantt.form_blocks["category_input"] = {
            render: function(sns) {
                return '<select name="category_id" class="form-control" ></select><div id="category_id"></div>';
            },
            set_value: function(node, value, task) {
                if (!isEmpty(task.category)) {
                    let $option = $("<option selected></option>").val(task.category.id).text(task.category.name);
                    $("[name='category_id']").append($option).trigger('change');
                }
            },
            get_value: function(node, task) {
                return node.value || task.category_id;
            },
            focus: function(node) {}
        };

        gantt.form_blocks["legend_input"] = {
            render: function(sns) {
                return '<select name="legend_id" class="form-control" ></select><div id="legend_id"></div>';
            },
            set_value: function(node, value, task) {
                if (!isEmpty(task.legend_id)) {
                    let $option = $("<option selected></option>").val(task.legend.id).text(task.legend.short_name +
                        ": " + task.legend.name);
                    $("[name='legend_id']").append($option).trigger('change');
                }
            },
            get_value: function(node, task) {
                return node.value || task.legend_id;
            },
            focus: function(node) {}
        };

        gantt.form_blocks["wd_input"] = {
            render: function(sns) {
                return '<select name="work_description_id" class="form-control" ></select><div id="work_description_id"></div>';
            },
            set_value: function(node, value, task) {
                if (!isEmpty(task.work_description_id)) {
                    let $option = $("<option selected></option>").val(task.work_description.id).text(task
                        .work_description.name);
                    $("[name='work_description_id']").append($option).trigger('change');
                }
            },
            get_value: function(node, task) {
                return node.value || task.work_description_id;
            },
            focus: function(node) {}
        };

        gantt.form_blocks["vendor_input"] = {
            render: function(sns) {
                return '<select name="vendor_id" class="form-control" ></select><div id="vendor_id"></div>';
            },
            set_value: function(node, value, task) {
                if (!isEmpty(task.vendor_id)) {
                    let $option = $("<option selected></option>").val(task.vendor_id).text(task.vendor);
                    $("[name='vendor_id']").append($option).trigger('change');
                }

            },
            get_value: function(node, task) {
                return node.value || task.vendor_id;
            },
            focus: function(node) {}
        };

        gantt.form_blocks["select_vendor_contact"] = {
            render: function(sns) {
                return '<select name="select_vendor_contact" class="form-control" ></select><div id="select_vendor_contact"></div>';
            },
            set_value: function(node, value, task) {},
            get_value: function(node, task) {},
            focus: function(node) {}
        };

        gantt.form_blocks["vendor_contact"] = {
            render: function(sns) {
                return `<div class="row" >
                    <div class="col-5">
                        <select name="select_country_code" id="select_country_code" class="form-control" ></select>
                    </div>
                    <div class="col-7">
                        <div class="gantt_cal_ltext " style="height:38px;"><textarea id="vendor_contact" placeholder="+65xxxxxxxx"></textarea></div>
                    </div>
                </div>`;
            },
            set_value: function(node, value, task) {
                $("#vendor_contact").val(task.vendor_contact)
            },
            get_value: function(node, task) {
                return $("#vendor_contact").val() ? $("#vendor_contact").val() : '';
            },
            focus: function(node) {}
        };

        var duration = function(a, b, c, d, e) {
            var res = gantt.calculateDuration(a.getDate(false), b.getDate(false));
            c.innerHTML = res + ' days';
            if (!isEmpty(d)) {
                const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
                const freeDays = ['Saturday', 'Sunday'];
                let date = new Date(d);
                let dayName = days[date.getDay()];
                e.classList.remove('badge-danger')
                e.classList.remove('badge-success')
                freeDays.includes(dayName) ? e.classList.add("badge-danger") : e.classList.add("badge-success")
                e.innerHTML = dayName;
            }
        };

        var calendar_init = function(id, data, date) {
            var obj = new dhtmlXCalendarObject(id);
            obj.setDateFormat(data.date_format ? data.date_format : '');
            obj.setDate(date ? date : (new Date()));
            obj.hideTime();
            if (data.skin)
                obj.setSkin(data.skin);
            return obj;
        };

        gantt.form_blocks["dhx_calendar"] = {
            render: function(sns) {
                return "<div class='dhx_calendar_cont'><input type='text' readonly='true' id='calendar1'/> &#8211; " +
                    "<input type='text' readonly='true' id='calendar2'/><span id='day' class='badge mr-3'></span><label id='duration'></label></div>"
            },
            set_value: function(node, value, task, data) {

                let start_date = task.start_date;
                let end_date = task.end_date;
                if (task.$new) {
                    start_date = false;
                    end_date = false;
                }
                var a = node._cal_start = calendar_init('calendar1', data, start_date);
                var b = node._cal_end = calendar_init('calendar2', data, end_date);

                var c = node.lastChild;
                var e = document.getElementById('day');
                console.log(e);
                b.setInsensitiveRange(null, new Date(a.getDate(false) - 86400000));

                var a_click = a.attachEvent("onClick", function(d) {
                    b.setInsensitiveRange(null, new Date(d.getTime() - 86400000));
                    duration(a, b, c, d, e);
                });

                var b_click = b.attachEvent("onClick", function(d) {
                    duration(a, b, c, d, e);
                });

                var a_time_click = a.attachEvent("onChange", function(d) {
                    b.setInsensitiveRange(null, new Date(d.getTime() - 86400000));
                    duration(a, b, c, d, e);
                });

                var b_time_click = b.attachEvent("onChange", function(d) {
                    duration(a, b, c, d, e);
                });


                var id = gantt.attachEvent("onAfterLightbox", function() {
                    a.detachEvent(a_click);
                    a.detachEvent(a_time_click);
                    a.unload();
                    b.detachEvent(b_click);
                    b.detachEvent(b_time_click);
                    b.unload();
                    a = b = null;
                    this.detachEvent(id);
                });

                document.getElementById('calendar1').value = a.getDate(true);
                document.getElementById('calendar2').value = b.getDate(true);
                duration(a, b, c);
            },
            get_value: function(node, task) {
                task.start_date = node._cal_start.getDate(false);
                task.end_date = node._cal_end.getDate(false);
                return task;
            },
            focus: function(node) {}
        };
        //LIGHT BOX ON OPEN
        gantt.attachEvent("onLightbox", function(task_id) {
            $('.text-danger').remove();
            var task = gantt.getTask(task_id);
            console.log('task', task)
            $(".gantt_delete_btn_set").hide();
            if (task.$new) {
                //SET VENUE ON TEXT AREA
                $(".gantt_cal_larea textarea").eq(0).val(venue);
            } else {
                selectedCategory = task.category
            }
            initializeSelect2(projectId);

        });

        gantt.locale.labels.section_category_id = "Category";
        gantt.locale.labels.section_venue = "Venue";
        gantt.locale.labels.section_legend_id = "Legend";
        gantt.locale.labels.section_vendor_id = "Vendor";
        gantt.locale.labels.section_vendor_free_text = "Name";
        gantt.locale.labels.section_work_description_text = "Work Description";
        gantt.locale.labels.section_vendor_contact = "Contact"
        gantt.locale.labels.section_remark = "Remark/Note";
        gantt.config.lightbox.sections = [{
                name: "time",
                type: "dhx_calendar",
                map_to: "auto",
                skin: '',
                date_format: '%d %M %Y'
            },
            {
                name: "venue",
                height: 38,
                type: "textarea",
                map_to: "venue",
                focus: true
            },
            {
                name: "category_id",
                height: 200,
                map_to: "category_id",
                type: "category_input",
                focus: true
            },

            {
                name: "vendor_id",
                height: 200,
                map_to: "vendor_id",
                type: "vendor_input",
                focus: true
            },
            {
                name: "vendor_free_text",
                height: 38,
                type: "textarea",
                map_to: "vendor_free_text",
                focus: true
            },
            {
                name: "vendor_contact",
                height: 38,
                type: "vendor_contact",
                map_to: "vendor_contact",
                focus: true
            },
            {
                name: "work_description_text",
                height: 38,
                type: "textarea",
                map_to: "work_description_text",
                focus: true
            },
            {
                name: "remark",
                height: 38,
                type: "textarea",
                map_to: "remark",
                focus: true
            },
        ];

        gantt.attachEvent("onLightboxSave", function(id, task, is_new) {
            $('.text-danger').remove();
            initializeSelect2(projectId);
            let selectedVendor = [];
            if ($("[name='vendor_id']").hasClass('select2-hidden-accessible')) {
                selectedVendor = $("[name='vendor_id']").select2('data');
            }

            let url;
            let params = {
                project_id: projectId,
                start_date: formatDate(task.start_date),
                end_date: formatDate(task.end_date),
                sow_id: selectedCategory.scope_of_work_id || null,
                scope_of_work: selectedCategory.scope_of_work.name,
                work_description_text: task.work_description_text ? task.work_description_text :
                '', // REPLACE FOR OTHER WORK DESCRIPTION
                category_id: selectedCategory ? selectedCategory.id : '',
                vendor_id: selectedVendor[0] ? selectedVendor[0].id : '',
                legend_id: selectedLegend?.id || task.legend_id,
                legend: selectedLegend?.name || '',
                work_description_id: selectedWD?.id || task.work_description_id,
                vendor_free_text: task.vendor_free_text,
                vendor_contact: task.vendor_contact,
                venue: task.venue,
                work_schedule_id: task.work_schedule_id,
                remark: task.remark,
            }

            if (is_new) {
                url = `{{ route('work-schedule.store') }}`;

            } else {
                url = `{{ route('work-schedule.update', ':id') }}`;
                url = url.replace(':id', task.work_schedule_id);
            }

            getDataWithAjax(url, 'POST', params).done((res) => {
                gantt.hideLightbox();
                gantt.clearAll();
                createGanttChart(projectId)
                new Noty({
                    text: 'success add data',
                    type: "success"
                }).show();
            }).fail((res) => {
                new Noty({
                    text: 'failed add data',
                    type: "error"
                }).show();

                let tempLightBoxHeight = $(".gantt_cal_light").height() + 90;
                let tempLightBoxArea = $(".gantt_cal_larea").height() + 90;
                if (lightBoxArea <= 0) {
                    lightBoxArea = tempLightBoxArea;
                    lightBoxHeight = tempLightBoxHeight;
                    $(".gantt_cal_light").css("height", lightBoxHeight);
                    $(".gantt_cal_larea").css("height", lightBoxArea);
                }
                let lightBox = $('.gantt_cal_larea');
                if (parseInt(res.status) == 422) {
                    $.each(res.responseJSON.errors, function(elem, messages) {
                        if (elem == 'vendor_free_text') {
                            $(".gantt_cal_ltext:eq(1)").after('<p class="text-danger ml-2 mb-0">' +
                                messages.join('') + '</p>');
                        } else if (elem == 'venue') {
                            $(".gantt_cal_ltext:eq(0)").after('<p class="text-danger ml-2 mb-0">' +
                                messages.join('') + '</p>');
                        } else if (elem == 'vendor_contact') {
                            $(".gantt_cal_ltext:eq(2)").after('<p class="text-danger ml-2 mb-0">' +
                                messages.join('') + '</p>');
                        } else {
                            lightBox.find('#' + elem).after('<p class="text-danger ml-2 mb-0">' +
                                messages.join('') + '</p>');
                        }
                    });
                }
            })

            createGanttChart();

        })

        //ON TASK ON CLICK
        gantt.attachEvent("onTaskClick", function(id, e) {
            var button = e.target.closest("[data-action]")
            if (button) {
                var action = button.getAttribute("data-action");
                switch (action) {
                    case "edit":
                        gantt.showLightbox(id);
                        break;
                    case "add":
                        gantt.createTask(null, id);
                        createGanttChart();
                        break;
                    case "delete":
                        let task = gantt.getTask(id);
                        let url = `{{ route('work-schedule.delete', ':id') }}`;
                        url = url.replace(':id', task.work_schedule_id);
                        gantt.confirm({
                            title: gantt.locale.labels.confirm_deleting_title,
                            text: gantt.locale.labels.confirm_deleting,
                            callback: function(res) {
                                if (res)
                                    getDataWithAjax(url, 'DELETE', []).done((res) => {
                                        gantt.deleteTask(id);
                                        new Noty({
                                            text: 'success delete data',
                                            type: "success"
                                        }).show();
                                    }).fail((res) => {
                                        new Noty({
                                            text: 'failed delete data',
                                            type: "errors"
                                        }).show();
                                    })
                            }
                        });
                        createGanttChart();
                        break;

                }
                return false;

            }
            return true;
        });



        function initializeSelect2(projectId) {
            $(".gantt_cal_ltext:eq(2) textarea").attr("placeholder", "+65xxxxxxxx");
            $(".gantt_cal_ltext:eq(3) textarea").attr("placeholder", "filled up if work description not any in list");
            let urlCategory = "{{ route('ajax.category.index') }}";
            let urlCountryCode = "{{ route('ajax.country.index') }}";
            let urlLegend = "{{ route('ajax.legend.index') }}";
            let urlWD = "{{ route('ajax.work-description.index') }}";

            $("[name='vendor_id']").select2({
                theme: "bootstrap",
                placeholder: 'Select vendor..',
                allowClear: true,
            })

            $("[name='legend_id']").select2({
                theme: "bootstrap",
                placeholder: 'Select legend..',
                allowClear: true,
            });

            $("[name='work_description_id']").select2({
                theme: "bootstrap",
                placeholder: 'Select work description..',
                allowClear: true,
            })

            $("[name='select_vendor_contact']").select2({
                theme: "bootstrap",
                placeholder: 'Select vendor contact..',
                allowClear: true,
            })

            $("[name='legend_id']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select legend..',
                    allowClear: true,
                    ajax: {
                        url: urlLegend,
                        dataType: 'json',
                        delay: 250,
                        cache: false,
                        data: function(params) {
                            return {
                                q: params.term || ''
                            }
                        },
                        processResults: function(data, params) {
                            return {
                                results: $.map(data, function(item) {
                                    return {
                                        text: item.short_name + ": " + item.name,
                                        id: item.id,
                                        item: item
                                    }
                                })
                            }
                        },
                    }
                })
                .on('select2:select', function(e) {
                    selectedLegend = e.params.data.item;
                });

            $("[name='work_description_id']").select2({
                theme: "bootstrap",
                placeholder: 'Select work description..',
                allowClear: true,
                ajax: {
                    url: urlWD,
                    dataType: 'json',
                    delay: 250,
                    cache: false,
                    data: function(params) {
                        return {
                            q: params.term || ''
                        }
                    },
                    processResults: function(data, params) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    text: item.name,
                                    id: item.id,
                                    item: item
                                }
                            })
                        }
                    },
                }
            }).on('select2:select', function(e) {
                selectedWD = e.params.data.item;
            });

            $("[name='select_country_code']").select2({
                theme: "bootstrap",
                placeholder: 'Select Country Code..',
                allowClear: true,
                ajax: {
                    url: urlCountryCode,
                    dataType: 'json',
                    delay: 250,
                    cache: false,
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1
                        }
                    },
                    processResults: function(data, params) {

                        return {
                            results: $.map(data.data, function(item) {
                                console.log('item gue');
                                console.log(item);
                                return {
                                    text: `${item.name}`,
                                    id: item.code,
                                    item: item
                                }
                            }),
                            pagination: {
                                more: data.next_page_url
                            }
                        }
                    },
                }
            }).on('select2:select', function(e) {
                selectedCountryCode = e.params.data;
                let vendorContact = $('#vendor_contact').val();
                if (!isEmpty(vendorContact)) {
                    removeCountryCode = vendorContact.slice(1 + selectedCountryCode.item.code.length);
                    vendorContact = `+${selectedCountryCode.item.code}` + removeCountryCode;
                    $('#vendor_contact').val(vendorContact);
                }
            });
            $("[name='category_id']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select category..',
                    allowClear: true,
                    ajax: {
                        url: urlCategory,
                        dataType: 'json',
                        delay: 250,
                        cache: false,
                        data: function(params) {
                            return {
                                q: params.term || '',
                                page: params.page || 1
                            }
                        },
                        processResults: function(data, params) {
                            console.log(data);
                            return {
                                results: $.map(data.data, function(item) {
                                    return {
                                        text: item.name,
                                        id: item.id,
                                        item: item
                                    }
                                }),
                                pagination: {
                                    more: data.next_page_url
                                }
                            }
                        },
                    }
                })
                .on('select2:select', function(e) {
                    selectedCategory = e.params.data.item;
                });

            $("[name='category_id']").on('select2:select', function(e) {
                //EMPTY OPTION ON VENDOR
                $("[name='vendor_id']").val(null).trigger("change");
                $("[name='vendor_id']").empty();
                $("[name='vendor_id']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select vendor..',
                    allowClear: true,
                })
                //EMPTY OPTION ON SELECT VENDOR CONTACT
                $("[name='select_vendor_contact']").val(null).trigger("change");
                $("[name='select_vendor_contact']").empty();
                $("[name='select_vendor_contact']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select vendor contact..',
                    allowClear: true,
                })
                //EMPTY PHONE NUMBER
                $(".gantt_cal_ltext:eq(2) textarea").val('');
                let urlVendor = "{{ route('ajax.vendor.index') }}";
                let data = e.params;
                if (!isEmpty(data.data.id)) {
                    urlVendor += `?category_id=${data.data.id}`;
                }

                $("[name='vendor_id']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select vendor..',
                    allowClear: true,
                    ajax: {
                        url: urlVendor,
                        dataType: 'json',
                        delay: 200,
                        cache: true,
                        data: function(params) {
                            return {
                                q: params.term || '',
                                page: params.page || 1
                            }
                        },
                        processResults: function(data, params) {
                            return {
                                results: $.map(data.data, function(item) {
                                    console.log(item);
                                    return {
                                        data: item,
                                        text: item.name,
                                        id: item.id
                                    }
                                }),
                                pagination: {
                                    more: data.next_page_url
                                }
                            }
                        },
                    }
                })
                //ON SELECT VENDOR SET DATA CONTACT
                $("[name='vendor_id']").on('select2:select', function(e) {
                    console.log('vendor contact');
                    //EMPTY OPTION ON SELECT VENDOR CONTACT
                    $("[name='select_vendor_contact']").val(null).trigger("change");
                    $("[name='select_vendor_contact']").empty();
                    $("[name='select_vendor_contact']").select2({
                        theme: "bootstrap",
                        placeholder: 'Select vendor contact..',
                        allowClear: true,
                    })
                    //EMPTY PHONE NUMBER
                    $(".gantt_cal_ltext:eq(2) textarea").val('');
                    let dataVendorContact = e.params.data.data.contact_number;
                    //SORT
                    dataVendorContact = dataVendorContact.sort(function(a, b) {
                        return b.default.localeCompare(a.default);
                    });
                    //DESTRUCT TO OPTION SELECT2
                    dataVendorContact = dataVendorContact.map(({
                        name,
                        phone,
                        country_code
                    }) => ({
                        text: `${name} (${phone})`,
                        id: `+${country_code}${phone}`,
                        country_code: `${country_code}`
                    }))
                    if (!isEmpty(dataVendorContact)) {
                        let phone = `${dataVendorContact[0].id}`;

                        $("[name='select_country_code']").select2('val', '62', true);
                        $("#vendor_contact").val(phone);

                    }

                    $("[name='select_vendor_contact']").select2({
                        theme: "bootstrap",
                        data: dataVendorContact,
                        placeholder: 'Select vendor contact..',
                    });

                    $("[name='select_vendor_contact']").on('select2:selecting', function(e) {
                        let phone = e.params.args.data.id;
                        $(".gantt_cal_ltext:eq(2) textarea").val(phone)
                    });

                })
            });

            $("[name='category_id']").on('select2:unselecting', function(e) {
                $("[name='vendor_id']").val(null).trigger("change");
                $("[name='vendor_id']").empty();
                $("[name='vendor_id']").select2({
                    theme: "bootstrap",
                    placeholder: 'Select vendor..',
                    allowClear: true,
                })
            });
        }


        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2)
                month = '0' + month;
            if (day.length < 2)
                day = '0' + day;

            return [day, month, year].join('-');
        }
        getWeekday = (s, type) => {
            console.log('s', s);
            const [yyyy, mm, dd] = s.split('-'),

                date = new Date(
                    parseInt(yyyy),
                    parseInt(mm) - 1,
                    parseInt(dd)
                );
            console.log('dd before', dd);
            let day = date.getDay();
            //make month not wrong in JS

            //IF DATE NOT MONDAY
            if (day != 0 && type == "start_date") {
                date.setDate(date.getDate() - day + 1);
            }

            //IF DATE NOT SUNDAY (START DATE)
            if (day != 0 && type == "end_date") {
                let sundayLength = 7 - day;
                date.setDate(date.getDate() + sundayLength);
            }
            return new Date(date);
        }



        //FOR COPY TO CLIPBOARD
        var clipboard = new ClipboardJS('.copy-to-clipboard', {
            text: function(trigger) {
                let ws_ids = [];
                let messages = '';
                let values = $('input[name="ws_ids"]:checked').map(function() {
                    messages += $(this).data('msg');
                    messages += "\n";
                    ws_ids.push(this.value);
                }).get();

                if (ws_ids.length === 0 || ws_ids.length > 3) {
                    console.log(ws_ids.length)
                    $errorMsg = "Select data first";

                    if (ws_ids.length > 3) {
                        $errorMsg = "Maximum selected data is 3";
                    }
                    new Noty({
                        text: $errorMsg,
                        type: "error"
                    }).show();
                    return '';
                } else {
                    return messages;
                }
            }
        });

        clipboard.on('success', function(e) {
            new Noty({
                text: 'Work Schedule content has been copied',
                type: "success"
            }).show();
        });

        clipboard.on('error', function(e) {
            new Noty({
                text: "Failed to copy content Work Schedule",
                type: "error"
            }).show();
        });

        function exportExcel() {
            let parsed = dataGanttChart.map(function(item) {
                let startDate = moment(item.start_date).format('DD-MM-YYYY');
                let endDate = moment(item.endDate).format('DD-MM-YYYY');
                item.startDate = startDate;
                item.endDate = endDate;
                return item;
            })
            gantt.attachEvent("onBeforeParse", function() {
                gantt.clearAll();
            });

            gantt.config.scale_unit = "day";
            gantt.config.columns = [{
                    name: "text",
                    label: "SOW",
                    tree: true,
                    min_width: 100,
                    width: '*',
                    resize: true
                },
                {
                    name: "vendor",
                    label: "Vendor",
                    tree: true,
                    min_width: 100,
                    width: '*',
                    resize: false,
                },
                {
                    name: "startDate",
                    label: "Start",
                    min_width: 120,
                    tree: true,
                    width: '*',
                    resize: false
                },
                {
                    name: "endDate",
                    label: "End",
                    min_width: 120,
                    tree: true,
                    width: '*',
                    resize: false
                },
                {
                    name: "legend",
                    label: "Legends",
                    min_width: 50,
                    template: function(task) {
                        return `${task.legend.short_name ? task.legend.short_name : N / A}`;
                    }
                }
            ];
            dataSource = {
                data: parsed,
            };
            gantt.clearAll();
            gantt.parse(dataSource);
            gantt.sort("startDate", false);
            gantt.refreshData();
            gantt.exportToExcel({
                name: "Work Schedule " + clientName + ".xlsx",
                //server:"https://myapp.com/myexport/gantt",
                visual: true,
                cellColors: true,

            });
            gantt.clearAll();
            createGanttChart(projectId)

        }

        function exportPDF() {
            let parsed = dataGanttChart.map(function(item) {
                let startDate = getWeekday(moment(item.start_date).format('YYYY-MM-DD'), 'start_date');
                let endDate = getWeekday(moment(item.endDate).format('YYYY-MM-DD'), 'end_date');
                item.start_date = startDate;
                item.end_date = endDate;
                return item;
            })

            let legends = dataGanttChart.filter((obj, pos, arr) => {
                return arr.map(mapObj =>
                    mapObj.legend.short_name).indexOf(obj.legend.short_name) == pos;
            });
            gantt.templates.task_text = function(start, end, task) {
                return `${task.legend ? task.legend.short_name : 'N/A'}`;
            };

            gantt.config.columns = [{
                name: "work_description_text",
                label: "Work Desc",
                min_width: 100,
                width: 300,
                template: function(task) {
                    return `${task.work_description.name ? task.work_description.name : task.work_description_text}`;
                }
            }, ];
            gantt.attachEvent("onBeforeParse", function() {
                gantt.clearAll();
            });
            dataSource = {
                data: parsed,
            };
            gantt.init("gantt_here");
            gantt.parse(dataSource);
            gantt.sort("start_date", false);
            gantt.refreshData();

            gantt.exportToPDF({
                name: "Work Schedule " + clientName + ".pdf",
                header: header,
                raw: true,
                footer: `
            <div class="container-fluid">
                <p> I understand that this daily schedule is for reference only & it does not reflect the actual handover date
                    which may be earlier or later due to the factors in the form : refer a. to f. on the left.
                </p>
                <h4 class="no-margin">Please tick or color the box for work to be done</h4>
                <p class="no-margin">*the schedule may be subjected to changes due to any of the following :</p>
                <table border="1" class="mx-0 px-0">
                    <tr class="pb-0">
                        <td class="no-margin">
                            <p class="no-margin">a. Additional variation orders</p>
                            <p class="no-margin">b. Delay in approval from relevant authorities</p>
                            <p class="no-margin">c. Delay in deposit/Progressive payment by clients</p>
                            <p class="no-margin">d. Delay in confirmation of drawing/materials by clients</p>
                            <p class="no-margin">e. Delay/shortage in supply materials by vendors/Clients beyond our control</p>
                            <p class="no-margin">f. Any unforeseen circumstances, eg. floods, fire, act of god, SARS,
                                virus outbreaks that are beyond our control</p>
                        </td>
                        <td class="container-fluid">
                            ${legends.map((d) => `
                                                                                                                                        <p class="no-margin"> ${d.legend?.short_name} : ${d.legend?.name}</p>
                                                                                                                                        `).join('')}
                        </td>
                        <td>
                            <p> Owner Signature <span class="container-fluid">Date :<span></p>
                        </td>
                    </tr>
                </table>
            </div>
         `,
                additional_settings: {
                    "format": "A4",
                    "landscape": true
                }
            });

            gantt.clearAll();
            createGanttChart(projectId)

        }
    </script>
@endsection