@extends('admin.layouts')
@section('title', 'User Management')
@section('header')


@endsection
@section('content')


<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/admin/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/admin/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{asset('/assets')}}/admin/css/datatable/buttons.dataTables.min.css">

<!-- Flatpickr CSS -->
<link rel="stylesheet" href="{{asset('/assets')}}/admin/css/flatpickr.min.css">


<div class="container-fluid page-wrapper">
    <div class="row">
        <div class="mb-4 position-relative">
            <h3 class="page-top-heading">Users</h3>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-lg-12">
           <div class="card datatable-card">
                <div class="filter-row-container">
                    <div class="row">
                        <div class="col-lg-5">
                            <label class="filter-label">Date</label>
                            <div class="d-flex justify-content-between align-items-center">
                                <input type="date" id="date_from" class="form-control" placeholder="MM.DD.YYYY" />
                                <img src="{{asset('/assets')}}/admin/images/icons/right-arrow.svg" class="mx-2" alt="Arrow Icon"/>
                                <input type="date" id="date_to" class="form-control" placeholder="MM.DD.YYYY" />
                            </div>
                        </div>
                        <div class="col-lg-2 my-lg-0 my-xl-0 my-md-3 my-sm-3 my-3">
                           <label class="filter-label">User ID</label>
                           <input type="text" class="form-control" placeholder="Search" />
                        </div>
                        <div class="col-lg-3 d-flex align-items-end">
                            <div class="d-flex align-items-center">
                                <button type="button" class="btn btn-primary me-2 search-btn">Search</button>
                                <button type="button" class="btn btn-secondary reset-btn">Reset</button>
                            </div>
                        </div>
                    </div>
                </div>
               <div class="card-body">
                   <table id="data-table" class="table nowrap align-middle table-striped" style="width:100%">
                        <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Date</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>User ID</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>20 Aug 2024</td>
                                <td>William </td>
                                <td>test@gmail.com</td>
                                <td>NTVX0001</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>20 Aug 2024</td>
                                <td>William </td>
                                <td>test@gmail.com</td>
                                <td>NTVX0001</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>20 Aug 2024</td>
                                <td>William </td>
                                <td>test@gmail.com</td>
                                <td>NTVX0001</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>20 Aug 2024</td>
                                <td>William </td>
                                <td>test@gmail.com</td>
                                <td>NTVX0001</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Flatpicker JS -->
<script src="{{asset('/assets')}}/admin/js/flatpickr.js"></script>

<!-- JS for Initializing date Picker -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
      flatpickr("#date_from", {
          dateFormat: "m/d/Y",
          allowInput: true
      });

      flatpickr("#date_to", {
          dateFormat: "m/d/Y",
          allowInput: true
      });
  });
</script>






@endsection
@section('footer')


<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<!-- Datatable JS -->
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/datatables.init.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/buttons.html5.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/buttons.print.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/jszip.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/pdfmake.min.js"></script>
<script type="text/javascript" src="{{asset('/assets')}}/admin/js/datatable/vfs_fonts.js"></script>


@endsection