@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>{{ $user_name }} API</h3>
                            <small>
                                Numbers List
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="submit" class="btn btn-default mr-4" data-toggle="modal" data-target="#add-modal" ><span class="pe-7s-add-user"></span>&nbsp;&nbsp;Add Number</button>
            <hr>
            
            <div class="row">
                <div class="col-md-12">
                    
                    <div class="panel-body">
                        <div class="stats-title">
                            <h4><i class="fa fa-bar-chart text-warning" aria-hidden="true"></i> SMS Activity – Last 30 Days</h4>
                        </div>
                        <div class="sparkline3">
                            <canvas id="canvas" class="chartjs-render-monitor"></canvas>
                        </div>
                    </div>
                </div>
                <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">
                                <thead>
                                <tr>
                                    <th>Number</th>
                                    <th>Destination</th>
                                    <th>Out. Today</th>
                                    <th>Inb. Today</th>
                                    <th>Out. AVG 7 days</th>
                                    <th>Inb. AVG 7 days</th>
                                    <th>Out. AVG 30 days</th>
                                    <th>Inb. AVG 30 days</th>
                                    <th>Day Limit</th>
                                    <th>API Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($user_numbers as $number)
                                    <tr>
                                        <td>{{ $number->number }}</td>
                                        <td>{{ $number->destination }}</td>
                                        <td>{{ $number->out_today }}</td>
                                        <td>{{ $number->inb_today }}</td>
                                        <td>{{ $number->week_out_avg }}</td>
                                        <td>{{ $number->week_in_avg }}</td>
                                        <td>{{ $number->month_out_avg }}</td>
                                        <td>{{ $number->month_in_avg }}</td>
                                        <td>{{ $number->sms_limit }}</td>
                                        <td>{{$number->status?'Enabled':'Disabled'}}</td>
                                        <td>
                                            <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#edit-modal" type="button" data-rowid="{{ $number->id }}"><i class="fa fa-paste"></i> Edit</button>
                                            <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#delete-modal" type="button" data-rowid="{{ $number->id }}"><i class="fa fa-trash-o"></i> <span class="bold">Delete</span></button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="loader">
                                    <div class="loader-bar"></div>
                                </div>
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Add New API User</h4>
                                        </div>
                                        <form id="frm-add">
                                            <div class="modal-body">
                                                <div class="form-group"><label for="add-number">Number</label>
                                                    <input id="add-number" class="form-control" name="number" placeholder="+16305811209">
                                                </div>
                                                <div class="form-group"><label for="add-destination">Destination</label>
                                                    <input id="add-destination" class="form-control" name="destination" placeholder="https://portal.yoko.us/api/collector">
                                                </div>
                                                <div class="form-group"><label for="add-limit">Day Limit</label>
                                                    <input type="number" id="add-limit" class="form-control" value="500" name="sms_limit">
                                                </div>
                                                <div class="form-group"><label for="add-status">Status</label>
                                                    <select id="add-status" class="form-control" name="status">
                                                        <option value="1">Enabled</option>
                                                        <option value="0">Disabled</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="add-id" name="id" value="{{ $api_user_id }}">
                                            </div>
                                        </form>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-default btn-add">Add</button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="loader">
                                    <div class="loader-bar"></div>
                                </div>
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Edit User API</h4>
                                        </div>
                                        <form id="frm-edit">
                                            <div class="modal-body">
                                                <div class="form-group"><label for="edit-number">Number</label>
                                                    <input id="edit-number" class="form-control" name="number">
                                                </div>
                                                <div class="form-group"><label for="edit-destination">Destination</label>
                                                    <input id="edit-destination" class="form-control" name="destination">
                                                </div>
                                                <div class="form-group"><label for="edit-limit">Day Limit</label>
                                                    <input type="number" id="edit-limit" class="form-control" name="sms_limit">
                                                </div>
                                                <div class="form-group"><label for="edit-status">Status</label>
                                                    <select id="edit-status" class="form-control" name="status">
                                                        <option value="1">Enabled</option>
                                                        <option value="0">Disabled</option>
                                                    </select>
                                                </div>
                                                <input type="hidden" id="edit-row-id" name="number_id" value="">
                                            </div>
                                        </form>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default btn-edit">Save</button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="loader">
                                    <div class="loader-bar"></div>
                                </div>
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Delete API</h4>
                                            <!--small>Details</small-->
                                        </div>
                                        <div class="modal-body">
                                            <p>Are you sure you want to delete this API?</p>
                                            <input type="hidden" id="delete-row-id" value="">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default btn-delete">Confirm</button>
                                            <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/chart.js/dist/Chart.min.js"></script>
    <script src="/vendor/datatables/datatables.min.js"></script>
    <script src="/vendor/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="/vendor/popper/popper.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#maintable').DataTable({
                // "processing": true,
                // "serverSide": true,
                "order": [[ 0, "asc" ]],
                dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                buttons: [
                    {extend: 'copy', className: 'btn-sm'},
                    {extend: 'csv', title: 'CSV File', className: 'btn-sm'},
                    {extend: 'pdf', title: 'PDF File', className: 'btn-sm'},
                    {extend: 'print', className: 'btn-sm'}
                ],
            });

            // Sparkline charts
            $.ajax({
                type: "POST",
                url: "{{ route('sms.user.transactions') }}?api_token={{ auth()->user()->api_token }}&user_id={{ $api_user_id }}",
                headers: {
                    'Authorization': 'Bearer {{ auth()->user()->api_token }}',
                },
                success: function (data) {

                    let labels = [];
                    let inboundData = [];
                    let outboundData = [];

                    // užpildom paskutines 30 dienų nuliais
                    for (let i = 29; i >= 0; i--) {
                        let d = new Date();
                        d.setDate(d.getDate() - i);

                        let dateStr = d.toISOString().slice(0, 10); // YYYY-MM-DD
                        labels.push(dateStr);
                        inboundData.push(0);
                        outboundData.push(0);
                    }

                    // sukeliam realius duomenis
                    data.forEach(row => {
                        let index = labels.indexOf(row.date);
                        if (index !== -1) {
                            inboundData[index] = row.inbound;
                            outboundData[index] = row.outbound;
                        }
                    });

                    let config = {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets: [
                                {
                                    label: 'Inbound SMS',
                                    data: inboundData,
                                    borderColor: 'rgb(75, 192, 192)',
                                    backgroundColor: 'rgba(75, 192, 192, 0.1)',
                                    fill: false,
                                },
                                {
                                    label: 'Outbound SMS',
                                    data: outboundData,
                                    borderColor: 'rgb(255, 99, 132)',
                                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                                    fill: false,
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            tooltips: {
                                mode: 'index',
                                intersect: false,
                            },
                            hover: {
                                mode: 'nearest',
                                intersect: true
                            },
                            scales: {
                                xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Date'
                                    }
                                }],
                                yAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'SMS Count'
                                    },
                                    ticks: {
                                        beginAtZero: true,
                                        precision: 0
                                    }
                                }]
                            }
                        }
                    };

                    let ctx = document.getElementById('canvas');
                    ctx.height = 256;
                    ctx.width = $('.sparkline3').width();

                    if (window.myLine) {
                        window.myLine.destroy();
                    }

                    window.myLine = new Chart(ctx, config);
                }
            });

            $('#add-modal').on('show.bs.modal', function(event) {
                this.querySelector('form').reset();
            });

            $('#edit-modal').on('show.bs.modal', function(event) {
                this.querySelector('form').reset();

                const button = $(event.relatedTarget);
                const numberId = button.data('rowid');

                $.ajax({
                    url: "{{ route('sms.get.number') }}?api_token={{auth()->user()->api_token}}&number_id=" + numberId,
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    success: function (data, status, jqXHR) {
                        $('#edit-row-id').val(data.id);
                        $('#edit-number').val(data.number);
                        $('#edit-destination').val(data.destination);
                        $('#edit-limit').val(data.sms_limit);
                        $('#edit-status').val(data.status);
                    },
                    error: function (jqXHR, status) {
                        //console.log(jqXHR);
                        toastr.error(jqXHR.responseJSON.message);
                    }
                });
            });

            $('#delete-modal').on('show.bs.modal', function(event) {
                const button = $(event.relatedTarget);
                const rowid = button.data('rowid');
                $('#delete-row-id').val(rowid);
            });

            $('.btn-add').click(function() {
                const frm = $('#frm-add');

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

                var data_post = frm.serialize();
                $.ajax({
                    type: "POST",
                    url: "{{ route('sms.add.number') }}?api_token={{auth()->user()->api_token}}",
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    data:data_post,
                    success: function (data, status, jqXHR) {
                        overlay.remove();
                        $('#add-modal').toggleClass('ld-loading'); //Loading...

                        toastr.success("Added!");
                        setTimeout(function(){ location.reload(); }, 1000);
                    },
                    error: function (jqXHR, status) {
                        overlay.remove();
                        $('#add-modal').toggleClass('ld-loading'); //Loading...

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

            $('.btn-edit').click(function() {
                const frm = $('#frm-edit');

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

                var data_post = frm.serialize();

                $.ajax({
                    type: "POST",
                    url: "{{ route('sms.edit.number') }}?api_token={{auth()->user()->api_token}}",
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    data:data_post,
                    success: function (data, status, jqXHR) {
                        overlay.remove();
                        $('#edit-modal').toggleClass('ld-loading'); //Loading...

                        toastr.success("Updated!");
                        setTimeout(function() { location.reload(); }, 1000);
                    },
                    error: function (jqXHR, status) {
                        overlay.remove();
                        $('#edit-modal').toggleClass('ld-loading'); //Loading...

                        toastr.error(jqXHR.responseJSON.message);
                    }
                });
            });

            $('.btn-delete').click(function() {
                overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
                $('#delete-modal').toggleClass('ld-loading'); //Loading...

                const numberId = $("#delete-row-id").val();

                $.ajax({
                    type: "DELETE",
                    url: "{{ route('sms.delete.number') }}?api_token={{auth()->user()->api_token}}&number_id=" + numberId,
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    success: function (data, status, jqXHR) {
                        overlay.remove();
                        $('#delete-modal').toggleClass('ld-loading'); //Loading...

                        toastr.success("The user has been deleted.");
                        setTimeout(function() { location.reload(); }, 1000);
                    },
                    error: function (jqXHR, status) {
                        overlay.remove();
                        $('#delete-modal').toggleClass('ld-loading'); //Loading...

                        toastr.error(jqXHR.responseJSON.message);
                    }
                });
            });
        });
    </script>
@endsection