@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5>Subscription</h5>
        </div>
    </div>
    <div class="card p-0 m-2">
        <h6 class="p-4 pb-0">Filters</h6>
        <div class="row mb-3 pt-0 p-3 g-3 d-flex justify-content-start">
            <div class="col-lg-2">
                <input type="date" id="fromDate" class="form-control">
            </div>
            <div class="col-lg-2">
                <input type="date" id="toDateFilter" class="form-control">
            </div>
            <div class="col-lg-1">
                <button class="btn btn-primary w-100" id="filterBtn">
                    Search
                </button>
            </div>
        </div>
        <hr>
        <div class="row mb-3 align-items-center g-2">
            <div class="col-auto ms-auto d-flex gap-2">
                {{-- CUSTOM SEARCH --}}
                <input type="text" id="customSearch" class="form-control" placeholder="Search" style="width:220px;">
                <button class="btn btn-label-secondary me-2">
                    <i class="ti tabler-upload"></i>&nbsp;Export
                </button>
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="usersTable">
                <thead>
                    <tr>
                        <th>Sno</th>
                        <th>Date</th>
                        <th>Address</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Amount</th>
                        <th>Days</th>
                        <th>Package</th>
                        <th>View</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            let table = $('#usersTable').DataTable({
                processing: true,
                serverSide: true, // 🔥 change this
                ajax: {
                    url: "{{ route('user_subscription_data') }}",
                    data: function(d) {
                        d.fromDate = $('#fromDate').val();
                        d.toDate = $('#toDateFilter').val();
                    }
                },
                order: [
                    [1, 'desc']
                ],
                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'date',
                        name: 'created_at'
                    },

                    {
                        data: 'address',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'name',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'phone',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'amount',
                        name: 'amount'
                    },

                    {
                        data: 'days',
                        name: 'days'
                    },

                    {
                        data: 'package',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'view',
                        orderable: false,
                        searchable: false
                    }

                ]
            });
            // DATE FILTER BUTTON
            $('#filterBtn').click(function() {
                table.ajax.reload();
            });
            // CUSTOM SEARCH BOX
            $('#customSearch').keyup(function() {
                table.search(this.value).draw();
            });
        });
    </script>
@endsection