@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 Messages</h3>
                            <small>
                                Table for message logs
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <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>Direction</th>
                                    <th>From</th>
                                    <th>To</th>
                                    <th>Type</th>
                                    <th>Text</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></tbody>
                            </table>
                            <div class="modal fade" id="popup_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">Content</h4>
                                            <!--small>Details</small-->
                                        </div>
                                        <div class="modal-body">
                                            <!--p>Content</p-->
                                            <pre class="m-t-sm contentmodal">

                                            </pre>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="history_modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="loader">
                                    <div class="loader-circle"></div>
                                </div>
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Conversation History</h4>
                                            <!--small>Details</small-->
                                        </div>
                                        <div class="modal-body">
                                            <input id="number-from" type="hidden" value="" />
                                            <input id="number-to" type="hidden" value="" />
                                            <div class="row">
                                                <div class="col">
                                                    <div class="form-row align-items-center">
                                                        
                                                        <div class="col-auto">
                                                            <label for="date-from" class="col-form-label">Date From</label>
                                                        </div>
                                                        <div class="col-auto">
                                                            <input type="date"
                                                                   id="date-from"
                                                                   name="date_from"
                                                                   class="form-control"
                                                                   value=""
                                                                   min="2021-01-01"
                                                                   max="2099-12-31">
                                                        </div>
                                                        
                                                        <div class="col-auto ml-3">
                                                            <label for="date-to" class="col-form-label">Date to</label>
                                                        </div>
                                                        <div class="col-auto">
                                                            <input type="date"
                                                                   id="date-to"
                                                                   name="date_to"
                                                                   class="form-control"
                                                                   value=""
                                                                   min="2021-01-01"
                                                                   max="2099-12-31">
                                                        </div>
                                                        
                                                        
                                                        <div class="col-auto ml-3">
                                                            <button type="button" class="btn btn-primary conversation-filter-btn">Filter</button>
                                                        </div>
                                                    
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <table class="table table-responsive-sm" id="sms-history-table">
                                                <thead class="d-none">
                                                <tr>
                                                    <th>Number</th>
                                                    <th>Text</th>
                                                    <th>Media</th>
                                                    <th>Date/Time</th>
                                                </tr>
                                                </thead>
                                                <tbody class="d-none"></tbody>
                                            </table>
                                            
                                        <div class="v-timeline vertical-container">
                                        </div>
                                        </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>
    function imgerr(img) {
        if (img.src != '/images/no_image_available.png') {
            img.src = '/images/no_image_available.png';
        }
    }
    
    function loaddetails(element,type) {
        if(type) {
            let urls = $(element).attr('data-url').split(",");
            let html = '';
            
            for (let i of urls) {
                let imgurl = i;
                if(i.indexOf('/core1-chi.yokopbx.com/ns-api')>0) {
                    let url = new URL(imgurl);
                    let id = url.searchParams.get("id");
                    imgurl = 'https://yokopbx.s3.us-east-2.amazonaws.com/'+id;
                }
                html += '<img class="contents" src="' + imgurl + '" onerror="imgerr(this)"/>';
            }
            $('.contentmodal').html(html);
        } else {
            $('.contentmodal').html(element.innerText);
        }
    }
    $(document).ready(function () {
        $('#maintable thead tr').clone(false).addClass('filters').insertAfter( '#maintable thead' );
        let oTable = $('#maintable').DataTable({
            "order": [[ 9, "desc" ]],
            "scrollX":true,
            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[10, 25, 50], [10, 25, 50]],
            "processing": true,
            "serverSide": true,
            "autoWidth": false,
            "paging": true,
            "searching": true,
            "ordering": true,
            "language": {
                "zeroRecords": "No data Found",
                "processing": 'Loading...'
            },
            columns: [
                { data: 'inbound', searchable: false },
                { data: 'from', searchable: true },
                { data: 'recipients', searchable: true },
                { data: 'type', searchable: false },
                { data: 'text', searchable: true },
                { data: 'mediaURL', searchable: true },
                { data: 'carrier', searchable: true },
                { data: 'to_carrier', searchable: true },
                { data: 'responseText', searchable: false },
                { data: 'created_on', searchable: true },
                { data: 'action', searchable: false, className: 'text-right notexport', orderable: false }
            ],
            columnDefs: [
                { "width": "110px", "targets": [1,2] },
                { "width": "110px", "targets": [9] }
            ],
            "info": false,
            ajax: {
                url: "{{ route('api.sms.ajaxsmsmmshistory') }}?api_token={{auth()->user()->api_token}}",
                dataSrc: 'data'
            },
            buttons: [
                {
                    extend:        'copy',
                    className:     'btn-sm',
                    exportOptions: { columns: ':not(.notexport)' }
                },
                {
                    extend:        'csv',
                    title:         'CSV File',
                    className:     'btn-sm',
                    exportOptions: { columns: ':not(.notexport)' }
                },
                {
                    extend:        'pdf',
                    title:         'PDF File',
                    className:     'btn-sm',
                    exportOptions: { columns: ':not(.notexport)' }
                },
                {
                    extend:        'print',
                    className:     'btn-sm',
                    exportOptions: { columns: ':not(.notexport)' }
                },
            ],
            "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();
                    $(cell).html( '<input type="text" class="w-100" 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);
                        });

                    if (title == 'Action' || title == 'Direction' || title == 'Type' || title == 'Status' || title == 'Date/Time' || title == 'Media') {
                        $(cell).html( '' );
                    }
                });
            }
        });
        
        let historyTable = $('#sms-history-table').DataTable({
            order: [[3, 'desc']],
            "scrollX":false,
            dom: "<'row mt-3'<B<'d-inline-flex gap-2 ms-2'f>>><'col-sm-4'>tp",
            "lengthMenu": false,
            "processing": true,
            "autoWidth": false,
            "paging": false,
            "searching": false,
            "ordering": true,
            columns: [
                { data: 'Number' },
                { data: 'Text' },
                { data: 'Media' },
                { data: 'Date/Time' },
            ],
            buttons: [
                {extend: 'copy', className: 'btn-sm'},
                {extend: 'csv', title: 'CSV File', className: 'btn-sm'},
                {
                    extend: 'pdf',
                    title: 'PDF File',
                    className: 'btn-sm',
                    customize: function(doc) {
                        doc.content[1].table.widths = ['15%', '30%', '35%', '20%'];
                        doc.defaultStyle.fontSize   = 8;
                        doc.content[1].table.body.forEach(function(row) {
                            row.forEach(function(cell) { cell.fontSize = 8; });
                        });
                        doc.styles.tableHeader.fontSize = 9;
                    }
                },
                {
                    extend: 'print',
                    className: 'btn-sm',
                    customize: function(win) {
                        $(win.document.body).find('table').css('font-size', '16px');
                        $(win.document.body).find('th').css('font-size', '16px');

                        // URL stulpelio plotis
                        $(win.document.body).find('td:nth-child(3), th:nth-child(3)').css({
                            'max-width':   '150px',
                            'word-break':  'break-all',
                            'font-size':   '16px'
                        });
                    }
                },
            ],
        });

        
        
        
        $("div.dataTables_filter input").unbind();
        $("div.dataTables_filter input").keyup( function (e) {
            if (e.keyCode == 13) {
                // oTable.fnFilter( this.value );
                oTable.search( this.value ).draw();
            }
        });

        $(document).on("click", ".conversation-btn", function () {
            var chn = $(this).parent().parent().children();
            var from = chn[1].innerText;
            var to = chn[2].innerText;
            
            $("#number-from").val(from);
            $("#number-to").val(to);

            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#history_modal').toggleClass('ld-loading'); //Loading...

            $.ajax({
                type: "POST",
                url: "{{ route('api.sms.history') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data:{from:from, to:to},
                success: function (data, status, jqXHR) {
                    var html = "";

                    $("#date-from").val(data.date_from);
                    $("#date-to").val(data.date_to);

                    for(var i in data.rows) {
                        var cls = "vertical-timeline-content-to";
                        let media = '';
                        if (data.rows[i].mediaURL && data.rows[i].mediaURL.length > 0) {
                            let urls = data.rows[i].mediaURL.split(',');
                            for(let i = 0; i < urls.length; i++) {
                                if (urls[i].length === 0) continue;
                                media +=  '<img style="max-width:200px;" src="' + urls[i] + '" onerror="imgerr(this)"></img>';
                            }
                        }

                        if(from == data.rows[i].from) {
                            cls = "vertical-timeline-content-from";
                        }
                        html = html + `<div class="vertical-timeline-block">
                        <div class="vertical-timeline-icon">
                            <i class="fa fa-user c-accent"></i>
                        </div>
                        <div class="vertical-timeline-content ` + cls + `">
                            <div class="p-sm">
                                <span class="vertical-date pull-right"><small>` + data.rows[i].created_on + `</small> </span>
                                <h4>` + data.rows[i].from + `</h4>
                                <p>` + data.rows[i].text + `</p>
                                <p>` + media + `</p>
                            </div>
                        </div>
                    </div>`;
                    }
                    $('.vertical-container').html(html);

                    updateHistoryTable(data.rows);

                    overlay.remove();
                    $('#history_modal').toggleClass('ld-loading'); //Loading...
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#history_modal').toggleClass('ld-loading'); //Loading...

                    //console.log(jqXHR);
                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        })


        $(".conversation-filter-btn").on("click", function () {
            var from = $("#number-from").val();
            var to = $("#number-to").val();
            const dateFrom = $("#date-from").val();
            const dateTo = $("#date-to").val();

  

            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#history_modal').toggleClass('ld-loading'); //Loading...

            $.ajax({
                type: "POST",
                url: "{{ route('api.sms.history') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data:{ from:from, to:to, date_from: dateFrom, date_to: dateTo },
                success: function (data, status, jqXHR) {
                    var html = "";
                    for(var i in data.rows) {
                        var cls = "vertical-timeline-content-to";
                        let media = '';
                        if (data.rows[i].mediaURL && data.rows[i].mediaURL.length > 0) {
                            let urls = data.rows[i].mediaURL.split(',');
                            for(let i = 0; i < urls.length; i++) {
                                if (urls[i].length === 0) continue;
                                media +=  '<img style="max-width:200px;" src="' + urls[i] + '" onerror="imgerr(this)"></img>';
                            }
                        }

                        if(from == data.rows[i].from) {
                            cls = "vertical-timeline-content-from";
                        }
                        html = html + `<div class="vertical-timeline-block">
                        <div class="vertical-timeline-icon">
                            <i class="fa fa-user c-accent"></i>
                        </div>
                        <div class="vertical-timeline-content ` + cls + `">
                            <div class="p-sm">
                                <span class="vertical-date pull-right"><small>` + data.rows[i].created_on + `</small> </span>
                                <h4>` + data.rows[i].from + `</h4>
                                <p>` + data.rows[i].text + `</p>
                                <p>` + media + `</p>
                            </div>
                        </div>
                    </div>`;
                    }
                    
                    $('.vertical-container').html(html);
                    updateHistoryTable(data.rows);

                    overlay.remove();
                    $('#history_modal').toggleClass('ld-loading'); //Loading...
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#history_modal').toggleClass('ld-loading'); //Loading...

                    //console.log(jqXHR);
                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        });

        function updateHistoryTable(data) {
            var rows = data.map(function(item) {
                return {
                    'Number':    item.from,
                    'Text':      item.text,
                    'Media':     item.mediaURL,
                    'Date/Time': item.created_on,
                };
            });

            historyTable.clear();
            historyTable.rows.add(rows);
            historyTable.draw();
        }

        
    });
</script>
@endsection