@extends('layouts.appuser')

@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>Domain Overview - {{ $domain }}</h3>
                            <small>
                                Table for message logs
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col-3">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <div class="small">Number of Phone Numbers</div>
                            <h2 class="m-b-none">{{ $num['numext'] }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <div class="small mb-2">Number of Phone # with SMS Enabled</div>
                            <div class="d-flex justify-content-between align-items-end">
                                <h2 class="m-b-none">{{ $num['numextsms'] }}</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr />
            <div class="row">
                <div class="col">
                    <div class="form-row align-items-center">
                        
                        <div class="col-auto">
                            <label for="starttime" class="col-form-label">Start Date/Time</label>
                        </div>
                        <div class="col-auto">
                            <input type="datetime-local"
                                   id="starttime"
                                   name="starttime"
                                   class="form-control"
                                   value="{{ $from }}"
                                   min="2021-01-01T00:00"
                                   max="2099-12-31T00:00">
                        </div>
                        
                        <div class="col-auto ml-3">
                            <label for="endtime" class="col-form-label">End Date/Time</label>
                        </div>
                        <div class="col-auto">
                            <input type="datetime-local"
                                   id="endtime"
                                   name="endtime"
                                   class="form-control"
                                   value="{{ $to }}"
                                   min="2021-01-01T00:00"
                                   max="2099-12-31T00:00">
                        </div>
                        
                        <div class="col-auto ml-3">
                            <button type="button" class="btn btn-primary filter-btn">Filter</button>
                        </div>
                        <div class="col-auto ml-3">
                            <button type="button"
                                    class="btn btn-primary"
                                    data-toggle="modal"
                                    data-target="#numbers_modal">
                                View Numbers List
                            </button>
                        </div>
                    
                    </div>
                </div>
            </div>
            <hr />
            
            <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 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>
                                        </div>
                                        <div class="modal-body">
                                            <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="numbers_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">Monitored Numbers</h4>
                                        </div>
                                        <div class="modal-body">
                                            @if(count($numbersList) > 0)
                                                <table class="table table-sm table-striped" id="numbers-table">
                                                    <thead>
                                                    <tr>
                                                        <th>Number</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($numbersList as $n)
                                                        <tr>
                                                            <td  style="font-size: 1.1rem;">{{ $n }}</td>
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            @else
                                                <p class="text-muted mb-0">No numbers found.</p>
                                            @endif
                                        </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>
                                        </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 formatPhoneNumber(phoneNumberString) {
            var cleaned = ('' + phoneNumberString).replace(/\D/g, '')
            var match = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
            if (match) {
                var intlCode = (match[1] ? '+1 ' : '')
                return [intlCode, '(', match[2], ') ', match[3], '-', match[4]].join('')
            }
            return null
        }
        function reformatphone(p) {
            return p.replace(' ','').replace('(','').replace(') ','').replace('-','');
        }
        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] }
                ],
                "info": false,
                ajax: {
                    url: "{{ route('api.sms.ajaxdomainsmshistory') }}",
                    data: function(d) {
                        d.api_token = "{{ auth()->user()->api_token }}";
                        d.starttime = $('#starttime').val();
                        d.endtime = $('#endtime').val();
                    },
                    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();
                    api.columns().eq(0).each(function(colIdx) {
                        var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                        var title = $(cell).text();
                        $(cell).html( '<input type="text" class="w-100" placeholder="'+title+'" />' );
                        $('input', $('.filters th').eq($(api.column(colIdx).header()).index()) )
                            .off('keyup change')
                            .on('keyup change', function (e) {
                                if (e.keyCode !== 13) return;
                                e.stopPropagation();
                                $(this).attr('title', $(this).val());
                                var regexr = '{search}';
                                var cursorPosition = this.selectionStart;
                                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');
                            $(win.document.body).find('td:nth-child(3), th:nth-child(3)').css({
                                'max-width':   '150px',
                                'word-break':  'break-all',
                                'font-size':   '16px'
                            });
                        }
                    },
                ],
            });

            var numbersTableInitialized = false;
            $('#numbers_modal').on('shown.bs.modal', function () {
                if (!numbersTableInitialized) {
                    $('#numbers-table').DataTable({
                        dom: 'ftp',
                        lengthChange: false,
                        searching: true,
                        paging: false,
                        ordering: true,
                        info: false,
                        language: {
                            zeroRecords: "No numbers found",
                            search: "Search:"
                        }
                    });
                    numbersTableInitialized = true;
                }
            });

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

            $('.filter-btn').click(function(){
                oTable.clear().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...

                        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...

                        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();
            }

        });

        $('#maintable').on('processing.dt', function(e, settings, processing){
            if(processing){
                $('#loader').show();
            } else {
                $('#loader').hide();
            }
        });
    
    </script>
@endsection