@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 body-->
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5 table-hover table-striped" id="kt_table_symbol_limit_exceed">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-100px">Symbol</th>
                                        <th class="min-w-100px">Start Time</th>
                                        <th class="min-w-100px">End Time</th>
                                        <th class="min-w-100px">Action</th>
                                        <th class="min-w-100px">Limit Volume</th>
                                        <th class="min-w-100px">Total Lotus Volume</th>
                                        <th class="min-w-100px">Total Volume</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 class="modal fade" id="kt_modal_position_users_listing" 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 <span id="symbolName" class="align-content-center"></span></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_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-150px">Position</th>
									<th class="min-w-100px">Buy</th>
									<th class="min-w-80px">Volume</th>
									<th class="min-w-100px">Login</th>
									<th class="min-w-150px">Position</th>
									<th class="min-w-100px">Sell</th>
									<th class="min-w-80px">Volume</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script type="text/javascript">
        const token   = "{{ csrf_token() }}";
        var fileName  = "Symbol_Limit_Exceed";
        var title     = fileName + '_' +Date.now();
        const table   = $('#kt_table_symbol_limit_exceed');
        var columns   = [0, 1, 2, 3, 4, 5, 6];

        var dataColumns = [
            {
                data: 'symbol',
                name: 'symbol'
            },
            {
                data: 'startTime',
                name: 'startTime'
            },
            {
                data: 'endTime',
                name: 'endTime'
            },
            {
                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: 'limitVolume',
                name: 'limitVolume'
            },
            {
                data: 'totalLotusVolume',
                name: 'totalLotusVolume'
            },
            {
                data: 'totalVolume',
                name: 'totalVolume'
            },
            {
                data: 'action',
                name: 'action'
            }
        ];

        $.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'<'custom-button-container'>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: true,
            "stateSaveParams": function (settings, data) {
                data.search.search = '';
            },
            pageLength: 10,
            "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
            language: {
                searchPlaceholder: "Search Symbol",
                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('positionSymbolExceed') }}",
                method: "GET",
                data: {}
            },
            columns: dataColumns,
            rowCallback: function(row, data) {
                $(row).addClass('text-center');
            },
            "stateLoadParams": function (settings, data) {
                if (data.select) {
                    data.select.rows = [];
                }
            },
            order: [
                [0, "desc"]
            ],
        }, );

        }

        function userPositionsList(symbol) {

            $('#position_loader').show();
            $('#symbolName').text("");
            $('#kt_table_positions').hide();
            var url             = "{{route('getPosition', ':symbol')}}";
            var symbolName      = '';
            if ($('#kt_table_positions').DataTable().settings()[0].jqXHR != null) {
                $('#kt_table_positions').DataTable().settings()[0].jqXHR.abort();
            }

            var table = $('#kt_table_positions').DataTable({
                serverSide: true,
                paging: false,
                bInfo: false,
                destroy: true,
                ajax: url.replace(':symbol', symbol),
                columns: [
                    {
                        data: 'buyLogin',
                        name: 'buyLogin'
                    },
                    {
                        data: 'buyPosition',
                        name: 'buyPosition'
                    },
                    {
                        data: 'buyAction',
                        name: 'buyAction',
                        render: function(data, type, full, meta) {
                            var buyAction = '-';
                            if (full.buyAction != '-') {
                                var className   = full.buyAction == 1 ? 'danger' : 'success';
                                var label       = full.buyAction == 1 ? 'SELL' : 'BUY';
                                buyAction       = '<div class="badge badge-light-' + className + '">' + label + '</div>';
                            }
                            return buyAction;
                        }
                    },
                    {
                        data: 'buyVolume',
                        name: 'buyVolume'
                    },
                    {
                        data: 'sellLogin',
                        name: 'sellLogin'
                    },
                    {
                        data: 'sellPosition',
                        name: 'sellPosition'
                    },
                    {
                        data: 'sellAction',
                        name: 'sellAction',
                        render: function(data, type, full, meta) {
                            var sellAction = '-';
                            if (full.sellAction != '-') {
                                var className   = full.sellAction == 1 ? 'danger' : 'success';
                                var label       = full.sellAction == 1 ? 'SELL' : 'BUY';
                                sellAction       = '<div class="badge badge-light-' + className + '">' + label + '</div>';
                            }
                            return sellAction;
                        }
                    },
                    {
                        data: 'sellVolume',
                        name: 'sellVolume'
                    }
                ],
                ordering: false,
                rowCallback: function(row, data) {
                    if (data.sellSymbol != '-') {
                        symbolName = data.sellSymbol;
                    } else {
                        symbolName = data.buySymbol;
                    }
                },
                initComplete: function(settings, json) {
                    if(symbolName != '') {
                        $('#symbolName').append('<span class="text-primary">(' + symbolName + ')</span>');
                    }
                    $('#kt_table_positions').show();
                    $('#position_loader').hide();
                }
            });
        };
    </script>
@endsection