@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('showOpenSymbolHistory') }}" method="post" id="dateRangeForm" onsubmit="showLoader()">
                        @csrf
                        <input type="hidden" name="start_date" id="start_date" value="{{ $start_date }}">
                    </form>
                    <!--begin::Card header-->
                    <!--begin::Card body-->
                    <div class="card-body py-4">
                        <div class="modal fade" id="kt_modal_symbol_wise_open_position_history" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-fullscreen p-9">
                                <div class="modal-content modal-rounded">
                                    <div class="modal-header">
                                        <span></span>
                                        <h4>Open Positions</h4>
                                        <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                                            <span class="fa fa-times"></span>
                                        </div>
                                    </div>
                                    <div class="modal-body scroll-y">
                                        <div id="position_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>
                                        <table class="table table-striped align-middle table-hover fs-6 gy-3" id="kt_table_symbol_wise_open_positions">
                                            <thead>
                                                <tr class="text-start fw-bolder fs-7 text-uppercase gs-0">
                                                    <th class="min-w-100px">Login</th>
                                                    <th class="min-w-100px">Position</th>
                                                    <th class="min-w-150px">Symbol</th>
                                                    <th class="min-w-150px">Time</th>
                                                    <th class="min-w-100px text-center">Type</th>
                                                    <th class="min-w-80px text-end">Volume</th>
                                                    <th class="min-w-150px text-end">Price</th>
                                                    <th class="min-w-150px text-end">Current Price</th>
                                                    {{-- <th class="min-w-150px">Reason</th> Need to add this after getting details from client --}}
                                                    <th class="min-w-150px text-end">Profit</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_symbol_wise_position_counter_history">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-125px">Date</th>
                                        <th class="min-w-125px">Symbol</th>
                                        <th class="min-w-200px">Counter</th>
                                        <th class="min-w-80px">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 token   = "{{ csrf_token() }}";
        const table   = $('#kt_table_symbol_wise_position_counter_history');
        var fileName  = "symbol_wise_open_position_counter_history";
        var title     = fileName + '_' +Date.now();
        var columns   = [0, 1, 2];

        var dataColumns = [
            {
                data: 'date',
                name: 'date'
            },
            {
                data: 'Symbol',
                name: 'Symbol'
            },
            {
                data: 'counter',
                name: 'counter',
                searchable: false
            },
            {
                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'<'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 Open Position Counter 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('showOpenSymbolHistory') }}",
                    method: "GET",
                    data: function(d) {
                        d.start_date    = $('#start_date').val(); 
                        d.symbolName    = $("#symbols").val();
                                               
                    }
                },
                columns: dataColumns,
                order: [
                    [1, "asc"]
                ],
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );

        }
        $(document).ready(function() {
            var symbols     = @json($symbols);
            var symbolName  = $("#symbols").val();

            $('.card-title').append(`
                <div class="w-100 d-flex ms-2" id="symbolFilterDiv">
                    <select class="js-example-basic-multiple form-select form-select-solid multi-select-option"
                        data-placeholder="Select Symbol" id="symbols" data-allow-clear="true">
                        <option value=""></option>
                        ${symbols.map(symbol => {
                            var selected = symbolName == symbol ? 'selected' : '';
                            return '<option value="'+symbol+'" '+selected+'>'+symbol+'</option>';
                        }).join('')}
                    </select>
                </div>
            `);

            @hasrole(CommonConstants::ADMIN_ROLES['MANAGER_ADMIN'])
                $('#symbolFilterDiv').addClass('d-none');
            @endhasrole

            // Reload DataTable when dropdown changes
            var reloadTimeout;
            $('#symbols').on('change', function() {
                clearTimeout(reloadTimeout);

                reloadTimeout = setTimeout(function() {
                    $('#kt_table_symbol_wise_position_counter_history').DataTable().ajax.reload();
                }, 500);
            });
        });

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

            let element = document.querySelector("#kt_ip_flatpickr");
            let selectedDate;

            @if (isset($start_date) && $start_date !== '')
                selectedDate = moment("{{ $start_date }}");
            @else
                selectedDate = moment();
            @endif

            var fp = $(element).flatpickr({
                altInput: !0,
                altFormat: "d/m/Y",
                dateFormat: "Y-m-d",
                defaultDate: selectedDate.format('Y-M-D'),
                maxDate: moment().toDate(),
                onChange: function(selectedDates) {
                    if (selectedDates.length == 1) {
                        let formattedDate = moment(selectedDates[0]).format('YYYY-MM-DD');
                        $('#start_date').val(formattedDate);
                        $('#dateRangeForm').submit();
                    }
                },
            });

            document.querySelector("#kt_ip_flatpickr_clear").addEventListener("click", () => {
                var currentDate = moment();

                if (moment(fp.selectedDates[0]).format('Y-M-D') !== currentDate.format('Y-M-D')) {
                    fp.setDate(currentDate.toDate());
                    $('#start_date').val(currentDate.format('YYYY-MM-DD'));
                    $('#dateRangeForm').submit();
                }

                fp.setDate(moment(fp.selectedDates[0]).format('Y-M-D'));
            });
        });

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

        function symbolOpenPositionHistoryList(symbol) {
            $('#position_loader').show();
            $('#kt_table_symbol_wise_open_positions').hide();
            var url         = "{{route('showOpenPositionSymbolHistory', ':symbolName')}}";
            var requestUrl  = url.replace(':symbolName', symbol);

            if ($('#kt_table_symbol_wise_open_positions').DataTable().settings()[0].jqXHR != null) {
                $('#kt_table_symbol_wise_open_positions').DataTable().settings()[0].jqXHR.abort();
            }

            var table = $('#kt_table_symbol_wise_open_positions').DataTable({
                dom: '<"d-flex justify-content-end"B>',
                serverSide: true,
                paging: false,
                bInfo: false,
                destroy: true,
                buttons: [
                    {
                        extend: "excelHtml5",
                        text: "<i class='fa fa-download'></i> Export",
                        className: "btn btn-default btn-sm gap-5 d-none",
                        title : title,
                        "action" : exportAllAction,
                        exportOptions: {
                            columns: ':visible'
                        }
                    }
                ],
                ajax: {
                    url: requestUrl,
                    method: "GET",
                    data: function(d) {
                        d.start_date    = "{{ $start_date }}";
                    }
                },
                columns: [
                    {
                        data: 'Login',
                        name: 'Login',
                    },
                    {
                        data: 'Position',
                        name: 'Position',
                    },
                    {
                        data: 'Symbol',
                        name: 'Symbol'
                    },
                    {
                        data: 'TimeCreate',
                        name: 'TimeCreate',
                        render: function(data, type, full, meta) {
                            var time = moment(full.TimeCreate).format("{{ CommonConstants::TIME_FORMATE }}");
                            return '<div>' + time + '</div>';
                        }
                    },
                    {
                        data: 'Action',
                        name: 'Action',
                        render: function(data, type, full, meta) {
                            var className = full.Action == 1 ? 'danger' : 'success';
                            var label = full.Action == 1 ? 'SELL' : 'BUY';
                            return '<div class="text-center"><div class="badge badge-light-' + className + '">' + label + '</div></div>';
                        }
                    },
                    {
                        data: 'Volume',
                        name: 'Volume',
                        render: function(data, type, full, meta) {
                            var divideValue = "{{ CommonConstants::CHAMKA_REPORT['DIVIDE_VALUE'] }}";
                            var volume = (full.Volume && full.Volume > 0) ? full.Volume / divideValue : full.Volume;
                            return '<div class="text-end">' + volume + '</div>';
                        }
                    },
                    {
                        data: 'PriceOpen',
                        name: 'PriceOpen',
                        render: function(data, type, full, meta) {
                            var priceOpen = (full.PriceOpen && full.PriceOpen > 0) ? (full.PriceOpen).toFixed(2) : 0;
                            return '<div class="text-end">' + priceOpen + '</div>';
                        }
                    },
                    {
                        data: 'PriceCurrent',
                        name: 'PriceCurrent',
                        render: function(data, type, full, meta) {
                            var priceCurrent = (full.PriceCurrent && full.PriceCurrent > 0) ? (full.PriceCurrent).toFixed(2) : 0;
                            return '<div class="text-end">' + priceCurrent + '</div>';
                        }
                    },
                    {
                        data: 'Profit',
                        name: 'Profit',
                        render: function(data, type, full, meta) {
                            return '<div class="text-end">' + full.Profit + '</div>';
                        }
                    }
                ],
                ordering: false,
                rowCallback: function(row, data) {
                    if (data.highlight) {
                        $(row).hasClass('odd') ? $(row).css('--bs-table-striped-bg', '#ffffcd') : $(row).addClass('color4');
                        $(row).css('--bs-table-hover-bg', '#ffffcd');
                    }
                },
                initComplete: function(settings, json) {
                    $('#kt_table_symbol_wise_open_positions').show();
                    table.buttons().container().find(".btn").removeClass("d-none");
                    $('#position_loader').hide();
                }
            });
            $('#kt_modal_symbol_wise_open_position_history').on('hidden.bs.modal', function() {
                var table = $('#kt_table_symbol_wise_open_positions').DataTable();
                table.clear();
            });
        };
    </script>
@endsection