@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="black_list_ip_cid_history_table">
                                <!--begin::Table head-->
                                <thead>
                                    <!--begin::Table row-->
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-50px">Id</th>
                                        <th class="min-w-50px">Type</th>
                                        <th class="min-w-125px">Value</th>
                                        <th class="min-w-200px">Time</th>
                                        <th class="min-w-125px">Login</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-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 table   = $('#black_list_ip_cid_history_table');
        var title     = "Blacklist_IP_CID_History_" + Date.now();
        var columns   = [0, 1, 2, 3, 4, 5, 6, 7, 8];

        var dataColumns = [
            {
                data: 'id',
                name: 'id'
            },
            {
                data: 'type',
                name: 'type',
                render: function(data, type, full, meta) {
                    var typeValue =  full.type == "{{CommonConstants::BLACK_LIST_IP_CID['TYPE_IP']}}" ? "{{CommonConstants::BLACK_LIST_IP_CID['TYPE_IP_TEXT']}}" : "{{CommonConstants::BLACK_LIST_IP_CID['TYPE_CID_TEXT']}}";
                    var className = full.type == "{{CommonConstants::BLACK_LIST_IP_CID['TYPE_IP']}}" ? 'primary' : 'info';
                    return `<span class="badge badge-light-${className}">${typeValue}</span>`;
                }
            },
            {
                data: 'ip',
                name: 'ip',
                data: 'cId',
                name: 'cId',
                render: function(data, type, full, meta) {
                    return full.type == "{{CommonConstants::BLACK_LIST_IP_CID['TYPE_IP']}}" ? full.ip : full.cId;
                }
            },
            {
                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',
                render: function(data) {
                    return data ?? '-';
                }
            },
            {
                data: 'volume',
                name: 'volume',
                render: function(data) {
                    return data ?? '-';
                }
            },
            {
                data: 'symbol',
                name: 'symbol',
                render: function(data) {
                    return data ?? '-';
                }
            },
            {
                data: 'price',
                name: 'price',
                render: function(data) {
                    return data ?? '-';
                }
            },
            {
                data: 'action',
                name: 'action',
                render: function(data, type, full, meta) {
                    var className = data == 1 ? 'danger' : (data == 2 ? 'info' : 'success');
                    var label = data == 1 ? 'SELL' : (data == 2 ? 'Order' : 'BUY');
                    
                    return '<div class="badge badge-light-' + className + '">' + label + '</div>';
                },
                searchable: false
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            makeDataTable(table, title, columns, dataColumns);

            $('.card-toolbar').append(`<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>`);

            var reloadPage = false;
            var interval;
            $("#reloadButton").click(function(reloadAjex) {
                if (!reloadPage) {
                    reloadPage = true;
                    $('#black_list_ip_cid_history_table').DataTable().ajax.reload();
                    interval = setInterval(function(reloadAjex) {
                        $('#black_list_ip_cid_history_table').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');
                $('#black_list_ip_cid_history_table').DataTable().ajax.reload();
                setTimeout(function() {
                    $('#singleLoader').removeClass('loader');
                    $('#singleReload').removeClass('active btn-active-light-primary')
                }, "{{ CommonConstants::SINGLE_RELOAD_TIME }}");
            });

        });

        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: true,
            "stateSaveParams": function (settings, data) {
                data.search.search = '';
            },
            pageLength: 10,
            "lengthMenu": {!! json_encode(CommonConstants::DEFAULT_PAGE_PER_DATA) !!},
            language: {
                searchPlaceholder: "Search IP/CID 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('blacklistIpCidHistory') }}",
                method: "GET"
            },
            columns: dataColumns,
            rowCallback: function(row, data) {
                $(row).addClass('text-center');
            },
            order: [
                [0, "desc"]
            ],
        }, );
        }

        self.addEventListener('visibilitychange', function() {
            if (document.visibilityState === 'visible') {
                $('#black_list_ip_cid_history_table').DataTable().ajax.reload();
            }
        });

        navigator.serviceWorker.addEventListener("message", function(event) {
            $('#black_list_ip_cid_history_table').DataTable().ajax.reload();
        });
    </script>
@endsection