@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>API Users</h3>
                            <small>
                                Users list
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="submit" class="btn btn-default" data-toggle="modal" data-target="#add-modal" ><span class="pe-7s-add-user"></span>&nbsp;&nbsp;Add API</button>
            <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">
                                <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Total Numbers</th>
                                    <th>Total Out. SMS Today</th>
                                    <th>Total Inb SMS Today</th>
                                    <th>API Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($sms_api_users as $user)
                                    <tr>
                                        <td><a href="/api/user/{{$user->id}}" >{{ $user->name }}</a></td>
                                        <td>{{ $user->numbers_count }}</td>
                                        <td>{{ $user->total_out_today }}</td>
                                        <td>{{ $user->total_inb_today }}</td>
                                        <td>{{$user->status?'Enabled':'Disabled'}}</td>
                                        <td>
                                            <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#edit-modal" type="button" data-userid="{{ $user->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-userid="{{ $user->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" 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-user">User <span class="text-danger">*</span></label>
                                                    <select id="add-user" class="form-control add-api" name="user_id" style="width: 100%">
                                                        @foreach($users as $user)
                                                            <option value="{{$user->id}}">{{$user->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="form-group"><label for="status">Status</label>
                                                    <select id="status" class="form-control" name="status">
                                                        <option value="1">Enabled</option>
                                                        <option value="0">Disabled</option>
                                                    </select>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label for="add-token">API Access token <span class="text-danger">*</span></label>
                                                    <div class="input-group">
                                                        <input type="text" id="add-token" class="form-control" name="token" readonly>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary create-token-btn" type="button">
                                                                Generate
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </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-user">User</label>
                                                    <input id="user-name" class="form-control" readonly>
                                                </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>
                                                <div class="form-group">
                                                    <label for="edit-token">API Access token</label>
                                                    <div class="input-group">
                                                        <input type="text" id="edit-token" class="form-control" name="token" readonly>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary edit-token-btn" type="button">
                                                                Generate
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <input type="hidden" id="edit-user-id" name="user_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-user-id" value="">
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" id="btn-delete" class="btn btn-default">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/datatables/datatables.min.js"></script>
    <script src="/vendor/datatables/dataTables.bootstrap4.min.js"></script>
    <script src="/vendor/popper/popper.min.js"></script>
    <script>
        function generateAccessToken(length = 32) {
            const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            const values = new Uint32Array(length);
            window.crypto.getRandomValues(values);

            return Array.from(values, x => charset[x % charset.length]).join('');
        }
  
        $(document).ready(function () {
            $(".add-api").select2();
            $('#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'}
                ],
            });

            $('#add-modal').on('show.bs.modal', function(event) {
                this.querySelector('form').reset();
                $('.add-api').val($(".add-api option:first").val()).trigger('change');
            });

            $('#edit-modal').on('show.bs.modal', function(event) {
                this.querySelector('form').reset();
                
                const button = $(event.relatedTarget);
                const userId = button.data('userid');

                $.ajax({
                    url: "{{ route('sms.get.user') }}?api_token={{auth()->user()->api_token}}&user_id=" + userId,
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    success: function (data, status, jqXHR) {
                        $('#edit-user-id').val(data.id);
                        $('#user-name').val(data.name);
                        $('#edit-status').val(data.status);
                        $('#edit-token').val(data.token);
                    },
                    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 userId = button.data('userid');
                $('#delete-user-id').val(userId);
            });
            
            $('.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.user') }}?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.user') }}?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").on("click", function() {
                overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
                $('#delete-modal').toggleClass('ld-loading'); //Loading...
                
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('sms.delete.user') }}?api_token={{auth()->user()->api_token}}",
                    headers: {
                        'Authorization': `Bearer {{auth()->user()->api_token}}`,
                    },
                    data: { user_id: $("#delete-user-id").val() },
                    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);
                    }
                });
            });
            
            $('.create-token-btn').click(function() {
                $('#add-token').val(generateAccessToken(35));
            });

            $('.edit-token-btn').click(function() {
                $('#edit-token').val(generateAccessToken(35));
            });
        });
    </script>
@endsection