@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('suspectedLineTrade') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                        <input type="hidden" name="selected_range" id="selected_range">
                    </form> --}}
                    <!--begin::Card header-->
                    {{-- <div class="card-header align-items-center py-5 gap-2 gap-md-5"> --}}
                    <!--begin::Card title-->
                    {{-- <div class="card-title">
                            <!--begin::Search-->
                            <div class="d-flex align-items-center position-relative my-1">
                                <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                                <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none">
                                        <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                            rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                        <path
                                            d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                            fill="black" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                                <input type="text" name="name" data-kt-user-table-filter="search"
                                    id="reports-table-search" class="form-control form-control-solid w-250px ps-14"
                                    placeholder="Search Report" />
                                <div id="kt_ecommerce_report_views_export" class="d-none"></div>
                            </div>
                            <!--end::Search-->
                        </div> --}}
                    <!--begin::Card title-->
                    {{-- <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                            
                            <!--begin::Daterangepicker(container-fluid d-flex flex-stack in src/js/layout/app.js)-->
                            <div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4">
                                <!--begin::Display range-->
                                <div class="text-gray-600 fw-bolder calendar_text">Loading date range...</div>
                                <!--end::Display range-->
                                <!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
                                <span class="svg-icon svg-icon-1 ms-2 me-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path opacity="0.3" d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z" fill="black" />
                                        <path d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z" fill="black" />
                                        <path d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z" fill="black" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Daterangepicker-->
                        </div> --}}
                    <!--begin::Card toolbar-->
                    <!--end::Card toolbar-->
                      <!--begin::Modal - Note Listing-->
                      <div class="modal fade" id="kt_modal_note_listing" tabindex="-1" aria-hidden="true">
                        <!--begin::Modal dialog-->
                        <div class="modal-dialog modal-fullscreen p-9">
                            <!--begin::Modal content-->
                            <div class="modal-content modal-rounded">
                                <!--begin::Modal header-->
                                <div class="modal-header">
                                    <!--begin::Modal title-->
                                    <span></span>
                                    <h3>Notes</h3>
                                    <!--end::Modal title-->
                                    <!--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>
                                <!--end::Modal header-->
                                <!--begin::Modal body-->
                                <div class="modal-body scroll-y m-5">
                                    <!--begin::Loader-->
                                    <div id="loader" style="display: none;">
                                        <div class="d-flex justify-content-center">
                                            <div class="spinner-border text-gray-800" role="status">
                                                <span class="visually-hidden">Loading...</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!--end::Loader-->
                                    <!--begin::Notes Table-->
                                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_notes">
                                        <!--begin::Table head-->
                                        <thead>
                                            <!--begin::Table row-->
                                            <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                                <th class="min-w-400px">Note</th>
                                                <th class="min-w-100px">User Action</th>
                                                <th class="min-w-200px">Time</th>
                                                <th class="min-w-100px">Volume</th>
                                                <th class="min-w-100px">Symbol</th>
                                                <th class="min-w-100px">Price</th>
                                                <th class="min-w-100px">Profit</th>
                                                <th class="min-w-100px">Avg Vol</th>
                                                <th class="min-w-150px">Curr Vol</th>
                                                <th class="min-w-150px">Avg X</th>
                                                <th class="min-w-100px">Action</th>
                                                <th class="min-w-100px">Entry</th>
                                            </tr>
                                            <!--end::Table row-->
                                        </thead>
                                        <!--end::Table head-->
                                        <!--begin::Table body-->
                                        <tbody class="text-gray-600 fw-bold">
                                        </tbody>
                                        <!--end::Table body-->
                                    </table>
                                    <!--end::Notes Table-->
                                </div>
                                <!--end::Modal body-->
                            </div>
                            <!--end::Modal content-->
                        </div>
                        <!--end::Modal dialog-->
                    </div>
                    <!--end::Modal - Note Listing-->
                    {{-- </div> --}}
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    {{-- <form action="{{ route('confirmedLineTrade') }}" method="post" id="dateRangeForm">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date">
                        <input type="hidden" name="end_date" id="end_date">
                        <input type="hidden" name="selected_range" id="selected_range">
                    </form> --}}
                    <!--begin::Daterangepicker(container-fluid d-flex flex-stack in src/js/layout/app.js)-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_action_history">
                                <input type="hidden" id="moduleId" name="moduleId" value="{{$moduleId->id}}">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        {{-- <th class="w-10px pe-2">
                                            <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                                <input class="form-check-input" type="checkbox" data-kt-check="true"
                                                    data-kt-check-target="#kt_table_action_history .form-check-input"
                                                    value="1" />
                                            </div>
                                        </th> --}}
                                        <th class="min-w-80px d-none">Line Trade Note Id</th>
                                        <th class="min-w-80px">Id</th>
                                        <th class="min-w-80px">M to M</th>
                                        <th class="min-w-200px">Time</th>
                                        <th class="min-w-80px">Login</th>
                                        <th class="min-w-80px d-none">Credit</th>
                                        <th class="min-w-80px">Volume</th>
                                        <th class="min-w-100px">Symbol</th>
                                        <th class="min-w-80px">Price</th>
                                        <th class="min-w-80px">Profit</th>
                                        <th class="min-w-80px">Avg Vol</th>
                                        <th class="min-w-80px">Curr Vol</th>
                                        <th class="min-w-80px">Avg X</th>
                                        <th class="min-w-100px">Action</th>
                                        <th class="min-w-100px">Entry</th>
                                        <th class="min-w-100px">User Action</th>
                                        <th class="min-w-400px text-start">note</th>
                                        <th class="min-w-200px">Action</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 ajaxUrl       = @json(route('lineTradeActionHistory'));
        const token         = "{{ csrf_token() }}";
        const table         = $('#kt_table_action_history');
        const fileName      = "Action_History_Line_Trade";
        var title           = fileName + '_' +Date.now();
        const columns       = [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
        var managerId       = $("#managers").val();
        var defaultLoginId  = "{{$loginId}}";
        var start_date      = "{{ $showAllData }}" == 'true'  ? "{{$defaultStartDate}}" : "{{ $start_date }}";
        var end_date        = "{{ $showAllData }}" == 'true'  ? "{{$defaultEndDate}}" : "{{ $end_date }}";

        const dataColumns = [
            // {
            //     data: 'checkbox',
            //     name: 'checkbox',
            //     orderable: false,
            //     searchable: false,
            //     render: function(data, type, full, meta) {
            //         return '<div class="form-check form-check-sm form-check-custom form-check-solid">' +
            //             '<input class="form-check-input" type="checkbox" value="1" />' +
            //             '</div>';
            //     }
            // },
            {
                data: 'id', // Line Trade Notes Id
                name: 'id',
                visible: false
            },
            {
                data: 'lineTradeId',
                name: 'lineTradeId'
            },
            {
                data: 'mtom',
                name: 'line_trade_details.mtom'
            },
            {
                data: 'time',
                name: 'line_trade_details.time',
                render: function(data, type, full, meta) {
                    var time = moment(full.time).format("{{ CommonConstants::TIME_FORMATE }}");
                    return '<div class="mb-2 fw-bolder">' + time + '</div>';
                }
            },
            {
                data: 'loginId',
                name: 'line_trade_details.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: 'credit',
                name: 'line_trade_details.credit',
                visible: false
            },
            {
                data: 'volume',
                name: 'line_trade_details.volume',
                render: function(data, type, full, meta) {
                    var divideValue = "{{ CommonConstants::LINE_TRADE_REPORT['DIVIDE_VALUE'] }}";
                    var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                    return volume;
                }
            },
            {
                data: 'symbol',
                name: 'line_trade_details.symbol'
            },
            {
                data: 'price',
                name: 'line_trade_details.price'
            },
            {
                data: 'profit',
                name: 'line_trade_details.profit'
            },
            {
                data: 'preAvgVolume',
                name: 'line_trade_details.preAvgVolume',
                render: function(data, type, full, meta) {
                    return full.preAvgVolume;
                }
            },
            {
                data: 'avgVolume',
                name: 'line_trade_details.avgVolume',
                render: function(data, type, full, meta) {
                    return full.avgVolume;
                }
            },
            {
                data: 'avgX',
                name: 'line_trade_details.avgVolume',
                render: function(data, type, full, meta) {
                    var x = ((full.preAvgVolume && full.preAvgVolume > 0) && (full.avgVolume && full.avgVolume > 0)) ? (full.avgVolume / full.preAvgVolume).toFixed(2) : 0;
                    return x;
                }
            },
            {
                data: 'actionName',
                name: 'line_trade_details.action',
                render: function(data, type, full, meta) {
                    var className = full.actionName == 1 ? 'danger' : 'success';
                    var label = full.actionName == 1 ? 'SELL' : 'BUY';
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                }
            },
            {
                data: 'entry',
                name: 'line_trade_details.entry',
                render: function(data, type, full, meta) {
                    var className = full.entry == 1 ? 'danger' : 'success';
                    var label = full.entry == 1 ? 'EXIT' : 'ENTRY';
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function(data, type, full, meta) {
                    var statusClassName = full.status == 1 ? 'success' : (full.status == 2 ? 'warning' : 'danger');
                    var statusLabel     = full.status == 1 ? 'ACTIVATE' : (full.status == 2 ? 'IGNORE' : 'DELETE');
                    return '<div class="badge badge-light-' + statusClassName + '">' + statusLabel + '</div>';
                }
            },
            {
                data: 'notes',
                name: 'notes',
                render: function(data, type, full, meta) {
                    return '<div class="text-start">' + (full.notes ? full.notes : '') + '</div>';
                }
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false
            },
        ];
        $.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 initialOrder = "{{ $showAllData }}" == 'true' ? [1, "desc"] : [0, "desc"];

            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>>",
                // dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title'<'d-flex position-relative my-1'f>>>" +
                //     "<'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 Line Trade Action History",
                    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('lineTradeActionHistory') }}",
                    method: "GET",
                    data: function(d) {
                        d.start_date    = start_date;
                        d.end_date      = end_date;
                        d.loginId       = defaultLoginId;
                        d.showAllData   = "{{ $showAllData }}";
                        d.managerId     = $("#managers").val();
                        d.userId        = $("#users").val();
                    }
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    var lastDigit = data.lineTradeId.toString().slice(-1);
                    $(row).addClass('color' + lastDigit + ' text-center');
                },
                order: initialOrder,
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );
        }
        $(document).ready(function() {
            $('.card-toolbar').append(`<div data-kt-daterangepicker="true" data-kt-daterangepicker-opens="left" class="btn btn-sm btn-light d-flex align-items-center px-4 d-none"><div class="text-gray-600 fw-bolder calendar_text">Loading date range...</div>
            <span class="far fa-calendar fa-lg"></span></div>
            <div class="form-check form-switch form-check-custom form-check-solid" title="Reload data every minute">
            <label class="form-check-label fw-bold text-gray-400" for="reloadButton">Auto Refresh</label>
            <input class="form-check-input ms-3" type="checkbox" value="" id="reloadButton">
            </div>
            <button class="btn btn-sm btn-icon btn-light" data-bs-toggle="tooltip" data-bs-placement="top" title="Reload" data-bs-original-title="Reload" id="singleReload">
            <span class="fas fa-sync-alt" id="singleLoader"></span>
            </button>`);
            
            let element = document.querySelector('[data-kt-daterangepicker="true"]');
            let start, end;
            @if (isset($start_date) && $start_date !== '' && (isset($end_date) && $end_date !== ''))
                start = moment("{{ $start_date }}");
                end = moment("{{ $end_date }}");
            @else
                start = moment();
                end = moment();
            @endif
            // element.querySelector('div').innerHTML = start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY');
            function cb(start, end) {
                var display = element.querySelector('div');
                if (display) {
                    display.innerHTML = start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY');
                    let start_date = start.format("YYYY-MM-DD");
                    let end_date = end.format("YYYY-MM-DD");
                    // Access the current selected range text
                    let selectedRange = $(element).data('daterangepicker').chosenLabel;
                    $('#start_date').val(start_date);
                    $('#end_date').val(end_date);
                    $('#selected_range').val(selectedRange);
                    $('#dateRangeForm').submit();
                }
            }
            $(element).daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    "Today": [moment(), moment()],
                    "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                    "Last 7 Days": [moment().subtract(6, "days"), moment()],
                    "Last 30 Days": [moment().subtract(29, "days"), moment()],
                    "This Month": [moment().startOf("month"), moment().endOf("month")],
                    "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1,
                        "month").endOf("month")]
                }
            }, cb);

            var reloadPage = false;
            var interval;
            $("#reloadButton").click(function(reloadAjex) {
                
                if (!reloadPage) {
                    reloadPage = true;
                    $('#kt_table_action_history').DataTable().ajax.reload();
                    interval = setInterval(function(reloadAjex) {
                        $('#kt_table_action_history').DataTable().ajax.reload();
                    }, "{{ CommonConstants::AUTO_RELOAD_TIME }}");
                } else {
                    reloadPage = false;
                    clearInterval(interval);
                }
            });

            $("#singleReload").click(function() {
                $(this).addClass('active btn-active-light-primary')
                $('#singleLoader').addClass('loader');
                $('#kt_table_action_history').DataTable().ajax.reload();
                setTimeout(function() {
                    $('#singleLoader').removeClass('loader');
                    $('#singleReload').removeClass('active btn-active-light-primary')
                }, "{{ CommonConstants::SINGLE_RELOAD_TIME }}");
            });
        });

        function notesList(loginId) {
            $('#loader').show();
            $('#kt_table_notes').hide();

            var table = $('#kt_table_notes').DataTable({
                serverSide: true,
                paging: false,
                bInfo: false,
                destroy: true,
                ajax: "line-trade-note/" + loginId,
                columns: [{
                        data: 'notes',
                        name: 'notes',
                    },
                    {
                        data: 'status',
                        name: 'status',
                        render: function(data, type, full, meta) {
                            var statusClassName = data == 1 ? 'success' : (data == 2 ? 'warning' : 'danger');
                            var statusLabel     = data == 1 ? 'ACTIVATE' : (data == 2 ? 'IGNORE' : 'DELETE');
                            return '<div class="badge badge-light-' + statusClassName + '">' + statusLabel + '</div>';
                        }
                    },
                    {
                        data: 'time',
                        name: 'time',
                        render: function(data, type, full, meta) {
                            var time = moment(full.time).format("{{ CommonConstants::TIME_FORMATE }}");
                            return '<div class="mb-2 fw-bolder">' + time + '</div>';
                        }
                    },
                    {
                        data: 'volume',
                        name: 'volume',
                        render: function(data, type, full, meta) {
                            var divideValue = "{{ CommonConstants::LINE_TRADE_REPORT['DIVIDE_VALUE'] }}";
                            var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                            return volume;
                        }
                    },
                    {
                        data: 'symbol',
                        name: 'symbol'
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'profit',
                        name: 'profit'
                    },
                    {
                        data: 'preAvgVolume',
                        name: 'preAvgVolume',
                        render: function(data, type, full, meta) {
                            return full.preAvgVolume;
                        }
                    },
                    {
                        data: 'avgVolume',
                        name: 'avgVolume',
                        render: function(data, type, full, meta) {
                            return full.avgVolume;
                        }
                    },
                    {
                        data: 'avgX',
                        name: 'line_trade_details.preAvgVolume',
                        render: function(data, type, full, meta) {
                            var x = ((full.preAvgVolume && full.preAvgVolume > 0) && (full.avgVolume && full.avgVolume > 0)) ? (full.avgVolume / full.preAvgVolume).toFixed(2) : 0;
                            return x;
                        }
                    },
                    {
                        data: 'actionName',
                        name: 'actionName',
                        render: function(data, type, full, meta) {
                            var className = full.actionName == 1 ? 'danger' : 'success';
                            var label = full.actionName == 1 ? 'SELL' : 'BUY';
                            return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                        },
                        searchable: false
                    },
                    {
                        data: 'entry',
                        name: 'entry',
                        render: function(data, type, full, meta) {
                            var className = full.entry == 1 ? 'danger' : 'success';
                            var label = full.entry == 1 ? 'EXIT' : 'ENTRY';
                            return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                        }
                    },
                ],
                ordering: false,

                initComplete: function() {
                    $('#kt_table_notes').show();
                    $('#loader').hide();
                }
            });
        };

        $(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 ${"{{ $showAllData }}" == 'true' ? 'disabled-users-dropdown' : ''}"><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>`);

            if ("{{ $showAllData }}" == 'true') {
                $("#users").prop("disabled", true).css("cursor", "not-allowed");
            } else {
                $("#users").prop("disabled", false).css("cursor", "default");
            }

            // 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_action_history').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('');
                    }
                });
            });
        });
    </script>
@endsection