@extends ('layouts.bulma')
@section ('content')


    <nav class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item " href="../">
                    <img src="/img/FIGERO-APP--LOGO-WHITE.png" width="112" height="28">
                </a>
                <div class="navbar-burger burger" data-target="navMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div id="navMenu" class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item is-active" href="/adminaccounts">
                        Accounts
                    </a>
                    <a class="navbar-item" href="#">
                        Payments
                    </a>
                </div>

            </div>
        </div>
    </nav>
    <div class="container">
        <div class="columns">
            <div class="column is-2">
                <div class="column is-12">
                <aside class="menu">
                    <p class="menu-label">
                        Admin
                    </p>
                    <ul class="menu-list">
                        <li><a href="/settings">Dashboard</a></li>
                    </ul>
                    <p class="menu-label">
                        Accounts
                    </p>
                    <ul class="menu-list">
                        <li><a class="is-active" href="/adminaccounts">Accounts</a></li>
                    </ul>
                    <p class="menu-label">
                        Payments
                    </p>
                    <ul class="menu-list">
                        <li><a href="/adminpayments">Payments</a></li>
                    </ul>
                    <p class="menu-label">
                        Locations
                    </p>
                    <ul class="menu-list">
                        <li><a href="/questions">Questions Per Region</a></li>
                    </ul>
                </aside>
                </div>
            </div>
            <div class="column is-10">
                <div class="column is-12">
                    <nav class="breadcrumb" aria-label="breadcrumbs">
                        <ul>
                            <li><a href="/customlogout">Logout</a></li>
                            <li class="is-active"><a href="/adminaccounts" aria-current="page">Accounts</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="column is-12">
                <table id="usertable" class="table" style="width:100%">
                    <thead>
                    <tr>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Reg.Date</th>
                        <th>Last Login</th>
                        <th>Mobile</th>
                        <th>Locations</th>
                        <th>Payments</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Reg.Date</th>
                        <th>Last Login</th>
                        <th>Mobile</th>
                        <th>Locations</th>
                        <th>Payments</th>
                        <th>Actions</th>
                    </tr>
                    </tfoot>
                </table>
                </div>

            </div>
        </div>
    </div>

    <nav class="navbar is-fixed-bottom">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item " href="../">
                    <img src="/img/FIGERO-APP--LOGO-WHITE.png" width="112" height="28">
                </a>
            </div>
        </div>
    </nav>

    <script type="application/javascript">
        $(document).ready(function() {
            $('#usertable').DataTable( {
                "ajax": "/admingetaccounts",
                "order": [[ 1, "asc" ] , [2 , "asc"]],
                "columns": [
                    { "data": function ( row, type, val, meta ) {
                            return '<input class="input is-small" type="text" value="'+row.email+'" readonly />';
                        }
                    },
                    { "data": function ( row, type, val, meta ) {
                            if (row.accountstatus === "ACTIVE"){
                                return '<a class="button is-small is-rounded is-success">' + row.accountstatus + '</a>';
                            } else if (row.accountstatus === "UNUSED"){
                                return '<a class="button is-small is-rounded is-warning">' + row.accountstatus + '</a>';
                            }
                            else if (row.accountstatus === "IN TRIAL"){
                                return '<a class="button is-small is-rounded is-info">' + row.accountstatus + '</a>';
                            }
                            else {
                                return '<a class="button is-small is-rounded is-danger">' + row.accountstatus + '</a>';
                            }
                        }
                    },
                    { "data": "registration_timestamp" },
                    { "data": "last_logged_in" },
                    { "data": function ( row, type, val, meta ) {
                            if (row.mobile_app == 1){
                                return "Yes";
                            } else {
                                return "No";
                            }
                            //return row.locations.length;
                        }
                    },
                    { "data": function ( row, type, val, meta ) {
                            return row.locations.length;
                        }
                    },
                    { "data": function ( row, type, val, meta ) {
                            return row.payments.length;
                        }
                    },
                    { "data": function ( row, type, val, meta ) {
                            var ret = '';
                            if (row.locations.length > 0){
                                //ret += '<a class="">View Data</a> | ';
                            } else {
                                //ret += '<a class="">No Data</a> | ';
                            }
                            ret += '<a href="/adminlogin/' + row.id + '">Login</a>';
                            return ret;
                        }
                    }
                ]
            } );
        } );
    </script>
@stop