@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>Failed SMS Sends</h3>
                            <small>
                                Table for failed jobs
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <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>ID</th>
                                    <th>Message ID</th>
                                    <th>Payload</th>
                                    <th>Exception</th>
                                    <th>Failed At</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                            </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 class="text-white mt-3 font-bold">Message ID</p>
                                            <pre class="m-t-sm message-id"></pre>
                                            <p class="text-white mt-3 font-bold">Payload</p>
                                            <pre class="m-t-sm payload"></pre>
                                            <p class="text-white mt-3 font-bold">Exception</p>
                                            <pre class="m-t-sm exception"></pre>
                                            <p class="text-white mt-3 font-bold">Failed At</p>
                                            <pre class="m-t-sm failed-at"></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": [[ 4, "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,
            searchDelay: 1000,
            ordering: true,
            language: {
                zeroRecords: "No data Found",
                processing: 'Loading...'
            },
            rowId: 'id',
            info: false,
            ajax: {
                url: "{{ route('api.troubleshooting.getFailedJobs') }}?api_token={{auth()->user()->api_token}}",
                dataSrc: 'data'
            },
            columns: [
                { data: 'id', searchable: false },
                { data: 'message_id', searchable: false },
                { data: 'payload', searchable: true },
                { data: 'exception', searchable: true },
                { data: 'failed_at', searchable: false },
                {
                    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>';
                    }
                }
            ],
            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 === 5) {
                        $(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();
            }
        });
    });

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


    function convertXML(xml) {
        return String(xml).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }
    function loaddetails(idx) {
        $.ajax({
            type: "GET",
            url: "{{ route('api.troubleshooting.getFailedJob') }}",
            headers: {
                'Authorization': `Bearer {{auth()->user()->api_token}}`,
            },
            data:{id:idx},
            dataType: "json",
            success: function (data, status, jqXHR) {
                $('.message-id').html(data.message_id);
                $('.payload').html(data.payload);
                $('.exception').html(convertXML(data.exception));
                $('.failed-at').html(data.failed_at);
            },
            error: function (jqXHR, status) {
                console.log(jqXHR);
            }
        });
    }
</script>
@endsection