@extends('layout.marketing_template')

@section('marketingContent')
    <div class="table-head">
        <h1 class="ms-sm-4">Account List</h1>
    </div>
    <div class="row g-3">
        <div class="col-lg-12 mt-3 mt-lg-5">
            <div class="bg-dark pb-4 rounded-3 box-shadow">
                <div class="table-responsive-lg table-p15">
                    <table id="account_datatable" class="table table-dark table-striped mb-0 text-center table-hover">
                        <thead>
                            <tr>
                                <th scope="col">Id</th>
                                <th scope="col">Account ID</th>
                                <th scope="col">Name</th>
                                <th scope="col">Email</th>
                                <th scope="col">Phone</th>
                                <th scope="col">Group Name</th>
                                <th scope="col">Country</th>
                                <th scope="col">Date</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" tabindex="-1" role="dialog" id="account-details-modal">
        <div class="modal-dialog modal-lg" role="accountdetails">
            <div class="modal-content bg-black">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title">Account Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountlogin pb-3"><span class="text-white-50">Account ID : </span><strong></strong>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountcurrency pb-3"><span class="text-white-50">Deposit Currency :
                                </span><strong></strong></div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountbalance pb-3"><span class="text-white-50">Balance :
                                </span><strong></strong></div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountcredit pb-3"><span class="text-white-50">Credit :
                                </span><strong></strong></div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountmarginlevg pb-3"><span class="text-white-50">Leverage :
                                </span><strong></strong></div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountmargin pb-3"><span class="text-white-50">Margin :
                                </span><strong></strong></div>
                        </div>
                        <div class="col-sm-6 col-md-4 col-lg-4">
                            <div class="accountequity pb-3"><span class="text-white-50">Equity :
                                </span><strong></strong></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function AccountDetails(id) {
            console.log(id);
            let url = "{{ url('/marketing/user/accountdetails') }}/" + id;
            $.ajax({
                url: url,
                type: "GET",
                dataType: 'json',
                success: function(response) {
                    $(".accountlogin strong").text(response.login);
                    $(".accountcurrency strong").text(response.depositCurrency);
                    $(".accountbalance strong").text(response.balance);
                    $(".accountmargin strong").text(response.freeMargin);
                    $(".accountmarginlevg strong").text(response.leverageInCents);
                    $(".accountequity strong").text(response.equity);
                    $("#account-details-modal").modal('show');
                },
                error: function(response) {
                    console.log(response);
                    console.log(response.responseJSON)
                }
            });
        }
    </script>

    <script type="text/javascript">
        $(function() {
            var table = $('#account_datatable').DataTable({
                "autoWidth": false,
                "responsive": true,
                "order": [
                    [0, "desc"]
                ],
                "processing": true,
                "serverSide": true,
                "language": {
                    processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
                },
                "ajax": "{{ route('marketing.user.accountlist') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'accountID',
                        name: 'accountID'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'groupname',
                        name: 'groupname'
                    },
                    {
                        data: 'country',
                        name: 'country'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                ],
                dom: 'lBfrtip',
                buttons: [{
                    extend: 'excel'
                }, ],
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, 'All']
                ]
            });
        });
    </script>
@endsection