@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">
                    <!--begin::Card body-->
                    <form action="{{ route('lifeTimeBalance') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                    </form>
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle table-row-dashed fs-6 gy-5" id="lifeTimeBalanceList">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Week</th>
                                        <th class="min-w-100px">Profit</th>
                                    </tr>
                                    <!--end::Table row-->
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </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         = $('#lifeTimeBalanceList');
        var fileName        = "Life_Time_Balance";
        var title           = fileName + '_' +Date.now();
        var columns         = [0, 1];
        var symbolColumns   = @json($symbolColumns ?? []);
        var userId          = "{{ $loginId }}" != '' ? "{{ $loginId }}" : $("#users").val();
        var url;

        if (userId !== undefined && userId !== null) {
            url = "{{ route('lifeTimeBalance', ['loginId' => ':id']) }}".replace(':id', userId);
        } else {
            url = "{{ route('lifeTimeBalance') }}";
        }

        if (url.endsWith('/')) {
            url = url.slice(0, -1);
        }

        var dataColumns = [
            {
                data: 'date',
                name: 'date',
                render: function(data, type, full, meta) {
                    return 'Week ' + (meta.row + 1) + '<br/>(' + data + ')';
                },
                orderable: false,
            },
            {
                data: 'profit',
                name: 'profit',
                render: function(data, type, full, meta) {
                    var textClass = full.profit > 0 ? 'text-success' : 'text-danger';
                    return '<span class="'+textClass+'">' + full.profit.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + '</span>';
                },
                orderable: false,
            }
        ];

        symbolColumns.forEach(function(symbol) {
            $('#lifeTimeBalanceList tr').append('<th class="min-w-50px">' + symbol + '</th>');
            
            dataColumns.push({
                data: symbol,
                name: symbol,
                render: function(data, type, full, meta) {
                    if (data == '-' || data == undefined) {
                        return '<span class="text-muted">-</span>';
                    }

                    var textClass = data >= 0 ? 'text-success' : 'text-danger';
                    return '<span class="'+textClass+'">' + parseFloat(data).toFixed(2) + '%</span>';
                },
                orderable: false,
            });

            columns.push(dataColumns.length - 1);
        });

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

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

        function makeDataTable(table, title, columnArray, dataColumns) {

            var lifeTimeProfit  = 0;

            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title col-md-4'<'d-flex position-relative my-1'f>>"+
                        "<'#lifeTimeBalance.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,
                serverSide: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search",
                    search: ""
                },
                buttons: [{
                        extend: "collection",
                        className: "exportButton",
                        text: "<i class='fa fa-download'></i>",
                            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": exportLifeTimeProfit,
                                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 d-none",
                                title: title,
                                exportOptions: {
                                    columns: columnArray
                                }
                            }
                        ]
                    }],
                ajax: {
                    url: url,
                    method: "GET"
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');

                    if (lifeTimeProfit == 0) {
                        lifeTimeProfit  = data.lifeTimeProfit;
                    }
                },
                drawCallback: function() {
                    if (lifeTimeProfit != 0) {
                        var textClass = lifeTimeProfit > 0 ? 'open-position-text-success' : 'open-position-text-danger';
                        $('#lifeTimeBalance').html('<span class="text-start fw-bolder fs-3 gs-0 text-center">Life Time Balance : <span class="'+textClass+'">' + numberSeparator(lifeTimeProfit) + '</span></span>');
                    } else {
                        $('#lifeTimeBalance').html('');
                    }

                    lifeTimeProfit = 0;
                },
                order: [],
            }, );
        }

        $(document).ready(function() {
            var users   = @json($users);

            $('.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="Users" id="users" data-allow-clear="true">
                <option></option>
                ${users.map(loginId => {
                    var selected = userId == loginId ? 'selected' : '';
                    return '<option value="'+loginId+'" '+selected+'>'+loginId+'</option>';
                }).join('')}
            </select>
            </div>`);

            $('#users').on('change', function() {
                userId = $("#users").val();
                if (userId !== undefined && userId !== null) {
                    url = "{{ route('lifeTimeBalance', ['loginId' => ':id']) }}".replace(':id', userId);
                } else {
                    url = "{{ route('lifeTimeBalance') }}";
                }

                if (url.endsWith('/')) {
                    url = url.slice(0, -1);
                }

                var table = $('#lifeTimeBalanceList').DataTable();
                table.ajax.url(url).load();
            });
        });

        function exportLifeTimeProfit(e, dt, node, config) {
            const exportUrl = "{{ route('exportUserLifeTimeBalance') }}";
            window.location.href = exportUrl;
        }
    </script>
@endsection