<div class="row">
    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h4 id="h4" class="panel-title p-heading">Users List</h4>
            </div>
        </div>
    </div>
    <div class="panel-body">
        <div class="container" style="margin-top: 7%;">
            <div class="row">
                <div class="col-md-6">
                    <form id="push-form" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control" type="text" name="appid" placeholder="App ID..." required />
                                <input class="form-control" type="text" name="did" placeholder="DID..." required />
                                <span class="input-group-btn">
                                    <button class="btn btn-success" type="submit">
                                        <i aria-hidden="true"></i> Send Push
                                    </button>
                                </span>
                            </div>
                        </div>
                        <div id="push-result" style="font-size: 18px; line-height: 30px; color: #000;"></div>
                    </form>
                </div>
                <div class="col-md-6">
                    <form id="did-form" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control" type="text" name="search" placeholder="Enter Did" required />
                                <span class="input-group-btn">
                                    <button class="btn btn-success" type="submit">
                                        <i aria-hidden="true"></i> Search
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>
                    <div class="text-center" style="margin-top: 10px;">
                        <button id="combined-btn" class="btn btn-success">
                            <i aria-hidden="true" class="fa fa-download"></i> Download Logs
                        </button>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-6">
                    <form id="update-pushToken-form" role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control" type="text" name="search" placeholder="Enter Did" id="update-did" />
                                <input class="form-control" type="text" name="search" placeholder="Enter Push Token" id="update-pushToken" />
                                <span class="input-group-btn">
                                    <button class="btn btn-success" id="submit-token" type="submit">
                                        <i aria-hidden="true"></i> Update FCM Token
                                    </button>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- begin panel -->
        <div id="p-p" class="panel panel-info" hidden>
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Push Token</h4>
            </div>
            <div class="table-responsive"></div>
        </div>
        <!-- end panel -->

        <div class="push-token" style="width: 80%;">
            <h1 id="push-token"></h1>
        </div>

        <div class="app-inbox">
            <!-- begin panel -->
            <div id="p-a" class="panel panel-info" hidden>
                <div class="panel-heading">
                    <h4 class="panel-title p-heading">App Inbox</h4>
                </div>
                <div class="table-responsive"></div>
            </div>
            <!-- end panel -->

            <div id="app-inbox-container">
                <table id="app-inbox-table" class="table table-striped" hidden>
                    <thead>
                        <tr>
                            <th>cdata</th>
                            <th>ct</th>
                            <th>et</th>
                            <th>Language</th>
                            <th>ni</th>
                            <th>nid</th>
                            <th>nm</th>
                            <th>nt</th>
                            <th>st</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- begin panel -->
        <div id="p-50" class="panel panel-info" style="margin-top: 2%;" hidden>
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Last 50 Events</h4>
            </div>
            <div class="table-responsive"></div>
        </div>
        <!-- end panel -->

        <div id="last-50events-container">
            <table id="last-50events-table" class="table table-striped table-bordered" hidden>
                <thead>
                    <tr>
                        <th>Event Time</th>
                        <th>Key</th>
                    </tr>
                </thead>
            </table>
        </div>

        <!-- begin panel -->
        <div id="p-m" class="panel panel-info" style="margin-top: 2%;" hidden>
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Mongo Fields</h4>
            </div>
            <div class="table-responsive"></div>
        </div>
        <!-- end panel -->

        <div id="mongo-fields-container">
            <ul id="mongo-fields"></ul>
        </div>

        <!-- begin panel -->
        <div id="p-pg" class="panel panel-info" hidden>
            <div class="panel-heading">
                <h4 class="panel-title p-heading">Pgsql Fields</h4>
            </div>
            <div class="table-responsive"></div>
        </div>
        <!-- end panel -->

        <div id="pgsql-fields-container">
            <ul id="pgsql-fields"></ul>
        </div>
    </div>
    
    <!-- ////MODAL///// -->
    <div class="modal fade bd-example-modal-lg" id="cdata-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div id="cdata-container">
                    <table id="cdata-table" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Key</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
