@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">
                    <div class="card-body py-4">
                        <!--begin::Table-->
                        <div class="table-responsive">
                            <table class="table table-striped table-hover align-middle 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-125px">Ip</th>
                                        <th class="min-w-100px">Country</th>
                                        <th class="min-w-100px">Region</th>
                                        <th class="min-w-100px">City</th>
                                        <th class="min-w-100px">Latitude</th>
                                        <th class="min-w-100px">Longitude</th>
                                        <th class="min-w-100px">Asn</th>
                                        <th class="min-w-150px">Org</th>
                                        <th class="min-w-150px">Isp</th>
                                        <th class="min-w-100px">Domain</th>
                                        <th class="min-w-100px">Timezone</th>
                                        <th class="min-w-100px">Abbr</th>
                                        <th class="min-w-100px">Utc</th>
                                        <th class="min-w-100px">Anonymous</th>
                                        <th class="min-w-100px">Proxy</th>
                                        <th class="min-w-100px">Vpn</th>
                                        <th class="min-w-100px">Tor</th>
                                        <th class="min-w-100px">Hosting</th>
                                        <th class="min-w-100px">IP Origin</th>
                                        <th class="min-w-100px d-none">Ip Report Id</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('IpAnalysis'));
        const token   = "{{ csrf_token() }}";
        const table   = $('#kt_table_reports');
        var fileName  = "IpAnalysis";
        var title     = fileName + '_' + Date.now();
        var columns   = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];

        var dataColumns = [
            {
                data: 'ip',
                name: 'ip'
            },
            {
                data: 'country',
                name: 'country'
            },
            {
                data: 'region',
                name: 'region'
            },
            {
                data: 'city',
                name: 'city'
            },
            {
                data: 'latitude',
                name: 'latitude'
            },
            {
                data: 'longitude',
                name: 'longitude'
            },
            {
                data: 'asn',
                name: 'asn'
            },
            {
                data: 'org',
                name: 'org'
            },
            {
                data: 'isp',
                name: 'isp'
            },
            {
                data: 'domain',
                name: 'domain'
            },
            {
                data: 'timezoneId',
                name: 'timezoneId'
            },
            {
                data: 'abbr',
                name: 'abbr'
            },
            {
                data: 'utc',
                name: 'utc'
            },
            {
                data: 'anonymous',
                name: 'anonymous'
            },
            {
                data: 'proxy',
                name: 'proxy'
            },
            {
                data: 'vpn',
                name: 'vpn'
            },
            {
                data: 'tor',
                name: 'tor'
            },
            {
                data: 'hosting',
                name: 'hosting'
            },
            {
                data: 'ipOrigin',
                name: 'ipOrigin'
            },
            {
                data: 'id', // Ip Reports Table Id
                name: 'id',
                visible: 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 IP Analysis",
                    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": function (e, dt, node, config, cb) {
                                $('.dataTables_processing', $('#kt_table_reports').closest('.dataTables_wrapper')).show();
                                $.ajax({
                                    url: '{{ route("IpAnalysisExport") }}',
                                    method: 'GET',
                                    success: function (response) {
                                        var blob        = new Blob([response.csvContent], { type: 'text/csv' });
                                        var link        = document.createElement('a');
                                        link.href       = window.URL.createObjectURL(blob);
                                        link.download   = response.fileName;
                                        document.body.appendChild(link);
                                        link.click();
                                        document.body.removeChild(link);

                                        $('.dataTables_processing', $('#kt_table_reports').closest('.dataTables_wrapper')).hide();
                                    },
                                    error: function (xhr, status, error) {
                                        $('.dataTables_processing', $('#kt_table_reports').closest('.dataTables_wrapper')).hide();
                                    }
                                });
                            },
                            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('IpAnalysis') }}",
                    method: "GET"
                },
                columns: dataColumns,
                order: [
                    [19, "desc"]
                ],
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                "stateLoadParams": function (settings, data) {
                    if (data.select) {
                        data.select.rows = [];
                    }
                },
            }, );

        }

        $(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 d-none" 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 d-none" 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;
                    $('#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 }}");
            });
        });
    </script>
@endsection