@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 " href="/adminaccounts">
                        Accounts
                    </a>
                    <a class="navbar-item is-active" href="/adminpayments">
                        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  href="/adminaccounts">Accounts</a></li>
                        </ul>
                        <p class="menu-label">
                            Payments
                        </p>
                        <ul class="menu-list">
                            <li><a class="is-active" 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="/adminpayments" aria-current="page">Payments</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="column is-12">
                    <table id="usertable" class="table" style="width:100%">
                        <thead>
                        <tr>
                            <th>Created</th>
                            <th>User</th>
                            <th>Reference</th>
                            <th>Description</th>
                            <th>Payment Total</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <tr>
                            <th>Created</th>
                            <th>User</th>
                            <th>Reference</th>
                            <th>Description</th>
                            <th>Payment Total</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": "/admingetpayments",
                "order": [[ 0, "asc" ]],
                "columns": [
                    { "data": "created_at" },
                    { "data": "user.email" },
                    { "data": "payment_reference" },
                    { "data": "description" },
                    { "data": "converted_zar_total" },
                ]
            } );
        } );
    </script>
@stop