//variables
const get_rahdari_projects_by_filter_api = "/v2/contract/report/map";
const get_road_items_by_filter_api = "/v2/road_items/report/map";
const get_road_patrols_by_filter_api = "/v2/road_patrols/report/map";
const get_safety_and_privacy_by_filter_api = "/v2/safety_and_privacy/report/map";
const get_road_observations_by_filter_api = "/v2/road_observations/report/map";

const get_rahdari_projects_by_id = "/v2/rahdari_projects/project/";
const get_road_items_by_id = "/public/projects/road-items/";
const get_road_patrols_by_id = "/v2/road_patrols/report/";
const get_safety_and_privacy_by_id = "/v2/safety_and_privacy/";
const get_road_observations_by_id = "/v2/road_observations/";
const provinces_api = "/webapi/getuser/province-perm?type=all";
const edarat_api = "/public/contents/edarate_shahri_by_province/";
const road_items_items_api = "/v2/items";
const road_items_subitems_api = "/v2/sub_items/";
const safety_and_privacy_subitems_api = "/v2/safety_and_privacy/sub_item_list";
const unserializeJudiciaryDocument_url = "/v2/safety_and_privacy/operator/cartable/unserialize/judiciary_document/";
let FILTERQUERY = {}
let TYPE;
MINZOOM = 5;
const MAP_ENDPOINT = "https://rmsmap.rmto.ir/141map";
const bounds = [
    [42.9130026312, 75.6166317076],
    [20.5782370061, 30.5092252948],
];
let latlonArr = [];
let markers = []
var markersLayer = null
var markersLayersCluster = null
var mapMode;
var filterDatepicker = {}
var map;

var trafficLayer = L.tileLayer(
    "https://rmssatmap.rmto.ir/sat/{z}/{x}/{y}.jpg",
    {}
);
var iranLayer = L.tileLayer(
    "https://rmsmap.rmto.ir/141map/{z}/{x}/{y}.png",
    {}
);

function makeIcon(iconSize, layer) {
    return L.divIcon({
        className: "custom-div-icon",
        html: "<span style='width: " + iconSize + "px;height: " + iconSize + "px;' class='" + layer._icon.childNodes[0].classList.value + "'></span>",
        iconSize: [0, 0],
    });
}

var greenIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-green'></span>",
    iconSize: [16, 16],
});
var redIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-red'></span>",
    iconSize: [16, 16],
});

var orangeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-orange'></span>",
    iconSize: [16, 16],
});

var fakeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-orange'></span>",
    iconSize: [6, 6],
});


var brownIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-brown'></span>",
    iconSize: [16, 16],
});

var yellowIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-yellow'></span>",
    iconSize: [16, 16],
});
var blueIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-blue'></span>",
    iconSize: [16, 16],
});
var stepOneIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-one'></span>",
    iconSize: [16, 16],
});
var stepTwoIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-two'></span>",
    iconSize: [16, 16],
});
var stepThreeIcon = L.divIcon({
    className: "custom-div-icon",
    html: "<span class='beacon beacon-step-three'></span>",
    iconSize: [16, 16],
});

function changelayer() {
    if (map.hasLayer(iranLayer)) {
        map.removeLayer(iranLayer);
        map.addLayer(trafficLayer);

    } else if (map.hasLayer(trafficLayer)) {
        map.removeLayer(trafficLayer);
        map.addLayer(iranLayer);
    }
}

//functions
const initializePageByType = () => {
    document.location.search.length != 0 ? (querylength = 1) : (querylength = 0);
    urlParams = new URLSearchParams(window.location.search);
    TYPE = urlParams.get("type");

    switch (TYPE) {
        case "rahdari_projects":
            createFiltersBox([
                {
                    type: 'Provinces'
                },
                {
                    type: 'RahdariProjects'
                },
                {
                    type: 'DisplayType',
                    defaultValue: 2
                },
                {
                    type: 'DateFromTo',
                    label: {
                        from: 'از تاریخ انعقاد قرارداد',
                        to: 'از تاریخ انعقاد قرارداد',
                    },
                    defaultValue: {
                        from: +moment(),
                        to: +moment()
                    }
                }
            ])
            filterRahdariProjects()
            break;
        case "road_items":
            createFiltersBox([
                {
                    type: 'Provinces'
                },
                {
                    type: 'Edare'
                },
                {
                    type: 'RoadItems'
                },
                {
                    type: 'Status',
                    defaultValue: 1
                },
                {
                    type: 'DisplayType',
                    defaultValue: 2
                },
                {
                    type: 'DateFromTo',
                    label: {
                        from: 'از تاریخ',
                        to: 'از تاریخ',
                    },
                    defaultValue: {
                        from: +moment(),
                        to: +moment()
                    }
                }
            ])
            createDetailsBoxRoadItems()
            filterRoadItems()
            break;
        case "road_patrols":
            createFiltersBox([
                {
                    type: 'Provinces'
                },
                {
                    type: 'Edare'
                },
                {
                    type: 'DisplayType',
                    defaultValue: 2
                },
                {
                    type: 'DateFromTo',
                    label: {
                        from: 'از تاریخ',
                        to: 'از تاریخ',
                    },
                    defaultValue: {
                        from: +moment(),
                        to: +moment()
                    }
                }
            ])
            createDetailsBoxRoadPatrols()
            filterRoadPatrols()
            break;
        case "safety_and_privacy":
            createFiltersBox([
                {
                    type: 'Provinces'
                },
                {
                    type: 'Edare'
                },
                {
                    type: 'SafetyAndPrivacy',
                    defaultValue: {
                        step: 1
                    }
                },
                {
                    type: 'DisplayType',
                    defaultValue: 2
                },
                {
                    type: 'DateFromTo',
                    label: {
                        from: 'از تاریخ',
                        to: 'از تاریخ',
                    },
                    defaultValue: {
                        from: +moment(),
                        to: +moment()
                    }
                }
            ])
            createDetailsSAP()
            filterSafetyAndPrivacy()
            break;
        case "road_observations":
            createFiltersBox([
                {
                    type: 'Provinces'
                },
                {
                    type: 'Edare'
                },
                {
                    type: 'RoadObservations'
                },
                {
                    type: 'Status',
                    defaultValue: 1
                },
                {
                    type: 'DisplayType',
                    defaultValue: 2
                },
                {
                    type: 'DateFromTo',
                    label: {
                        from: 'از تاریخ',
                        to: 'از تاریخ',
                    },
                    defaultValue: {
                        from: +moment(),
                        to: +moment()
                    }
                }
            ])
            createDetailsBoxRoadObservations()
            filterRoadObservations()
            break;

    }
}

const createFiltersBox = (filterList) => {
    const FilterItemsElement = document.getElementById("filter_items")
    filterList.map(({ type, defaultValue, label }) => {
        const container = document.createElement('div')
        switch (type) {
            case "RahdariProjects":
                container.innerHTML = RahdariProjects.build
                FilterItemsElement.appendChild(container);
                RahdariProjects.config(defaultValue)
                break;
            case "DisplayType":
                container.innerHTML = DisplayType.build
                FilterItemsElement.appendChild(container);
                DisplayType.config(defaultValue)
                break;
            case "DateFromTo":
                container.innerHTML = DateFromTo.build(label)
                FilterItemsElement.appendChild(container);
                DateFromTo.config(defaultValue)
                break;
            case "Provinces":
                container.innerHTML = Provinces.build
                FilterItemsElement.appendChild(container);
                Provinces.config(defaultValue)
                break;
            case "Edare":
                container.innerHTML = Edare.build
                FilterItemsElement.appendChild(container);
                Edare.config(defaultValue)
                break;
            case "Status":
                container.innerHTML = Status.build
                FilterItemsElement.appendChild(container);
                Status.config(defaultValue)
                break;
            case "RoadItems":
                container.innerHTML = RoadItems.build
                FilterItemsElement.appendChild(container);
                RoadItems.config(defaultValue)
                break;
            case "SafetyAndPrivacy":
                container.innerHTML = SafetyAndPrivacy.build
                FilterItemsElement.appendChild(container);
                SafetyAndPrivacy.config(defaultValue)
                break;
            case "RoadObservations":
                container.innerHTML = RoadObservations.build
                FilterItemsElement.appendChild(container);
                RoadObservations.config(defaultValue)
                break;
        }
    })
}

const filterRahdariProjects = () => {
    const filter_params = []
    FILTERQUERY = {}
    FILTERQUERY.province = $("#filter_province").val();
    FILTERQUERY.type = $("#filter_type").val();
    FILTERQUERY.axis = $("#filter_axis").val();
    FILTERQUERY.lastStatus = $("#filter_last_status").val();
    FILTERQUERY.priority = $("#filter_priority").val();
    FILTERQUERY.followup = $("#filter_followup").val();
    FILTERQUERY.displayType = $("#filter_display_type").val();
    FILTERQUERY.date = {}
    if (
        $("#filter_from_date_time").val() != "" &&
        $("#filter_to_date_time").val() != ""
    ) {
        FILTERQUERY.date.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        FILTERQUERY.date.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 (FILTERQUERY.province != '-1') {
        filter_params.push(`&province_id=${FILTERQUERY.province}`)
    }

    if (FILTERQUERY.type != '-1') {
        filter_params.push(`&type=${FILTERQUERY.type}`)
    }

    if (FILTERQUERY.axis != '-1') {
        filter_params.push(`&axis=${FILTERQUERY.axis}`)
    }

    if (FILTERQUERY.lastStatus != '-1') {
        filter_params.push(`&last_status=${FILTERQUERY.lastStatus}`)
    }

    if (FILTERQUERY.priority != '-1') {
        filter_params.push(`&priority=${FILTERQUERY.priority}`)
    }

    if (FILTERQUERY.followup != '-1') {
        filter_params.push(`&followup=${FILTERQUERY.followup}`)
    }

    if (Object.keys(FILTERQUERY.date).length !== 0) {
        filter_params.push(`&date_from=${FILTERQUERY.date.from}`)
        filter_params.push(`&date_to=${FILTERQUERY.date.to}`)
    }

    $.ajax({
        url: get_rahdari_projects_by_filter_api + `?_=_${filter_params.join('')}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        contentType: false,
        processData: false,
        beforeSend: function () {
            showLoaderScreen()
            removeLayersInMap()
        },
        success: function ({ data }) {
            showInMap(data)
            hideLoaderScreen()
        },
        error: function (request) {
            // error handler
            hideLoaderScreen()
        }
    });
}

const filterRoadItems = () => {
    const filter_params = []
    FILTERQUERY = {}
    FILTERQUERY.province = $("#filter_province").val();
    FILTERQUERY.edarat = $("#filter_edarat").val();
    FILTERQUERY.status = $("#filter_status").val();
    FILTERQUERY.item = $("#filter_item").val();
    FILTERQUERY.subitem = $("#filter_subitem").val();
    FILTERQUERY.displayType = $("#filter_display_type").val();
    FILTERQUERY.date = {}
    if (
        $("#filter_from_date_time").val() != "" &&
        $("#filter_to_date_time").val() != ""
    ) {
        FILTERQUERY.date.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        FILTERQUERY.date.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 (FILTERQUERY.province != '-1') {
        filter_params.push(`&province_id=${FILTERQUERY.province}`)
    }

    if (FILTERQUERY.edarat != '-1') {
        filter_params.push(`&city_id=${FILTERQUERY.edarat}`)
    }

    if (FILTERQUERY.status != '-1') {
        filter_params.push(`&status=${FILTERQUERY.status}`)
    }

    if (FILTERQUERY.item != '-1') {
        filter_params.push(`&item=${FILTERQUERY.item}`)
    }

    if (FILTERQUERY.subitem != '-1') {
        filter_params.push(`&sub_id=${FILTERQUERY.subitem}`)
    }

    if (Object.keys(FILTERQUERY.date).length !== 0) {
        filter_params.push(`&date_from=${FILTERQUERY.date.from}`)
        filter_params.push(`&date_to=${FILTERQUERY.date.to}`)
    }

    $.ajax({
        url: get_road_items_by_filter_api + `?_=_${filter_params.join('')}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        contentType: false,
        processData: false,
        beforeSend: function () {
            showLoaderScreen()
            removeLayersInMap()
        },
        success: function ({ data }) {
            showInMap(data)
            hideLoaderScreen()
        },
        error: function (request) {
            // error handler
            hideLoaderScreen()
        }
    });
}

const filterRoadPatrols = () => {
    const filter_params = []
    FILTERQUERY = {}
    FILTERQUERY.province = $("#filter_province").val();
    FILTERQUERY.edarat = $("#filter_edarat").val();
    FILTERQUERY.displayType = $("#filter_display_type").val();
    FILTERQUERY.date = {}
    if (
        $("#filter_from_date_time").val() != "" &&
        $("#filter_to_date_time").val() != ""
    ) {
        FILTERQUERY.date.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        FILTERQUERY.date.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 (FILTERQUERY.province != '-1') {
        filter_params.push(`&province_id=${FILTERQUERY.province}`)
    }

    if (FILTERQUERY.edarat != '-1') {
        filter_params.push(`&edare_id=${FILTERQUERY.edarat}`)
    }

    if (Object.keys(FILTERQUERY.date).length !== 0) {
        filter_params.push(`&date_from=${FILTERQUERY.date.from}`)
        filter_params.push(`&date_to=${FILTERQUERY.date.to}`)
    }

    $.ajax({
        url: get_road_patrols_by_filter_api + `?_=_${filter_params.join('')}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        contentType: false,
        processData: false,
        beforeSend: function () {
            showLoaderScreen()
            removeLayersInMap()
        },
        success: function ({ data }) {
            showInMap(data)
            hideLoaderScreen()
        },
        error: function (request) {
            // error handler
            hideLoaderScreen()
        }
    });
}

const filterSafetyAndPrivacy = () => {
    const filter_params = []
    FILTERQUERY = {}
    FILTERQUERY.province = $("#filter_province").val();
    FILTERQUERY.edarat = $("#filter_edarat").val();
    FILTERQUERY.subitem = $("#filter_subitem").val();
    FILTERQUERY.step = $("#filter_step_spa").val();
    FILTERQUERY.displayType = $("#filter_display_type").val();
    FILTERQUERY.date = {}
    if (
        $("#filter_from_date_time").val() != "" &&
        $("#filter_to_date_time").val() != ""
    ) {
        FILTERQUERY.date.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        FILTERQUERY.date.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 (FILTERQUERY.province != '-1') {
        filter_params.push(`&province_id=${FILTERQUERY.province}`)
    }

    if (FILTERQUERY.edarat != '-1') {
        filter_params.push(`&edare_shahri_id=${FILTERQUERY.edarat}`)
    }

    if (FILTERQUERY.subitem != '-1') {
        filter_params.push(`&info_id=${FILTERQUERY.subitem}`)
    }

    if (FILTERQUERY.step != '-1') {
        filter_params.push(`&step=${FILTERQUERY.step}`)
    }

    if (Object.keys(FILTERQUERY.date).length !== 0) {
        filter_params.push(`&date_from=${FILTERQUERY.date.from}`)
        filter_params.push(`&date_to=${FILTERQUERY.date.to}`)
    }

    $.ajax({
        url: get_safety_and_privacy_by_filter_api + `?_=_${filter_params.join('')}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        contentType: false,
        processData: false,
        beforeSend: function () {
            showLoaderScreen()
            removeLayersInMap()
        },
        success: function ({ data }) {
            showInMap(data)
            hideLoaderScreen()
        },
        error: function (request) {
            // error handler
            hideLoaderScreen()
        }
    });
}

const filterRoadObservations = () => {
    const filter_params = []
    FILTERQUERY = {}
    FILTERQUERY.province = $("#filter_province").val();
    FILTERQUERY.edarat = $("#filter_edarat").val();
    FILTERQUERY.rmsStatus = $("#filter_rms_status").val();
    FILTERQUERY.status = $("#filter_status").val();
    FILTERQUERY.displayType = $("#filter_display_type").val();
    FILTERQUERY.date = {}
    if (
        $("#filter_from_date_time").val() != "" &&
        $("#filter_to_date_time").val() != ""
    ) {
        FILTERQUERY.date.from = moment(
            filterDatepicker.from.getState().selected.year +
            "/" +
            filterDatepicker.from.getState().selected.month +
            "/" +
            filterDatepicker.from.getState().selected.date,
            "jYYYY/jM/jD"
        ).format("YYYY-MM-DD");

        FILTERQUERY.date.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 (Object.keys(FILTERQUERY.date).length !== 0) {
        filter_params.push(`?date_from=${FILTERQUERY.date.from}`)
        filter_params.push(`&date_to=${FILTERQUERY.date.to}`)
    }

    if (FILTERQUERY.province != '-1') {
        filter_params.push(`&province_id=${FILTERQUERY.province}`)
    }

    if (FILTERQUERY.edarat != '-1') {
        filter_params.push(`&edare_shahri_id=${FILTERQUERY.edarat}`)
    }

    if (FILTERQUERY.rmsStatus != '-1') {
        filter_params.push(`&rms_status=${FILTERQUERY.rmsStatus}`)
    }

    if (FILTERQUERY.status != '-1') {
        filter_params.push(`&status=${FILTERQUERY.status}`)
    }



    $.ajax({
        url: get_road_observations_by_filter_api + `${filter_params.join('')}`,
        type: "get",
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
        },
        contentType: false,
        processData: false,
        beforeSend: function () {
            showLoaderScreen()
            removeLayersInMap()
        },
        success: function ({ data }) {
            showInMap(data)
            hideLoaderScreen()
        },
        error: function (request) {
            // error handler
            hideLoaderScreen()
        }
    });
}

const removeLayersInMap = () => {
    markers = []
    if (markersLayer) {
        map.removeLayer(markersLayer)
        markersLayer = null
    }
    if (markersLayersCluster) {
        map.removeLayer(markersLayersCluster)
        markersLayersCluster = null
    }
}

const showInMap = data => {
    if (data.length == 0) {
        return
    }

    latlonArr = [];
    // points
    switch (TYPE) {
        case "rahdari_projects":
            rahdariProjectsCreateMarkers(data)
            break;
        case "road_items":
            roadItemsCreateMarkers(data)
            break;
        case "road_patrols":
            roadPatrolsCreateMarkers(data)
            break;
        case "safety_and_privacy":
            SafetyAndPrivacyCreateMarkers(data)
            break;
        case "road_observations":
            RoadObservationsCreateMarkers(data)
            break;
    }


    if (FILTERQUERY.displayType == 1) {
        // clusters
        mapMode = "clusters"
        markersLayersCluster = L.markerClusterGroup();
        markersLayersCluster.addLayers(markers);
        map.addLayer(markersLayersCluster);
    } else {
        if (data.length > 3000) {
            // clusters
            mapMode = "clusters"
            markersLayersCluster = L.markerClusterGroup();
            markersLayersCluster.addLayers(markers);
            map.addLayer(markersLayersCluster);
            forceUseCluster()
        } else {
            mapMode = "points"
            markersLayer = new L.LayerGroup(markers);
            map.addLayer(markersLayer);
            map.on('zoomend', function () {
                if (markersLayer === null) {
                    return 0;
                }
                let iconSize;
                switch (map.getZoom()) {
                    case 5:
                    case 6:
                    case 7:
                    case 8:
                        iconSize = 3;
                        break;
                    case 9:
                        iconSize = 4;
                        break;
                    case 10:
                        iconSize = 5;
                        break;
                    case 11:
                        iconSize = 6;
                        break;
                    case 12:
                        iconSize = 7;
                        break;
                    case 13:
                        iconSize = 8;
                        break;
                    case 14:
                    case 15:
                    case 16:
                    case 17:
                    case 18:
                        iconSize = 9;
                        break;
                }

                markersLayer.eachLayer(function (layer) {
                    return layer.setIcon(makeIcon(iconSize, layer));
                });
            });

        }
    }

    setTimeout(() => {
        map.flyToBounds(latlonArr, { padding: [60, 60], duration: .5 })
    }, 250);
}

const forceUseCluster = () => {
    Swal.fire({
        icon: "info",
        title: "تغییر نوع نمایش",
        text: "به دلیل نقاط بیش از 3000، نوع نمایش به کلاستر تغییر یافت"
    });

    $("#filter_display_type").val(1);
    FILTERQUERY.displayType = $("#filter_display_type").val();
}

const rahdariProjectsCreateMarkers = (data) => {
    for (let i = 0; i < data.length; i++) {
        let icon;

        switch (data[i].project_type_id) {
            case 1:
                icon = blueIcon;
                break;
            case 2:
                icon = yellowIcon;
                break;
            case 3:
                icon = greenIcon;
                break;
            case 4:
                icon = redIcon;
                break;
            case 5:
                icon = brownIcon;
                break;
            case 6:
                icon = orangeIcon;
                break;
        }
        let marker = new L.Marker([data[i].start_lat, data[i].start_lng], {
            id: data[i].id,
            icon: icon
        }).on('click', () => {
            window.open(get_rahdari_projects_by_id + data[i].id)
        })
        latlonArr.push([data[i].start_lat, data[i].start_lng])
        markers.push(marker);
    }

}

const roadItemsCreateMarkers = (data) => {
    for (let i = 0; i < data.length; i++) {
        let icon;
        switch (data[i].status) {
            case 0:
                icon = yellowIcon;
                break;
            case 1:
                icon = greenIcon;
                break;
            case 2:
                icon = redIcon;
                break;
            default:
                icon = blueIcon;
                break;
        }
        let marker = new L.Marker([data[i].l, data[i].g], {
            id: data[i].i,
            icon: icon
        }).on('click', () => {
            $.ajax({
                url: get_road_items_by_id + data[i].i,
                type: "get",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                contentType: false,
                processData: false,
                beforeSend: function () {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date_create').text('')
                    modal.find('#modal_details_date_activity').text('')
                    modal.find('#modal_details_province').text('')
                    modal.find('#modal_details_edare').text('')
                    modal.find('#modal_details_item').text('')
                    modal.find('#modal_details_subitem').text('')
                    modal.find('#modal_details_status').text('')
                    modal.find('#modal_details_supervisor_description').text('')
                    modal.find('#modal_details_images').addClass('d-none')
                    modal.find('#modal_details_images').removeClass('d-flex')
                    modal.find('#modal_details_image_before').removeAttr('src')
                    modal.find('#modal_details_image_before_img').removeAttr('href')
                    modal.find('#modal_details_image_after').removeAttr('src')
                    modal.find('#modal_details_image_after_img').removeAttr('href')

                    showLoaderScreen()
                },
                success: function (result) {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date_create').text(moment(result.items.created_at).format("HH:mm:ss | jYYYY/jMM/jDD"))
                    modal.find('#modal_details_date_activity').text(moment(result.items.activity_date_time).format("HH:mm:ss | jYYYY/jMM/jDD"))
                    modal.find('#modal_details_province').text(result.items.province_fa)
                    modal.find('#modal_details_edare').text(result.items.edarat_name)
                    modal.find('#modal_details_item').text(result.items.item_fa)
                    modal.find('#modal_details_subitem').text(result.items.sub_item_fa)
                    modal.find('#modal_details_status').text(result.items.status_fa)

                    if (result.items.status != 2) {
                        modal.find('#modal_details_supervisor_description_div').addClass('d-none');
                        modal.find('#modal_details_supervisor_description_div').removeClass('d-flex');
                    } else {
                        modal.find('#modal_details_supervisor_description').text(result.items.supervisor_description)
                        modal.find('#modal_details_supervisor_description_div').removeClass('d-none');
                        modal.find('#modal_details_supervisor_description_div').addClass('d-flex');
                    }

                    if (result.items.files.length != 0) {
                        modal.find('#modal_details_images').addClass('d-flex')
                        modal.find('#modal_details_images').removeClass('d-none')
                        modal.find('#modal_details_image_before').attr('href', result.items.files[1].full_path_for_fast_react)
                        modal.find('#modal_details_image_before_img').attr('src', result.items.files[1].full_path_for_fast_react)
                        modal.find('#modal_details_image_after').attr('href', result.items.files[0].full_path_for_fast_react)
                        modal.find('#modal_details_image_after_img').attr('src', result.items.files[0].full_path_for_fast_react)
                    }
                    modal.modal('show')
                    hideLoaderScreen()
                },
                error: function (request) {
                    // error handler
                    hideLoaderScreen()
                }
            });
        })
        latlonArr.push([data[i].l, data[i].g])
        markers.push(marker);
    }
}

const roadPatrolsCreateMarkers = (data) => {
    for (let i = 0; i < data.length; i++) {
        let icon = blueIcon;
        let marker = new L.Marker([data[i].start_lat, data[i].start_lon], {
            id: data[i].id,
            icon: icon
        }).on('click', () => {
            $.ajax({
                url: get_road_patrols_by_id + data[i].id,
                type: "get",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                contentType: false,
                processData: false,
                beforeSend: function () {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date').text('')
                    modal.find('#modal_details_province').text('')
                    modal.find('#modal_details_edare').text('')
                    modal.find('#modal_details_officer_name').text('')
                    modal.find('#modal_details_officer_plaque').text('')
                    modal.find('#modal_details_distance').text('')
                    modal.find('#modal_detail_report_link').attr('')
                    showLoaderScreen()
                },
                success: function (result) {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date').text(moment(result.created_at).format("HH:mm:ss | jYYYY/jMM/jDD"))
                    modal.find('#modal_details_province').text(result.province_fa)
                    modal.find('#modal_details_edare').text(result.edare_name)
                    modal.find('#modal_details_officer_name').text(result.officer_name)
                    const plaque = result.officer_plaque.split("-");
                    modal.find('#modal_details_officer_plaque').html(`<div class="d-flex align-items-center justify-content-center" style="direction: ltr;"><div class="mr-1">${plaque[0]}</div><div class="mr-1">${plaque[1] == "*" ? '<i class="fa fa-wheelchair"></i>' : plaque[1]}</div><div class="mr-1">${plaque[2]}</div>-<div class="ml-1 mr-1">ایران</div><div>${plaque[3]}</div></div>`)
                    modal.find('#modal_details_distance').text(`${result.distance} کیلومتر`)
                    modal.find('#modal_detail_report_link').attr('href', `/v2/road_patrols/operator/report/${data[i].id}`)
                    modal.modal('show')
                    hideLoaderScreen()
                },
                error: function (request) {
                    // error handler
                    hideLoaderScreen()
                }
            });
        })
        latlonArr.push([data[i].start_lat, data[i].start_lon])
        markers.push(marker);
    }
}

const SafetyAndPrivacyCreateMarkers = (data) => {
    for (let i = 0; i < data.length; i++) {
        let icon;
        switch (data[i].step) {
            case 1:
                icon = stepOneIcon;
                break;
            case 2:
                icon = stepTwoIcon;
                break;
            case 3:
                icon = stepThreeIcon;
                break;
            default:
                icon = blueIcon;
                break;
        }
        let marker = new L.Marker([data[i].lat, data[i].lon], {
            id: data[i].id,
            icon: icon
        }).on('click', () => {
            $.ajax({
                url: get_safety_and_privacy_by_id + data[i].id,
                type: "get",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                contentType: false,
                processData: false,
                beforeSend: function () {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_province').text('')
                    modal.find('#modal_details_edare').text('')
                    modal.find('#modal_details_subitem').text('')
                    modal.find('#modal_details_step').text('')
                    modal.find('#modal_details_step_two').addClass('d-none')
                    modal.find('#modal_details_step_three').addClass('d-none')
                    modal.find('#modal_details_recognize_picture').removeAttr('href')
                    modal.find('#modal_details_action_picture').removeAttr('href')
                    modal.find('#step_two_items').empty()
                    showLoaderScreen()
                },
                success: function (result) {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_province').text(result.province_fa)
                    modal.find('#modal_details_edare').text(result.edare_shahri_name)
                    modal.find('#modal_details_subitem').text(result.info_fa)
                    modal.find('#modal_details_step').text(result.step_fa)
                    modal.find('#modal_details_recognize_picture').attr('href', result.recognize_picture)
                    if (result.judiciary_document != "") {
                        modal.find('#modal_details_step_two').removeClass('d-none')
                        $.ajax({
                            url: unserializeJudiciaryDocument_url + result.id,
                            type: "GET",
                            success: function (result) {
                                let content = ''
                                result.data.map((item, index) => {
                                    content += `<a class="btn btn-default mr-2" href="${item}" download><i class="fa fa-download"></i></a>`
                                })
                                modal.find('#step_two_items').append(content)

                            },
                            error: function () {
                                Swal.fire({
                                    icon: "error",
                                    title: "خطا",
                                    text: "مشکل در دریافت اطلاعات اسناد",
                                    confirmButtonText: "بروزرسانی صفحه",
                                    showLoaderOnConfirm: true,
                                    preConfirm: () => {
                                        location.reload(true);
                                    },
                                });
                            },
                        });
                    }
                    if (result.action_picture != "") {
                        modal.find('#modal_details_step_three').removeClass('d-none')
                        modal.find('#modal_details_action_picture').attr('href', result.action_picture)
                    }
                    modal.modal('show')
                    hideLoaderScreen()
                },
                error: function (request) {
                    // error handler
                    hideLoaderScreen()
                }
            });
        })
        latlonArr.push([data[i].lat, data[i].lon])
        markers.push(marker);
    }
}

const RoadObservationsCreateMarkers = (data) => {
    for (let i = 0; i < data.length; i++) {
        let icon;
        switch (data[i].status) {
            case 0:
                icon = yellowIcon;
                break;
            case 1:
                icon = greenIcon;
                break;
            case 2:
                icon = redIcon;
                break;
            default:
                icon = blueIcon;
                break;
        }
        let marker = new L.Marker([data[i].lat, data[i].lng], {
            id: data[i].id,
            icon: icon
        }).on('click', () => {
            $.ajax({
                url: get_road_observations_by_id + data[i].id,
                type: "get",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                contentType: false,
                processData: false,
                beforeSend: function () {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date_create').text('')
                    modal.find('#modal_details_date_activity_box').addClass('d-none')
                    modal.find('#modal_details_date_activity').text('')
                    modal.find('#modal_details_province').text('')
                    modal.find('#modal_details_edare').text('')
                    modal.find('#modal_details_title').text('')
                    modal.find('#modal_details_type').text('')
                    modal.find('#modal_details_rms_status').text('')
                    modal.find('#modal_details_status_box').addClass('d-none')
                    modal.find('#modal_details_status').text('')
                    modal.find('#modal_details_supervisor_description').text('')
                    modal.find('#modal_details_images').addClass('d-none')
                    modal.find('#modal_details_images').removeClass('d-flex')
                    modal.find('#modal_details_image_before').removeAttr('src')
                    modal.find('#modal_details_image_before_img').removeAttr('href')
                    modal.find('#modal_details_image_after').removeAttr('src')
                    modal.find('#modal_details_image_after_img').removeAttr('href')
                    showLoaderScreen()
                },
                success: function (result) {
                    const modal = $('#details_modal')
                    modal.find('#modal_details_date_create').text(moment(result.data.created_at).format("HH:mm:ss | jYYYY/jMM/jDD"))
                    if (result.data.rms_last_activity) {
                        modal.find('#modal_details_date_activity_box').removeClass('d-none')
                        modal.find('#modal_details_date_activity').text(moment(result.data.rms_last_activity).format("HH:mm:ss | jYYYY/jMM/jDD"))
                    }
                    modal.find('#modal_details_province').text(result.data.province_fa)
                    modal.find('#modal_details_edare').text(result.data.edarate_shahri.name_fa)
                    modal.find('#modal_details_title').text(result.data.Title)
                    modal.find('#modal_details_type').text(result.data.FeatureTypeTitle)
                    modal.find('#modal_details_rms_status').text(result.data.rms_status == 0 ? 'در دست بررسی' : 'رسیدگی شده')
                    if (result.data.status_fa) {
                        modal.find('#modal_details_status_box').removeClass('d-none')
                        modal.find('#modal_details_status').text(result.data.status_fa)
                    }

                    if (result.data.status != 2) {
                        modal.find('#modal_details_supervisor_description_box').addClass('d-none');
                        modal.find('#modal_details_supervisor_description_box').removeClass('d-flex');
                    } else {
                        modal.find('#modal_details_supervisor_description').text(result.data.supervisor_description)
                        modal.find('#modal_details_supervisor_description_box').removeClass('d-none');
                        modal.find('#modal_details_supervisor_description_box').addClass('d-flex');
                    }

                    if (result.data.image_before || result.data.image_after) {
                        modal.find('#modal_details_images').addClass('d-flex')
                        modal.find('#modal_details_images').removeClass('d-none')
                        modal.find('#modal_details_image_before').attr('href', '/' + result.data.image_before)
                        modal.find('#modal_details_image_before_img').attr('src', '/' + result.data.image_before)
                        modal.find('#modal_details_image_after').attr('href', '/' + result.data.image_after)
                        modal.find('#modal_details_image_after_img').attr('src', '/' + result.data.image_after)
                    }
                    modal.modal('show')
                    hideLoaderScreen()
                },
                error: function (request) {
                    // error handler
                    hideLoaderScreen()
                }
            });
        })
        latlonArr.push([data[i].lat, data[i].lng])
        markers.push(marker);
    }
}

const createDetailsBoxRoadItems = () => {
    const modal = $('#details_modal')
    const content = `
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">تاریخ ثبت</h6>
        <p id="modal_details_date_create"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">تاریخ اقدام</h6>
        <p id="modal_details_date_activity"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">استان</h6>
        <p id="modal_details_province"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">اداره</h6>
        <p id="modal_details_edare"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">فعالیت</h6>
        <p id="modal_details_item" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">ریز فعالیت</h6>
        <p id="modal_details_subitem" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">وضعیت نظارت</h6>
        <p id="modal_details_status" class="text-justify"></p>
    </div>
    <hr />
    <div id="modal_details_supervisor_description_div" class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">توضیحات ناظر</h6>
        <p id="modal_details_supervisor_description" class="text-justify"></p>
    </div>
    <hr />
    <div id="modal_details_images" class="d-none">
        <div style="flex:1;" class="d-flex flex-column align-items-center px-4">
            <h6 style="color:#db7240;" class="pb-3">تصویر قبل</h6>
            <a id="modal_details_image_before" href="" download>
                <img id="modal_details_image_before_img" class="details-image"/>
            </a>
        </div>
        <div style="flex:1;" class="d-flex flex-column align-items-center px-4">
            <h6 style="color:#db7240;" class="pb-3">تصویر بعد</h6>
            <a id="modal_details_image_after" href="" download>
                <img id="modal_details_image_after_img" class="details-image"/>
            </a>
        </div>
    </div>
    `
    modal.find('.modal-body').append(content)
    modal.find('.modal-title').text('اطلاعات فعالیت')
}

const createDetailsBoxRoadPatrols = () => {
    const modal = $('#details_modal')
    const content = `
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">تاریخ</h6>
        <p id="modal_details_date"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">استان</h6>
        <p id="modal_details_province"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">اداره</h6>
        <p id="modal_details_edare"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">نام مامور</h6>
        <p id="modal_details_officer_name" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">شماره پلاک</h6>
        <p id="modal_details_officer_plaque" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">مسافت</h6>
        <p id="modal_details_distance" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-center px-4">
        <a target="_blank" id="modal_detail_report_link" href="" class="btn breadcrumb-back">گزارش مامور</a>
    </div>
    `
    modal.find('.modal-body').append(content)
    modal.find('.modal-title').text('اطلاعات گشت')
}

const createDetailsSAP = () => {
    const modal = $('#details_modal')
    const content = `
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">استان</h6>
        <p id="modal_details_province"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">اداره</h6>
        <p id="modal_details_edare"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">مورد</h6>
        <p id="modal_details_subitem" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">وضعیت نظارت</h6>
        <p id="modal_details_step" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between align-items-center px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">تصویر بازدید</h6>
        <a class="btn btn-default" id="modal_details_recognize_picture" download><i class="fa fa-download"></i></a>
    </div>
    <div id="modal_details_step_two" class="d-none">
        <hr />
        <div class="d-flex justify-content-between align-items-center px-4">
            <h6 style="color:#db7240;" class="pl-4 text-nowrap">مسنتدات قضایی</h6>
            <div class="d-flex" id="step_two_items"></div>
        </div>
    </div>
    <div id="modal_details_step_three" class="d-none">
        <hr />
        <div class="d-flex justify-content-between align-items-center px-4">
            <h6 style="color:#db7240;" class="pl-4 text-nowrap">تصویر اقدام</h6>
            <a class="btn btn-default" id="modal_details_action_picture" download><i class="fa fa-download"></i></a>
        </div>
    </div>
    `
    modal.find('.modal-body').append(content)
    modal.find('.modal-title').text('اطلاعات فعالیت')
}

const createDetailsBoxRoadObservations = () => {
    const modal = $('#details_modal')
    const content = `
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">تاریخ ثبت</h6>
        <p id="modal_details_date_create"></p>
    </div>
    <hr />
    <div id="modal_details_date_activity_box" class="d-none">
        <div class="d-flex justify-content-between px-4">
            <h6 style="color:#db7240;" class="pl-4 text-nowrap">تاریخ اقدام</h6>
            <p id="modal_details_date_activity"></p>
        </div>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">استان</h6>
        <p id="modal_details_province"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">اداره</h6>
        <p id="modal_details_edare"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">موضوع گزارش</h6>
        <p id="modal_details_title" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">نوع گزارش</h6>
        <p id="modal_details_type" class="text-justify"></p>
    </div>
    <hr />
    <div class="d-flex justify-content-between px-4">
        <h6 style="color:#db7240;" class="pl-4 text-nowrap">وضعیت اقدام</h6>
        <p id="modal_details_rms_status" class="text-justify"></p>
    </div>
    <hr />
    <div id="modal_details_status_box" class="d-none">
        <div class="d-flex justify-content-between px-4">
            <h6 style="color:#db7240;" class="pl-4 text-nowrap">وضعیت نظارت</h6>
            <p id="modal_details_status" class="text-justify"></p>
        </div>
    </div>
    <hr />
    <div id="modal_details_supervisor_description_box" class="d-none">
        <div class="d-flex justify-content-between px-4">
            <h6 style="color:#db7240;" class="pl-4 text-nowrap">توضیحات ناظر</h6>
            <p id="modal_details_supervisor_description" class="text-justify"></p>
        </div>
        <hr />
    </div>
    <hr />
    <div id="modal_details_images" class="d-none">
        <div style="flex:1;" class="d-flex flex-column align-items-center px-4">
            <h6 style="color:#db7240;" class="pb-3">تصویر قبل</h6>
            <a id="modal_details_image_before" href="" download>
                <img id="modal_details_image_before_img" class="details-image"/>
            </a>
        </div>
        <div style="flex:1;" class="d-flex flex-column align-items-center px-4">
            <h6 style="color:#db7240;" class="pb-3">تصویر بعد</h6>
            <a id="modal_details_image_before" href="" download>
                <img id="modal_details_image_after_img" class="details-image"/>
            </a>
        </div>
    </div>
    `
    modal.find('.modal-body').append(content)
    modal.find('.modal-title').text('اطلاعات شکایت')
}

//components
const DisplayType = {
    build: `
            <div class="form-group">
                <label for="filter_display_type">نوع نمایش</label>
                <select class="form-control form-control-sm fill-display-type" id="filter_display_type">
                <option value="-1" selected>انتخاب وضعیت</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $('.fill-display-type').empty()

        $('.fill-display-type').append(`
            <option value="1">کلاستر</option>
            <option value="2">نقطه ای</option>
        `)

        if (defaultValue) {
            $("#filter_display_type").val(defaultValue)
        }
    }
};

const DateFromTo = {
    build: ({ from, to }) =>
        `
            <div class="form-group">
                <label for="filter_from_date_time">${from}</label>
                <input class="form-control-date form-control form-control-sm" type="text" id="filter_from_date_time_input" readonly>
                <div id="filter_from_date_time"></div>
            </div>
            <div class="form-group">
                <label for="filter_to_date_time">${to}</label>
                <input class="form-control-date form-control form-control-sm" type="text" id="filter_to_date_time_input" readonly>
                <div id="filter_to_date_time"></div>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        filterDatepicker.from = $(
            "#filter_from_date_time"
        ).persianDatepicker({
            format: "YYYY/MM/DD",
            altField: '#filter_from_date_time_input',
            altFormat: 'YYYY/MM/DD',
            autoClose: true,
            inline: true,
            navigator: {
                text: {
                    btnNextText: ">",
                    btnPrevText: "<"
                },
            },
            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_date_time"
        ).persianDatepicker({
            format: "YYYY/MM/DD",
            altField: '#filter_to_date_time_input',
            altFormat: 'YYYY/MM/DD',
            autoClose: true,
            inline: true,
            navigator: {
                text: {
                    btnNextText: ">",
                    btnPrevText: "<"
                },
            },
            onSelect: function (unix) {
                filterDatepicker.to.touched = true;
            },
        });

        $(document).on('input', '#filter_from_date_time_input', function (e) {
            if (e.target.value == '') {
                filterDatepicker.from.setDate(+moment())
                filterDatepicker.to.options = { minDate: null }
                filterDatepicker.to.setDate(+moment())
            }
        })

        $(document).on('input', '#filter_to_date_time_input', function (e) {
            if (e.target.value == '') {
                filterDatepicker.from.setDate(+moment())
                filterDatepicker.to.options = { minDate: null }
                filterDatepicker.to.setDate(+moment())
            }
        })

        if (defaultValue) {
            if (defaultValue?.from) {
                filterDatepicker.from.setDate(defaultValue.from)
            }
            if (defaultValue?.to) {
                filterDatepicker.to.setDate(defaultValue.to)
            }
        }
    }
};

const Provinces = {
    build: `
            <div class="form-group">
                <label for="filter_province">استان</label>
                <select class="form-control form-control-sm fill-provinces" id="filter_province">
                <option value="-1" selected>انتخاب استان</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $.ajax({
            url: provinces_api,
            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>
                `)
                })

                if (defaultValue) {
                    $('#filter_province').val(defaultValue)
                }
            },
            error: function (request) {
            },
            complete: function () {
            }
        });
    }
};

const Edare = {
    build: `
            <div class="form-group">
                <label for="filter_edarat">اداره</label>
                <select class="form-control form-control-sm fill-edarat" id="filter_edarat">
                <option value="-1" selected>یک استان انتخاب کنید</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $(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) {
                    $('#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>
                `)
                    })

                    // if (defaultValue) {
                    //     console.log('defaultValue: Edare');
                    // }
                },
                error: function (request) {
                },
                complete: function () {
                }
            })
        })
    }
};

const Status = {
    build: `
            <div class="form-group">
                <label for="filter_status">وضعیت نظارت</label>
                <select class="form-control form-control-sm fill-status" id="filter_status">
                <option value="-1" selected>انتخاب وضعیت نظارت</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $('.fill-status').empty()

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

        if (defaultValue) {
            $('#filter_status').val(defaultValue)
        }
    }
};

const RahdariProjects = {
    build: `
        <div class="form-group">
            <label for="filter_type">نوع پروژه</label>
            <select class="form-control form-control-sm fill-type" id="filter_type">
            <option value="-1" selected>انتخاب نوع پروژه</option>
            </select>
        </div>
        <hr />
        <div class="form-group">
            <label for="filter_axis">نوع محور</label>
            <select class="form-control form-control-sm fill-axis" id="filter_axis">
            <option value="-1" selected>انتخاب نوع محور</option>
            </select>
        </div>
        <hr />
        <div class="form-group">
            <label for="filter_last_status">آخرین وضعیت</label>
            <select class="form-control form-control-sm fill-last-status" id="filter_last_status">
            <option value="-1" selected>انتخاب آخرین وضعیت</option>
            </select>
        </div>
        <hr />
        <div class="form-group">
            <label for="filter_priority">اهمیت</label>
            <select class="form-control form-control-sm fill-priority" id="filter_priority">
            <option value="-1" selected>انتخاب اهمیت</option>
            </select>
        </div>
        <hr />
        <div class="form-group">
            <label for="filter_followup">اهمیت پیگیری</label>
            <select class="form-control form-control-sm fill-followup" id="filter_followup">
            <option value="-1" selected>انتخاب اهمیت پیگیری</option>
            </select>
        </div>
        <hr />
    `,
    config: (defaultValue) => {
        $('.fill-type').empty()

        $('.fill-type').append(`
            <option value="-1">انتخاب نوع پروژه</option>
            <option value="1">روکش آسفالت(نگهداری رویه راه)</option>
            <option value="2">رفع نقاط حادثه خیز</option>
            <option value="3">ارتقای ایمنی راه</option>
            <option value="4">ابنیه فنی(تعمیر و بازسازی)</option>
            <option value="5">راهدارخانه ها</option>
            <option value="6">ساخت راه روستایی</option>
        `)

        if (defaultValue?.type) {
            $('#filter_type').val(defaultValue.type)
        }


        $('.fill-axis').empty()

        $('.fill-axis').append(`
            <option value="-1">انتخاب نوع محور</option>
            <option value="1">آزادراه</option>
            <option value="2">بزرگراه</option>
            <option value="3">اصلی</option>
            <option value="4">فرعی</option>
            <option value="5">روستایی</option>
        `)

        if (defaultValue?.axis) {
            $('#filter_axis').val(defaultValue.axis)
        }


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

        $('.fill-last-status').append(`
            <option value="-1">انتخاب آخرین وضعیت</option>
            <option value="1">درحال تجهیز کارگاه</option>
            <option value="2">درحال اجرا</option>
            <option value="3">خاتمه یافته</option>
            <option value="4">در دست مناقصه</option>
        `)

        if (defaultValue?.lastStatus) {
            $('#filter_last_status').val(defaultValue.lastStatus)
        }


        $('.fill-priority').empty()

        $('.fill-priority').append(`
            <option value="-1">انتخاب اهمیت</option>
            <option value="1">کم(تاثیر گزاری محلی)</option>
            <option value="2">متوسط(تاثیر گزار در در سطح استان یا شهرستان)</option>
            <option value="3">زیاد(تاثیر گزار در سطح ملی)</option>
        `)

        if (defaultValue?.priority) {
            $('#filter_priority').val(defaultValue.priority)
        }


        $('.fill-followup').empty()

        $('.fill-followup').append(`
            <option value="-1">انتخاب اهمیت پیگیری</option>
            <option value="1">کم(ماهیت محلی و منطقه ای بدون پیگیری های ویژه در سطح ملی)</option>
            <option value="2">متوسط(ماهیت ملی یا استانی)</option>
            <option value="3">زیاد(مورد تاکید و پیگیری ویژه مسئولین محلی یا ملی)</option>
        `)

        if (defaultValue?.followup) {
            $('#filter_followup').val(defaultValue.followup)
        }
    }
}

const RoadItems = {
    build: `
            <div class="form-group">
                <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">
                <label for="filter_subitem">زیر آیتم فعالیت</label>
                <select class="form-control form-control-sm fill-subitems" id="filter_subitem">
                <option value="-1" selected>انتخاب زیر آیتم فعالیت</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $.ajax({
            url: road_items_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>
                `)
                })

                if (defaultValue?.item) {
                    $('#filter_item').val(defaultValue.item)
                }
            },
            error: function (request) {
            },
            complete: function () {
            }
        });

        $(document).on('change', '#filter_item', function (e) {
            const subitemId = e.target.value

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

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

                    // if (defaultValue) {
                    //     console.log('defaultValue: subitem');
                    // }
                },
                error: function (request) {
                },
                complete: function () {
                }
            })
        })
    }
};

const SafetyAndPrivacy = {
    build: `
        <div class="form-group">
            <label for="filter_subitem">مورد</label>
            <select class="form-control form-control-sm fill-subitems" id="filter_subitem">
            <option value="-1" selected>انتخاب مورد</option>
            </select>
        </div>
        <div class="form-group">
            <label for="filter_step_spa">وضعیت</label>
            <select class="form-control form-control-sm fill-step-sap" id="filter_step_spa">
            <option value="-1" selected>انتخاب وضعیت</option>
            </select>
        </div>
        <hr />
    `,
    config: (defaultValue) => {
        $.ajax({
            url: safety_and_privacy_subitems_api,
            type: "get",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function () {
                $('#filter_subitem').empty()
                $('#filter_subitem').append(`
                    <option value="-1">در حال دریافت مورد...</option>
                `)
            },
            success: function (result) {
                $('#filter_subitem').empty()
                $('#filter_subitem').append(`
                    <option value="-1">انتخاب مورد</option>
                `)
                result.data.map(item => {
                    $('#filter_subitem').append(`
                    <option value="${item.id}">${item.name}</option>
                `)
                })

                // if (defaultValue?.subitem) {
                //     console.log('defaultValue: subitem');
                // }
            },
            error: function (request) {
            },
            complete: function () {
            }
        })

        $('.fill-step-sap').empty()

        $('.fill-step-sap').append(`
            <option value="-1">انتخاب وضعیت</option>
            <option value="1">گام اول (شناسایی)</option>
            <option value="2">گام دوم (مستندات قضایی)</option>
            <option value="3">گام سوم (برخورد)</option>
        `)

        if (defaultValue?.step) {
            $('#filter_step_spa').val(defaultValue.step)
        }
    }
};

const RoadObservations = {
    build: `
            <div class="form-group">
                <label for="filter_rms_status">وضعیت اقدام</label>
                <select class="form-control form-control-sm fill-rms-status" id="filter_rms_status">
                <option value="-1" selected>انتخاب  وضعیت اقدام</option>
                </select>
            </div>
            <hr />
    `,
    config: (defaultValue) => {
        $('.fill-rms-status').empty()

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

        if (defaultValue) {
            $('#filter_rms_status').val(defaultValue)
        }
    }
};

(() => {
    const heightHeader = $('.header').height()
    document.getElementById('map_wide').style.setProperty('height', `calc(100vh - ${heightHeader}px)`)

    map = L.map("map", {
        maxBounds: bounds,
        minZoom: MINZOOM,
        zoomControl: false,
        attributionControl: false
    }).setView([35.5468992, 51.7300532], 5);
    map.addLayer(iranLayer);

    initializePageByType()
})()

$(document).on("click", ".iran-change-layer", function () {
    changelayer();
});

$(document).on('click', '#filter_btn', function () {
    switch (TYPE) {
        case "rahdari_projects":
            filterRahdariProjects()
            break;
        case "road_items":
            filterRoadItems()
            break;
        case "road_patrols":
            filterRoadPatrols()
            break;
        case "safety_and_privacy":
            filterSafetyAndPrivacy()
            break;
        case "road_observations":
            filterRoadObservations()
            break;
    }
})