@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>Customer billing</h3>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="submit" class="btn btn-default btn-pull"><span class="pe-7s-refresh-2"></span>&nbsp;&nbsp;Pull data from datagate </button>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <div class="panel-body" id="maindiv">
                            <div class="loader">
                                <div class="loader-dots"></div>
                            </div>
                            <table class="table table-responsive-sm" id="maintable">
                                <thead>
                                <tr>
                                    <th>Domain</th>
                                    <th>Description</th>
                                    <th>PBX Users</th>
                                    <th>Billed Users</th>
                                    <th>Fax Users</th>
                                    <th>Aliases</th>
                                    <th>Bill status</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">Edit Billing</h4>
                                            <!--small>Details</small-->
                                        </div>
                                        <form id="update-billing">
                                            <div class="modal-body">
                                                <div class="loader">
                                                    <div class="loader-bar"></div>
                                                </div>
                                                <div class="form-group"><label for="edit_email">Domain</label>
                                                    <input type="text" id="domain" class="form-control" name="domain"  readonly>
                                                </div>
                                                <div class="form-group"><label for="edit_email">PBX Users</label>
                                                    <input type="text" id="pbx-users" class="form-control" readonly>
                                                </div>
                                                <div class="form-group"><label for="domains_list">Aliases</label>
                                                    <select id="domain-aliases" class="form-control" name="domain_aliases" multiple="multiple" style="width: 100%"></select>
                                                </div>
                                                <div id="billing-list">
                                                </div>
                                                
                                                <input type="hidden" id="domain-id" value="" name="id">
                                            </div>
                                        </form>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default btn-update">Save</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>
        let oTable;
        $(document).ready(function () {
            $("#domain-aliases").select2({
                tags: true
            });
            
            $("#domain-aliases").data('select2').$dropdown.hide();
            oTable = $('#maintable').DataTable({
                "order": [[ 0, "asc" ]],
                "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": true,
                "paging": true,
                "searching": true,
                "ordering": true,
                "language": {
                    "zeroRecords": "No data Found",
                    "processing": 'Loading...'
                },
                columns: [
                    { data: 'domain', searchable: true },
                    { data: 'description', searchable: true },
                    { data: 'pbx_users_quantity', searchable: false },
                    { data: 'datagate_users_quantity', searchable: false },
                    { data: 'datagate_fax_users_quantity', searchable: false },
                    { data: 'aliases', searchable: false,  orderable: false },
                    { data: 'bill_status',
                        searchable: false,
                        render: function (data, type, row) {
                            return data == 1 ? 'Billed' : 'Not billed';
                        }
                    },
                    {
                        data: null,
                        searchable: false,
                        orderable: false,
                        render: function (data, type, row) {
                            const btnText = data.bill_status ? 'Hide from billing' : 'Add to billing';
                            const btnStatus =
                                '<button class="btn btn-default btn-xs ml-1" onclick="updateBillStatus(' + data.id + ', ' + data.bill_status + ');">'
                                + btnText +
                                '</button>';
                            const btnEdit =
                                '<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#popup_modal" onclick="getBilling(' + data.id + ');">' +
                                '<i class="fa fa-pencil"></i></button>';
                            return btnEdit + btnStatus;
                        }
                    }
                ],
                columnDefs: [
                    { "width": "110px", "targets": [1,2] }
                ],
                "info": false,
                ajax: {
                    url: "{{ route('api.accounting.getbillingscompare') }}",
                    data: function(d) {
                        d.api_token = "{{ auth()->user()->api_token }}";
                    },
                    dataSrc: 'data'
                },
                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'}
                ],
                "search": {
                    "return": true
                },
                createdRow: function(row, data, dataIndex) {
                    if (data.pbx_users_quantity !== data.datagate_users_quantity && data.bill_status == 1 ) {
                        $(row).css('background-color', 'rgb(72, 77, 104)');
                    }
                }
                
            });
            
            $("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();
                }
                console.log(this.value);
            });
        });

        function getBilling(id) {
            $.ajax({
                url: "{{ route('api.accounting.getbilling') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data: {id: id},
                success: function (data, status, jqXHR) {
                    $("#domain-aliases").html('');
                    $("#domain-aliases").trigger("change");
                    $('#billing-list').html('');
                    
                    $('#domain').val(data.domain);
                    $('#pbx-users').val(data.pbx_users);
                    $('#billed-users').val(data.billed_users);
                    $('#bill-id').val(data.id);
                    
                    data.billing_list.forEach(function(bill) {
                        $('#billing-list').append('<div class="form-group"><label for="edit_email">Billed user for alias ' + bill.domain + '</label><input type="number" data-id="' + bill.id + '" class="billed-users form-control" value="' + bill.quantity + '" placeholder=""></div>');
                    });

                    data.aliases.forEach(function(alias) {
                        if ($("#domain-aliases option[value='" + alias + "']").length === 0) {
                            let newOption = new Option(alias, alias, true, true);
                            $("#domain-aliases").append(newOption);
                        }
                    });
                    
                    $("#domain-aliases").trigger("change");
                },
                error: function (jqXHR, status) {
                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        }
        
        function updateBillStatus(id, billStatus) {
            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#maindiv').toggleClass('ld-loading'); //Loading...
            
            $.ajax({
                type: "POST",
                url: "{{ route('api.accounting.updateBillStatus') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data: {
                    id: id,
                    bill_status: billStatus == 1 ? 0 : 1
                },
                success: function (data, status, jqXHR) {
                    overlay.remove();
                    $('#maindiv').toggleClass('ld-loading'); //Loading...
                    toastr.success('Status updated!');
                    oTable.ajax.reload(null, false);
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#popup_modal').toggleClass('ld-loading'); //Loading...
                    toastr.error(data.error);
                }
            });
        }

        $('.btn-update').on('click', function() {
            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#popup_modal').toggleClass('ld-loading'); //Loading...
            
            const data = {
                domain: $('#domain').val(),
                id: $('#domain-id').val(),
                domain_aliases: $("#domain-aliases").val(),
                billed_aliases: []
            }
            
            $(".billed-users").each(function(index, input) {
                data.billed_aliases.push({
                    id: input.getAttribute('data-id'),
                    quantity:  $(input).val(),
                });
            });
            
            $.ajax({
                type: "POST",
                url: "{{ route('api.accounting.editbilling') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data: data,
                success: function (data, status, jqXHR) {
                    overlay.remove();
                    $('#popup_modal').toggleClass('ld-loading'); //Loading...
                    $('#popup_modal').modal('hide');
                    toastr.success('Updated!');
                    oTable.ajax.reload(null, false);
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#popup_modal').toggleClass('ld-loading'); //Loading...
                    toastr.error(data.error);
                }
            });
        });

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

            $.ajax({
                url: "{{ route('api.accounting.pullserviceitems') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data:{},
                success: function (data, status, jqXHR) {
                    overlay.remove();
                    $('#maindiv').toggleClass('ld-loading'); //Loading...

                    //console.log(data);
                    toastr.info("Reloading...");
                    setTimeout(function(){ location.reload(); }, 1000);
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#maindiv').toggleClass('ld-loading'); //Loading...

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