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

    
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--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">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-striped table-hover table-row-dashed fs-6 gy-5" id="kt_table_reports">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-80px">Code</th>
                                        <th class="min-w-80px">Name</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold text-center">
                                </tbody>
                                <!--end::Table body-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const table         = $('#kt_table_reports');
        const token         = "{{ csrf_token() }}";
        var fileName        =  "Account_Brokerage_Report";
        var title           = fileName + '_' +Date.now();
        var columns         = [0, 1];
        var managerIndex    = '';
        var groupColumns    = @json($groupColumns);
        var symbolColumns   = @json($symbolColumns);
        var url             = "{{ route('accountBrokerageData') }}";
        var managerName     = '';
        var dataColumns = [
            {
                name: 'loginId',
                data: 'loginId'
            },
            {
                name: 'name',
                data: 'name'
            }
        ];

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

        function getManagerDropdown(managerId = null) {
            var managers = @json($managers);
            @if($userManager->count() > 0) 
                managerId = "{{$userManager->first()->id}}";
                initializeDataTable(managerId)              
            @endif

            var isDisabled = ("{{$userManager->count()}}" > 0) ? 'd-none' : '';

            $('.card-toolbar').append(`<div class="w-100 d-flex"><select class="js-example-basic-multiple form-select form-select-solid multi-select-option" data-placeholder="Select Manager" onChange="getManagers()" id="managers">
                <option value="">Please Select Manager</option>'
                ${managers.map(element => {
                    var selected = managerId == element.id ? 'selected' : ''; 
                    return '<option value="'+element.id+'" '+selected+'>'+element.loginId+' : ' +element.name+'</option>';
                }).join('')}
            </select>
            <button class="btn btn-icon btn-light mx-3 ${isDisabled}" onClick="clearManager()" title="Clear">
                <span class="fa fa-times"></span>
            </button>
            </div>`);

            $('#managers').select2({
                placeholder: function () {
                    return $(this).data('placeholder');
                }
            });
        }

        function makeDataTable(table, title, columnArray, dataColumns, url, managerName) {
            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-toolbar col-4 card-title'<'d-flex position-relative my-1'>><'-row-fluid justify-content-end gap-6'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,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::ALL_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Brokerage",
                    search: ""
                },
                buttons: [{
                    extend: "collection",
                    className: "exportButton",
                    text: "<i class='fa fa-download'></i> Export",
                        buttons: [
                        {
                            extend: "excelHtml5",
                            text: "Export",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            "action": exportAllAction,
                            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',
                            className: "btn btn-default btn-sm",
                            title: title,
                            "action": exportAllAction,
                            exportOptions: {
                                columns: columnArray
                            },
                            customize: function(doc) {
                                doc.content.splice(0, 1);
                                //Create a date string that we use in the footer. Format is dd-mm-yyyy
                                var now     = new Date();
                                var jsDate  = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();

                                doc.pageMargins = [20, 60, 20, 30];
                                // Set the font size fot the entire document
                                doc.defaultStyle.fontSize = 7;
                                // Set the font size for the table header
                                doc.styles.tableHeader.fontSize = 7;

                                doc['header'] = (function () {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: [
                                                    { text: 'Manager Name : ', fontSize: 10 },
                                                    { text: managerName, fontSize: 10, color: 'red' }
                                                ],
                                                margin: [20, 20, 20, 0]
                                            },
                                            {
                                                alignment: 'center',
                                                text: [
                                                    { text: 'Account Brokerage Report', fontSize: 14 }
                                                ],
                                                margin: [10, 0, 0, 0]
                                            },
                                            {
                                                alignment: 'right',
                                                text: [
                                                    { text: 'Week Date : ', fontSize: 10 },
                                                    { text: moment().weekday(1).format('DD-MM-YYYY') + ' - ' + moment().weekday(5).format('DD-MM-YYYY'), fontSize: 10, color: 'red' }
                                                ],
                                                margin: [0, 20, 20, 20]
                                            }
                                        ],
                                        margin: [20, 10]
                                    }
                                });

                                doc['footer'] = (function (page, pages) {
                                    return {
                                        columns: [
                                            {
                                                alignment: 'left',
                                                text: ['Created on: ', { text: jsDate.toString() }]
                                            },
                                            {
                                                alignment: 'right',
                                                text: ['page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
                                            }
                                        ],
                                        margin: 20
                                    }
                                });

                                var objLayout = {};
                                objLayout['hLineWidth'] = function (i) { return .5; };
                                objLayout['vLineWidth'] = function (i) { return .5; };
                                objLayout['hLineColor'] = function (i) { return '#aaa'; };
                                objLayout['vLineColor'] = function (i) { return '#aaa'; };
                                objLayout['paddingLeft'] = function (i) { return 4; };
                                objLayout['paddingRight'] = function (i) { return 4; };

                                doc.content[0].table.widths = Array(columnArray.length).fill('*');
                                for (let i = 1; i < doc.content[0].table.body.length; i++) {
                                    for (let j = 0; j < doc.content[0].table.body[i].length; j++) {
                                        if (j < 2) {
                                            doc.content[0].table.body[i][j].alignment = 'left';
                                        } else {
                                            doc.content[0].table.body[i][j].alignment = 'right';
                                        }
                                    }
                                }

                                // Calculate totals for each column except the first two
                                let totals = Array(doc.content[0].table.body[0].length).fill(0);
                                for (let i = 1; i < doc.content[0].table.body.length; i++) {
                                    for (let j = 2; j < doc.content[0].table.body[i].length; j++) {
                                        let cellValue   = doc.content[0].table.body[i][j].text;
                                        let parsedValue = parseFloat(cellValue.replace(/,/g, '')); // Remove commas if any
                                        if (!isNaN(parsedValue)) {
                                            totals[j] += parsedValue;
                                        }
                                    }
                                }

                                // Create the total row
                                let totalRow = [{ text: 'Total', alignment: 'center', colSpan: 2, bold: true }];
                                for (let i = 1; i < 2; i++) {
                                    totalRow.push({});
                                }
                                for (let i = 2; i < totals.length; i++) {
                                    totalRow.push({ text: numberSeparator(totals[i], 2, 2), alignment: 'right', bold: true });
                                }

                                doc.content[0].table.body.push(totalRow);
                                doc.content[0].layout = objLayout;
                            }
                        }
                    ]
                }],
                ajax: {
                    url: url,
                    method: "GET",
                },
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                columns: dataColumns,
                order: [
                    [0, "ASC"]
                ],
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}",
                drawCallback: function (settings) {
                    let api             = this.api();
                    let totalRow        = $('<tr>').addClass('total-row');
                    let columnsLength   = api.columns().header().length;
                    
                    if (api.rows().data().length === 0) {
                        return; 
                    }

                    let totals = {};
                    api.rows().data().each(function (rowData) {
                        Object.keys(rowData).forEach(function (key, index) {
                            if (index >= 3) {
                                totals[key] = (totals[key] || 0) + (parseFloat(rowData[key]) || 0);
                            }
                        });
                    });

                    totalRow.append('<td colspan="2" class="text-center"><strong>Total</strong></td>');
                    api.columns().every(function (index) {
                        if (index >= 3) { // Skip the first two columns
                            let columnName = this.header().textContent.trim();
                            let totalValue = totals[columnName] || 0;
                            totalRow.append('<td class="text-center"><strong>' + numberSeparator(totalValue, 2, 2) + '</strong></td>');
                        }
                    });

                    if (api.page.info().page === api.page.info().pages - 1) {
                        $(api.table().body()).append(totalRow);
                    }
                }
            }, );

        }

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

        function initializeDataTable(managerId) {
            var dataColumns = [];
            var tableHeaders = '';
            var managerName = '';
            dataColumns.push({ data: 'managerLoginId', name: 'managerLoginId', visible: false});
            dataColumns.push({ name: 'loginId', data: 'loginId' });
            dataColumns.push({ name: 'name', data: 'name' });
            tableHeaders += `<th class="min-w-80px d-none">Manager</th>`;
            tableHeaders += `<th class="min-w-80px">Code</th>`; 
            tableHeaders += `<th class="min-w-80px">Name</th>`;
            if (groupColumns[managerId]) {
                groupColumns[managerId].forEach(function(column) {
                    var groupValue = column.cusGroup;
                    var groupRtn   = column.extraGroup;
                    dataColumns.push({ data: column.cusGroup, name: column.cusGroup, 
                        render: function(data, type, full, meta) {
                            var number = numberSeparator(full[groupValue], 2, 2) 
                            return number;
                        }
                    });
                    dataColumns.push({ data: column.extraGroup, name: column.extraGroup,
                        render: function(data, type, full, meta) {
                            var number = numberSeparator(full[groupRtn], 2, 2) 
                            return number;
                        }
                    });
                    managerName = column.managerLogin;
                    tableHeaders += `<th class="min-w-80px">${column.cusGroup}</th>`;
                    tableHeaders += `<th class="min-w-80px">${column.extraGroup}</th>`;
                });
            }

            if (symbolColumns[managerId]) {
                symbolColumns[managerId].forEach(function(symbol) {
                    var symbolValue = symbol.symbols;
                    dataColumns.push({ data: symbol.symbols, name: symbol.symbols,
                        render: function(data, type, full, meta) {
                            var number = numberSeparator(full[symbolValue], 2, 2) 
                            return number;
                        }
                    });
                    tableHeaders += `<th class="min-w-80px">${symbol.symbols}</th>`;
                });
            }

            var brokerageUrl = "{{ route('accountBrokerageData', ['id' => ':id']) }}";
            url              = managerId ? brokerageUrl.replace(':id', managerId) : brokerageUrl.replace('/data/:id', '/data');

            if ($.fn.DataTable.isDataTable(table)) {
                $(table).DataTable().destroy();
                $(table).empty(); // clear the table content
            }

            // Update headers
            $(table).append('<thead><tr class="text-center fw-bolder fs-7 text-uppercase gs-0">' + tableHeaders + '</tr></thead>');

            columns = Array.from({ length: dataColumns.length - 1 }, (_, i) => i + 1);

            makeDataTable(table, title, columns, dataColumns, url, managerName);
        }
        
        function getManagers() {
            var managerId = $("#managers").val();

            initializeDataTable(managerId);
            getManagerDropdown(managerId);
        }
        
        function clearManager() {
            managerId = null;

            initializeDataTable(managerId);
            getManagerDropdown(managerId);
        }
    </script>
@endsection