@extends('admin.layouts.app')
<style>
        .pagination{
            float: right;
            margin-top: 10px;
        }
    </style>
@section('content')
<div class="container-fluid">

    <div class="header text-white"> 
        <div class="py-2 px-4 border-bottom d-none d-lg-block">
            <div class="d-flex align-items-center py-1">
                <div class="position-relative">
                    <div class="input-group mb-3">
                        <select class="form-select " id="search_by">
                            <option>Select...</option>
                            <!-- <option value="uid">UID</option> -->
                            <option value="application_id">APP-ID</option>
                            <option value="email">Email</option>
                            <option value="contact">Contact</option>

                        </select>
                        <input type="text" class="form-control " id="search_key" placeholder="Search for...">
                        <button class="btn  btn-secondary" type="button" onclick="searchByKey()">Go!</button>
                    </div>
                </div>
                <div class="flex-grow-1 ps-3">

                </div>
                <div>
                    <div id="reportrange" class="overflow-hidden form-control ">
                        <i class="far fa-calendar"></i>&nbsp;
                        <span></span> <i class="fas fa-caret-down"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top:-40px !important;">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                                <h5 class="card-title">Responsive DataTables</h5>
                                <h6 class="card-subtitle text-muted">Highly flexible tool that many advanced features to any HTML table. See official
                                    documentation <a href="https://datatables.net/extensions/responsive/" target="_blank"
                                        rel="noopener noreferrer nofollow">here</a>.</h6>
                            </div> --}}
                <div class="card-body scroll-h">
                   
                <div class="table-responsive table-card"
                        style="max-height:85vh; height: auto;  overflow: auto;">
                        <table class="table table-sm table-centered align-middle table-nowrap mb-0">
                            <thead class="text-muted table-light" style="position: sticky;top: 0;	">
                                <tr>
                                    <th>#</th>
                                    <th>App-ID</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact</th>
                                    <th>Profile</th>
                                    <th>State</th>
                                    <th>District</th>
                                    <th>Status</th>
                                    <th>Action</th>

                                </tr>
                            </thead>
                            <input type="hidden" name="table_id" id="table_id" value="allApplicationsTbody">
                            <tbody id="allApplicationsTbody">

                            </tbody>
                        </table>

                    </div>
                      
                </div>

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


</div>
@endsection