$("#gozarehtowntable").on("click", "td.AcitivityMount", async function(e) {
    if ($(this).hasClass('isShowActivityMount')) {
        $('#gozarehtowntable .internal-table').remove()
        $('#gozarehtowntable .isShowActivityMount').removeClass('isShowActivityMount')
        return false;
    }

    await showLoaderScreen()

    $('#gozarehtowntable .isShowActivityMount').removeClass('isShowActivityMount')
    $(this).addClass('isShowActivityMount')
    var tr = $(this).closest("tr");
    var row = gozareshtable.row(tr);
    var provinceid = row.data().id;
    var ths = $('#gozarehtowntable .th-head')
    console.log(ths);
    $('#gozarehtowntable .internal-table').remove()
    internalTable(tr, "cityTable", 9)
        .then(
            (onResolved) => {
                // get data 
                let date_from = moment(
                    fromDateshowrizitem.getState().selected.year +
                    "/" +
                    fromDateshowrizitem.getState().selected.month +
                    "/" +
                    fromDateshowrizitem.getState().selected.date,
                    "jYYYY/jM/jD"
                ).format("YYYY-MM-DD");

                let date_to = moment(
                    toDateshowrizitem.getState().selected.year +
                    "/" +
                    toDateshowrizitem.getState().selected.month +
                    "/" +
                    toDateshowrizitem.getState().selected.date,
                    "jYYYY/jM/jD"
                ).format("YYYY-MM-DD");
               

                citeisList = [];
                objectfiltertable = []

                $.ajax({
                    url: "/public/contents/edarate_shahri_by_province/" + provinceid,
                    async: false,
                    success: function(result) {
                        for (var i = 0; i < result.data.length; i++) {

                            citeisList.push({
                                id: result.data[i].id,
                                name_fa: result.data[i].name_fa,
                            })
                        }
                    }
                });
                    // second ajax 
                    
                $.ajax({
                    url: "/v2/road_patrols/report/total-group-province-city?province_id=" + provinceid +
                            "&from_date=" +
                            date_from +
                            "&date_to=" +
                            date_to,
                    type: "GET",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (result) {

                        citeisList.map(function (city, index) {

                            objectfiltertable[index] = {
                                id: city.id,
                                name_fa: city.name_fa,
                                report_results: {
                                    tedade: "",
                                    tedad_mavarede_moshede_shode_adi: "",
                                    tedad_mavarede_moshede_shode_fori: "",
                                    tedad_mavarede_moshede_shode_ani: "",
                                    tedad_mavarede_peygiri_shode: "",
                                    masafat_tey_shode: "",
                                    tedad_faliyat_sabt_shode: "",
                                    city_fa: "",
                                    city_id: "",
                                }
                            }
                            result.data.map(function (element, key) {

                                if (element.edare_id == city.id) {
                                    objectfiltertable[index] = {
                                        id: city.id,
                                        name_fa: city.name_fa,
                                        report_results: element
                                    }
                                }
                            })
                        });
                        
                    },
                    error: function(error) {},
                });
                //second ajax
                //get data 
                var gozarehtowntableCity = $("#cityTable").DataTable({
                    dom: "<flB<t>p>",
                    pagingType: "simple_numbers",
                    paging: false,
                    searching: false,
                    scrollX: true,
                    destroy: true,
                    responsive: true,
                    autoWidth: false,
                    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: ": فعال سازی نمایش به صورت نزولی",
                        },
                    },
                    processing: true,
                    data: objectfiltertable,
                    columns: [{
                            className: "text-center",
                            data: null,
                            width: ths.eq(0).css('width'),
                            render: function(data, type, row) {
                                return ""


                            }
                        },
                        {
                            className: "text-center",
                            data: "name_fa",
                            width: ths.eq(1).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedade",
                            width: ths.eq(2).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedad_mavarede_moshede_shode_adi",
                            width: ths.eq(6).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedad_mavarede_moshede_shode_fori",
                            width: ths.eq(7).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedad_mavarede_moshede_shode_ani",
                            width: ths.eq(8).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedad_mavarede_peygiri_shode",
                            width: ths.eq(3).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.masafat_tey_shode",
                            width: ths.eq(4).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "report_results.tedad_faliyat_sabt_shode",
                            width: ths.eq(5).css('width'),
                        },
                    ],
                    buttons: [],

                });
                hideLoaderScreen()
            }
        );
});



function internalTable(tr, id, column) {
    var ths = ''
    var initTable;
    for (var i = 1; i <= column; i++) {
        ths += '<th style="background-color: rgb(1 86 136);"></th>'
    }
    initTable = `<tr class="internal-table">
      <td class = "p-0 pb-2 bg-white" style="border-width:0px;"
      colspan = "${column}">
          <table table class = "table"
          style = "background-color: #84b6de; color:#fff"
          id = "${id}"
          style = "width: 100%;">
              <thead style="height:0px;">
                  <tr>
                  ${ths}
                  </tr>
              </thead>
          </table>
      </td>
  </tr>`
    $(initTable).insertAfter(tr);

    return Promise.resolve("Success");
}