// variables part
var supervisorCartable;
var supervisorCartable_url = "/v2/road_items/supervisor/cartable/show";
var verify_api = "/v2/road_items/supervisor/cartable/verify/";
var items_api = "/v2/items";
var restore_api = "/v2/road_items/supervisor/cartable/restore/";
var delete_api = "/v2/road_items/supervisor/cartable/delete/";
var provinces_api = "/webapi/getuser/province-perm";
var edarat_api = "/public/contents/edarate_shahri_by_province/";
var permission_api = "/webapi/user/get-permission";
var excel_api = "/v2/road_items/supervisor/cartable/report";
const MAP_ENDPOINT = "https://rmsmap.rmto.ir";
var markers = [];
var markersLayer;
var mapZoom = getWidth() < 508 ? 5 : 6;
var filterDatepicker = {};
var excelDatepicker = {};
var PERMISSIONS = [];
// end variables part

// resize func
function getWidth() {
    return Math.max(
        document.body.scrollWidth,
        document.documentElement.scrollWidth,
        document.body.offsetWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
    );
}
// end resize func


// map
// icon
var mapIcon = L.icon({
    iconUrl: '/dist/images/dashboard/pinmarker_dashboard.png',
    iconSize: [32, 32],
});
var activeMapIcon = L.icon({
    iconUrl: '/dist/images/dashboard/pinmarker_dashboard_active.png',
    iconSize: [32, 32],
});
// icon

var bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 30.5092252948],
];
var map = L.map("map", {
    maxBounds: bounds,
    minZoom: mapZoom,
    zoomControl: false,
    attributionControl: false
}).setView([35.5468992, 51.7300532], mapZoom);
L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {
    attributionControl: false,
}).addTo(map);
// end map

(() => {
    //get permission
    showLoaderScreen()
    $.ajax({
        url: permission_api,
        type: "GET",
        cache: false,
        async: false,
        contentType: false,
        processData: false,
        success: function (result) {
            PERMISSIONS = result.data;
        },
        error: function () {
            Swal.fire({
                icon: "error",
                title: "خطا",
                text: "مشکل در دریافت سطح دسترسی",
                confirmButtonText: "بروزرسانی صفحه",
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    location.reload(true);
                },
            });
        },
    });
    //end get permission
})()

$(document).bind("click", function (e) {
    const clicked = $(e.target);
    if (clicked.parents(".toolbox").length != 0) return false;
    if (clicked.parents(".datepicker-grid-view").length != 0) return false;
    if (clicked.parents(".datepicker-navigator").length != 0) return false;
    if (clicked.parents(".datepicker-container").length != 0) return false;
    if (clicked.parents(".select2-selection__choice").length != 0) return false;
    if (
        clicked.closest(".filtering-btn").length == 0 &&
        clicked.closest("#filter_box").length == 0 &&
        $("filter_box").css("display") != "none"
    ) {
        $("#filter_box").css("display", "none");
    }
    if (
        clicked.closest(".reporting-btn").length == 0 &&
        clicked.closest("#excel_box").length == 0 &&
        $("excel_box").css("display") != "none"
    ) {
        $("#excel_box").css("display", "none");
    }
});

const FilterBoxInit = () => {
    const top = $('.dt-button')[0].offsetHeight + 5
    return `<div id="filter_box" style="top:${top}px">
        <div class="d-flex">
            <div class="form-group" style="flex: 1">
                <label for="filter_id">کد یکتا</label>
                <input  id="filter_id" type="search" class="form-control form-control-sm" autocomplete="off" />
            </div>
        </div>
        <div class="d-flex">
            <div class="form-group ml-2" style="flex: 1">
                <label for="filter_province">استان</label>
                <select class="form-control form-control-sm fill-provinces" id="filter_province">
                <option value="-1" selected>انتخاب استان</option>
                </select>
            </div>
            <div class="form-group mr-2" style="flex: 1">
                <label for="filter_edarat">اداره</label>
                <select class="form-control form-control-sm fill-edarat" id="filter_edarat">
                <option value="-1" selected>یک استان انتخاب کنید</option>
                </select>
            </div>
        </div>
        <div class="d-flex">
            <div class="form-group ml-2" style="flex: 1">
                <label for="filter_item">آیتم فعالیت</label>
                <select class="form-control form-control-sm fill-items" id="filter_item">
                <option value="-1" selected>انتخاب آیتم فعالیت</option>
                </select>
            </div>
            <div class="form-group mr-2" style="flex: 1">
                <label for="filter_status">وضعیت</label>
                <select class="form-control form-control-sm fill-status" id="filter_status">
                <option value="-1" selected>انتخاب وضعیت</option>
                </select>
            </div>
        </div>
        <div class="d-flex">
            <div class="form-group ml-2" style="flex: 1">
                <label for="filter_from_activity_date_time">از تاریخ فعالیت</label>
                <input class="form-control form-control-sm" type="search" id="filter_from_activity_date_time">
            </div>
            <div class="form-group mr-2" style="flex: 1">
                <label for="filter_to_activity_date_time">تا تاریخ فعالیت</label>
                <input class="form-control form-control-sm" type="search" id="filter_to_activity_date_time">
            </div>
        </div>
        <hr />
        <button class="btn btn-info btn-sm" id="btn_filter">فیلتر</button>
    </div>`
}

const fillFilterBox = () => {
    //fill datepicker
    filterDatepicker.from = $(
        "#filter_from_activity_date_time"
    ).persianDatepicker({
        format: "YYYY/MM/DD",
        autoClose: true,
        initialValue: false,
        onSelect: function (unix) {
            filterDatepicker.from.touched = true;

            if (
                filterDatepicker.from.getState().selected.unixDate >=
                filterDatepicker.to.getState().selected.unixDate
            ) {
                filterDatepicker.to.setDate(
                    filterDatepicker.from.getState().selected.unixDate
                );
            }

            if (
                filterDatepicker.to &&
                filterDatepicker.to.options &&
                filterDatepicker.to.options.minDate != unix
            ) {
                let cachedValue =
                    filterDatepicker.to.getState().selected.unixDate;

                filterDatepicker.to.options = { minDate: unix };

                if (filterDatepicker.from.touched) {
                    filterDatepicker.to.setDate(cachedValue);
                }
            }
        },
    });

    filterDatepicker.to = $(
        "#filter_to_activity_date_time"
    ).persianDatepicker({
        format: "YYYY/MM/DD",
        autoClose: true,
        initialValue: false,
        onSelect: function (unix) {
            filterDatepicker.to.touched = true;
        },
    });

    $(document).on('input', '#filter_from_activity_date_time', function (e) {
        if (e.target.value == '') {
            filterDatepicker.from.setDate(moment().valueOf())
            filterDatepicker.to.setDate(moment().valueOf())
            $("#filter_to_activity_date_time").val('')
            $("#filter_from_activity_date_time").val('')
        }
    })

    $(document).on('input', '#filter_to_activity_date_time', function (e) {
        if (e.target.value == '') {
            filterDatepicker.from.setDate(moment().valueOf())
            filterDatepicker.to.setDate(moment().valueOf())
            $("#filter_from_activity_date_time").val('')
            $("#filter_to_activity_date_time").val('')
        }
    })

    //fill provinces
    $.ajax({
        url: `${provinces_api}${$.inArray("show-road-item-supervise-cartable", PERMISSIONS) != -1 ? "?type=all" : ""}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function () {
            $('.fill-provinces').empty()
            $('.fill-provinces').append(`
                <option value="-1">در حال دریافت استان ها...</option>
            `)
        },
        success: function (result) {
            $('.fill-provinces').empty()
            $('.fill-provinces').append(`
                <option value="-1">انتخاب استان</option>
            `)
            result.data.map(item => {
                $('.fill-provinces').append(`
                    <option value="${item.id}">${item.name_fa}</option>
                `)
            })
        },
        error: function (request) {
        },
        complete: function () {
        }
    });

    //fill edarat
    $(document).on('change', '#filter_province', function (e) {
        const proviceId = e.target.value

        if (proviceId == "-1") {
            $('#filter_edarat').empty()
            $('#filter_edarat').append(`
                <option value="-1">یک استان انتخاب کنید</option>
            `)
            return
        }

        $.ajax({
            url: edarat_api + proviceId,
            type: "get",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#filter_edarat').empty()
                $('#filter_edarat').append(`
                    <option value="-1">در حال دریافت اداره ها...</option>
                `)
            },
            success: function (result) {
                console.log(result);
                $('#filter_edarat').empty()
                $('#filter_edarat').append(`
                    <option value="-1">انتخاب اداره</option>
                `)
                result.data.map(item => {
                    $('#filter_edarat').append(`
                    <option value="${item.id}">${item.name_fa}</option>
                `)
                })
            },
            error: function (request) {
            },
            complete: function () {
            }
        })
    })

    //fill items
    $.ajax({
        url: items_api,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function () {
            $('.fill-items').empty()
            $('.fill-items').append(`
                <option value="-1">در حال دریافت آیتم...</option>
            `)
        },
        success: function (result) {
            $('.fill-items').empty()
            $('.fill-items').append(`
                <option value="-1">انتخاب آیتم فعالیت</option>
            `)
            result.data.map(item => {
                $('.fill-items').append(`
                    <option value="${item.id}">${item.name}</option>
                `)
            })
        },
        error: function (request) {
        },
        complete: function () {
        }
    });

    //fill status
    $('.fill-status').empty()

    $('.fill-status').append(`
        <option value="-1">انتخاب وضعیت</option>
        <option value="0">در حال بررسی</option>
        <option value="1">تایید شده</option>
        <option value="2">عدم تایید</option>
    `)
}

const filterBox = (show) => {
    $('#filter_box').css('display', show ? 'flex' : 'none')
}

$(function () {
    // supervisor cartable table
    showLoaderScreen();
    supervisorCartable = $("#supervisor_cartable").DataTable({
        serverSide: true,
        dom: "<<'d-flex justify-content-between align-items-center'lB><t>p>",
        pagingType: "simple_numbers",
        scrollX: true,
        filter: true,
        language: {
            sEmptyTable: "هیچ داده‌ای در جدول وجود ندارد",
            sInfo: "نمایش _START_ تا _END_ از _TOTAL_ ردیف",
            sInfoEmpty: "نمایش 0 تا 0 از 0 ردیف",
            sInfoFiltered: "(فیلتر شده از _MAX_ ردیف)",
            sInfoPostFix: "",
            sInfoThousands: ",",
            sLengthMenu: "نمایش _MENU_ ردیف",
            sLoadingRecords: "در حال بارگزاری...",
            sProcessing: "در حال پردازش...",
            sSearch: "جستجو: ",
            sZeroRecords: "رکوردی با این مشخصات پیدا نشد",
            oPaginate: {
                sFirst: "برگه‌ی نخست",
                sLast: "برگه‌ی آخر",
                sNext: "بعدی",
                sPrevious: "قبلی",
            },
            oAria: {
                sSortAscending: ": فعال سازی نمایش به صورت صعودی",
                sSortDescending: ": فعال سازی نمایش به صورت نزولی",
            },
        },
        order: [
            [9, "asc"],
            [0, "desc"]
        ],
        processing: true,
        select: true,
        ajax: {
            url: supervisorCartable_url,
            type: "GET",
            beforeSend: function () {
                showLoaderScreen();
                if (markers.length != 0) {
                    map.removeLayer(markersLayer);
                    markers = [];
                    markersLayer.clearLayers();
                }
                $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
            },
            dataSrc: function (json) {
                let data = json.data;
                hideLoaderScreen();
                if (data.length == 0) {
                    return data
                }
                const latlonArr = []
                for (let i = 0; i < data.length; i++) {
                    let marker = new L.Marker([data[i].start_lat, data[i].start_lng], { icon: mapIcon, id: data[i].id }).on('click', function (e) {
                        const id = e.target.options.id
                        supervisorCartable.rows().eq(0).map(index => {
                            if (supervisorCartable.row(index).data().id == id) {
                                const node = supervisorCartable.row(index).node()
                                $("html, body").animate({
                                    scrollTop: $(node).offset().top,
                                },
                                    100
                                );
                                $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
                                $(node).addClass("activate-row");
                                setTimeout(() => {
                                    markersLayer.eachLayer(layer => {
                                        if (layer.options.id == id) {
                                            layer.setIcon(activeMapIcon)
                                            layer.setZIndexOffset(100)
                                            return
                                        }
                                        layer.setZIndexOffset(0)
                                        layer.setIcon(mapIcon)
                                    })
                                    map.flyTo([supervisorCartable.row(index).data().start_lat, supervisorCartable.row(index).data().start_lng], 16, { duration: .5 });
                                }, 500)
                            }
                        })
                    })
                    markers.push(marker);
                    latlonArr.push([data[i].start_lat, data[i].start_lng])
                }
                markersLayer = new L.LayerGroup(markers);
                map.addLayer(markersLayer);
                $("html, body").animate({
                    scrollTop: $('#map').offset().top - 50,
                },
                    100
                );
                setTimeout(() => {
                    map.flyToBounds(latlonArr, { padding: [60, 60], duration: .5 })
                }, 250);
                hideLoaderScreen();
                return json.data;
            },
            error: function (request) {
                ajax_error(request.responseJSON, request.status);
                hideLoaderScreen();
            },
        },
        columns: [
            // 1
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'id',
                    type: 'text'
                },
                render: function (data, type, row) {
                    return `<div class="d-flex justify-content-center align-items-center">${data.status == 0 ? '<span class="blink_me blink_dot ml-2"></span>' : ''}<span>${data.id}</span></div>`
                },
                searchable: true,
                orderable: true,
            },
            // 2
            {
                className: "text-center align-middle",
                data: "province_fa",
                name: {
                    name: 'province_id',
                    type: 'select'
                },
                searchable: true,
                orderable: true,
            },
            // 3
            {
                className: "text-center align-middle",
                data: "edarat_name",
                name: {
                    name: 'edarat_id',
                    type: 'select'
                },
                searchable: true,
                orderable: true,
            },
            // 4
            {
                className: "text-center align-middle",
                data: "item_fa",
                name: {
                    name: 'item',
                    type: 'select'
                },
                searchable: true,
                orderable: true,
            },
            // 5
            {
                className: "text-center align-middle",
                data: "sub_item_fa",
                name: {
                    name: 'sub_item_fa',
                    type: 'text'
                },
                searchable: true,
                orderable: true,
            },
            // 6
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    return `<div class="d-inline-flex align-items-center justify-content-center"><p class="ml-1">${data.sub_item_data}</p><p class="text-nowrap" style="font-size: 10px; font-weight: 500">(${data.unit_fa})</p></div>`;
                },
                searchable: false,
                orderable: false,
            },
            // 7
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    if (data.files.length != 0) {
                        return `<button type="button" class="btn-dataTable show-images-btn" data-toggle="tooltip" data-placement="top" title="نمایش"><i class="fa fa-image icon-btnTable"></i></button>`
                    }
                    return '-'
                },
                searchable: true,
                orderable: false,
            },
            // 8
            {
                className: "text-center text-nowrap align-middle",
                data: null,
                name: {
                    name: 'created_at',
                    type: 'between'
                },
                render: function (data, type, row) {
                    if (data.created_at == null) return '-'
                    return moment(data.created_at).format("HH:mm:ss | jYYYY/jMM/jDD")
                },
                searchable: true,
                orderable: true,
            },
            // 9
            {
                className: "text-center text-nowrap align-middle",
                data: null,
                name: {
                    name: 'activity_date_time',
                    type: 'between'
                },
                render: function (data, type, row) {
                    if (data.activity_date_time == null) return '-'
                    return moment(data.activity_date_time).format("HH:mm:ss | jYYYY/jMM/jDD")
                },
                searchable: true,
                orderable: true,
            },
            // 10
            {
                className: "text-center text-nowrap align-middle",
                data: null,
                name: {
                    name: 'status',
                    type: 'select'
                },
                render: function (data, type, row) {
                    var supervising_time = "()";
                    if (data.supervising_time != null) {
                        supervising_time  = moment(data.supervising_time).format("HH:mm:ss | jYYYY/jMM/jDD");
                    }
                    switch (data.status) {
                        case 0:
                            return `<div>${data.status_fa}</div>`
                        case 1:
                            return `<div>${data.status_fa}</div><div>${supervising_time}</div>`
                        case 2:
                            return `<div>${data.status_fa}</div><div>${supervising_time}</div>`
                    }
                },
                searchable: true,
                orderable: true,
            },
            // 11
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'supervisor_description',
                    type: 'text'
                },
                render: function (data, type, row) {
                    if (data.supervisor_description == null) {
                        return `اطلاعاتی موجود نیست!!!`
                    } else {
                        return `<button type="button" class="btn-dataTable show-supervisor-description-btn" data-toggle="tooltip" data-placement="top" title="نمایش"><i class="fa fa-eye icon-btnTable"></i></button>`
                    }
                },
                searchable: true,
                orderable: false,
            },
            // 12
            {
                className: "text-center sorting align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    let content = `<div class="d-inline-flex">`
                    if (data.status == 0) {
                        if (data.can_supervise) {
                            content += `<button type="button" class="btn-dataTable confirm" data-toggle="tooltip" data-placement="top" title="تایید"><i class="fa fa-check icon-btnTable"></i></button><div class="pipeline mx-2"></div><button type="button" class="btn-dataTable disapproval" data-toggle="tooltip" data-placement="top" title="عدم تایید"><i class="fa fa-times icon-btnTable"></i></button>`;
                        }
                    } else if (data.status == 1 || data.status == 2) {
                        if ($.inArray("restore-road-item", PERMISSIONS) != -1) {
                            content += `<button type="button" class="btn-dataTable restore" data-toggle="tooltip" data-placement="top" title="بازگردانی"><i class="fa fa-share icon-btnTable"></i></button>`
                        }
                    }
                    if ($.inArray("delete-road-item", PERMISSIONS) != -1) {
                        content += `<div class="pipeline mx-2"></div><button type="button" class="btn-dataTable delete" data-toggle="tooltip" data-placement="top" title="حذف"><i class="fa fa-trash icon-btnTable"></i></button>`;
                    }

                    content += '</div>'
                    return content
                },
                searchable: false,
                orderable: false,
            },
        ],
        buttons: [
            {
                text: '<i class="fa fa-filter" aria-hidden="true"></i><span class="pr-1">فیلتر پیشرفته<span>',
                className: 'filtering-btn',
                action: function (e, dt, node, config) {
                    filterBox(true)
                }
            },
            {
                text: '<i class="fa fa-file" aria-hidden="true"></i><span class="pr-1">گزارش اکسل<span>',
                className: 'table-btns',
                action: function (e, dt, node, config) {
                    let queryParems = [];
                    const id = $("#filter_id").val();
                    const province = $("#filter_province").val();
                    const item = $("#filter_item").val();
                    const status = $("#filter_status").val();
                    const edarat = $("#filter_edarat").val();
                    let activityDate = {}
                    if ( $("#filter_from_activity_date_time").val() != "" && $("#filter_to_activity_date_time").val() != "" ) {
                        activityDate.from = moment(
                            filterDatepicker.from.getState().selected.year +
                            "/" +
                            filterDatepicker.from.getState().selected.month +
                            "/" +
                            filterDatepicker.from.getState().selected.date,
                            "jYYYY/jM/jD"
                        ).format("YYYY-MM-DD");

                        activityDate.to = moment(
                            filterDatepicker.to.getState().selected.year +
                            "/" +
                            filterDatepicker.to.getState().selected.month +
                            "/" +
                            filterDatepicker.to.getState().selected.date,
                            "jYYYY/jM/jD"
                        ).format("YYYY-MM-DD");

                        queryParems.push(`fromDate=${activityDate.from}`);
                        queryParems.push(`toDate=${activityDate.to}`);
                    }
                    if (id != '') queryParems.push(`id=${id}`);
                    if (province != '-1') queryParems.push(`province_id=${province}`);
                    if (item != '-1') queryParems.push(`item=${item}`);
                    if (edarat != '-1') queryParems.push(`edarat_id=${edarat}`);
                    if (status != '-1') queryParems.push(`status=${status}`);

                    const url = `${excel_api}${queryParems.length != 0 ? `?${queryParems.join("&")}` : ""}`;
                    window.open(url);
                }
            }
        ],
        initComplete: function () {
            $(".dt-buttons").append(FilterBoxInit)
            fillFilterBox();
        },
    });
    // end supervisor cartable table
});
// end on load

$("#supervisor_cartable").on("click", "tbody tr", function (e) {
    e.preventDefault()
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();
    dataOnMap(data);
    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(this).addClass("activate-row");
});

// show active data on map
function dataOnMap(data) {
    $("html, body").animate({
        scrollTop: $("#map").offset().top - 50,
    },
        100
    );
    setTimeout(() => {
        markersLayer.eachLayer(layer => {
            if (layer.options.id == data.id) {
                layer.setIcon(activeMapIcon)
                layer.setZIndexOffset(100)
                return
            }
            layer.setZIndexOffset(0)
            layer.setIcon(mapIcon)
        })
        map.flyTo([data.start_lat, data.start_lng], 16, { duration: .5 });
    }, 500)
}
// end show active data on map

// filtering
$(document).on('click', '#btn_filter', function () {
    filterBox(false)

    let _table = supervisorCartable

    const id = $("#filter_id").val();
    const province = $("#filter_province").val();
    const edarat = $("#filter_edarat").val();
    const item = $("#filter_item").val();
    const status = $("#filter_status").val();
    let activityDate = {}
    if (
        $("#filter_from_activity_date_time").val() != "" &&
        $("#filter_to_activity_date_time").val() != ""
    ) {
        activityDate.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        activityDate.to = moment(
            filterDatepicker.to.getState().selected.year +
            "/" +
            filterDatepicker.to.getState().selected.month +
            "/" +
            filterDatepicker.to.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");
    }

    if (id != '') {
        _table = _table.column(0).search(id);
    } else {
        _table = _table.column(0).search('');
    }

    if (province != '-1') {
        _table = _table.column(1).search(province);
    } else {
        _table = _table.column(1).search('');
    }

    if (edarat != '-1') {
        _table = _table.column(2).search(edarat);
    } else {
        _table = _table.column(2).search('');
    }

    if (item != '-1') {
        _table = _table.column(3).search(item);
    } else {
        _table = _table.column(3).search('');
    }

    if (status != '-1') {
        _table = _table.column(9).search(status);
    } else {
        _table = _table.column(9).search('');
    }

    if (Object.keys(activityDate).length !== 0) {
        _table = _table.column(8).search(`${activityDate.from}&${activityDate.to}`);
    } else {
        _table = _table.column(8).search('');
    }

    _table.draw();
})
// end  filtering

// confirmation action
$("#supervisor_cartable").on("click", ".confirm", function (e) {
    e.stopPropagation()
    const modal = $("#varifyDescription_modal");
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();
    modal.find(".clean-textarea").val("");
    modal.find("#description").removeClass("invalid").removeClass("valid").removeClass('value-important');
    modal.find("#description").data("id", data.id);
    modal.find("#description").data("acceptDecline", 1);
    modal.modal("show");
    $("#vaerify").removeClass("d-none");

    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(tr).addClass("activate-row");
});
// end confirmation action

// show supervisor description
$("#supervisor_cartable").on("click", ".show-supervisor-description-btn", function (e) {
    e.stopPropagation()
    const modal = $("#varifyDescription_modal");
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();
    modal.find(".clean-textarea").val("");
    modal.find(".value-important").removeClass("invalid").removeClass("valid");
    $("#vaerify").addClass("d-none");
    modal.find("#description").val(data.supervisor_description);
    modal.modal("show");

    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(tr).addClass("activate-row");
});
// end show supervisor description

// disapproval action
$("#supervisor_cartable").on("click", ".disapproval", function (e) {
    e.stopPropagation()
    const modal = $("#varifyDescription_modal");
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();
    modal.find(".clean-textarea").val("");
    modal.find("#description").removeClass("invalid").removeClass("valid").addClass('value-important');
    modal.find("#description").data("id", data.id);
    modal.find("#description").data("acceptDecline", 2);
    modal.modal("show");
    $("#vaerify").removeClass("d-none");

    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(tr).addClass("activate-row");
});
// end disapproval action

// accept/decline
$(document).on("click", "#vaerify", function (e) {
    e.preventDefault()
    const modal = $(this).parents(".modal");
    const verify = modal.find("#description").data("acceptDecline");
    const desc = modal.find("#description").val();
    const dataId = modal.find("#description").data("id");
    modal.find("textarea.value-important").each(function () {
        $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
    });
    if (modal.find(".invalid").length != 0) { return } else {
        Swal.fire({
            icon: "warning",
            title: `${verify == 1 ? "آیا از تایید فعالیت مربوطه اطمینان دارید؟" : "آیا از عدم تایید فعالیت مربوطه اطمینان دارید؟"}`,
            showCancelButton: true,
            confirmButtonColor: "#2d7c23",
            cancelButtonColor: "#971b1b",
            confirmButtonText: "بله اطمینان دارم",
            cancelButtonText: "خیر!",
            showLoaderOnConfirm: true,
            preConfirm: () => {
                modal.modal("hide");
                verifyFunc(verify, dataId, desc);
            },
        });
    }
});
// end accept/decline

// verify
function verifyFunc(verify, dataId, desc) {
    let formData = new FormData();
    formData.append("verify", verify);
    formData.append("description", desc);
    $.ajax({
        url: verify_api + dataId,
        type: "POST",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
            hideLoaderScreen();
            supervisorCartable.ajax.reload(null, false);
        },
        error: function (request) {
            hideLoaderScreen();
            ajax_error(request.responseJSON, request.status);
        },
        complete: function () {
            getSideBarActivity();
        }
    });
}
// end verify

// show images
$("#supervisor_cartable").on("click", ".show-images-btn", function (e) {
    e.stopPropagation()
    const modal = $("#show_images_modal");
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();
    modal.find('#image_before a').attr('href', '')
    modal.find('#image_before img').attr('src', '')
    if (data.files[1]) {
        modal.find('#image_before a').attr('href', data.files[1].full_path_for_fast_react)
        modal.find('#image_before img').attr('src', data.files[1].full_path_for_fast_react)
    }
    modal.find('#image_after a').attr('href', '')
    modal.find('#image_after img').attr('src', '')
    if (data.files[0]) {
        modal.find('#image_after a').attr('href', data.files[0].full_path_for_fast_react)
        modal.find('#image_after img').attr('src', data.files[0].full_path_for_fast_react)
    }
    modal.modal("show");

    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(tr).addClass("activate-row");
});
// end show images

// restore action
$("#supervisor_cartable").on("click", ".restore", function (e) {
    e.stopPropagation()
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let action_id = row.data().id;
    Swal.fire({
        icon: "warning",
        title: `آیا از بازگردانی آیتم مربوطه اطمینان دارید`,
        showCancelButton: true,
        confirmButtonColor: "#2d7c23",
        cancelButtonColor: "#971b1b",
        confirmButtonText: "بله اطمینان دارم",
        cancelButtonText: "خیر!",
        showLoaderOnConfirm: true,
        preConfirm: () => {
            $.ajax({
                url: restore_api + action_id,
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    hideLoaderScreen();
                    supervisorCartable.ajax.reload(null, false);
                },
                error: function (request) {
                    hideLoaderScreen();
                    ajax_error(request.responseJSON, request.status);
                },
                complete: function () {
                    getSideBarActivity();
                }
            });
        },
    });
});
// end restore action

// delete action
$("#supervisor_cartable").on("click", ".delete", function (e) {
    e.stopPropagation()
    let tr = $(this).closest("tr");
    let row = supervisorCartable.row(tr);
    let data = row.data();

    Swal.fire({
        icon: "warning",
        title: `آیا از حذف فعالیت اطمینان دارید؟`,
        showCancelButton: true,
        confirmButtonColor: "#2d7c23",
        cancelButtonColor: "#971b1b",
        confirmButtonText: "بله اطمینان دارم",
        cancelButtonText: "خیر!",
        showLoaderOnConfirm: true,
        preConfirm: () => {
            $.ajax({
                url: delete_api + data.id,
                type: "POST",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    showLoaderScreen()
                },
                success: function (result) {
                    supervisorCartable.ajax.reload(null, false);
                },
                error: function (request) {
                    hideLoaderScreen();
                    ajax_error(request.responseJSON, request.status);
                },
            });
        },
    });

    $("#supervisor_cartable").find("tbody tr").removeClass("activate-row");
    $(tr).addClass("activate-row");
});
// end delete action