@extends('layouts.main')

@section('title','Failed Imports')
@section('header','Failed Imports')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">Failed Imports</li>
@endsection

@section('content')

@include('layouts.index.filters', ['date_range' => 1, 'filter' => 1, 'filter_default' => 'All', 'exports' => 0, 'create' => $create])

<div class="card card-primary">
    <div class="card-body">
        <div class="dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

@endsection
@push('custom-scripts')
<script>
    var param = {
        filter: "None"
    }
    $(document).ready(function(e){
        if (param.filter === "None") {
        $('.el-waiting-message').text('Filter None, please select Filter or click Refresh to show Data.');
        } else {
            loadThis(param);
        }
    });
    $(document).on('click', '.btn-refresh', function(e){
        e.preventDefault();
        param = {
            filter: "",
        };
        $('select[name=filter]').val('');
        $('input[name=date_to]').val('');
        $('input[name=date_from]').val('');
        loadThis(param);
    });
    $(document).on('change', 'select[name=filter]', function(e){
        e.preventDefault();
        param.filter = $(this).val();
        loadThis(param);
    });
    $(document).on('change', 'input[name=date_to]', function(e){
        e.preventDefault();
        param.date_to = $(this).val();
        if(param.date_from) loadThis(param);
    });
    $(document).on('change', 'input[name=date_from]', function(e){
        e.preventDefault();
        param.date_from = $(this).val();
        if(param.date_to) loadThis(param);
    });
    
    function loadThis(params){
        url = "/web_api/failed_imports/getData";
        th = '<th width="5%">ID</th>' +
             '<th>FROM</th>' +
             '<th>MESSAGE</th>' +
             '<th>CONTENT</th>' +
             '<th>CREATED AT</th>';
        columns = [
                    { "data": "id", 'className':'text-center'},
                    { "data": "import_to", 'className':'text-center'},
                    { "data": "messages", 'className':'text-center'},
                    { "data": "content", 'className':'text-center'},
                    { "data": "created_at", 'className':'text-center'},
                  ];
    
        col_def = [
                {
                    "targets" : 3,
                    "data": "content",
                    "render" : function (data, type, row) {
                        return row.tb;
                    }
                },
                {
                    "targets" : 4,
                    "data": "created_at",
                    "render" : function (data, type, row) {
                        return row.created_date;
                    }
                },
            ];
        
        order = [[0, 'desc']];
        sDom = '';        
        buttons = [];
        
        loadTable(url, params, th, col_def, columns, order, sDom, buttons);
    }
</script>

@endpush