@include('checklist::scripts.common')

<script type="text/javascript">
    date = (date != "") ? moment(date, "{{ getDateFormat() }}") : '';
    date_end = (date_end != "") ? moment(date_end, "{{ getDateFormat() }}") : moment();

    function cb(start, end) {
        $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
        $(document).trigger('onRangeChanged');
    }

    @if (request()->has('date') && request()->get('date') != '')
        cb(((date != "") ? date : moment()), (date_end != "" ? date_end : moment()));
    @endif

    $('.reportrange').daterangepicker({
        opens: 'left',
        autoApply: true,
        showWeekNumbers: true,
        @if (request()->has('date') && request()->get('date') != '')
            startDate: (date != "") ? date : moment(),
            endDate: (date != "") ? date_end : moment(),
        @endif

        autoUpdateInput: (date != "") ? true : false,
        locale: {
            format: "{{ getDateFormat() }}",
            customRangeLabel: "{{ trans('label.pick_date_range') }}",
            "firstDay": 1,
            "daysOfWeek": daysOfWeek,
            "monthNames": monthNames
        },
        //ranges  : rangeFilters,
        alwaysShowCalendars: true,
        showDropdowns: true
    }, cb);


    PDDataTable({
        url: "{{ route($route_prefix) . (request()->has('query') ? '?query=' . request()->get('query') : '') }}",
        searching: false,
        order: [
            [2, 'desc'],
            [1, 'asc']
        ],
        columns: [{
                data: 'checkboxgrid',
                name: 'checkboxgrid',
                orderable: false,
                searchable: false,
                className: "checkbox-column"
            },
            {
                data: 'title',
                name: 'title',
                className: "!text-custom-grey-900 !font-medium"
            },
            {
                data: 'start_date',
                name: 'start_date',
                className: 'start_date'
            },
            // { data: 'due_at', name: 'due_at'},
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,
                className: "text-right row-action"
            }
        ],
        callbackFunc: function(d) {
            d.range = [];
            // $('.datepicker').each(function(val, value){
            //     d.range[val] = $(value).val();
            // });

            d.range = $('input[name="range"]').val();
            //d.show_original = ($('input[name="show_original"]').is(":checked")) ? 1 : 0;
            d.show_original = 1;

            d.term = $('input[name="query"]').val();
            d.status = $('.tabs-btn-box.active').attr('data-val');

            d.workstation_id = $('input[name="workstation_id[]"]:checked').map(function() {
                    return $(this).val();
                })
                .get();

            d.users = $('select[name="users[]"]').val();

        },
        drawCallback: function(settings) {

            if (this.api().page.info().pages > 1) {
                $('.dataTables_paginate').show();
            }

            if ($(".btn-filter span.spinner-border").length > 0) {
                spinner($(".btn-filter"), false);
            }
        }
    });


    $('body').on('click', '.tabs-btn-box', function() {
        // Reset all tabs and contents for the second set filter
        $(".tabs-btn-box").removeClass("active");

        // Set new active state for the clicked tab in the filter set
        $(this).addClass("active");

        PDTable.draw();
    });

    $(document).on("multi_select_option_change", function(event, eventInfo) {
        PDTable.draw();
    });

    searchTerm = _.debounce(function(data) {
        PDTable.draw();
    }, 500);

    $("body").on("keydown", "#query", function() {
        searchTerm();
    });

    $("body").on("change", "#user", function() {
        PDTable.draw();
    });

    $("body").on("change", "#workstation_id", function() {
        PDTable.draw();
    });

    $("body").on("change", "#users", function(){
        PDTable.draw();
    });

    $("body").on("change", "input[name='show_original']", function() {
        PDTable.draw();
    });

    $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
        $("input[name='range']").val(picker.startDate.format("{{ getDateFormat() }}") + ' - ' + picker.endDate
            .format("{{ getDateFormat() }}"));
        PDTable.draw();
    });

    $('.reportrange').on('cancel.daterangepicker', function(ev, picker) {
        $("input[name='range']").val('');
        PDTable.draw();
    });


    // Add search functionality
    $("body").on('input', '.task-search', function(e) {
        const taskId = $(this).data('task-id');
        const searchTerm = e.target.value.toLowerCase();
        const todoList = $(`#task-modal-${taskId} .todo-list`);
        const items = todoList.find('.checklist-item');

        items.each(function() {
            const text = $(this).text().toLowerCase();
            if (text.includes(searchTerm)) {
                $(this).parents('.checklist-item-parent').removeClass('hidden');
            } else {
                $(this).parents('.checklist-item-parent').addClass('hidden');
            }
        });

        // Show/hide empty state message
        const visibleItems = todoList.find('.checklist-item-parent:not(.hidden)').length;
        const emptyState = todoList.find('.empty-state').length;

        if (visibleItems === 0) {
            if (!emptyState) {
                const noResults = document.createElement('div');
                noResults.className = 'empty-state text-center py-8';
                noResults.innerHTML =
                    '<p class="text-custom-grey-500">{{ trans('forms.lbl_no_result_found') }}</p>';
                console.log(noResults);
                todoList.append(noResults);
            }
        } else {
            const existingEmptyState = todoList.find('.empty-state');
            if (existingEmptyState) {
                existingEmptyState.remove();
            }
        }
    });

    $('body').on('click', '.btn-checklist-approved', function(event) {

        event.preventDefault();
        var message = localize_string.lbl_checklist_approve
        var itemId = $(this).data('id')
        wid = $(this).data('workstation-id'),
            uri = $(this).data('uri'),
            checklist_id = $(this).data('checklist-id');

        PDSimpleConfirm(message).then(response => {

            if (response) {

                PDRequest({
                    type: "PUT",
                    data: {
                        id: itemId,
                        workstation_id: wid
                    },
                    url: '{{ url('/settings/checklists') }}/' + checklist_id +
                        '/item/authorize',
                    event: event
                }).then((response) => {

                    if (response.status == "success") {

                        if ($(this).parents("td").length > 0) {
                            PDTable.draw();
                            return true;
                        }

                        $(this).html(
                            '<i style="font-size:1.5rem" class="mdi mdi-check icon-md text-success"></i>'
                            );

                        $(this).attr("disabled", true);

                        $(this).removeClass('btn-checklist-approved');

                        if ($(this).hasClass("btn-checklist-approved-all")) {

                            $(this).html(
                                '<i style="font-size:1.5rem" class="mdi mdi-check-all icon-md text-success"></i>'
                                );

                            if (wid != "" && typeof wid != "undefined") {

                                $("#collapse-" + wid).find(".btn-checklist-approved").html(
                                    '<i style="font-size:1.5rem" class="mdi mdi-check icon-md text-success"></i>'
                                    );
                                $("#collapse-" + wid).find(".btn-checklist-approved").attr(
                                    "disabled", true);
                                $("#collapse-" + wid).find(".btn-checklist-approved")
                                    .removeClass('btn-checklist-approved');

                            } else {

                                $(".btn-checklist-approved").html(
                                    '<i style="font-size:1.5rem" class="mdi mdi-check icon-md text-success"></i>'
                                    );
                                $(".btn-checklist-approved").attr("disabled", true);
                                $(".btn-checklist-approved").removeClass(
                                    'btn-checklist-approved');


                            }

                        }

                        var css_class = "warning",
                            status = "{{ __('forms.lbl_pending') }}";

                        if (response.task.status == "completed") {

                            css_class = response.task.approved ? "success" : "info";
                            status = response.task.approved ?
                                "{{ __('forms.lbl_approved') }}" :
                                "{{ __('forms.lbl_completed') }}";

                        } else if (response.task.status == "due") {
                            css_class = "danger";
                            status = "{{ __('forms.lbl_due') }}";
                        }

                        if ($(".overall-status").length > 0) {
                            $(".overall-status").html("<div class='badge badge-" + css_class +
                                "'>" + status + "</div>");
                        }

                        if ($("#status-" + checklist_id).length > 0) {
                            $("#status-" + checklist_id).removeClass().addClass("badge badge-" +
                                css_class).text(status);
                        }

                        if ($("#progress-bar-" + checklist_id).length > 0) {
                            $("#progress-bar-" + checklist_id).removeClass().addClass(
                                "progress-bar bg-" + css_class);
                        }
                    }

                });

            }

        });

    });


    $("body").on("click", ".task", function(event) {

        event.preventDefault();

        @if (request()->has('date') && request()->has('workstation_id'))

            let queryString =
                "{{ 'date=' . request()->get('date') . '&' . 'workstation_id=' . request()->get('workstation_id') }}";
        @endif

        let url = "{{ $task_url }}/",
            id = $(this).data('id');

        url += id;

        $("#task-details").append(customLoader);

        var data = $("#filter-form").serialize();

        if ($("input[name='range']").val() != "") {

            data += "&filtered_by_date=1";

        }

        url += "?" + data;

        PDRequest({
            type: "GET",
            url: url,
            isFlash: false
        }).then((response) => {

            if (response.status == "success") {

                $("#task-details").html(response.message);
                $('[data-toggle="popover"]').popover({
                    trigger: 'focus'
                });

                @if (isset($_GET['id']) && $_GET['id'] > 0)
                    if ($(".pdrow#{{ $_GET['id'] }}").length > 0) {
                        @php
                            $wid = isset($_GET['workstation']) ? $_GET['workstation'] : 0;
                            $topicable = isset($_GET['topicable']) ? $_GET['topicable'] : 0;
                        @endphp
                        $("a[href='#collapse-{{ $wid }}']").trigger("click");
                        $("a[href='#collapse-discussion-{{ $topicable }}-{{ $wid }}']")
                            .trigger("click");
                    }
                @endif

                if ($("form[name='form']").length) {

                    var validateForm = $("form[name='form']").validate(validateFormObj);

                }
                if ($("body").find(".light-gallery").length) {
                    initializeGallery();
                }

                //tribute.values = [];
                tribute.append(0, response.users, true);
                tribute.detach(document.querySelectorAll(".mentionable"));
                tribute.attach(document.querySelectorAll(".mentionable"));

            }

        }).catch(error => {

            $("#task-details").find(".custom-loader").remove();

        });

    });

    var assigntoBlocks = $('.assignto-block');

    $(".btn-save").on("click", function(event) {
        event.preventDefault();
        if ($("#form").valid()) {
            data = $('#form').serialize();

            PDRequest({
                type: $('#form').attr("method"),
                url: $("#form").attr("action"),
                data: data,
                event: event
            }).then((response) => {
                if (response.status === "success") {
                    // Add the new item to the todo list
                    $(`.checklist-details[data-task-id="${response.checklist.id}"] .todo-list`).append(
                        response.html);

                    // Close the canvas first
                    Canvas.close();

                    // Wait for DOM update and scroll
                    setTimeout(() => {
                        const container = $(
                                `.checklist-details[data-task-id="${response.checklist.id}"]`)
                            .closest('.checklist-container');
                        const newItem = $(
                            `.checklist-details[data-task-id="${response.checklist.id}"] .todo-list .checklist-item-parent:last-child`
                            );

                        if (newItem.length) {
                            container.animate({
                                scrollTop: container.scrollTop() + newItem.position()
                                    .top - (container.height() / 2) + (newItem
                                    .height() / 2)
                            }, 500);

                            StatsUpdater.updateTaskProgress(response.checklist.id, response.checklist.completed_items, response.checklist.total_items, response.checklist.class);
                        }
                    }, 100);
                }
            });
        }
    });

    document.addEventListener("resourceDeleted", function(e) {

        let response = e.detail;

        StatsUpdater.updateTaskProgress(response.checklist.id,
            response.checklist.completed_items,
            response.checklist.total_items,
            response.checklist.class
        );

        PDTable.draw();
    });
</script>