// variables part
var operationCartable;
var operationCartable_url = "/v2/road_items/operator/cartable/show";
const MAP_ENDPOINT = "https://rmsmap.rmto.ir";
var permission_api = "/webapi/user/get-permission";
var excel_api = "/v2/road_items/operator/cartable/report";
var update_api = "/v2/road_items/operator/update/"
var items_api = "/v2/items"
var markers = [];
var markersLayer;
var editMap = null;
var startMarkerEdit = null;
var endMarkerEdit = null;
var isSetStartMarkerEdit = false;
var isSetEndMarkerEdit = false;
var mapZoom = getWidth() < 508 ? 5 : 6;
var filterDatepicker = {};
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
// map start and end icon
var startDivIcon = L.divIcon({
    html: `
      <div id="edit-pin-marker-start" class="pin-marker">
        <div class="map-pin-marker">
          <div class="pin-main-circle"></div>
          <div class="pin-white-circle"></div>
          <div class="pin-title-circle">
            <span class="title-circle-text">شروع</span>
          </div>
          <div class="pin-main-line"></div>
        </div>
        <div class="pin-main-shadow">
          <div class="shadow-dot">
          </div>
        </div>
      </div>
    `,
    iconSize: [55, 75],
    iconAnchor: [33, 64],
});
var endDivIcon = L.divIcon({
    html: `
    <div id="edit-pin-marker-end" class="pin-marker">
    <div class="map-pin-marker">
        <div class="pin-main-circle"></div>
        <div class="pin-white-circle"></div>
        <div class="pin-title-circle">
        <span class="title-circle-text">پایان</span>
        </div>
        <div class="pin-main-line"></div>
    </div>
    <div class="pin-main-shadow">
        <div class="shadow-dot">
        </div>
    </div>
    </div>
`,
    iconSize: [55, 75],
    iconAnchor: [33, 64],
});
// end map start and end icon
// 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: [40, 40],
});
// 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

(() => {
    $("[data-mask]").inputmask();
    //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");
    }
});

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_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 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>
    `)
}

// uploading file input
$(document).on("change", ".img-input", function () {
    var input = this;
    var parent = $(input).parents(".img-box");
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            parent.find(".img-title").css("display", "none");
            parent.find(".btn-delete-img").removeAttr("disabled");
            parent.find(".img-preview").attr("src", e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
});
$(".btn-delete-img").on("click", function () {
    var parent = $(this).parents(".img-box");
    parent.find(".img-input").val("");
    parent.find(".img-preview").removeAttr("src");
    parent.find(".img-title").css("display", "");
    $(this).attr("disabled", "disabled");
});
// end uploading file input

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

$(function () {
    // operation cartable table
    showLoaderScreen();
    operationCartable = $("#operation_cartable").DataTable({
        serverSide: true,
        dom: "<<'d-flex justify-content-between align-items-center'lB><t>p>",
        pagingType: "simple_numbers",
        filter: true,
        scrollX: 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, "desc"], [0, "desc"]],
        processing: true,
        select: true,
        ajax: {
            url: operationCartable_url,
            type: "GET",
            beforeSend: function () {
                showLoaderScreen();
                if (markers.length != 0) {
                    map.removeLayer(markersLayer);
                    markers = [];
                    markersLayer.clearLayers();
                }
                $("#operation_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
                        operationCartable.rows().eq(0).map(index => {
                            if (operationCartable.row(index).data().id == id) {
                                const node = operationCartable.row(index).node()
                                $("html, body").animate({
                                    scrollTop: $(node).offset().top,
                                },
                                    100
                                );
                                $("#operation_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([operationCartable.row(index).data().start_lat, operationCartable.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)
                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 == 2 ? '<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: "item_fa",
                name: {
                    name: 'item',
                    type: 'select'
                },
                searchable: true,
                orderable: true,
            },
            // 3
            {
                className: "text-center align-middle",
                data: "sub_item_fa",
                name: {
                    name: 'sub_item_fa',
                    type: 'text'
                },
                searchable: true,
                orderable: true,
            },
            // 4
            {
                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,
            },
            // 5
            {
                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,
            },
            // 6
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    if (data.start_lat != null)
                        return `<div>${data.start_lat}</div><div>${data.start_lng}</div>`
                    return '-'
                },
                searchable: true,
                orderable: false,
            },
            // 7
            {
                className: "text-center align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    if (data.end_lat != null)
                        return `<div>${data.end_lat}</div><div>${data.end_lng}</div>`
                    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 align-middle",
                data: "status_fa",
                name: {
                    name: 'status',
                    type: 'select'
                },
                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.status == 0) {
                        return `-`
                    } else if (data.status == 1 || data.status == 2) {
                        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) {
                    if (data.status == 0) {
                        return `-`;
                    } else if (data.status == 1) {
                        return `-`;
                    } else if (data.status == 2) {
                        return `<button type="button" class="btn-dataTable edit-item" data-toggle="tooltip" data-placement="top" title="ویرایش"><i class="fa fa-edit icon-btnTable"></i></button>`
                    }
                },
                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 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");

                        queryParems.push(`fromDate=${activityDate.from}`);
                        queryParems.push(`toDate=${activityDate.to}`);
                    }
                    if (id != '') queryParems.push(`id=${id}`);
                    if (item != '-1') queryParems.push(`item=${item}`);
                    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()
        },
        fnDrawCallback: function () {
            $('[data-toggle="tooltip"]').tooltip();
        },
    });
    // end operation cartable table
});
// end on load
$("#operation_cartable").on("click", "tbody tr", function (e) {
    e.preventDefault()
    let tr = $(this).closest("tr");
    let row = operationCartable.row(tr);
    let data = row.data();
    dataOnMap(data);
    $("#operation_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 = operationCartable

    const id = $("#filter_id").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 (item != '-1') {
        _table = _table.column(1).search(item);
    } else {
        _table = _table.column(1).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

// show supervisor description
$("#operation_cartable").on("click", ".show-supervisor-description-btn", function (e) {
    e.stopPropagation()
    const modal = $("#show_supervisor_description_modal");
    let tr = $(this).closest("tr");
    let row = operationCartable.row(tr);
    let data = row.data();
    modal.find(".clean-textarea").val("");
    modal.find(".value-important").removeClass("invalid").removeClass("valid");
    modal.find("#description").val(data.supervisor_description);
    modal.modal("show");

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

// show images
$("#operation_cartable").on("click", ".show-images-btn", function (e) {
    e.stopPropagation()
    const modal = $("#show_images_modal");
    let tr = $(this).closest("tr");
    let row = operationCartable.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");

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

// edit item
$("#operation_cartable").on("click", ".edit-item", function (e) {
    e.stopPropagation()
    const modal = $("#edit_modal");
    const image_box_parent = modal.find(".upload-box");
    image_box_parent.find(".img-input").val("");
    image_box_parent.find(".img-preview").removeAttr("src");
    image_box_parent.find(".img-title").css("display", "");
    image_box_parent.find(".btn-delete-img").attr("disabled", "disabled");
    modal.find(".clean-input").val("");
    modal.find(".value-important").removeClass("invalid").removeClass("valid");
    let tr = $(this).closest("tr");
    let row = operationCartable.row(tr);
    let data = row.data();
    if (editMap == null) {
        setTimeout(() => {
            createEditMap(data);
        }, 400);
    } else {
        setTimeout(() => {
            clearEditMap(data);
        }, 400);
    }
    if (data.end_lat != null && data.end_lng != null) {
        $("#edit_coordinates_end").removeClass("d-none").addClass("value-important");
    } else {
        $("#edit_coordinates_end").addClass("d-none").removeClass("value-important");
    }
    modal.find("#edit_coordinates_start").val(parseFloat(data.start_lat).toFixed(6) + parseFloat(data.start_lng).toFixed(6));
    modal.find("#edit_coordinates_end").val(parseFloat(data.end_lat).toFixed(6) + parseFloat(data.end_lng).toFixed(6));
    modal.find(".sub-item-unit").text(`(${data.unit_fa})`);
    modal.find("#edit_item_amount").val(data.sub_item_data);
    if (data.files.length != 0) {
        modal.find("#edit_deviceImg1Preview").attr("src", `${data.files[0].full_path_for_fast_react}`);
        modal.find("#edit_deviceImg1Title").css("display", "none");
        modal.find("#edit_deleteDeviceImg1").prop("disabled", false);
        modal.find("#edit_deviceImg2Preview").attr("src", `${data.files[1].full_path_for_fast_react}`);
        modal.find("#edit_deviceImg2Title").css("display", "none");
        modal.find("#edit_deleteDeviceImg2").prop("disabled", false);
        modal.find(".upload-box").removeClass("d-none");
    } else {
        modal.find(".upload-box").addClass("d-none");
    }
    modal.find("#edit_item").data("id", data.id);
    modal.modal("show");
});
// end edit item

// all about map [edit]
// clear edit map
function clearEditMap(data) {
    isSetStartMarkerEdit = false;
    isSetEndMarkerEdit = false;
    editMap.removeLayer(startMarkerEdit);
    $("#edit_coordinates_start").val("(عرض جغرافیایی) - (طول جغرافیایی)");
    $("#edit_modal").find("#edit_coordinates_start").val(parseFloat(data.start_lat).toFixed(6) + parseFloat(data.start_lng).toFixed(6));
    if (endMarkerEdit != null) {
        editMap.removeLayer(endMarkerEdit);
        $("#edit_coordinates_end").val("(عرض جغرافیایی) - (طول جغرافیایی)");
        $("#edit_modal").find("#edit_coordinates_end").val(parseFloat(data.end_lat).toFixed(6) + parseFloat(data.end_lng).toFixed(6));
    }
    editMap.setView([35.7065, 51.3477], mapZoom);
    setMarkerDefaultEdit(data);
}
// end clear edit map

// edit map functions
function createEditMap(data) {
    var bounds = [
        [42.9130026312, 75.6166317076],
        [20.5782370061, 35.5092252948],
    ];
    editMap = L.map("edit_map", {
        maxBounds: bounds,
        minZoom: mapZoom,
        zoomControl: false,
    }).setView([35.7065, 51.3477], mapZoom);
    editMap.addLayer(L.tileLayer(MAP_ENDPOINT + "/141map/{z}/{x}/{y}.png", {
        attributionControl: false,
    }));
    setMarkerDefaultEdit(data);
}
function setMarkerDefaultEdit(data) {

    isSetStartMarkerEdit = true;
    isSetEndMarkerEdit = false;

    startMarkerEdit = new L.marker(L.latLng([data.start_lat, data.start_lng]), {
        icon: startDivIcon,
        draggable: true,
    }).addTo(editMap);

    $("#edit-pin-marker-start").addClass("pin-set");

    if (data.end_lat != null && data.end_lng != null) {
        endMarkerEdit = new L.marker(L.latLng([data.end_lat, data.end_lng]), {
            icon: endDivIcon,
            draggable: true,
        }).addTo(editMap);
        $("#edit-pin-marker-end").addClass("pin-set");
        isSetEndMarkerEdit = true;
        editMap.flyToBounds([startMarkerEdit.getLatLng(), endMarkerEdit.getLatLng()], 13, { duration: 0.5 });
    } else {
        editMap.flyTo(startMarkerEdit.getLatLng(), 15, { duration: 0.5 });
    }

    console.log(isSetEndMarkerEdit);

    editMap.on("move", function () {
        if (isSetStartMarkerEdit ) {
            startMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
            $("#edit-pin-marker-start").removeClass("pin-set").addClass("pin-move");
        }

        if ( isSetEndMarkerEdit) {
            endMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
            $("#edit-pin-marker-end").removeClass("pin-set").addClass("pin-move");
        }
    });

    editMap.on("moveend", function () {
        if (isSetStartMarkerEdit) {
            startMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
            $("#edit-pin-marker-start").removeClass("pin-move pin-set");
        }

        if (isSetEndMarkerEdit) {
            endMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
            $("#edit-pin-marker-end").removeClass("pin-move pin-set");
        }
    });

    startMarkerEdit.on("click", function () {
        if (editMap.getZoom() >= 14) {
            if (!isSetStartMarkerEdit) {
                startMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
                endMarkerEdit.setLatLng(L.latLng(editMap.getCenter()));
                isSetStartMarkerEdit = true;
                $("#edit-pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
            }
            if (data.end_lat != null && data.end_lng != null) {
                $("#edit_coordinates_end").removeClass("d-none").addClass("value-important");
                endMarkerEdit.setLatLng(startMarkerEdit.getLatLng(), { draggable: true, }).addTo(editMap);
                editMap.panBy(L.point(10, 10));
            }
            $("#edit_coordinates_start").val(startMarkerEdit.getLatLng().lat.toFixed(6) + startMarkerEdit.getLatLng().lng.toFixed(6));
            $("#edit_coordinates_start").addClass("valid").removeClass("invalid");
            $(this).hide();
            $("#edit-pin-marker-start").removeClass("pin-move pin-warn").addClass("pin-set");
        } else {
            Swal.fire({
                icon: "warning",
                title: "خطا",
                text: "لطفا زوم نقشه خود را بیشتر کنید",
                cancelButtonText: "بستن",
                showConfirmButton: false,
                showCancelButton: true,
            });
        }
    });

    startMarkerEdit.on("drag", function () {
        $("#edit-pin-marker-start").addClass("pin-move");
    });

    startMarkerEdit.on("dragend", function () {
        $("#edit-pin-marker-start").removeClass("pin-move");
        $("#edit_coordinates_start").val(startMarkerEdit.getLatLng().lat.toFixed(6) + startMarkerEdit.getLatLng().lng.toFixed(6));
        if ($("#edit-pin-marker-start").hasClass("pin-set") || isSetStartMarkerEdit) {
            $("#edit-pin-marker-start").addClass("pin-set");
        } else {
            editMap.setView(startMarkerEdit.getLatLng());
        }
    });

    if (isSetEndMarkerEdit) {
        endMarkerEdit.on("click", function () {
            if (editMap.getZoom() >= 14) {
                if (!isSetEndMarkerEdit) {
                    isSetEndMarkerEdit = true;
                    $("#edit-pin-marker-end").removeClass("pin-move pin-warn").addClass("pin-set");
                }
                $("#edit_coordinates_end").addClass("valid").removeClass("invalid");
                $("#edit_coordinates_end").val(endMarkerEdit.getLatLng().lat.toFixed(6) + endMarkerEdit.getLatLng().lng.toFixed(6));
            } else {
                Swal.fire({
                    icon: "warning",
                    title: "خطا",
                    text: "لطفا زوم نقشه خود را بیشتر کنید",
                    cancelButtonText: "بستن",
                    showConfirmButton: false,
                    showCancelButton: true,
                });
            }
        });

        endMarkerEdit.on("drag", function () {
            $("#edit-pin-marker-end").addClass("pin-move");
        });

        endMarkerEdit.on("dragend", function () {
            $("#edit-pin-marker-end").removeClass("pin-move");
            if ($("#edit-pin-marker-end").hasClass("pin-set") || isSetEndMarkerEdit) {
                $("#edit-pin-marker-end").addClass("pin-set");
                $("#edit_coordinates_end").val(endMarkerEdit.getLatLng().lat.toFixed(6) + endMarkerEdit.getLatLng().lng.toFixed(6));
            } else {
                editMap.setView(endMarkerEdit.getLatLng());
            }
        });
    }

}
// end all about map

// edit item
$(document).on("click", "#edit_item", function () {
    const modal = $(this).parents(".modal");
    const dataId = $(this).data("id");
    let formData = new FormData();
    modal.find("input.value-important").each(function () {
        $(this).val() == "" ? $(this).removeClass("valid").addClass("invalid") : $(this).removeClass("invalid").addClass("valid");
    });
    console.log(modal.find(".upload-box").prop("src"));
    modal.find(".upload-box").each(function () {
        $(this).find(".img-preview").prop("src") == "" ? $(this).find(".imgbox").removeClass("valid").addClass("invalid") : $(this).find(".imgbox").removeClass("invalid").addClass("valid")
    });
    if (modal.find(".upload-box").hasClass("d-none")) { modal.find(".upload-box").find(".imgbox").removeClass("invalid").addClass("valid") }
    if (modal.find(".invalid").length != 0 || modal.find(".pin-warn").length != 0) { return } else {
        const amount = $("#edit_item_amount").val();
        if (modal.find("#edit_deviceImg1").get(0).files[0] != undefined) {
            const before_image = modal.find("#edit_deviceImg1").get(0).files[0];
            formData.append("before_image", before_image);
        }
        if (modal.find("#edit_deviceImg2").get(0).files[0] != undefined) {
            const after_image = modal.find("#edit_deviceImg2").get(0).files[0];
            formData.append("after_image", after_image);
        }
        const start_point = `${startMarkerEdit.getLatLng().lat.toFixed(6)},${startMarkerEdit.getLatLng().lng.toFixed(6)}`;
        if (endMarkerEdit != null && endMarkerEdit._latlng) {
            const end_point = `${endMarkerEdit.getLatLng().lat.toFixed(6)},${endMarkerEdit.getLatLng().lng.toFixed(6)}`;
            formData.append("end_point", end_point);
        }
        formData.append("start_point", start_point);
        formData.append("amount", amount);
        $.ajax({
            url: update_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();
                Swal.fire({
                    icon: "success",
                    title: "فعالیت با موفقیت ثبت شد",
                    showCancelButton: false,
                    confirmButtonColor: "#2d7c23",
                    confirmButtonText: "اتمام عملیات",
                    showLoaderOnConfirm: true,
                    preConfirm: () => {
                        modal.modal("hide");
                        operationCartable.ajax.reload();
                        getSideBarActivity()
                    },
                });
            },
            error: function (request) {
                hideLoaderScreen();
                ajax_error(request.responseJSON, request.status);
            },
        });
    }
});
// end edit item