@extends(resolve_layout())

@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>Bulk Messages</h3>
                            <small>
                                Overview
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            
            <div class="row col-md-6">
                <div class="col-lg-4 col-xs-6 pl-0">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ $dailyLimit }}</h2>
                            <div class="small">Daily limit</div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-xs-6">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ $sentToday }}</h2>
                            <div class="small">Sent today</div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-xs-6">
                    <div class="panel panel-filled mb-0">
                        
                        <div class="panel-body">
                            <h2 class="m-b-none">{{ max(0, $dailyLimit - $sentToday) }}</h2>
                            <div class="small">Remaining</div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            
            <div id="page-alert"></div>
            <a href="{{ route('web.bulk.send') }}" class="btn btn-default"><span class="pe-7s-paper-plane"></span>&nbsp;&nbsp;Send New Bulk SMS</a>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <table id="maintable" class="table table-striped table-hover table-responsive-sm" style="width:100%">
                                <thead>
                                <tr>
                                    <th>From</th>
                                    <th>Groups</th>
                                    <th>Numbers</th>
                                    <th>Sent</th>
                                    <th>Failed</th>
                                    <th>Message</th>
                                    <th>Date</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Full message modal -->
            <div class="modal fade" id="message-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header text-center">
                            <h4 class="modal-title">Message</h4>
                        </div>
                        <div class="modal-body">
                            <pre id="message-modal-body" style="white-space: pre-wrap; word-break: break-word;"></pre>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Failed numbers modal -->
            <div class="modal fade" id="failures-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">Failed Numbers</h4>
                        </div>
                        <div class="modal-body">
                            <table class="table table-striped table-sm">
                                <thead>
                                <tr>
                                    <th>Number</th>
                                    <th>Error</th>
                                </tr>
                                </thead>
                                <tbody id="failures-table-body"></tbody>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </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>
        function showNotify(target, type, message) {
            const bg = type === 'success' ? '#2ecc71' : (type === 'error' ? '#e74c3c' : '#3498db');
            const $target = $(target);
            $target.find('.inline-notify').remove();
            const html = '<div class="inline-notify" style="background:' + bg + ';color:#fff;padding:10px 34px 10px 14px;border-radius:4px;margin-bottom:15px;font-size:14px;position:relative;line-height:1.4;">'
                + '<span style="position:absolute;top:6px;right:10px;cursor:pointer;font-weight:bold;" onclick="$(this).parent().remove()">&times;</span>'
                + message
                + '</div>';
            $target.prepend(html);
            if (type === 'success') {
                setTimeout(function () {
                    $target.find('.inline-notify').fadeOut(400, function () { $(this).remove(); });
                }, 4000);
            }
        }

        $(document).ready(function () {

            // Full message text is stored here (key = bulk_message id) so we don't
            // need to embed long text into HTML attributes.
            const messagesById = {};

            function truncate(text, length) {
                if (!text) return '';
                return text.length > length ? text.substring(0, length) + '…' : text;
            }

            function escapeHtml(text) {
                return $('<div></div>').text(text).html();
            }

            const table = $('#maintable').DataTable({
                processing: false,
                serverSide: true,
                searching: true,
                ordering: false,
                ajax: {
                    url: "{{ route('api.bulk.overview.data') }}?api_token={{auth()->user()->api_token}}",
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    type: "GET",
                    dataSrc: function (json) {
                        if (!json || !Array.isArray(json.data)) {
                            return [];
                        }
                        json.data.forEach(function (row) {
                            messagesById[row.id] = row.message;
                        });
                        return json.data;
                    }
                },
                columns: [
                    { data: 'from' },
                    { data: 'groups' },
                    { data: 'total_numbers' },
                    { data: 'total_sent' },
                    {
                        data: 'total_failed',
                        render: function (data, type, row) {
                            if (type !== 'display') return data;
                            if (data > 0) {
                                return '<a href="javascript:void(0)" class="failed-link text-danger" data-id="' + row.id + '"><b>' + data + '</b></a>';
                            }
                            return data;
                        }
                    },
                    {
                        data: 'message',
                        render: function (data, type, row) {
                            if (type !== 'display') return data;
                            return '<span class="message-link" style="cursor:pointer;text-decoration:underline dotted;" data-id="' + row.id + '">'
                                + escapeHtml(truncate(data, 60))
                                + '</span>';
                        }
                    },
                    { data: 'created_at' },
                ]
            });

            $(document).on('click', '.message-link', function () {
                const id = $(this).data('id');
                $('#message-modal-body').text(messagesById[id] || '');
                $('#message-modal').modal('show');
            });

            $(document).on('click', '.failed-link', function () {
                const id = $(this).data('id');

                $.ajax({
                    url: "{{ route('api.bulk.message.failures') }}?api_token={{auth()->user()->api_token}}&message_id=" + id,
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    success: function (data) {
                        let rows = '';
                        data.forEach(function (f) {
                            rows += '<tr><td>' + f.number + '</td><td>' + (f.error || '') + '</td></tr>';
                        });
                        $('#failures-table-body').html(rows || '<tr><td colspan="2">No details found.</td></tr>');
                        $('#failures-modal').modal('show');
                    },
                    error: function () {
                        showNotify('#page-alert', 'error', 'Could not load failed numbers.');
                    }
                });
            });

        });
    </script>
@endsection