@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop
@section('style')
<style>
    .check_enable{
        background-color:lightgray;
    }
</style>
    <style>
        .check_enable{
            background-color:lightgray;
        }
        .credit_high{
            background-color: #FFF5F8;
        }
        /* For Modal Header Backgroud-color and Text-color */
        .modal-header, .modal-header h4, .close {
            background-color: #3c4483 !important; /* #226fab , #394398 ,#3c4483 */
            color:#ffffff !important;
        }
        /* for Jquery validation messsage */
        .form-control-feedback{
            color:red !important;
        }
        /* Remove multiple scroll when modal open */
        html{
            overflow: auto !important;
        }

    </style>
@endsection

@section('content')
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title ">Demo Accounts</h3>
            </div>
        </div>
    </div>
    <div class="m-content">
        @if(Session::has('psuccess'))
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button> <i class="fa fa-ban-circle"></i>
                {!! Session::get('psuccess') !!}
            </div>
        @endif
        <div class="m-portlet m-portlet--full-height m-portlet--tabs   m-portlet--rounded">
            <div class="m-portlet__head">
                <div class="m-portlet__head-tools">
                    <ul class="nav nav-tabs m-tabs m-tabs-line   m-tabs-line--left m-tabs-line--primary" role="tablist">
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link" href="/accounts/demo">
                                <i class="flaticon-share m--hide"></i>
                                MT4 Account
                            </a>
                        </li>
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link active" href="/accounts/mt5/demo">
                                MT5 Account
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="m-portlet__head-tools">
                    <ul class="m-portlet__nav"><li class="m-portlet__nav-item m-portlet__nav-item--last"></li></ul>
                </div>
            </div>
            <div class="tab-content">
                <div class="m-portlet m-portlet--full-height ">
                    <div class="m-portlet__body">
                        @if(Session::has('success'))
                            <div class="alert alert-success">
                                    {!! Session::get('success') !!}
                            </div>
                        @endif
                        <!--begin: Search Form -->
                    <form class="m-form m-form--fit m--margin-bottom-20" onsubmit="return false;">
                        <div class="row m--margin-bottom-20">
                            <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                                <label>Search:</label>
                                <input type="text" class="form-control m-input" placeholder="Search" id="general-search">
                            </div>
                            <div class="col-lg-3 m--margin-bottom-10-tablet-and-mobile">
                                <label>Search In:</label>
                                <select class="form-control m-input" id="column-index">
                                    <option value="-1">All</option>
                                    <option value="0">Name</option>
                                    <option value="1">Email</option>
                                    <option value="2">Account No</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!-- Search End --> 
                    
                    <table class="table table-striped- table-bordered table-hover table-checkable" id="demo-list">
                        <thead>
                            <tr>
                                <!-- <th>ID</th> -->
                                <th>Name</th>
                                <th>Email</th>
                                <th>Account No.</th>
                                <th>Leverage</th>
                                <th>Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection


@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    var table;
    (function($){
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('#demo-list').each(function() {
                var groupColumn = 1;
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/accounts/mt5/demoDatatable",
                        "type": "GET"
                    },
                    "order": [[ 0, "desc" ]],
                    "columnDefs": [
                        { "visible": false, "targets": groupColumn }
                    ],
                    "dom":
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'p>>",    
                    "aoColumns": [
                        // { data: 'id', name: 'id', bSearchable: false, bVisible: false },
                        { data: 'Name', name: 'Name'},
                        { data: 'Email', name: 'Email'},
                        { data: 'Login', name: 'Login'},
                        { data: 'Leverage', name: 'Leverage'},
                        { data: 'Registration', name: 'Registration'},
                        { data: 'action', name: 'action'},
                    ],
                    "createdRow": function ( row, data, index ) {
                        if ( data['check_enable'] == 0 ) {
                            $('td', row).addClass('check_enable');
                        }
                    },

                    "drawCallback": function ( settings ) {
                        var api = this.api();
                        var rows = api.rows( {page:'current'} ).nodes();
                        var last=null;

                        api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                            if ( last !== group ) {
                                $(rows).eq( i ).before(
                                    '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                                );
                                last = group;
                            }
                        } );
                    }
                });
            });

            //  ------------------------------------------------ Code of Search For Live Client Start -----------------------------------------

            $('#column-index').on('change', function() {

            var column = $(this).val();
            var data = $("#general-search").val();
                if(data.length == 0){
                    return;
                }else{
                    if(this.value == -1){
                        table.columns().search("").draw();
                        table.search( data ).draw();
                    }
                    else{
                        // Call the API search function
                        table.columns().search("").draw();
                        table.column(column).search( data ).draw();
                    }
                }

            });

            $("#general-search")
            .unbind() // Unbind previous default bindings
            .bind("keyup", function(e) { // Bind our desired behavior
                var data = $(this).val();
                var column = $("#column-index").val();
                // If the length is 3 or more characters, or the user pressed ENTER, search
                if(data.length >= 3 || e.keyCode == 13 || e.keyCode == 8){
                
                    
                    if(column == -1) {
                        table.search(data).draw(); 
                    }else{
                        table.search("").draw();
                        table.column(column).search(data).draw();

                    }
                }
                // Ensure we clear the search if they backspace far enough
                if(this.value.length == 0 || column != -1) {
                    table.search("").draw();
                } 
            });
            // End Search

            $("#newdemo").click(function(){

                var url = base_url+"/account/newdemo";
                var options = {
                    url: url,
                    title:'Create New Demo Account',
                    size: 'md',
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Create Demo', style: 'btn btn-primary',   close: false, click: saveDemoDetail }
                    ]
                };
                eModal.ajax(options);
            });
            function saveDemoDetail()
            {
                $('#newdemo-form').submit();
            }
           
        });
    })(jQuery);
    
    $(document).on("change", ".ENABLE-TOGGLE", function (e) {
        var code = $(this).is(':checked');
        var name = $(this).attr('data-name');
        var code_status = code ? 'Active' : 'Deactive'; 

        var account = $(this).attr('data-account');
     
        Swal.fire({
            title: code_status + "!",
            text: "Are you sure " + code_status + " this demo account ?",
            type: "warning",
            allowOutsideClick: false,
            allowEscapeKey: false,
            showCancelButton: true,
            confirmButtonText: "Yes, "+code_status+" it!"
        }).then((result) => {
            if (result.dismiss !== 'cancel') { 
                if (code == true) {
                    var url = base_url+"/demo-account/group/list/?account="+account;
                    var options = {
                        url: url,
                        title:'Group List',
                        size: 'md',
                        buttons: [
                            {text: 'Cancel', style: 'btn btn-secondary', close: true,click:closebtn },
                            {text: 'Active Now', style: 'btn btn-primary',   close: false, click:activDemoAccount}
                        ]
                    };
                    eModal.ajax(options);
                }else{
                   enableDisbaleAccount(account,'13_T',false,'Account disbale successfully','Disbale')
                }
            } else {
                $(this).prop('checked', !code);
            }
        });
    });


    function closebtn() {
        var selectAcc = $('#select-account').val();
        $('#account-switch-'+selectAcc).prop('checked', false);
    }

    function activDemoAccount() {
        $('#select-group-error').text('');
        var selectAcc = $('#select-account').val();
        var selectGroup = $('#select-group').find(":selected").val();
        if (selectGroup == null) {
            $('#select-group-error').text('Group must be required');
        }

        enableDisbaleAccount(selectAcc,selectGroup,true,'Account Active successfully','Active')
    }

    function enableDisbaleAccount(selectAcc,selectGroup,code,msg,code_status) {
        $.ajax({
            url: base_url + "/account/demo/active/deactive",
            type: 'POST',
            data: {
                'account': selectAcc,
                'status_code': code,
                'selectGroup' :selectGroup
            },
            dataType: 'json',
            success: function (data) {
                if (data.status == true) {
                    Swal.fire({
                        title: code_status,
                         text: msg + ' - '+'Account '+code_status+ ' after sometime.Please wait',
                        type: "success"
                    });
                    eModal.close();
                }
            }
        });
    }
</script>
@endsection