@extends('layouts.app')

@section('content')
     <!-- Main content-->
     <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="header-icon">
                            <i class="pe page-header-icon pe-7s-albums"></i>
                        </div>
                        <div class="header-title">
                            <h3>API Review</h3>
                            <small>
                                Table for api collection
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="form-row align-items-center">
                        
                        <div class="col-auto">
                            <label for="starttime" class="col-form-label">Start Date/Time</label>
                        </div>
                        <div class="col-auto">
                            <input type="datetime-local"
                                   id="starttime"
                                   name="starttime"
                                   class="form-control"
                                   value="{{ $from }}"
                                   min="2021-01-01T00:00"
                                   max="2099-12-31T00:00">
                        </div>
                        
                        <div class="col-auto ml-3">
                            <label for="endtime" class="col-form-label">End Date/Time</label>
                        </div>
                        <div class="col-auto">
                            <input type="datetime-local"
                                   id="endtime"
                                   name="endtime"
                                   class="form-control"
                                   value="{{ $to }}"
                                   min="2021-01-01T00:00"
                                   max="2099-12-31T00:00">
                        </div>
                        
                        
                        <div class="col-auto ml-3">
                            <button type="button" class="btn btn-primary filter-btn">Filter</button>
                        </div>
                    
                    </div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled table-block">
                        <div class="panel-body">
                            <div id="loader" style="display:none;">
                                <div class="overlay"></div>
                                <div class="spinner-wrapper">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden"></span>
                                    </div>
                                </div>
                            </div>
                            <table id="maintable" class="table table-striped table-hover table-responsive-sm">
                                <thead>
                                    <tr>
                                        <th>Headers</th>
                                        <th>Body</th>
                                        <th>API Date</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <!--tr style="cursor:pointer;" data-toggle="modal" data-target="#popup_modal" onclick="loaddetails(id);"-->
                                </tbody>
                            </table>
                            <div class="modal fade" id="popup_modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Details</h4>
                                            <!--small>Details</small-->
                                        </div>
                                        <div class="modal-body">
                                            <p>Headers</p>
                                            <pre class="m-t-sm requestheaders"></pre>
                                            <br />
                                            <p>Body</p>
                                            <pre class="m-t-sm requestbody"></pre>
                                            <br />
                                            <p>API Date</p>
                                            <pre class="m-t-sm apidate"></pre>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- End main content-->
<script src="vendor/datatables/datatables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function () {
        $('#maintable thead tr').clone(false).addClass('filters').insertAfter( '#maintable thead' );
        let table = $('#maintable').DataTable({
            "order": [[ 2, "desc" ]],
            "scrollX":true,
            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
            "processing": true,
            "serverSide": true,
            "autoWidth": false,
            "paging": true,
            "searching": true,
            "ordering": true,
            "language": {
                "zeroRecords": "No data Found",
                "processing": 'Loading...'
            },
            rowId: 'message_id',
            columns: [
                { data: 'headers' },
                { data: 'body' },
                { data: 'apiDate' },
                {
                    data: null,
                    orderable: false,
                    render: function (data, type, row) {
                        return '<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#popup_modal" onclick="loaddetails(' + data.id +');"><i class="fa fa-pencil"></i></button>';
                    }
                }
            ],
            "info": false,
            ajax: {
                url: "{{ route('api.apicollection.ajaxapireviewdata') }}",
                data: function(d) {
                    d.api_token = "{{ auth()->user()->api_token }}";
                    d.starttime = $('#starttime').val();
                    d.endtime = $('#endtime').val();
                },
                dataSrc: 'data'
            },
            buttons: [
                {extend: 'copy', className: 'btn-sm'},
                {extend: 'csv', title: 'CSV File', className: 'btn-sm'},
                {extend: 'pdf', title: 'PDF File', className: 'btn-sm'},
                {extend: 'print', className: 'btn-sm'}
            ],
            "search": {
                "return": true
            },
            initComplete: function() {
                var api = this.api();
                // For each column
                api.columns().eq(0).each(function(colIdx) {
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                    var title = $(cell).text();

                    if(colIdx === 3) {
                        $(cell).html('');
                        return;
                    }
                    
                    $(cell).html( '<input type="text" placeholder="'+title+'" />' );
                    // On every keypress in this input
                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()) )
                        .off('keyup change')
                        .on('keyup change', function (e) {
                            if (e.keyCode !== 13) return;
                            e.stopPropagation();
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '{search}'; //$(this).parents('th').find('select').val();
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search((this.value != "") ? regexr.replace('{search}', this.value) : "", this.value != "", this.value == "")
                                .draw();
                            $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
            }
        });
        $("div.dataTables_filter input").unbind();
        $("div.dataTables_filter input").keyup( function (e) {
            if (e.keyCode == 13) {
                // table.fnFilter( this.value );
                table.search( this.value ).draw();
            }
        });

        $('.filter-btn').click(function(){
            table.clear().draw();
        });
    });

    $('#maintable').on('processing.dt', function(e, settings, processing){
        if(processing){
            $('#loader').show();
        } else {
            $('#loader').hide();
        }
    });

    function loaddetails(idx) {
        $('.requestheaders').html('');
        $('.requestbody').html('');
        $('.apidate').html('');
        
        $.ajax({
            type: "POST",
            url: "{{ route('api.apicollection.loaddetails') }}",
            headers: {
                'Authorization': `Bearer {{auth()->user()->api_token}}`,
            },
            data:{idx:idx},
            dataType: "json",
            success: function (data, status, jqXHR) {
                //console.log(data);

                $('.requestheaders').html('');
                var headers = data.headers.split(', ');
                for(var i in headers) {
                    $('.requestheaders').append(headers[i]);
                    $('.requestheaders').append('<br>');
                }

                var requestbody = data.body?JSON.parse(data.body):'';
                $('.requestbody').html(JSON.stringify(requestbody, null, "\t"));

                $('.apidate').html(data.apiDate);
            },
            error: function (jqXHR, status) {
                console.log(jqXHR);
            }
        });
    }
</script>
@endsection