// variables part
var operationCartable;
var operationCartable_url = "/v2/road_patrols/operator/cartable/show";
const MAP_ENDPOINT = "https://rmsmap.rmto.ir";
var permission_api = "/webapi/user/get-permission";
var excel_api = "/v2/road_patrols/operator/cartable/report";
var report_api = "/v2/road_patrols/operator/report/";
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

// 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

(() => {
    //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_officer_name">نام مامور</label>
                <input  id="filter_officer_name" type="search" class="form-control form-control-sm" autocomplete="off" />
            </div>
            <div class="form-group" 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 = () => {
    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-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 () {
    // 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",
        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: [[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_lon], { 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_lon], 16, { duration: .5 });
                                }, 500)
                            }
                        })
                    })
                    markers.push(marker);
                    latlonArr.push([data[i].start_lat, data[i].start_lon])
                }
                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: "officer_name",
                name: {
                    name: 'officer_name',
                    type: 'text'
                },
                searchable: true,
                orderable: true,
            },
            // 3
            {
                className: "text-center align-middle",
                data: "officer_phone_number",
                name: {
                    name: 'officer_phone_number',
                    type: 'text'
                },
                searchable: true,
                orderable: true,
            },
            // 4
            {
                className: "d-flex justify-content-center",
                data: null,
                name: {
                    name: 'officer_plaque',
                    type: 'text'
                },
                render: function (data, type, row) {
                    const plaque = data.officer_plaque.split('-')
                    return `<div dir='ltr' style="width: 100px" class='d-flex border rounded justify-content-between align-items-center'>
                        <div class="p-1">${plaque[0]}</div>
                        <div class="p-1">${plaque[1] == '*' ? '<i class="fa fa-wheelchair"></i>' : plaque[1]}</div>
                        <div class="p-1">${plaque[2]}</div>
                        <div class="p-1 border-left">${plaque[3]}</div>
                    </div>`
                },
                searchable: true,
                orderable: true,
            },
            // 5
            {
                className: "text-center text-nowrap align-middle",
                data: null,
                name: {
                    name: 'start_time',
                    type: 'between'
                },
                render: function (data, type, row) {
                    if (data.start_time == null) return '-'
                    return moment(data.start_time).format("HH:mm:ss | jYYYY/jMM/jDD")
                },
                searchable: true,
                orderable: true,
            },
            // 6
            {
                className: "text-center text-nowrap align-middle",
                data: null,
                name: {
                    name: 'end_time',
                    type: 'between'
                },
                render: function (data, type, row) {
                    if (data.end_time == null) return '-'
                    return moment(data.end_time).format("HH:mm:ss | jYYYY/jMM/jDD")
                },
                searchable: true,
                orderable: true,
            },
            // 7
            {
                className: "text-center align-middle",
                data: "distance",
                name: {
                    name: 'distance',
                    type: 'text'
                },
                searchable: true,
                orderable: true,
            },
            // 8
            {
                className: "text-center sorting align-middle",
                data: null,
                name: {
                    name: 'option',
                    type: 'option'
                },
                render: function (data, type, row) {
                    return `<button type="button" class="btn-dataTable report" data-toggle="tooltip" data-placement="top" title="گزارش"><i class="fa fa-print 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 officer_name = $("#filter_officer_name").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 (officer_name != '') queryParems.push(`officer_name=${officer_name}`);
                    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_lon], 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 officer_name = $("#filter_officer_name").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 (officer_name != '') {
        _table = _table.column(1).search(officer_name);
    } else {
        _table = _table.column(1).search('');
    }

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

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

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

// report
$("#operation_cartable").on('click', '.report', function (e) {
    e.stopPropagation()
    let tr = $(this).closest("tr");
    let row = operationCartable.row(tr);
    let data = row.data();
    window.open(report_api + data.id, '_blank')
});
// end report