@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 align-middle table-row-dashed fs-6 gy-5 mb-0" id="whitelist_manager_table_reports">
                                <!--begin::Table head-->
                                <thead>
                                    <tr class="text-center fw-bolder fs-7 text-uppercase gs-0">
                                        <th class="min-w-80px d-none">Manager Name</th>
                                        <th class="min-w-80px">Ip</th>
                                        <th class="min-w-80px">Action</th>
                                    </tr>
                                </thead>
                                <!--end::Table head-->
                                <!--begin::Table body-->
                                <tbody class="fw-bold">
                                </tbody>
                                <!--end::Table head-->
                            </table>
                        </div>
                        <!--end::Table-->
                    </div>
                </div>
                <!--end::Card-->
            </div>
            <!--end::Container-->
        </div>
        <!--end::Post-->
    </div>
    <script type="text/javascript">
        const table          = $('#whitelist_manager_table_reports');
        const token          = "{{ csrf_token() }}";
        var fileName         = "Company_Brokerage_Report";
        var title            = fileName + '_' +Date.now();
        var columns          = [1, 2, 3, 4, 5, 6, 7];
        var managerId        = $("#managers").val();
        var minFractionDigit = "{{CommonConstants::BILLING_SUMMARY['MIN_FRACTION_DIGIT']}}";
        var maxFractionDigit = "{{CommonConstants::BILLING_SUMMARY['MAX_FRACTION_DIGIT']}}";
        var url;

        if (managerId !== undefined && managerId !== null) {
            url = "{{ route('whitelistManager', ['id' => ':id']) }}".replace(':id', managerId);
        } else {
            url = "{{ route('whitelistManager') }}";
        }

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

        var dataColumns = [
            {
                data: 'managerLogin',
                name: 'managerLogin',
                visible: false
            },
            {
                data: 'ip',
                name: 'ip'
            },
            {
                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 groupColumn                 = 0;
            var reloadAjex = $(table).dataTable({
                // export buttons
                dom: "<'card-header align-items-center py-5 gap-2 gap-md-5'<'card-title col-4'<'d-flex position-relative my-1'>><'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,
                drawCallback: function(settings) {
                    var api                     = this.api();
                    var rows                    = api.rows().nodes();
                    var lastGroup               = null;

                    api.column(groupColumn).data().each(function(group, i) {

                        if (lastGroup !== group) {
                            lastGroup   = group;
                            $(rows).eq(i).before(
                                '<tr class="group even"><td colspan="5" class="fs-3 text-danger fw-bold">' +
                                group +
                                '</td></tr>'
                            );
                        }
                    });
                },
                "stateSaveParams": function (settings, data) {
                    data.search.search = '';
                },
                pageLength: 10,
                "lengthMenu": {!! json_encode(CommonConstants::ALL_PAGE_PER_DATA) !!},
                language: {
                    searchPlaceholder: "Search Brokerage",
                    search: ""
                },
                buttons: [{
                    extend: "collection",
                    className: "exportButton d-none",
                    text: "<i class='fa fa-download'></i> Export",
                        buttons: [
                        {
                            extend: "excelHtml5",
                            text: "Export",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            title: title,
                            exportOptions: {
                                columns: columnArray
                            }
                        },{
                            extend: "excelHtml5",
                            text: "Export All",
                            className: "btn btn-default btn-sm gap-5 d-none",
                            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,
                            "action": exportAllAction,
                            exportOptions: {
                                columns: columnArray
                            }
                        }
                    ]
                }],
                columnDefs: [{ visible: false, targets: dataColumns }],
                ajax: {
                    url: url,
                    method: "GET",
                    managerId: $("#managers").val(),
                },
                rowCallback: function(row, data) {
                    $(row).addClass('text-center');
                },
                columns: dataColumns,
                order: [
                    [0, "ASC"]
                ],
                searchDelay: "{{CommonConstants::SEARCH_DELAY}}"
            }, );

        }

        $(document).ready(function() {          
            var managers = @json($managers);

            $('.card-title').append(`<div class="w-100 d-flex"><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('whitelistManager', ['id' => ':id']) }}".replace(':id', managerId);
                } else {
                    url = "{{ route('whitelistManager') }}";
                }

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

                var table = $('#whitelist_manager_table_reports').DataTable();
                table.ajax.url(url).load();
            });
        });

        function updateStatus(id) {
            var status      = $("#status_"+id).prop('checked');
            const csrfToken = "{{ csrf_token() }}";
            $.ajax({
                url: "{{ route('whitelistManagerUpdateStatus', ['id' => ':id']) }}".replace(':id', id),
                method: 'POST',
                data: {
                    status: status,
                    _token: csrfToken
                },
                success: function(response) {}
            });
        }
    </script>
@endsection