@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>Email Accounts  </h3> <a class="btn btn-secondary border-radius-0 pull-right text-white" href="{{ url('createEmailAccount') }}">Add Email Account</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>Organization</th>
                        <th>Email</th>
                        <th>Mail Server</th>
                        <th>Account Name</th>
                        <th>Limit Exceeded Time</th>
                        <th>Created On</th>
                        <th>Status</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('emailAccounts') }}",
                "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:"organization",
                    render: function(data, type, row, meta){
                        return ((row.organization) ? row.organization : "NA")
                    }
                },
                {
                    data:"email",
                    render: function(data, type, row, meta){
                        return ((row.email) ? row.email : "NA")
                    }
                },
                {
                    data:"alias_server_name",
                    render: function(data, type, row, meta){
                        return ((row.alias_server_name) ? row.alias_server_name : "NA")
                    }
                },
                {
                    data: "account_name",
                    render: function(data, type, row, meta) {
                        return ((row.account_name) ? row.account_name : "NA")
                    }
                },
                {
                    data: "limit_exceeded_time",
                    render: function(data, type, row, meta) {
                        return ((row.limit_exceeded_time) ? row.limit_exceeded_time : "NA")
                    }
                },
                {
                    data: "created_on",
                    render: function(data, type, row, meta) {
                        return ((row.created_on) ? row.created_on : "NA")
                    }
                },
                {
                    data: "status",
                    render: function(data, type, row, meta) {
                        data = '<input id="'+row.id+'" type="checkbox" '+(row.status ==1 ? 'checked' : '' )+' data-onstyle="success" class="toggle-event" data-toggle="toggle" data-offstyle="danger" data-on="Active" data-off="De-Active" data-size="small" data-info="'+row.id+'" >';
                        return data;
                    }
                },
            ],
            "fnDrawCallback": function () {
                jQuery('.toggle-event').bootstrapToggle();
            }
        });
    }

    $(document).ready(function() {
        $('.toggle-event').bootstrapToggle();
        $(document).on('change', '.toggle-event', function (e) {
            let click_val = $(this).prop('checked');
            let id_val = $(this).attr('data-info');
            let url;

            if(click_val)
            { 
                click_val = 1;
                $(this).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
            }else{
                click_val = 0;
                $(this).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
            }
            $.ajax({
                type: "POST",
                url: "{{ url('/emailAccountStatus') }}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : id_val,
                    "action" : click_val
                },
                dataType:'json',
                success: function(data) {
                    if(click_val){
                        $('#'+data.row_id).parent().removeClass("btn-danger off").addClass('btn-success');
                        $('#edit'+data.row_id).closest('tr').find('.edit-data').addClass('active').removeClass('disabled');
                        toastr.success('Activated Successfully !!');
                    }else{
                        $('#'+data.row_id).parent().removeClass("btn-success").addClass('btn-danger off');
                        $('#edit'+data.row_id).closest('tr').find('.edit-data').removeClass('active').addClass('disabled');
                        toastr.error('De-Activated Successfully !!');
                    }
                }
            
            });
        });
    });
</script>
@endsection