@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">
                    <form action="{{ route('allInOne') }}" method="post" id="dateRangeForm" onsubmit="showLoader()">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                    </form>
                    <!--begin::Card body-->
                    <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-50px">Login</th>
                                        <th class="min-w-100px">Profit</th>
                                        <th class="min-w-100px">Chamka</th>
                                        <th class="min-w-100px">Line Trade</th>
                                        <th class="min-w-100px">Ban Trade</th>
                                        <th class="min-w-100px">Position</th>
                                        <th class="min-w-100px">Position Cnt</th>
                                        <th class="min-w-100px">Prof. Position</th>
                                        <th class="min-w-100px">Intraday</th>
                                        <th class="min-w-100px">Same Q. Same Script</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 ajaxUrl = @json(route('allInOne'));
        const cat     = 'users';
        const token   = "{{ csrf_token() }}";

        const table     = $('#kt_table_reports');
        var fileName    = "All_In_One_Report";
        var title       = fileName + '_' + Date.now();
        var columns     = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        var managerId   = $("#managers").val();
        var start_date  = "{{ $start_date }}";
        var end_date    = "{{ $end_date }}";
        var dataColumns = [
            {
                data: 'loginId',
                name: 'accounts.loginId',
                render: function(data, type, full, meta) {
                    var url = "{{ route('lifeTimeBalance', ['loginId' => ':id']) }}".replace(':id', data);
                    return '<a target="_blank" class="text-black" href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'lifeTimePl',
                name: 'lifeTimePl.lifeTimeProfit',
                render: function(data, type, full, meta) {
                    if (data == '-' || data == undefined) {
                        return '<span class="text-muted">-</span>';
                    }

                    var textClass = data >= 0 ? 'text-success' : 'text-danger';
                    splitData     = data.toString().split('.');
                    return '<span class="'+textClass+'">' + splitData[0] + '</span>';
                }
            },
            {
                data: 'chamkaIgnored',
                name: 'chamka.chamkaIgnored',
                render: function(data, type, full, meta) {
                    var url                 = "javascript:void(0)";
                    var target              = '';
                    var totalChamkaActions  = full.chamkaIgnored + full.chamkaReverse;

                    if (totalChamkaActions > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('chamkaActionHistory') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data +'/'+ full.chamkaReverse +'/'+ totalChamkaActions + '</a>';
                }
            },
            {
                data: 'lineTradeIgnored',
                name: 'line_trade.lineTradeIgnored',
                render: function(data, type, full, meta) {
                    var url                     = "javascript:void(0)";
                    var target                  = '';
                    var totalLineTradeActions   = full.lineTradeIgnored + full.lineTradeReverse;

                    if (totalLineTradeActions > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('lineTradeActionHistory') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data +'/'+ full.lineTradeReverse +'/'+  totalLineTradeActions + '</a>';
                }
            },
            {
                data: 'totalBanTrades',
                name: 'ban_trade.totalBanTrades',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('banTrade') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'totalPositions',
                name: 'position.totalPositions',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('position') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'totalOpenPositions',
                name: 'openPosition.totalOpenPositions',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('openPositionHistory') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'totalProfPositions',
                name: 'profPosition.totalProfPositions',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('profitablePosition') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'totalIntraDay',
                name: 'intrady.totalIntraDay',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('intradayReport') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            },
            {
                data: 'totalSameQuantitySameScript',
                name: 'sameQuantitySameScript.totalSameQuantitySameScript',
                render: function(data, type, full, meta) {
                    var url     = "javascript:void(0)";
                    var target  = '';

                    if (data > 0) {
                        target  = "target='_blank'";
                        url     = "{{ route('sameQuantitySameScript') }}";

                        var queryParams = '?loginId='+ full.loginId +'&start_date='+ start_date +'&end_date='+ end_date;
                        url += queryParams;
                    }

                    return '<a '+target+' href="' + url + '">' + data + '</a>';
                }
            }
        ];

        $.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 reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title col-6'<'d-flex position-relative my-1'f>><'card-toolbar flex-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,
                serverSide: true,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::ALL_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": 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 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "{{ route('allInOne') }}",
                    method: "GET",
                    data: function(d) {
                        d.start_date    = "{{ $start_date }}";
                        d.end_date      = "{{ $end_date }}";
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                    }
                },
                columns: dataColumns,
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "ASC"]
                ],
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );
        }

        $(document).ready(function() {
            $('.card-toolbar').append(`<div class="input-group w-250px"><input class="form-control form-control-solid rounded rounded-end-0" 
                                        placeholder="Pick date range" id="kt_ip_flatpickr" /><button class="btn btn-icon btn-light" 
                                        id="kt_ip_flatpickr_clear"><span class="fas fa-times"></span></button></div>`);

                                        let element = document.querySelector("#kt_ip_flatpickr");
            let startDate, endDate;
            @if (isset($start_date) && $start_date !== '' && (isset($end_date) && $end_date !== ''))
                startDate = moment("{{ $start_date }}");
                endDate = moment("{{ $end_date }}");
            @else
                startDate = moment().subtract(30, 'days');
                endDate = moment();
            @endif

            var fp = $(element).flatpickr({
                altInput: !0,
                altFormat: "d/m/Y",
                dateFormat: "Y-m-d",
                mode: "range",
                defaultDate: [moment(startDate).format('Y-M-D'), moment(endDate).format('Y-M-D')],
                enable: [
                    {
                        from: moment().subtract(3, 'months').format('Y-M-D'),
                        to: "today"
                    },
                ],
                onChange: function (selectedDates, dateStr, instance) {
                    if (selectedDates.length === 2) {
                        var startDate = moment(selectedDates[0]).format('YYYY-MM-DD');
                        var endDate = moment(selectedDates[1]).format('YYYY-MM-DD');
                        $('#start_date').val(startDate);
                        $('#end_date').val(endDate);
                        $('#dateRangeForm').submit();
                    }
                },
            });

            document.querySelector("#kt_ip_flatpickr_clear").
                    addEventListener("click", (element) => {
                        startFormDate = moment();
                        if (moment(fp.selectedDates[0]).format('Y-M-D') != startFormDate.format('Y-M-D') || moment(fp.selectedDates[1]).format('Y-M-D') != startFormDate.format('Y-M-D')) { 
                            fp.setDate([startFormDate.format('Y-M-D'), startFormDate.format('Y-M-D')]);
                            var startDate = startFormDate.format('YYYY-MM-DD');
                            var endDate = startFormDate.format('YYYY-MM-DD');
                            $('#start_date').val(startDate);
                            $('#end_date').val(endDate);
                            $('#dateRangeForm').submit();
                        }
                    })
        });

        $(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"><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+'</option>';
                }).join('')}
            </select>
            </div>`);

            $('.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 = $('#kt_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('');
                    }
                });
            });
        });

        function showLoader() {
            var pageLoader = $('<div class="page-loader flex-column d-flex justify-content-center align-items-center bg-dark bg-opacity-25">' +
                '<span class="spinner-border text-primary" role="status"></span>' +
                '<span class="text-gray-800 fs-6 fw-semibold mt-5">Loading...</span>' +
                '</div>');
            $('html, body').animate({ scrollTop: 0 }, 'slow');
            $('body').append(pageLoader);
        }
    </script>
@endsection