@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('positionActionHistory') }}" 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-->
                    {{-- <div class="card-toolbar"> --}}
                    <!--begin::Toolbar-->
                    <!--begin::Modal - Add Note-->
                    <div class="modal fade" id="kt_modal_add_note" tabindex="-1" aria-hidden="true">
                        <!--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">
                                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                                        <span class="fa fa-times"></span>
                                        <!--end::Svg Icon-->
                                    </div>
                                    <!--end::Close-->
                                </div>
                                <!--begin::Modal header-->
                            </div>
                            <!--end::Modal content-->
                        </div>
                        <!--end::Modal dialog-->
                    </div>
                    <!--end::Modal - Add Note-->
                    <!--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-striped table-hover 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-80px">User Action</th>
                                                <th class="min-w-200px">Time</th>
                                                <th class="min-w-80px">Volume</th>
                                                <th class="min-w-80px">Symbol</th>
                                                <th class="min-w-80px">Price</th>
                                                <th class="min-w-150px">Low Price / Date</th>
                                                <th class="min-w-150px">High Price / Date</th>
                                                <th class="min-w-80px">Action</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 toolbar-->
                    {{-- </div> --}}
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <form action="{{ route('positionActionHistory') }}" 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-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 d-none">Position Note Id</th>
                                        <th class="min-w-80px">Id</th>
                                        <th class="min-w-200px">Time</th>
                                        <th class="min-w-80px">Login</th>
                                        <th class="min-w-80px">Credit</th>
                                        <th class="min-w-80px">Volume</th>
                                        <th class="min-w-80px">Symbol</th>
                                        <th class="min-w-80px">Price</th>
                                        <th class="min-w-150px">Low Price / Date</th>
                                        <th class="min-w-150px">High Price / Date</th>
                                        <th class="min-w-100px">Action</th>
                                        <th class="min-w-100px">User Action</th>
                                        <th class="min-w-400px text-start">note</th>
                                        <th class="min-w-100px">Actions</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('positionActionHistory'));
        const cat     = 'users';
        const token   = "{{ csrf_token() }}";

        const table   = $('#kt_table_reports');
        var fileName  = "Action_History_Position";
        var title     = fileName + '_' +Date.now();
        var columns   = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        var managerId = $("#managers").val();

        var dataColumns = [
            {
                data: 'id', // Position Notes Table Id
                name: 'id',
                visible: false
            },    
            {
                data: 'positionId',
                name: 'positionId'
            },
            {
                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: 'loginId',
                name: 'loginId'
            },
            {
                data: 'credit',
                name: 'credit'
            },
            {
                data: 'volume',
                name: 'volume',
                render: function(data, type, full, meta) {
                    var divideValue = "{{ CommonConstants::POSITION_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: 'lowPrice',
                name: 'lowPrice',
                render: function(data, type, full, meta) {
                    return full.lowPrice + ' / ' + full.lowPriceDate;
                }
            },
            {
                data: 'highPrice',
                name: 'highPrice',
                render: function(data, type, full, meta) {
                    return full.highPrice + ' / ' + full.highPriceDate;
                }
            },
            {
                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>';
                }
            },
            {
                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 reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title col-5'<'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,
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Position Action History",
                    search: ""
                },
                select: {
                    style: 'multi',
                    selector: 'td:first-child div input'
                },
                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 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "{{ route('positionActionHistory') }}",
                    method: "GET",
                    data: {
                        start_date: "{{ $start_date }}",
                        end_date: "{{ $end_date }}",
                    }
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                drawCallback: function(settings) {
                    if ($('#kt_table_reports').DataTable().rows({selected: true, page: 'current'}).count() == 0) {
                        $('#ignore_button').addClass('d-none');
                    } else {
                        $('#ignore_button').removeClass('d-none');
                    }
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                order: [
                    [0, "desc"]
                ],
                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>
            <button class="btn btn-sm btn-primary d-none" id="ignore_button" onclick=reportList() data-bs-toggle="modal" data-bs-target="#kt_modal_add_note">Ignore / Delete</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_reports').DataTable().ajax.reload();
                    interval = setInterval(function(reloadAjex) {
                        $('#kt_table_reports').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_reports').DataTable().ajax.reload();
                setTimeout(function() {
                    $('#singleLoader').removeClass('loader');
                    $('#singleReload').removeClass('active btn-active-light-primary')
                }, "{{ CommonConstants::SINGLE_RELOAD_TIME }}");
            });

            $('table').on('click', '.form-check-input', function() {
                var isChecked = $(this).prop('checked');
                if (isChecked) {
                    if ($('#kt_table_reports').DataTable().rows('.selected').count() >= 0) {
                        $('#ignore_button').removeClass('d-none');
                    } 
                } else {
                    if ($('#kt_table_reports').DataTable().rows('.selected').count() <= 1) {
                        $('#ignore_button').addClass('d-none');
                    } 
                }
            });
        });

        function select_all() {
            if ($('#select_all').prop('checked')) {
                $('#kt_table_reports').DataTable().rows({page: 'current'}).select();
                $('.bulk-action').prop( "checked", true);
            } else {
                $('#kt_table_reports').DataTable().rows({page: 'current'}).deselect();
                $('.bulk-action').prop( "checked", false);
            }
        }

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

            var table = $('#kt_table_notes').DataTable({
                serverSide: true,
                paging: false,
                bInfo: false,
                destroy: true,
                ajax: "position-note/" + reportId,
                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::POSITION_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: 'lowPrice',
                        name: 'lowPrice',
                        render: function(data, type, full, meta) {
                            return full.lowPrice + ' / ' + full.lowPriceDate;
                        }
                    },
                    {
                        data: 'highPrice',
                        name: 'highPrice',
                        render: function(data, type, full, meta) {
                            return full.highPrice + ' / ' + full.highPriceDate;
                        }
                    },
                    {
                        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
                    },
                ],
                ordering: false,

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

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

            $('.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="Select 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>`);

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

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

                var table = $('#kt_table_reports').DataTable();
                table.ajax.url(url).load();
            });
        });
    </script>
@endsection