@extends('admin.layouts')
@section('title', 'Subscription')
@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">Subscription</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, Project 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>Project ID</th>
                            <th>Project Name</th>
                            <th>Type</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>NTVP0003</td>
                            <td>E-commerce</td>
                            <td>
                                <div class="badge custom-badge success">
                                    <span class="badge-dot"></span>Free
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>NTVP0003</td>
                            <td>Shopping Mart</td>
                            <td>
                                <div class="badge custom-badge danger">
                                    <span class="badge-dot"></span>Monthly
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>NTVP0003</td>
                            <td>Trade Crypto</td>
                            <td>
                                <div class="badge custom-badge info">
                                    <span class="badge-dot"></span>Yearly
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>NTVP0003</td>
                            <td>Gaming Landing Page</td>
                            <td>
                                <div class="badge custom-badge success">
                                    <span class="badge-dot"></span>Free
                                </div>
                            </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