@extends('layouts.user.main')
@section('content')

    
    <script src="{{ asset('assets/js/reports/runningBrokerage.js') }}"></script>

    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">

    <!--begin::Modal - Export Data-->
    <div class="modal fade" id="kt_modal_export_buttons" tabindex="-1" aria-hidden="false">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <!--begin::Modal content-->
            <div class="modal-content rounded">
                <!--begin::Modal header-->
                <div class="modal-header pb-0 border-0 justify-content-end">
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <span class="fa fa-times"></span>
                    </div>
                    <!--end::Close-->
                </div>
                <!--begin::Modal header-->
                <!--begin::Modal body-->
                <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15">
                    <!--begin::Form-->
                        <!--begin::Heading-->
                        <div class="mb-13 text-center">
                            <!--begin::Title-->
                            <h1 class="mb-3">Select Format</h1>
                            <!--end::Title-->
                        </div>
                        <!--begin::Input Type-->
                        <div class="fv-row mb-10">
                            <!--begin::Label-->
                            <label class="fs-6 fw-bold mb-2">Type
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Select format to export data"  data-bs-original-title=""></i></label>
                            <!--End::Label-->
                            <div class="fv-row">
                                <!--begin::Radio group-->
                                <div class="btn-group w-100" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button]">
                                    <!--begin::Radio-->
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success active" data-kt-button="true">
                                    <!--begin::Input-->
                                    <input class="btn-check" type="radio" name="type" value="export" checked="checked"/>
                                    <!--end::Input-->
                                    Export</label>
                                    <!--end::Radio-->
                                    <!--begin::Radio-->
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
                                    <!--begin::Input-->
                                    <input class="btn-check" type="radio" name="type" value="exportAll" />
                                    <!--end::Input-->
                                    Export All</label>
                                    <!--end::Radio-->
                                    <!--begin::Radio-->
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
                                    <!--begin::Input-->
                                    <input class="btn-check" type="radio" name="type" value="pdf" />
                                    <!--end::Input-->
                                    PDF<sub> (OLD)</sub></label>
                                    <!--end::Radio-->
                                    <!--begin::Radio-->
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
                                    <!--begin::Input-->
                                    <input class="btn-check" type="radio" name="type" value="pdfNew" />
                                    <!--end::Input-->
                                    PDF<sub> (V1)</sub></label>
                                    <!--end::Radio-->
                                    <!--begin::Radio-->
                                    <label class="btn btn-outline-secondary text-muted text-hover-white text-active-white btn-outline btn-active-success" data-kt-button="true">
                                    <!--begin::Input-->
                                    <input class="btn-check" type="radio" name="type" value="pdfZip" />
                                    <!--end::Input-->
                                    PDF (ZIP)</label>
                                    <!--end::Radio-->
                                </div>
                                <!--end::Radio group-->
                            </div>
                        </div>
                        <!--end::Input Type-->
                        <!--begin::Groud drop-down-->
							<div class="d-flex flex-wrap gap-5 mb-10 d-none" id="groupDropdown">
								<div class="fv-row w-100 flex-md-root">
									<label class="form-label">Groups
                                        <div class="fs-7 fw-bold text-muted">If you want group wise data, please select groups</div>
                                    </label>
									<select class="js-example-basic-multiple form-select form-select-solid multi-select-option mb-2" name="exportGroup[]" id="exportGroup" data-placeholder="Select Group" data-dropdown-parent="#kt_modal_export_buttons" multiple="multiple">
										@if(isset($groups) && count($groups) > 0)
											@foreach ($groups as $group)
												<option value="{{ $group->group }}">{{ $group->group }}</option>
											@endforeach
										@endif
									</select>
								</div>
							</div>
							<!--end::Managers drop-down-->                      
                        <!--begin::Actions-->
                        <div class="text-center">
                            <button type="button" id="" data-bs-dismiss="modal"
                                class="btn btn-light me-3">Cancel</button>
                            <button type="submit" class="btn btn-primary me-3" id="exportSubmit">Submit</button>
                            </button>
                        </div>
                        <!--end::Actions-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
    <!--end::Modal - Export Data-->
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <div class="card-body py-4">
                        <form action="{{ route('runningBrokerage') }}" method="post" id="dateRangeForm">
                            @csrf
                            <input type="hidden" name="start_date" id="start_date">
                            <input type="hidden" name="end_date" id="end_date">
                        </form>
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0" id="running_brokerage_table_reports">
                                <!--begin::Table head-->
                                <thead>
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-80px d-none">Manager Name</th>
                                        <th class="min-w-80px d-none">Sharing</th>
                                        <th class="min-w-80px">Code</th>
                                        <th class="min-w-80px">Name</th>
                                        <th class="min-w-80px">Brokerage</th>
                                        <th class="min-w-80px">Return Brokerage</th>
                                        <th class="min-w-80px">Sharing Brokerage</th>
                                    </tr>
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </tbody>
                                <!--end::Table head-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>

    <script type="text/javascript">
        const table             = $('#running_brokerage_table_reports');
        const token             = "{{ csrf_token() }}";

        var fileName            = "{{ $fileName }}" ?? "Brokerage_Return_Report";
        var title               = fileName + '_' + Date.now();
        var columns             = [2, 3, 4, 5];
        var minFractionDigit    = "{{CommonConstants::BROKERAGE_RETURN_REPORT['MIN_FRACTION_DIGIT']}}";
        var maxFractionDigit    = "{{CommonConstants::BROKERAGE_RETURN_REPORT['MAX_FRACTION_DIGIT']}}";
        var url;
        var jsDate              = new Date();
        var formattedDate       = jsDate.toLocaleString('en-US', { 
                                    year: 'numeric', 
                                    month: '2-digit', 
                                    day: '2-digit', 
                                    hour: '2-digit', 
                                    minute: '2-digit', 
                                    hour12: false 
                                }).replace(',', ''); 
        var pdfFooterText = ("{{CommonConstants::BILLING_PDF['FOOTER_TEXT']}}").replace('DATE_TIME', formattedDate).replace(/&amp;/g, '&');

        var dataColumns = [
            {
                data: 'managerLogin',
                name: 'managerLogin',
                visible: false
            },
            {
                data: 'percentage',
                name: 'manager_clients.percentage',
                visible: false,
                render: function(data, type, full, meta) {
                    var percentage = full.percentage; 
                    return percentage;
                }
            },
            {
                data: 'loginId',
                name: 'loginId'
            },
            {
                data: 'name',
                name: 'accounts.name'
            },
            {
                data: 'totalBrokerage',
                name: 'brokerage_report.totalBrokerage',
                render: function(data, type, full, meta) {
                    var number = parseFloat(full.totalBrokerage).toFixed(2);
                    return number;
                }
            },
            {
                data: 'extraBrokerage',
                name: 'brokerage_report.extraBrokerage',
                render: function(data, type, full, meta) {
                    var number = parseFloat(full.extraBrokerage).toFixed(2);
                    return number;
                }
            },
            {
                data: 'sharingBrokerage',
                name: 'sharingBrokerage',
                render: function(data, type, full, meta) {
                    var number = parseFloat(full.sharingBrokerage).toFixed(2);
                    return number;
                }
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            makeDataTable(table, title, columns, dataColumns);
        });

        function showLoader(message) {
            const loaderHtml = `
                <div id="exportLoader" class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;">
                    <span class="spinner-border text-primary" role="status"></span>
                    <span class="text-gray-800 fs-6 fw-semibold mt-5">${message}</span>
                </div>`;
            $('body').append(loaderHtml);
        }

        // Hide Loader
        function hideLoader() {
            $('#exportLoader').remove();
        }

        // Group Data by Manager
        function groupByManager(rows) {
            return rows.reduce((acc, row) => {

                var group   = row.managerLogin && row.managerLogin.includes(':')
                                                ? row.managerLogin.split(':')[0].trim()
                                                : row.managerLogin;
                if (!acc[group]) {
                    acc[group] = [];
                }

                acc[group].push(row);

                return acc;
            }, {});
        }

        // Generate PDF Document Structure
        function generatePDFDocument(manager, data) {
            const now = new Date();
            const jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

            const doc = {
                pageMargins: [20, 60, 20, 30],
                defaultStyle: { fontSize: 18 },
                styles: {
                    tableHeader: { fontSize: 18, bold: true, fillColor: '#2d4154', color: 'white', alignment: 'center' },
                    tableBody: { fontSize: 18, alignment: 'right' },
                },
                pageOrientation: 'landscape',
                header: function () {
                    return {
                        columns: [
                            { alignment: 'left', text: "", fontSize: 14, margin: [10, 10, 10, 10] },
                            { alignment: 'center', text: "{{CommonConstants::BROKERAGE_RETURN_REPORT['PDF_HEADING']}}", fontSize: 14, margin: [20, 0, 0, 0] },
                            {
                                alignment: 'right',
                                text: [
                                    { text: 'Week Date : ', fontSize: 14 },
                                    { text: moment("{{ $start_date }}").isoWeekday(1).format('DD-MM-YYYY') + ' - ' + moment("{{ $end_date }}").isoWeekday(5).format('DD-MM-YYYY'), fontSize: 14, color: 'red' }
                                ],
                                margin: [0, 20, 20, 20]
                            }
                        ],
                        margin: 20
                    };
                },
                footer: function (page, pages) {
                    return {
                        columns: [
                            {
                                alignment: 'left',
                                text: pdfFooterText,
                                fontSize: 8
                            },
                            { alignment: 'right', text: ['Page ', { text: page.toString() }, ' of ', { text: pages.toString() }] }
                        ],
                        margin: [20, 0, 20, 20]
                    };
                },
                content: [
                    {
                        table: {
                            headerRows: 2,
                            widths: ['20%', '20%', '30%', '30%'],
                            body: [
                                [
                                    { text: 'Code', style: 'tableHeader' },
                                    { text: 'Name', style: 'tableHeader' },
                                    { text: 'Brokerage', style: 'tableHeader' },
                                    { text: 'Return Brokerage', style: 'tableHeader' }
                                ],
                                [{ text: manager, colSpan: 4, alignment: 'left', style: 'tableBody', color: '#FF0000' }]
                            ]
                        },
                        layout: {
                            hLineWidth: () => 0.5,
                            vLineWidth: () => 0.5,
                            hLineColor: () => '#aaa',
                            vLineColor: () => '#aaa',
                            paddingLeft: () => 4,
                            paddingRight: () => 4
                        }
                    }
                ]
            };

            let lastTotalProfit     = 0;
            let lastTotalBrokerage  = 0;

            data.forEach(function(row, index) {
                const totalProfit           = parseFloat(row.totalBrokerage);
                const totalBrokerageValue   = parseFloat(row.extraBrokerage);
                var rowStyle                = (index % 2 === 0) ? {fillColor: '#F0F0F0'} : {};

                doc.content[0].table.body.push([
                    { text: row.loginId, alignment: 'left', style: 'tableBody', ...rowStyle },
                    { text: row.name, alignment: 'left', style: 'tableBody', fontSize: 14, ...rowStyle },
                    { text: parseFloat(totalProfit).toFixed(2), style: 'tableBody', ...rowStyle },
                    { text: parseFloat(totalBrokerageValue).toFixed(2), style: 'tableBody', ...rowStyle }
                ]);

                lastTotalProfit     += totalProfit;
                lastTotalBrokerage  += totalBrokerageValue;
            });

            doc.content[0].table.body.push([
                { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                {},
                { text: parseFloat(lastTotalProfit).toFixed(2), style: 'tableBody', bold: true },
                { text: parseFloat(lastTotalBrokerage).toFixed(2), style: 'tableBody', bold: true }
            ]);

            return doc;
        }

        // Create PDF and Add to ZIP
        function createPDFPromise(doc, zip, manager) {
            return new Promise(resolve => {
                pdfMake.createPdf(doc).getBlob(blob => {
                    zip.file(`${manager.split(' : ')[0]}-brokerage-return-report.pdf`, blob);
                    resolve();
                });
            });
        }

        // Download ZIP
        function downloadZip(zip, fileNamePrefix) {
            zip.generateAsync({ type: 'blob' }).then(content => {
                const link      = document.createElement('a');
                link.href       = URL.createObjectURL(content);
                link.download   = `${fileNamePrefix}-${Date.now()}.zip`;
                link.click();
            });
        }

        function generatePDFForManager(selectedManager, selectedChat, uniqueManagerIds, dt, node, selectedType, selectedPdfType, selectedGroups, fullBrokerageData) {
            const button = $(node);
            button.prop("disabled", true);

            showLoader("Sending PDFs...");

            setTimeout(() => {
                var rows    = dt.rows().data().toArray();

                if (selectedPdfType == 'pdfGroupWise') { 
                    rows    = fullBrokerageData;
                }
                
                const groupedData               = {};
                let commonManagerIds            = [];
                const selectedManagerIds        = selectedManager.map(Number);
                const selectedChatIds           = selectedChat.map(Number);
                const telegramManagerIds        = @json($telegramManagers);
                const telegramManagerIdsArray   = telegramManagerIds.map(manager => manager.id);

                // Create a common set of manager IDs
                if ((selectedType == "{{CommonConstants::BILLING_FILE_LOGS['TYPE_CHAT_ID']}}") && (uniqueManagerIds.length > 0)) {
                    commonManagerIds = uniqueManagerIds.map(Number);
                } else {
                    commonManagerIds = selectedManagerIds.length > 0 ? selectedManagerIds : telegramManagerIdsArray;
                }

                const filteredRows = rows.filter(row => commonManagerIds.includes(row.managerId));

                filteredRows.forEach(row => {
                    const manager   = row.managerLogin && row.managerLogin.includes(':')
                                                ? row.managerLogin.split(':')[0].trim()
                                                : row.managerLogin;
                    if (!groupedData[manager]) {
                        groupedData[manager] = [];
                    }
                    groupedData[manager].push(row);
                });

                const zip               = new JSZip();
                const allPdfPromises    = [];

                Object.keys(groupedData).forEach(manager => {
                    const data      = groupedData[manager];
                    const now       = new Date();
                    const jsDate    = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

                    const doc = {
                        pageMargins: [20, 60, 20, 30],
                        defaultStyle: { fontSize: 18 },
                        styles: {
                            tableHeader: { fontSize: 18, bold: true, fillColor: '#2d4154', color: 'white', alignment: 'center' },
                            tableBody: { fontSize: 18, alignment: 'right' },
                        },
                        pageOrientation: 'landscape',
                        header: function () {
                            const groupsLabel = (selectedPdfType == 'pdfGroupWise')
                                ? {
                                    text: [
                                        { text: `Groups : `, fontSize: 14 },
                                        { text: (selectedGroups && selectedGroups.length) > 0 ? selectedGroups.join(', ') : 'All', fontSize: 10 },
                                    ],
                                    margin: [0, 20, 20, 20],
                                    alignment: 'left'
                                }
                                : { text: "", fontSize: 14, margin: [0, 20, 20, 20] };

                            return {
                                columns: [groupsLabel, 
                                    { alignment: 'center', text: "{{CommonConstants::BROKERAGE_RETURN_REPORT['PDF_HEADING']}}", fontSize: 14, margin: [20, 0, 0, 0] },
                                    {
                                        alignment: 'right',
                                        text: [
                                            { text: 'Week Date : ', fontSize: 14 },
                                            { text: moment("{{ $start_date }}").isoWeekday(1).format('DD-MM-YYYY') + ' - ' + 
                                            moment("{{ $end_date }}").isoWeekday(5).format('DD-MM-YYYY'), fontSize: 14, color: 'red' }
                                        ],
                                        margin: [0, 20, 20, 20]
                                    }
                                ],
                                margin: 20
                            };
                        },
                        footer: function (page, pages) {
                            return {
                                columns: [
                                    {
                                        alignment: 'left',
                                        text: pdfFooterText,
                                        fontSize: 8
                                    },
                                    {
                                        alignment: 'right',
                                        text: ['Page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                    }
                                ],
                                margin: [20, 0, 20, 20]
                            };
                        },
                        content: [
                            {
                                table: {
                                    headerRows: 2,
                                    widths: selectedPdfType == 'pdfGroupWise' ? ['20%', '20%', '20%', '20%', '20%'] : ['20%', '20%', '30%', '30%'],
                                    body: []
                                },
                                layout: {
                                    hLineWidth: () => 0.5,
                                    vLineWidth: () => 0.5,
                                    hLineColor: () => '#aaa',
                                    vLineColor: () => '#aaa',
                                    paddingLeft: () => 4,
                                    paddingRight: () => 4
                                }
                            }
                        ]
                    };

                    // Add header row
                    if (selectedPdfType == 'pdfGroupWise') {
                        doc.content[0].table.body.push([
                            { text: 'Code', style: 'tableHeader' },
                            { text: 'Name', style: 'tableHeader' },
                            { text: 'M2M', style: 'tableHeader' },
                            { text: 'Bill', style: 'tableHeader' },
                            { text: 'Return Brokerage', style: 'tableHeader' }
                        ]);
                        doc.content[0].table.body.push([{ text: manager, colSpan: 5, alignment: 'left', style: 'tableBody', color: '#FF0000' }]);
                    } else {
                        doc.content[0].table.body.push([
                            { text: 'Code', style: 'tableHeader' },
                            { text: 'Name', style: 'tableHeader' },
                            { text: 'Brokerage', style: 'tableHeader' },
                            { text: 'Return Brokerage', style: 'tableHeader' }
                        ]);
                        doc.content[0].table.body.push([{ text: manager, colSpan: 4, alignment: 'left', style: 'tableBody', color: '#FF0000' }]);
                    }

                    // Totals
                    let lastTotalProfit     = 0;
                    let lastTotalBrokerage  = 0;
                    let lastTotalBill       = 0;

                    data.forEach(function (row, index) {
                        const rowStyle = (index % 2 === 0) ? { fillColor: '#F0F0F0' } : {};

                        if (selectedPdfType == 'pdfGroupWise') {
                            let totalProfit         = 0;
                            let totalBrokerageValue = 0;
                            let billingAmount       = 0;

                            if (row['groupWiseData']) {                                
                                let groupedArray = row['groupWiseData'].split(',');
                                groupedArray.forEach(item => {
                                    let match   = selectedGroups.find(symbol => item.startsWith(symbol + ':'));
                                    if (match || selectedGroups == "") {                                        
                                        const [_, retunBrokerage, mTom, bill] = item.split(':');
                                        totalBrokerageValue += parseFloat(retunBrokerage);
                                        totalProfit         += parseFloat(mTom);
                                        billingAmount       += parseFloat(bill);
                                    }
                                });
                            }

                            if (totalBrokerageValue == 0 && totalProfit == 0 && billingAmount == 0) return;

                            doc.content[0].table.body.push([
                                { text: row.loginId, alignment: 'left', style: 'tableBody', ...rowStyle },
                                { text: row.name, alignment: 'left', style: 'tableBody', fontSize: 14, ...rowStyle },
                                { text: totalProfit.toFixed(2), style: 'tableBody', ...rowStyle },
                                { text: billingAmount.toFixed(2), style: 'tableBody', ...rowStyle },
                                { text: totalBrokerageValue.toFixed(2), style: 'tableBody', ...rowStyle }
                            ]);

                            lastTotalProfit     += totalProfit;
                            lastTotalBrokerage  += totalBrokerageValue;
                            lastTotalBill       += billingAmount;

                        } else {
                            const totalProfit           = parseFloat(row.totalBrokerage);
                            const totalBrokerageValue   = parseFloat(row.extraBrokerage);

                            doc.content[0].table.body.push([
                                { text: row.loginId, alignment: 'left', style: 'tableBody', ...rowStyle },
                                { text: row.name, alignment: 'left', style: 'tableBody', fontSize: 14, ...rowStyle },
                                { text: totalProfit.toFixed(2), style: 'tableBody', ...rowStyle },
                                { text: totalBrokerageValue.toFixed(2), style: 'tableBody', ...rowStyle }
                            ]);

                            lastTotalProfit     += totalProfit;
                            lastTotalBrokerage  += totalBrokerageValue;
                        }
                    });

                    // Add total row
                    if (selectedPdfType == 'pdfGroupWise') {
                        doc.content[0].table.body.push([
                            { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                            {},
                            { text: lastTotalProfit.toFixed(2), style: 'tableBody', bold: true },
                            { text: lastTotalBill.toFixed(2), style: 'tableBody', bold: true },
                            { text: lastTotalBrokerage.toFixed(2), style: 'tableBody', bold: true }
                        ]);
                    } else {
                        doc.content[0].table.body.push([
                            { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                            {},
                            { text: lastTotalProfit.toFixed(2), style: 'tableBody', bold: true },
                            { text: lastTotalBrokerage.toFixed(2), style: 'tableBody', bold: true }
                        ]);
                    }
                    
                    if(doc.content[0].table.body.length == 0)  return;

                    // PDF generation promise
                    const pdfPromise = new Promise(resolve => {
                        pdfMake.createPdf(doc).getBlob(blob => {
                            zip.file(`${manager}-${fileName}.pdf`, blob);
                            resolve();
                        });
                    });

                    allPdfPromises.push(pdfPromise);
                });

                Promise.all(allPdfPromises).then(() => {
                    zip.generateAsync({ type: "blob" }).then(zipBlob => {
                        const formData = new FormData();
                        formData.append("billing_pdf_zip", zipBlob, `BillingReports-${new Date().toISOString().split("T")[0]}.zip`);
                        formData.append('moduleId', "{{CommonConstants::TELEGRAM_BOT_SETTING['MODULE_TYPES']['BROKERAGE_RETURN']}}");
                        formData.append('pdfType', (selectedPdfType == 'pdfGroupWise') ? '{{CommonConstants::TELEGRAM_BOT_SETTING["REPORT_TYPE"]["V_ONE"]}}' : '');
                        formData.append('startOfWeek', "{{ $start_date }}");
                        formData.append('telegramManagers', commonManagerIds);
                        formData.append('telegramChatIds', selectedChatIds);
                        formData.append('type', selectedType);

                        $.ajax({
                            url: "{{ route('saveBillingPDF') }}",
                            method: "POST",
                            data: formData,
                            processData: false,
                            contentType: false,
                            headers: {
                                "X-CSRF-TOKEN": "{{ csrf_token() }}"
                            },
                            success: function(response) {
                                hideLoader();
                                button.prop("disabled", false);
                                if (response.success) {
                                    location.reload();
                                } else {
                                    console.error("Error:", response);
                                    location.reload();
                                }
                            },
                            error: function(xhr, status, error) {
                                hideLoader();
                                button.prop("disabled", false);

                                if (xhr.status === 422) {
                                    let errors = xhr.responseJSON.errors;
                                    let errorHtml = "<ul>";

                                    $.each(errors, function (key, value) {
                                        errorHtml += "<li>" + value[0] + "</li>";
                                    });

                                    errorHtml += "</ul>";

                                    let errorDiv = $('<div class="alert alert-danger">' + errorHtml + '</div>');
                                    $("#send_billing_reports_form").prepend(errorDiv);

                                    $('#kt_modal_send_billing_reports').modal('show');

                                    setTimeout(function () {
                                        errorDiv.fadeOut('slow', function () {
                                            $(this).remove();
                                        });
                                    }, 5000);
                                } else {
                                    console.error("Error:", xhr.responseText);
                                    location.reload();
                                }
                            }
                        });
                    });
                });
            }, 100);
        }

        function makeDataTable(table, title, columnArray, dataColumns) {
            var groupColumn                 = 0;
            var totalBrokerageColumn        = 4;
            var totalExtraBkrgColumn        = 5;
            var totalSharingAmountColumn    = 6;
            var sharingPercentageColumn     = 3
            var reloadAjex = $(table).DataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title col-4'<'d-flex position-relative my-1'>><'justify-content-center justify-content-md-end align-content-center card-body d-flex flex-center'><'card-toolbar flex-row-fluid justify-content-end gap-6'<'custom-button-container'>B>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5 gap-2 d-flex align-items-center justify-content-center justify-content-md-start'l<i>><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>",
                processing: true,
                stateSave: false,
                drawCallback: function(settings) {
                    var api                     = this.api();
                    var rows                    = api.rows().nodes();
                    var lastGroup               = null;
                    var lastTotalBrokerage      = 0;
                    var lastRowIndex            = -1;
                    var lastSharingBkrgAmount   = 0;
                    var lastTotalExtraBrokerage = 0;

                    api.column(groupColumn).data().each(function(group, i) {
                        var totalBrokerage      = parseFloat(api.column(totalBrokerageColumn).data()[i]) || 0;
                        var totalExtraBrokerage = parseFloat(api.column(totalExtraBkrgColumn).data()[i]) || 0;
                        var sharingBkrgAmount   = parseFloat(api.column(totalSharingAmountColumn).data()[i]) || 0;

                        if (lastGroup !== group) {
                            if (lastRowIndex !== -1) {
                                $(rows).eq(lastRowIndex).after(
                                    '<tr class="group even">' +
                                    '<td colspan="2" class="fs-3 text-center fw-bold">Total</td>' +
                                    '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastTotalBrokerage).toFixed(2) + '</td>' +
                                    '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastTotalExtraBrokerage).toFixed(2) + '</td>' +
                                    '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastSharingBkrgAmount).toFixed(2) + '</td>' +
                                    '</tr>'
                                );
                            }

                            lastGroup               = group;
                            lastTotalBrokerage      = totalBrokerage;
                            lastTotalExtraBrokerage = totalExtraBrokerage;
                            lastSharingBkrgAmount   = sharingBkrgAmount;

                            $(rows).eq(i).before(
                                '<tr class="group even"><td colspan="5" class="fs-3 text-danger fw-bold">' +
                                group +
                                '</td></tr>'
                            );
                        } else {
                            lastTotalBrokerage += totalBrokerage;
                            lastTotalExtraBrokerage += totalExtraBrokerage;
                            lastSharingBkrgAmount += sharingBkrgAmount;
                        }

                        lastRowIndex = i;
                    });

                    if (api.page.info().page + 1 == api.page.info().pages) {
                        if (lastRowIndex !== -1) {
                            $(rows).eq(lastRowIndex).after(
                                '<tr class="group even">' +
                                '<td colspan="2" class="fs-3 text-center fw-bold">Total</td>' +
                                '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastTotalBrokerage).toFixed(2) + '</td>' +
                                '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastTotalExtraBrokerage).toFixed(2) + '</td>' +
                                '<td class="fs-3 text-dark text-center fs-3 fw-boldest">' + parseFloat(lastSharingBkrgAmount).toFixed(2) + '</td>' +
                                '</tr>'
                            );
                        }
                    }
                },
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::ALL_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Brokerage",
                    search: ""
                },
                buttons: [{
                    className: "exportButton",
                    attr: {
                        id: "exportButtons"
                    },
                    text: "<i class='fa fa-download'></i>",
                        buttons: [
                        {
                            extend: "excelHtml5",
                            text: "Export",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            title: title,
                            name: "export",
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            title: title,
                            // "action": exportAllAction,
                            name: "exportAll",
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "csvHtml5",
                            text: "CSV",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },
                        {
                            extend: "pdfHtml5",
                            text: 'Pdf New',
                            className: "btn btn-default btn-sm d-none",
                            title: title,
                            name: 'pdfNew',
                            exportOptions: {
                                columns: columnArray
                            },
                            customize: function(doc) {
                                var rows                    = fullBrokerageData;
                                var lastGroup               = null;
                                var newRows                 = [];
                                var lastTotalProfit         = 0;
                                var lastTotalBrokerage      = 0;
                                var lastTotalBillingAmount  = 0;
                                let selectedGroups          = $('#exportGroup').val();
                                var selectedGroupLabel      = $('#exportGroup').val().join(", ");
                                let displayIndex            = 0;

                                if ($('#exportGroup').val().length == "{{$groups->count()}}" || $('#exportGroup').val() == '') {
                                    selectedGroupLabel = 'All';
                                }

                                // Remove existing first element in content (assuming it's a placeholder)
                                doc.content.splice(0, 1);

                                // Date string for footer
                                var now     = new Date();
                                var jsDate  = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

                                // Margins and styles
                                doc.pageMargins                 = [20, 60, 20, 30];
                                doc.defaultStyle.fontSize       = 18;
                                doc.styles.tableHeader.fontSize = 18;
                                doc.pageOrientation             = 'landscape';

                                // Header definition
                                doc['header'] = function() {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: [
                                                    { text: `Groups : `, fontSize: 14 },
                                                    { text: selectedGroupLabel, fontSize: 10 },
                                                ],
                                                margin: [0, 20, 20, 20]
                                            },
                                            {
                                                alignment: 'center',
                                                text: "{{CommonConstants::BROKERAGE_RETURN_REPORT['PDF_HEADING']}}",
                                                fontSize: 14,
                                                margin: [20, 0, 0, 0]
                                            },
                                            {
                                                alignment: 'right',
                                                text: [
                                                    { text: 'Week Date : ', fontSize: 14 },
                                                    { text: moment("{{ $start_date }}").isoWeekday(1).format('DD-MM-YYYY') + ' - ' + moment("{{ $end_date }}").isoWeekday(5).format('DD-MM-YYYY'), fontSize: 14, color: 'red' }
                                                ],
                                                margin: [0, 20, 20, 20]
                                            }
                                        ],
                                        margin: 20
                                    };
                                };

                                // Footer definition
                                doc['footer'] = function(page, pages) {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: pdfFooterText,
                                                fontSize: 8
                                            },
                                            {
                                                alignment: 'right',
                                                text: ['Page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                            }
                                        ],
                                        margin: [20, 0, 20, 20]
                                    };
                                };

                                // Table layout
                                var objLayout = {
                                    hLineWidth: function(i) { return 0.5; },
                                    vLineWidth: function(i) { return 0.5; },
                                    hLineColor: function(i) { return '#aaa'; },
                                    vLineColor: function(i) { return '#aaa'; },
                                    paddingLeft: function(i) { return 4; },
                                    paddingRight: function(i) { return 4; }
                                };

                                // Applying layout
                                // doc.content[0].table.widths = Array(4).fill('*');
                                doc.content[0].table.widths = ['20%', '20%', '20%', '20%', '20%'];
                                doc.content[0].layout = objLayout;

                                // Header row for the table
                                newRows.push([
                                    { text: 'Code', style: 'tableHeader' },
                                    { text: 'Name', style: 'tableHeader' },
                                    { text: 'M2M', style: 'tableHeader', alignment: 'center' },
                                    { text: 'Bill', style: 'tableHeader', alignment: 'center' },
                                    { text: 'Return Brokerage', style: 'tableHeader', alignment: 'center' },
                                ]);

                                // Processing each row of the DataTable
                                $.each(rows, function(index, row) {
                                    var totalBrokerage  = 0;
                                    var totalProfit     = 0;
                                    var billingAmount   = 0;

                                    if (row['groupWiseData']) {
                                        let groupedArray        = row['groupWiseData'].split(',');
                                        groupedArray.forEach(item => {
                                            let match = selectedGroups.find(symbol => item.startsWith(symbol + ':'));
                                            
                                            if (match || selectedGroups == "") {                                                
                                                const groupWiseData     = item.split(':');
                                                const retunBrokerage    = groupWiseData[1];
                                                const mTom              = groupWiseData[2];
                                                const bill              = groupWiseData[3];
                                                totalBrokerage          += parseFloat(retunBrokerage);
                                                totalProfit             += parseFloat(mTom);
                                                billingAmount           += parseFloat(bill);
                                            } else {
                                                return;
                                            }
                                        });
                                    } else {
                                        return;
                                    }
                                    
                                    if (totalBrokerage == 0 && totalProfit == 0 && billingAmount == 0) {
                                        return;
                                    }

                                    // var group           = row['managerLogin'];
                                    var group   = row['managerLogin'] && row['managerLogin'].includes(':')
                                                    ? row['managerLogin'].split(':')[0].trim()
                                                    : row['managerLogin'];
                                                    
                                    var rowStyle        = (displayIndex % 2 === 0) ? {fillColor: '#F0F0F0'} : {};

                                    // Check if new group is encountered
                                    if (lastGroup !== group) {
                                        // If it's not the first group, add the total row for the previous group
                                        if (lastGroup !== null) {
                                            newRows.push([
                                                { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                                                {},
                                                { text: parseFloat(lastTotalProfit).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                                { text: parseFloat(lastTotalBillingAmount).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                                { text: parseFloat(lastTotalBrokerage).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' }
                                            ]);
                                        }

                                        // Add the new group row
                                        newRows.push([{ text: group, colSpan: 5, style: 'tableBody', color: '#FF0000' }]);
                                        lastGroup               = group;
                                        lastTotalProfit         = 0;
                                        lastTotalBrokerage      = 0;
                                        lastTotalBillingAmount  = 0;
                                    }

                                    // Add the regular data row
                                    newRows.push([
                                        { text: row['loginId'], style: 'tableBody', ...rowStyle},
                                        { text: row['name'], style: 'tableBody', fontSize: 14, ...rowStyle},
                                        { text: parseFloat(totalProfit).toFixed(2), style: 'tableBody', alignment: 'right', ...rowStyle},
                                        { text: parseFloat(billingAmount).toFixed(2), style: 'tableBody', alignment: 'right', ...rowStyle},
                                        { text: parseFloat(totalBrokerage).toFixed(2), style: 'tableBody', alignment: 'right', ...rowStyle}
                                    ]);

                                    displayIndex++;

                                    // Accumulate totals within the current group
                                    lastTotalProfit         += totalProfit;
                                    lastTotalBrokerage      += totalBrokerage;
                                    lastTotalBillingAmount  += billingAmount;
                                });

                                // Add the final total row for the last group
                                if (lastGroup !== null) {
                                    newRows.push([
                                        { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                                        {},
                                        { text: parseFloat(lastTotalProfit).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                        { text: parseFloat(lastTotalBillingAmount).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                        { text: parseFloat(lastTotalBrokerage).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' }
                                    ]);
                                }
                                // Assigning the rows to the content body
                                doc.content[0].table.body = newRows;
                            }
                        },
                        {
                            extend: "pdfHtml5",
                            text: 'Pdf',
                            className: "btn btn-default btn-sm d-none",
                            title: title,
                            name: 'pdf',
                            exportOptions: {
                                columns: columnArray
                            },
                            customize: function(doc) {
                                var api             = reloadAjex; 
                                // Assuming reloadAjex is your DataTable instance
                                var rows            = api.rows().data();
                                var lastGroup       = null;
                                var newRows         = [];
                                var lastTotalProfit = 0;
                                var lastTotalBrokerage = 0;
                                var lastTotalBillingAmount = 0;

                                // Remove existing first element in content (assuming it's a placeholder)
                                doc.content.splice(0, 1);

                                // Date string for footer
                                var now = new Date();
                                var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

                                // Margins and styles
                                doc.pageMargins = [20, 60, 20, 30];
                                doc.defaultStyle.fontSize = 18;
                                doc.styles.tableHeader.fontSize = 18;
                                doc.pageOrientation = 'landscape';

                                // Header definition
                                doc['header'] = function() {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: "",
                                                fontSize: 14,
                                                margin: [10, 10, 10, 10]
                                            },
                                            {
                                                alignment: 'center',
                                                text: "{{CommonConstants::BROKERAGE_RETURN_REPORT['PDF_HEADING']}}",
                                                fontSize: 14,
                                                margin: [20, 0, 0, 0]
                                            },
                                            {
                                                alignment: 'right',
                                                text: [
                                                    { text: 'Week Date : ', fontSize: 14 },
                                                    { text: moment("{{ $start_date }}").isoWeekday(1).format('DD-MM-YYYY') + ' - ' + moment("{{ $end_date }}").isoWeekday(5).format('DD-MM-YYYY'), fontSize: 14, color: 'red' }
                                                ],
                                                margin: [0, 20, 20, 20]
                                            }
                                        ],
                                        margin: 20
                                    };
                                };

                                // Footer definition
                                doc['footer'] = function(page, pages) {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: pdfFooterText,
                                                fontSize: 8
                                            },
                                            {
                                                alignment: 'right',
                                                text: ['Page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                            }
                                        ],
                                        margin: [20, 0, 20, 20]
                                    };
                                };

                                // Table layout
                                var objLayout = {
                                    hLineWidth: function(i) { return 0.5; },
                                    vLineWidth: function(i) { return 0.5; },
                                    hLineColor: function(i) { return '#aaa'; },
                                    vLineColor: function(i) { return '#aaa'; },
                                    paddingLeft: function(i) { return 4; },
                                    paddingRight: function(i) { return 4; }
                                };

                                // Applying layout
                                // doc.content[0].table.widths = Array(4).fill('*');
                                doc.content[0].table.widths = ['20%', '20%', '30%', '30%'];
                                doc.content[0].layout = objLayout;

                                // Header row for the table
                                newRows.push([
                                    { text: 'Code', style: 'tableHeader' },
                                    { text: 'Name', style: 'tableHeader' },
                                    { text: 'Brokerage', style: 'tableHeader', alignment: 'center' },
                                    { text: 'Return Brokerage', style: 'tableHeader', alignment: 'center' },
                                ]);

                                // Processing each row of the DataTable
                                rows.each(function(row, index) {
                                    // var group           = row['managerLogin'];
                                    var group   = row['managerLogin'] && row['managerLogin'].includes(':')
                                                    ? row['managerLogin'].split(':')[0].trim()
                                                    : row['managerLogin'];

                                    var totalProfit     = parseFloat(row['totalBrokerage']);
                                    var totalBrokerage  = parseFloat(row['extraBrokerage']);
                                    var billingAmount   = parseFloat(row['sharingBrokerage']);
                                    var rowStyle        = (index % 2 === 0) ? {fillColor: '#F0F0F0'} : {};

                                    // Check if new group is encountered
                                    if (lastGroup !== group) {
                                        // If it's not the first group, add the total row for the previous group
                                        if (lastGroup !== null) {
                                            newRows.push([
                                                { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                                                {},
                                                { text: parseFloat(lastTotalProfit).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                                { text: parseFloat(lastTotalBrokerage).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                            ]);
                                        }

                                        // Add the new group row
                                        newRows.push([{ text: group, colSpan: 4, style: 'tableBody', color: '#FF0000' }]);
                                        lastGroup = group;
                                        lastTotalProfit = 0;
                                        lastTotalBrokerage = 0;
                                        lastTotalBillingAmount = 0;
                                    }

                                    // Add the regular data row
                                    newRows.push([
                                        { text: row['loginId'], style: 'tableBody', ...rowStyle},
                                        { text: row['name'], style: 'tableBody', fontSize: 14, ...rowStyle},
                                        { text: parseFloat(totalProfit).toFixed(2), style: 'tableBody', alignment: 'right', ...rowStyle},
                                        { text: parseFloat(totalBrokerage).toFixed(2), style: 'tableBody', alignment: 'right', ...rowStyle},
                                    ]);

                                    // Accumulate totals within the current group
                                    lastTotalProfit += totalProfit;
                                    lastTotalBrokerage += totalBrokerage;
                                    lastTotalBillingAmount += billingAmount;
                                });

                                // Add the final total row for the last group
                                if (lastGroup !== null) {
                                    newRows.push([
                                        { text: 'Total', colSpan: 2, bold: true, alignment: 'center' },
                                        {},
                                        { text: parseFloat(lastTotalProfit).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                        { text: parseFloat(lastTotalBrokerage).toFixed(2), style: 'tableBody', bold: true, alignment: 'right' },
                                    ]);
                                }
                                // Assigning the rows to the content body
                                doc.content[0].table.body = newRows;
                            }
                        },
                        {
                            extend: "pdfHtml5",
                            text: "Download Manager-wise PDFs (ZIP)",
                            className: "btn btn-default btn-sm d-none",
                            title: title,
                            name: 'pdfZip',
                            "action": function (e, dt, node, config) {

                                const button = $(node);
                                button.prop("disabled", true);
                                showLoader("Generating PDFs...");

                                setTimeout(() => {
                                    const rows          = dt.rows().data().toArray();
                                    const groupedData   = groupByManager(rows);
                                    const zip           = new JSZip();
                                    const pdfPromises   = [];

                                    Object.keys(groupedData).forEach(manager => {
                                        const data = groupedData[manager];
                                        const doc = generatePDFDocument(manager, data);
                                        const pdfPromise = createPDFPromise(doc, zip, manager);
                                        pdfPromises.push(pdfPromise);
                                    });

                                    Promise.all(pdfPromises).then(() => {
                                        downloadZip(zip, fileName);
                                        hideLoader();
                                        button.prop("disabled", false);
                                    });
                                }, 100);                                
                            }
                        },{
                            extend: "pdfHtml5",
                            text: "Send to Telegram",
                            className: "btn btn-default btn-sm d-none",
                            title: title,
                            name: 'sendToTelegram',
                            attr: {
                                id: "sendToTelegramBtn"
                            },
                            "action": function (e, dt, node, config) {
                                $('#send_billing_reports_form').off('submit').on('submit', function (event) {
                                    event.preventDefault();
                                    const selectedManager   = $('#telegramManagers').val();
                                    var selectedChatIds     = $('#telegramChatIds').val();
                                    var uniqueManagerIds    = [];

                                    if ($('#telegramTypeChatId').is(':checked')) {
                                        $('#telegramChatIds option:selected').each(function() {
                                            let managerIds   = $(this).data('manager-id');
                                            uniqueManagerIds = [...new Set(managerIds.toString().split(','))]
                                        });
                                    }

                                    if ($(this).valid()) {
                                        localStorage.setItem("sendBillToTelegram", "true");

                                        var selectedType    = $('#send_billing_reports_form input[name="type"]:checked').val();
                                        var selectedPdfType = $('#send_billing_reports_form input[name="pdfType"]:checked').val();
                                        var selectedGroups  = $('#telegramGroupPdf').val();
                                        
                                        $('#kt_modal_send_billing_reports').modal('hide');
                                        generatePDFForManager(selectedManager, selectedChatIds, uniqueManagerIds, dt, node, selectedType, selectedPdfType, selectedGroups, fullBrokerageData);
                                    }
                                });

                                $('.dt-button-collection').hide();
                                showManagerModal("{{CommonConstants::TELEGRAM_BOT_SETTING['MODULE_TYPES']['BROKERAGE_RETURN']}}");
                            }
                        }
                    ]
                }],
                columnDefs: [{ visible: false, targets: dataColumns }],
                ajax: {
                    url: url,
                    method: "GET",
                    data: function(d) {
                        d.start_date    = "{{ $start_date }}",
                        d.end_date      = "{{ $end_date }}",
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                    },
                    dataSrc: function(json) {
                        fullBrokerageData   = json.data.slice().sort((a, b) => {
                                                return a.managerLogin.localeCompare(b.managerLogin);
                                            });

                        return json.data.filter(row => parseFloat(row.totalBrokerage) !== 0);
                    }
                },
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                columns: dataColumns,
                order: [
                    [0, "asc"],
                    [1, "asc"]
                ],
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );

        }

        $(document).ready(function() {          
            $('.card-toolbar').append(`<div class="input-group w-250px">
                <input type="week" id="weekPicker" class="form-control form-control-solid rounded rounded-end-0" placeholder="Pick date range"/>
                    <button class="btn btn-icon btn-light" id="weekPickerClear">
                        <span class="fas fa-times">
                    </span>
                </button>
            </div>`);
 
            // Retrieving start and end dates (in case they are passed from the server-side)
            var start_date = "{{ $start_date }}";
            var end_date = "{{ $end_date }}";

            // Function to determine the current week either based on provided dates or today's date
            function getCurrentWeek() {
                if (start_date && end_date) {
                // If start_date and end_date are provided, convert the start_date into the corresponding week
                return convertToWeekSelection(start_date);
                } else {
                // If no dates are provided, calculate the current ISO week
                return getISOWeek(new Date());
                }
            }

            // Convert the given start_date (YYYY-MM-DD) into the corresponding ISO week (YYYY-WW)
            function convertToWeekSelection(start_date) {
                var startDateObj = new Date(start_date); // Convert the start_date string to a Date object
                return getISOWeek(startDateObj); // Calculate the ISO week for the given date
            }

            // Function to calculate the ISO week (YYYY-WW) for a given date
            function getISOWeek(date) {
                // Find the day of the week for the given date (Sunday = 0, Monday = 1, ..., Saturday = 6)
                var dayOfWeek = date.getDay();

                // Find the Monday of the current week (ISO weeks start on Monday)
                var mondayDate = new Date(date);
                mondayDate.setDate(date.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1)); // Adjust the date to Monday of the week

                // Adjust to the nearest Thursday to determine the ISO week year
                var adjustedDate = new Date(mondayDate);
                adjustedDate.setDate(mondayDate.getDate() + 4 - (mondayDate.getDay() || 7)); // Move to the nearest Thursday

                // Calculate the start of the year and determine the week number
                var yearStart = new Date(adjustedDate.getFullYear(), 0, 1); // January 1st of the adjusted year
                var weekNumber = Math.ceil(((adjustedDate - yearStart) / 86400000 + 1) / 7); // Calculate the week number

                // Format and return the week as YYYY-WW
                return adjustedDate.getFullYear() + "-W" + ("0" + weekNumber).slice(-2);
            }

            // Function to calculate the start and end dates for a given ISO week (YYYY-WW)
            function getWeekDateRange(weekString) {
                var [year, week] = weekString.split("-W").map(Number); // Split the weekString into year and week

                // Find the first Thursday of the given year to determine the ISO week start
                var firstThursday = new Date(year, 0, 1);
                firstThursday.setDate(firstThursday.getDate() + (4 - (firstThursday.getDay() || 7))); // Adjust to the nearest Thursday

                // Calculate the start date of the ISO week (Monday)
                var startOfWeek = new Date(firstThursday);
                startOfWeek.setDate(firstThursday.getDate() + (week - 1) * 7 - 3); // Calculate the Monday of the selected week

                // Calculate the end date of the ISO week (Sunday)
                var endOfWeek = new Date(startOfWeek);
                endOfWeek.setDate(startOfWeek.getDate() + 6); // Sunday of the same week

                const formatDate = (date) =>
                new Date(date.getTime() - date.getTimezoneOffset() * 60000)
                    .toISOString()
                    .split("T")[0];

                // Return the formatted date range (start date - end date)
                return formatDate(startOfWeek) + " - " + formatDate(endOfWeek);
            }

            // Set the current week in the week picker
            var currentWeek = getCurrentWeek();
            $("#weekPicker").val(currentWeek); // Set the value of the week picker to the current or provided week

            // Set the maximum allowed week selection to the current week
            var maxAllow = getDefaultSelectedWeek();
            $("#weekPicker").attr("max", maxAllow); // Set the max attribute for the week picker to prevent selecting past weeks

            // Event handler for changes in the week picker input field
            $("#weekPicker").on("change", function () {
                var selectedWeek = $(this).val(); // Get the selected week in the format YYYY-WW

                if (!selectedWeek) {
                // If the input is cleared (empty), trigger the click event of the "clear" button
                $("#weekPickerClear").trigger("click");
                } else {
                // If a valid week is selected, process the selected week
                var dateRange = getWeekDateRange(selectedWeek); // Get the start and end date for the selected week
                var [startDate, endDate] = dateRange.split(" - "); // Split the date range into start and end dates

                // Update the attributes and values based on the selected week
                $("#weekPicker").attr("data-date-range", dateRange); // Store the date range in a custom attribute
                $(this).attr("placeholder", dateRange); // Set the placeholder to the date range
                $("#start_date").val(startDate); // Set the start date in the form field
                $("#end_date").val(endDate); // Set the end date in the form field

                // Submit the form with the selected date range
                $("#dateRangeForm").submit();
                }
            });

            // Event handler for the "clear" button
            $("#weekPickerClear").on("click", function () {
                // When the clear button is clicked, set the current week as the selected week
                var currentWeek = getDefaultSelectedWeek();
                $("#weekPicker").val(currentWeek); // Set the value of the week picker to the current week

                // Submit the form with the default week
                $("#dateRangeForm").submit();
            });

            // Function to get the default selected week (current ISO week)
            function getDefaultSelectedWeek() {
                return getISOWeek(new Date()); // Calculate the current ISO week and return it
            }
        });

        $(document).ready(function() {
            var managers    = @json($managers);
            var users       = @json($users);
            var managerId   = $("#managers").val();
            var userId      = $("#users").val();

            $('.card-title').append(`<div class="w-100 d-flex ms-2" id="managerFilterDiv"><select class="js-example-basic-multiple
                form-select form-select-solid multi-select-option" data-placeholder="Manager" id="managers" data-allow-clear="true">
                <option value=""></option>'
                 ${managers.map(element => {
                    var selected = (managerId == element.id) ? 'selected' : ''; 
                    return '<option value="'+element.id+'" '+selected+'>'+element.loginId+' : ' +element.name+'</option>';
                }).join('')}
            </select>
            </div>`);

            @hasrole(CommonConstants::ADMIN_ROLES['MANAGER_ADMIN'])
                $('#managerFilterDiv').addClass('d-none');
            @endhasrole

            $('.card-title').append(`<div class="w-100 d-flex ms-2"><select class="js-example-basic-multiple
                form-select form-select-solid multi-select-option" data-placeholder="User" id="users" data-allow-clear="true" multiple="multiple">
                ${users.map(element => {
                    var selected = userId == element.loginId ? 'selected' : '';
                    return '<option value="'+element.loginId+'" '+selected+'>'+element.loginId+'</option>';
                }).join('')}
            </select>
            </div>`);

            // Initialize Select2 on the users dropdown
            $('#users').select2({
                allowClear: true,
                tokenSeparators: [','],
            });

            // Event listener for manager dropdown change
            $('#managers').on('change', function() {
                var selectedManagerId = $(this).val(); // Get the selected manager's ID

                // Clear the user dropdown
                $('#users').empty();

                // If no manager is selected, show all users
                if (selectedManagerId === '') {
                    users.forEach(function(user) {
                        $('#users').append(`<option value="${user.loginId}">${user.loginId}</option>`);
                    });
                } else {
                    // Filter users whose managerId matches the selected manager
                    var filteredUsers = users.filter(function(user) {
                        return user.managerId == selectedManagerId;
                    });

                    // Append the filtered users to the dropdown
                    filteredUsers.forEach(function(user) {
                        $('#users').append(`<option value="${user.loginId}">${user.loginId}</option>`);
                    });
                }

                // Get the Select2 container
                var select2Container = $('#users').data('select2').$container;

                // Check if the Select2 dropdown is open by looking for the class in the container
                if (select2Container.hasClass('select2-container--open')) {
                    $('#users').select2('close'); // Close the dropdown if it's open
                }
            });

            var reloadTimeout;
            $('#managers, #users').on('change', function() {
                clearTimeout(reloadTimeout); // Clear any previously set timeout

                reloadTimeout = setTimeout(function() {
                    var table = $('#running_brokerage_table_reports').DataTable();
                    table.ajax.reload();
                }, 1000); // 1000ms = 1 second
            });

            $('#users').on('select2:open', function () {
                let searchField = $('#users').siblings('.select2-container').find('.select2-search__field');

                searchField.on('input', function () {
                    let inputValue = searchField.val().trim();

                    if (inputValue.includes(',')) {
                        let inputValues = inputValue.split(',').map(val => val.trim());
                        let options = $('#users option').map(function () {
                            return $(this).val();
                        }).get();

                        let selectedValues = $('#users').val() || [];
                        let validValues = inputValues.filter(value => options.includes(value));

                        selectedValues = [...new Set([...selectedValues, ...validValues])];

                        if (validValues.length > 0) {
                            $('#users').val(selectedValues).trigger('change');
                        }

                        searchField.val('');
                    }
                });
            });

            //Get Current Running Queue Total
            checkBillSendingProcess();

            setInterval(function(){ 
                //Interval of 5 Seconds
                checkBillSendingProcess();   
            }, 5000);

            function checkBillSendingProcess() {
                let moduleId        = "{{CommonConstants::TELEGRAM_BOT_SETTING['MODULE_TYPES']['BROKERAGE_RETURN']}}";
                let localStorageKey = 'billingSendingProcessCount_' + moduleId;

                $('#sendToTelegramBtnModel').addClass('disabled').attr('aria-disabled', 'true').css('pointer-events', 'none');
                $('#deleteSentMessagesButton').attr("disabled", true);

                $.ajax({
                    url: "{{ route('checkBillSendingProcess') }}",
                    method: "GET",
                    data: {
                        _token: token,
                        moduleId: moduleId
                    },
                    success: function(response) {
                        let count   = response.success;
                        let message = response.message;

                        if (count > 0) {
                            $('#deleteSentMessagesButton').attr("disabled", true);
                            $('#sendToTelegramBtnModel').addClass('disabled').attr('aria-disabled', 'true').css('pointer-events', 'none');
                            localStorage.setItem(localStorageKey, count);
                            $('.align-content-center').html('<span class="badge badge-light-primary fw-bolder my-2 fs-3 text-center">' + message + ' : ' + count + '</span>');
                        } else {
                            $('#deleteSentMessagesButton').attr("disabled", false);
                            $('#sendToTelegramBtnModel').removeClass('disabled').attr('aria-disabled', 'false').css('pointer-events', '');
                            $('.align-content-center').html('');
                        }

                        if (count == 0 && localStorage.getItem(localStorageKey) != 0) {
                            $('#sendToTelegramBtnModel').removeClass('disabled').attr('aria-disabled', 'false').css('pointer-events', '');
                            $('#deleteSentMessagesButton').attr("disabled", false);
                            localStorage.setItem(localStorageKey, 0);
                            location.reload();
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#sendToTelegramBtnModel').removeClass('disabled').attr('aria-disabled', 'false').css('pointer-events', '');
                        console.error(xhr.responseText);
                    }
                });
            }

            // Function to disable buttons based on localStorage
            function disableButtons() {
                // Check if the button is already disabled in localStorage
                if (localStorage.getItem("sendBillToTelegram") === "true") {
                    $('#deleteSentMessagesButton').attr("disabled", true);
                    $('#sendToTelegramBtnModel').addClass('disabled').attr('aria-disabled', 'true').css('pointer-events', 'none');
                } else {
                    $('#deleteSentMessagesButton').attr("disabled", false);
                    $('#sendToTelegramBtnModel').removeClass('disabled').attr('aria-disabled', 'false').css('pointer-events', '');
                }
            }

            $('.custom-button-container').prepend(`<button class="btn btn-secondary me-5" id="deleteSentMessagesButton"><span class="fas fa-trash"></span></button><button class="btn btn-secondary" id="sendToTelegramBtnModel"><span class="fas fa-paper-plane"></span></button>`);

            $('#sendToTelegramBtnModel').on('click', function() {
                let table = $('#running_brokerage_table_reports').DataTable();
                table.button('sendToTelegram:name').trigger();
            });

            $('#exportButtons').on('click', function() {
                $('#kt_modal_export_buttons').modal('show');
            });

            $('#exportSubmit').on('click', function() {
                var checkedValue = $('#kt_modal_export_buttons input[name="type"]:checked').val();

                if (checkedValue != null) {
                    let table = $('#running_brokerage_table_reports').DataTable();
                    table.button(checkedValue+':name').trigger();
                } 
                $('#kt_modal_export_buttons').modal('hide');
                resetExportModal();
            });

            $('#kt_modal_export_buttons input[name="type"]').on('change', function() {
                var selectedValue = $(this).val();
                if (selectedValue == 'pdfNew') {
                    $('#groupDropdown').removeClass('d-none');
                    $('#exportGroup').val(null).trigger('change');
                } else {
                    $('#groupDropdown').addClass('d-none');
                    $('#exportGroup').val(null).trigger('change');
                }
            });

            $('#kt_modal_export_buttons').on('hidden.bs.modal', function() {
                resetExportModal();
            });

            function resetExportModal() {
                $('#groupDropdown').addClass('d-none');
                $('input[name="type"][value="export"]').prop('checked', true).closest('label').addClass('active');
                $('input[name="type"]').not('[value="export"]').closest('label').removeClass('active');
            }

            $(document).ready(function () {
                $('#pdfTypeButtonDiv').removeClass('d-none');
                $('#groupsDropdownDiv').addClass('d-none');
				$('#telegramGroupPdf').val(null).trigger('change');
                
				$('#kt_modal_send_billing_reports input[name="pdfType"]').on('change', function() {
					var selectedValue = $(this).val();
					if (selectedValue == 'pdfGroupWise') {
						$('#groupsDropdownDiv').removeClass('d-none');
						$('#telegramGroupPdf').val(null).trigger('change');
					} else {
						$('#groupsDropdownDiv').addClass('d-none');
						$('#telegramGroupPdf').val(null).trigger('change');
					}
				});
			});

            @hasrole(CommonConstants::ADMIN_ROLES['MANAGER_ADMIN'])
                $('#deleteSentMessagesButton').addClass('d-none');
                $('#sendToTelegramBtnModel').addClass('d-none');
            @endhasrole

            $('#deleteSentMessagesButton').on('click', function() {

                Swal.fire({
					title: 'Are you sure you want to delete Telegram Messages?',
					text: "You won't be able to revert this!",
					icon: 'warning',
					showCancelButton: true,
					confirmButtonColor: '#3085d6',
					cancelButtonColor: '#d33',
					confirmButtonText: 'Yes, delete it!'
				}).then((result) => {
					if (result.isConfirmed) {
                        showLoader("Deleting Messages...");

                        $.ajax({
                            url: "{{ route('deleteSentTelegramMessages') }}",
                            method: "POST",
                            data: {
                                _token: token,
                                moduleId: "{{CommonConstants::TELEGRAM_BOT_SETTING['MODULE_TYPES']['BROKERAGE_RETURN']}}"
                            },
                            success: function(response) {
                                location.reload();
                            },
                            error: function(xhr, status, error) {
                                hideLoader();
                                $('#sendToTelegramBtnModel').removeClass('disabled').attr('aria-disabled', 'false').css('pointer-events', '');
                                $('#deleteSentMessagesButton').attr("disabled", false);
                                console.error(xhr.responseText);
                            }
                        });

						return true;
					} else {
						event.preventDefault();
						return false;
					}
				});
            });
            // Disable buttons when page loads if needed
            disableButtons();
        });
    </script>
@endsection