$("#gozarehtowntable").on("click", "td.details-control", 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')

    $('#gozarehtowntable .internal-table').remove()
    internalTable(tr, "cityTable", 10)
        .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 = []


                dataTableRows = [];
                $.ajax({
                    url: "/v2/receipt/report/city-data?province_id=" + provinceid +
                        "&from_date=" +
                        date_from +
                        "&date_to=" +
                        date_to,
                    type: "GET",
                    async: false,
                    cache: false,
                    contentType: false,
                    processData: true,
                    success: function (result) {
                        Object.keys(result).forEach(function (key, index) {
                            dataTableRows.push(result[key])
                        });
                        console.log(dataTableRows);
                    },
                    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: dataTableRows[2],
                    columns: [
                        {
                            className: "text-center",
                            data: null,
                            width: ths.eq(0).css('width'),
                            render: function (data, type, row) {
                                return ""
                            }
                        },
                        {
                            className: "text-center",
                            data: "city_fa",
                            width: ths.eq(1).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "tedade",
                            width: ths.eq(2).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "police_rah",
                            width: ths.eq(7).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "gozaresh_gasht",
                            width: ths.eq(8).css('width'),
                        },
                        {
                            className: "text-center",
                            data: "kol_sabt_shode",
                            width: ths.eq(4).css('width'),
                        },
                        {
                            className: "text-center",
                            data: null,
                            render: function (data, type, row) {
                                if (data.vasel_shode != null) return data.vasel_shode
                                else return 0
                            },
                            width: ths.eq(5).css('width'),
                        },
                        {
                            className: "text-center",
                            data: null,
                            render: function (data, type, row) {
                                if (data.vasel_shode_bimeh != null) return data.vasel_shode_bimeh
                                else return 0
                            },
                            width: ths.eq(9).css('width'),
                        },
                        {
                            className: "text-center",
                            data: null,
                            render: function (data, type, row) {
                                if (data.vasel_shode_daghi != null) return data.vasel_shode_daghi
                                else return 0
                            },
                            width: ths.eq(10).css('width'),
                        },
                        {
                            className: "text-center",
                            data: null,
                            render: function (data, type, row) {
                                if (data.vasel_shode_final != null) return data.vasel_shode_final
                                else return 0
                            },
                            width: ths.eq(11).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");
}