@extends('layouts.app')

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

@section('content')
@section('page_title')
SMS Landing Page
@endsection
<div class="container-fluid">
    <div class="card">
        <div class="card-header flex justify-content-between">
            <h4> Bot Account List </h4>
            <!-- count section start-->
        <form class="flex m-auto">
            <div class="btn-outline-success active count-div" id="countfilter2" data-toggle="tooltip">
                <label> Total:</label>
                <small id="total_count0"></small>
            </div>
            <div class="count-div" id="countfilter1" data-toggle="tooltip">
                <label>Active: </label>
                <small id="active_count1"></small>
            </div>
            <div class="count-div" id="countfilter0" data-toggle="tooltip">
                <label>In-Active: </label>
                <small id="inactive_count2"></small>
            </div>
        </form>
        <h3><a class="btn btn-sm btn-dark pull-right text-white" href="{{ url('addrcsaccount') }}">Add Bot Account</a></h3>
        <!-- count section end -->
        </div>
        <div class = "card-body table-responsive">
        <div class="form-group mt-4">
            <table class="table-bordered table-hover" id="bot-account-table">
                <thead>
                    <tr>
                        <th>Sl.no</th>
                        <th>Organization</th>
                        <th>Email</th>
                        <th>Header Name</th>
                        <th>RCS Type</th>
                        <th>User Name</th>
                        <th>Password</th>
                        <th>Agent ID</th>
                        <th>Created On</th>
                        <th>Created By</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
</div>
    </div>
</div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script>
var account_state = 2;
    $(document).ready(function () {
        getbotaccount(account_state);
        get_template_count();
    });

    $('.count-div').click(function (e) {
        e.preventDefault();
        account_state = parseInt(this.id.slice(-1));
        getbotaccount(account_state);
        $('.count-div').removeClass('btn-outline-success active');
        $(this).addClass('btn-outline-success active');
    });

function getbotaccount(account_state = null) {
    $.ajax({
        type: "POST",
        url: 'botAccountList',
        data: {
                    "_token": "{{ csrf_token() }}",
                    "account_state": account_state
                },
        success: function (data) {
            var getbotaccountlist = data['data'];
            $("#bot-account-table").DataTable().clear().destroy();
         var table = $('#bot-account-table').DataTable({
                data: getbotaccountlist,
                "scrollX": true,
                "scrollY":  400,
                "scrollCollapse": true,
                "pageLength": 20,
                "paging": true,
                "fixedHeader":{ header: true},
                language: { search: '', searchPlaceholder: "Search..." },
                scrollCollapse: true,
                aoColumns: [
                    { data: "id",
                    render: function(data, type, row, meta){
                    	return meta.row + meta.settings._iDisplayStart + 1;
                    }
                    },
                    {
                        data: "account_name"
                    },
                    {
                        data: "email"
                    },
                    {
                        data: "brand_name"
                    },
                    {
                        data: "rcs_type"
                    },
                    {
                        data: "user_name"
                    },
                    {
                        data: "password"
                    },
                    {
                        data: "agent_id"
                    },
                    {
                        data: "created_on"
                    },
                    {
                        data: "created_by"
                    },
                    { data: "status",
                        render: function(data, type, row, meta){
                        data = '<input data-username='+row.user_name+' data-email='+row.email+' 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;
                        }
                    },
                    { data: "",
                    render: function(data, type, row, meta){
                        data = '<a id="edit'+row.id+'" title="Edit Bot Account" href="editbotaccount/'+row.id +'" class="btn btn-info edit-data fa fa-edit cursor-pointer greyIcon creditbtn '+(row.status == 0 ? 'disabled':'active')+'">Edit</a>';
                        return data;
                    }
                },
                ],
                "fnDrawCallback": function () {
                    $('.paginate_button').click(function(){
                        $('.dataTables_scrollBody').scrollTop(0);
                    });
                    jQuery('.toggle-event').bootstrapToggle();
                }
            });
        }
    });
}

function get_template_count(){
        $.ajax({
            "url": "{{ url('get_bot_account_count') }}",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
            },
            "dataType": "json",
            success: function(response) {
                $("#total_count0").html(response[0].total);
                $("#active_count1").html(response[0].active);
                $("#inactive_count2").html(response[0].inactive);
            }
        });
    }

    $(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 user_name = $(this).attr('data-username');

        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('/bot_activate') }}",
            data: {
                "_token" : "{{ csrf_token() }}",
                "row_id" : id_val,
                "action" : click_val,
                "user_name":user_name
            },
            dataType:'json',
            success: function(data) {
                if(data.is_token_generated_message){
                    toastr.success('Token generated Successfully !!!');
                }
                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