@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>Recent MMS</h3>
                            <small>
                                Table for message logs
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-pull" onclick="fixall()">Fix this page</button>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <table class="table table-responsive-sm" id="maintable">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Media</th>
                                    <th>From Carrier</th>
                                    <th>To Carrier</th>
                                    <th>Status</th>
                                    <th>Date/Time</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($mms as $m)
                                <tr>
                                    <td>{{$m->id}}</td>
                                    <td>
                                        @foreach ($m->media as $me)
                                        <img src="{{$me}}" title="{{$me}}" width="50px" height="50px">
                                        @endforeach
                                    </td>
                                    <td>{{$m->carrier}}</td>
                                    <td>{{$m->to_carrier}}</td>
                                    <td>{{$m->responseText}}</td>
                                    <td>{{$m->created_on}}</td>
                                    <td><a href="javascript:;" onclick="fix({{$m->id}})">Fix</a></td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </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>
    var dataTable = null;
    $(document).ready(function() {
        dataTable = $('#maintable').DataTable();
    });

    function fix(id){
        console.log('fixing', id);
        $.ajax({
            url: "{{ route('api.mms.fix') }}",
            headers: {
                'Authorization': `Bearer {{auth()->user()->api_token}}`,
            },
            type: 'POST',
            data: {
                id: id,
            },
            success: function(data){
                console.log('success', id, data);
                $('#maintable').find('tr').each(function(){
                    // console.log('compare', $(this).find('td:first').text(), id);
                    if($(this).find('td:first').text() == id){
                        $(this).remove();
                    }
                });
            },
            error: function(data){
                alert('Error');
                console.log(data);
            }
        });
    }

    function fixall() {
        var data = dataTable.rows({page: 'current'}).data();
        console.log('start', data);
        data.each(async function(item){
            if(item[4] != 'Fixed'){
                await fix(item[0]);
            }
        });
    }
</script>
@endsection