@extends('layouts.app')

@section('sidebar')
    @include('sidebar')
@stop
@section('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')
    <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="m-subheader__title ">Live Accounts</h3>
                </div>
                {{--<div>--}}
                    {{--<a href="/account/newlive" class="btn btn-info m-btn m-btn--wide m-btn--air m-btn--custom"><span><i class="la la-plus"></i><span>Add Live Account</span></span></a>--}}
                {{--</div>--}}
            </div>
        </div>
    <!-- END: Subheader -->
        <div class="m-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>
                                    <option value="10">Credit</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <!-- Search End -->

                    <table class="table table-striped- table-bordered table-hover table-checkable" id="live-list">
                        <thead>
                            <tr>
                                <!-- <th>ID</th> -->
                                <th>Name</th>
                                <th>Email</th>
                                <th>Account No.</th>
                                <th>Leverage</th>
                                <th>Group</th>
                                <th>Credit</th>
                                <th>Equity</th>
                                <th>Date</th>
                                <th>Enable</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('script')
{{ Html::script('custom/datatables/datatables.bundle.js') }}
{{ Html::script('custom/eModal/eModal.js') }}
<script type="text/javascript">
    
    $(document).on("change", ".ENABLE-TOGGLE", function (e) {
    var code = $(this).is(':checked');
    var name = $(this).attr('data-name');
    var status = $(this).attr('data-status');
    var code_status = code ? 'Active' : 'Deactive'; 

    var account = $(this).attr('data-account');
    Swal.fire({
        title: code_status + "!",
        text: "Are you sure " + code_status + " this Account ?",
        type: "warning",
        allowOutsideClick: false,
        allowEscapeKey: false,
        showCancelButton: true,
        confirmButtonText: "Yes, " + code_status + " it!"
    }).then((result) => {
        if (result.dismiss !== 'cancel') { 
            $.ajax({
                url: base_url + "/account/active/deactive",
                type: 'POST',
                data: {
                    'account': account,
                    'status_code': code
                },
                dataType: 'json',
                success: function (data) {
                    if (data.status == true) {
                        Swal.fire({
                            title: status,
                            text: 'Account '+status+' successfully',
                            type: "success"
                        });
                    }
                    $('#live-list').DataTable().ajax.reload();
                }
            });
        } else {
            $(this).prop('checked', !code);
        }
    });
});

    (function($){
        $(document).ready(function () {

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

            $('#live-list').each(function() {
                var groupColumn = 1;
                table = $(this).DataTable({
                    'responsive':!0,
                    'searchDelay':500,
                    'processing':!0,
                    "serverSide": true,
                    "ajax": {
                        "url": base_url+"/account/liveDatatable",
                        "type": "GET",
                        "data": function(d) {
                            d.credit = highCredit;
                        }
                    },
                    "oLanguage": {
                        "sProcessing": '<div class="m-loader m-loader--brand m-loader--left"><span>Please wait...</span></div>',
                    },
                    "columnDefs": [
                        { "visible": false, "targets": groupColumn }
                    ],


                    "order": [[ groupColumn, 'asc' ]],
                    "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: 'GROUP', name: 'GROUP'},
                        { data: 'CREDIT', name: 'CREDIT'},
                        { data: 'EQUITY', name: 'EQUITY'},
                        { data: 'REGDATE', name: 'REGDATE'},
                        { data: 'ENABLE', name: 'ENABLE'},
                        { data: 'action', name: 'action'},
                    ],
                    "createdRow": function ( row, data, index ) {
                        if ( data['check_enable'] == 0 ) {
                            $('td', row).addClass('check_enable');
                        }
                        if ( data['credit_high'] == 1 ) {
                            $('td', row).addClass('credit_high');
                        }
                    },

                    "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="7">'+group+'</td></tr>'
                                );
                                last = group;
                            }
                        } );
                    }
                });   //table and datatables END
                //  ------------------------------------------------ Code of Search For Live Client Start -----------------------------------------

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

                var column = $(this).val();
                
                if(column == 10){
                    highCredit = 'yes';
                    table.draw();
                    return;
                } else {
                    highCredit = 'no';
                    $('#live-list').DataTable().ajax.reload();
                }
                    
                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
            });         //Live list Function over

            // Edit MT4Account Detail @mp
            $(document).on("click", "a.edit-mt4account", function(event){

                var id = $(this).attr('data-id');
				var url = base_url+"/account/editMt4Account/"+id;
				var options = {
					url: url,
					title:'Edit MT4 Account',
                    size: 'md', //sm,lg,md,xl
					buttons: [
						{text: 'Cancel', style: 'btn btn-secondary', close: true }
						// {text: 'Edit MT4Detail', style: 'btn btn-primary',   close: false, click: saveMT4 }
					]
				};
				eModal.ajax(options);
            });

            // Add Balance @RP
            $(document).on("click", "a.add-balance", function(event){

                var id = $(this).attr('data-id');
                var url = base_url+"/account/addbalance/"+id;
                var options = {
                    url: url,
                    title:'Add Balance',
                    size: 'md', //sm,lg,md,xl
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Add Balance', style: 'btn btn-primary',   close: false, click: addBalance }
                    ]
                };
                eModal.ajax(options);
            });
            function addBalance()
            {
                $('#add-balance-form').submit();
            }
            
            // Add Credit @MP
            $(document).on("click", "a.add-credit", function(event){

                var id = $(this).attr('data-id');
                var url = base_url+"/account/addcredit/"+id;
                var options = {
                    url: url,
                    title:'Add Credit',
                    size: 'md', //sm,lg,md,xl
                    buttons: [
                        {text: 'Cancel', style: 'btn btn-secondary', close: true },
                        {text: 'Add Credit', style: 'btn btn-primary',  close: false, click: addCredit }
                    ]
                };
                eModal.ajax(options);
            });
            function addCredit()
            {
                $('#add-credit-form').submit();
            }

        });   //document.ready function over
    })(jQuery);     //Simple function over
    eModal.setModalOptions({
        backdrop: 'static',
        keyboard: false
    });
</script>
@endsection