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

    
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Post-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <!--begin::Container-->
            <div id="kt_content_container" class="container-xxl">
                <!--begin::Card-->
                <div class="card card-flush">
                    <!--begin::Card header-->
                    <!--begin::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-200px">Note</th>
                                                <th class="min-w-100px">User Action</th>
                                                <th class="min-w-100px">Date</th>
                                                <th class="min-w-100px">Volume</th>
                                                <th class="min-w-150px">Symbol</th>
                                                <th class="min-w-150px">Price</th>
                                                <th class="min-w-100px">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-->
                    <!--end::Card toolbar-->
                    {{-- </div> --}}
                    <!--end::Card header-->
                    <!--begin::Card body-->
                    <form action="{{ route('sameQuantitySameScript') }}" 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">
                                <!--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-50px d-none">Same Quantity Same Script Note Id</th>
                                        <th class="min-w-50px">Id</th>
                                        <th class="min-w-100px">Date</th>
                                        <th class="min-w-100px">Login</th>
                                        <th class="min-w-100px">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">Action</th>
                                        <th class="min-w-100px">User Action</th>
                                        <th class="min-w-400px text-start">note</th>
                                        <th class="min-w-100px">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 table    = $('#kt_table_action_history');
        const fileName = "Action_History_Same_Quantity_Same_Script";
        const title    = fileName + '_' +Date.now();
        const columns  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        var managerId  = $("#managers").val();

        const dataColumns = [
            {
                data: 'id', // Same Quantity Same Script Notes Table Id
                name: 'same_quantity_script_notes.id',
                visible: false
            },
            {
                data: 'sameQuantityScriptId',
                name: 'same_quantity_script_details.sameQuantityScriptId',
            },
            {
                data: 'time',
                name: 'same_quantity_script_details.time',
                render: function(data, type, full, meta) {
                    var time = new Date(full.time);
                    var formattedDate = time.toISOString().split('T')[0];

                    return formattedDate;
                }
            },
            {
                data: 'loginId',
                name: 'same_quantity_script_details.loginId'
            },
            {
                data: 'credit',
                name: 'same_quantity_script_details.credit'
            },
            {
                data: 'volume',
                name: 'same_quantity_script_details.volume',
                render: function(data, type, full, meta) {
                    var divideValue = "{{ CommonConstants::SAME_QUANTITY_SAME_SCRIPT['DIVIDE_VALUE'] }}";
                    var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                    return volume;
                }
            },
            {
                data: 'symbol',
                name: 'same_quantity_script_details.symbol'
            },
            {
                data: 'price',
                name: 'same_quantity_script_details.price',
                render: function(data, type, full, meta) {
                    return full.price.toFixed(2);
                }
            },
            {
                data: 'actionName',
                name: 'same_quantity_script_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: 'status',
                name: 'same_quantity_script_notes.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: 'same_quantity_script_notes.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>>",
                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 Same Quantity Same Script Action History",
                    search: ""
                },
                buttons: [{
                    extend: "collection",
                    className: "exportButton",
                    text: "<i class='fa fa-download'></i> Export",
                        buttons: [
                        {
                            extend: "excelHtml5",
                            text: "Export",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5",
                            title: title,
                            "action": exportAllAction,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "csvHtml5",
                            text: "CSV",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "pdfHtml5",
                            text: 'Pdf',
                            className: "btn btn-default btn-sm d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                ajax: {
                    url: "{{ route('sameQuantitySameScriptActionHistory') }}",
                    method: "GET",
                    data: {
                        start_date: "{{ $start_date }}",
                        end_date: "{{ $end_date }}",
                    }
                },
                columns: dataColumns,
                rowCallback: function(row, data) {
                    var lastDigit = data.sameQuantityScriptId.toString().slice(-1);

                    $(row).addClass('color' + lastDigit + ' text-center');
                },
                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>`);

            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(reportId) {
            $('#loader').show();
            $('#kt_table_notes').hide();

            var table = $('#kt_table_notes').DataTable({
                serverSide: true,
                paging: false,
                bInfo: false,
                destroy: true,
                ajax: "same-quantity-same-script-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 = new Date(full.time);
                            var formattedDate = time.toISOString().split('T')[0];

                            return formattedDate;
                        }
                    },
                    {
                        data: 'volume',
                        name: 'volume',
                        render: function(data, type, full, meta) {
                            var divideValue = "{{ CommonConstants::SAME_QUANTITY_SAME_SCRIPT['DIVIDE_VALUE'] }}";
                            var volume = (full.volume && full.volume > 0) ? full.volume / divideValue : full.volume;
                            return volume;
                        }
                    },
                    {
                        data: 'symbol',
                        name: 'symbol'
                    },
                    {
                        data: 'price',
                        name: 'price',
                        render: function(data, type, full, meta) {
                            return full.price.toFixed(2);
                        }
                    },
                    {
                        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>';
                        }
                    },
                ],
                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('sameQuantitySameScriptActionHistory', ['managerId' => ':id']) }}".replace(':id', managerId);
                } else {
                    url = "{{ route('sameQuantitySameScriptActionHistory') }}";
                }

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

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