@extends('layouts.app')
@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')Email Accounts @endsection

<div class="container-fluid">
    <div class="card-header flex justify-content-between">
        <h3>Mail Server Accounts  </h3> <a class="btn btn-secondary border-radius-0 pull-right text-white" href="{{ url('createEmailToServer') }}">Add Mail Server</a>
    </div>

    <div class="card">
        <div class="card-body">
            <table class="table table-bordered table-hover text-center" id="email_table">
                <thead>
                    <tr>
                        <th>S.no</th>
                        <th>Server Name</th>
                        <th>Alias Server Name</th>
                        <th>Created On</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="{{asset('js/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>
    getWhatsappList();
    //    fetch all data in data-table
    function getWhatsappList() {
        $("#email_table").DataTable().clear().destroy();
        $('#email_table').DataTable({
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "ordering": true,
            "scrollX": true,
            "scrollCollapse": true,
            "scrollY":  400,
            "pageLength": 20,
            "order": [
                [0, "desc"]
            ],
            "language": {
                search: '',
                searchPlaceholder: "Search...",
            },
            "ajax": {
                "url": "{{ url('emailServerAccounts') }}",
                "dataType": "json",
                "type": "POST",
                "data": {
                    _token: "{{csrf_token()}}",
                },
            },
            aoColumns: [{
                    data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data:"server_name",
                    render: function(data, type, row, meta){
                        return ((row.server_name) ? row.server_name : "NA")
                    }
                },
                {
                    data:"alias_server_name",
                    render: function(data, type, row, meta){
                        return ((row.alias_server_name) ? row.alias_server_name : "NA")
                    }
                },
                {
                    data:"created_on",
                    render: function(data, type, row, meta){
                        return ((row.created_on) ? row.created_on : "NA")
                    }
                },
            ],
            "fnDrawCallback": function () {
                jQuery('.toggle-event').bootstrapToggle();
            }
        });
    }
</script>
@endsection