@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
    <div class="col-auto">
        <h5>User Management</h5>
    </div>
    <div class="col-auto">
        <a href="{{route('admin.user_cash_report')}}"><button class="btn btn-primary">User Cash Report</button> </a>

    </div>
</div>
<div class="card p-0 m-2">
    <div class="row mb-3 p-3 g-3 d-flex justify-content-end mt-0 pt-0">
        <div class="col-lg-2 col-md-12">
            <input type="text" placeholder="Select Name" class="form-control">
        </div>

        <div class="col-lg-2 col-md-12">
            <input type="text" placeholder="Select Number" class="form-control">

        </div>

        <div class="col-lg-1 col-md-12">
            <button class="btn btn-primary w-100">Search</button>
        </div>
    </div>
    <hr>
    <div class="row mb-3 align-items-center p-3 g-2">
        <div class="col-1">
            <select id="pageLength" class="form-select">
                <option value="10"> 10</option>
                <option value="25"> 25</option>
                <option value="50"> 50</option>
                <option value="100"> 100</option>
            </select>
        </div>

        <div class="col-md-3 ms-auto">
            <input type="text" id="toDate" class="form-control" placeholder="Search">
        </div>
    </div>


    <div class="table-responsive pt-0 pb-2">
        <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
            <div class="justify-content-between dt-layout-table">
                <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                    <table class="table" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>User Details</th>
                                <th>Referral Details</th>
                                <th>Team Details</th>
                                <th>Investment Details</th>
                                <th>Product Details</th>
                                <th>Application</th>
                                <th>View Diamond Payout</th>

                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>
            </div>
        </div>
    </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() {

        // const users = [
        //     {
        //         name: 'Rahul Sharma',
        //         id: '9876543210',
        //         password: '1234567890',
        //         doj: '01-01-2020',
        //         ref: 'Name', id: 'OMI12345', doj1: '01-01-2020', direct: 10,
        //         team: 10000, investment: '100000', product: '1000', green: '0'
        //     },

        // ];

        const table = $('#usersTable').DataTable({
            ajax: {
                url: "{{ route('admin.user_management_data') }}",
                data: function(d) {
                    d.custom_search = $('#toDate').val();
                }
            },
            processing: true,
            serverSide: true,
            // data: users,
            searching   : true,
            paging      : true,
            info        : true,
            lengthChange: false,
            pageLength  : 10,
            ordering    : false,

            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false
                },

                {
                    data: 'user_info',
                    name: 'user_info'
                },

                {
                    data: 'ref_info',
                    name: 'ref_info'
                },

                {
                    data: 'team_info',
                    name: 'team_info'
                },
                {
                    data: 'invest_info',
                    name: 'invest_info'
                },
                {
                    data: 'product_info',
                    name: 'product_info'
                },

                {
                    data: 'application',
                    name: 'application'
                },
                {
                    data: 'view',
                    name: 'view'
                },
            ]


        });

        // CUSTOM SEARCH
        $('#toDate').on('keyup', function() {
            table.ajax.reload();
        });

        // columns: [{
        //         data: null,
        //         render: function(data, type, row, meta) {
        //             return meta.row + meta.settings._iDisplayStart + 1;
        //         }
        //     },
        //     {
        //         data: null,
        //         render: function(data, type, row) {
        //             return `
        //            <div class="text-start text-nowrap d-flex flex-column gap-2">
        //     <div><strong>User Name :</strong> ${row.name}</div>
        //     <div><strong>User ID :</strong> ${row.id}</div>
        //     <div><strong>Password :</strong> ${row.password}</div>
        //     <div><strong>DOJ :</strong> ${row.doj}</div>
        //      <div>
        //                     <strong>Edit :</strong>
        //                 <a href="{{ route('admin.edit_user') }}">    <i class="ti tabler-edit text-primary ms-1 cursor-pointer"></i></a>
        //                 </div>
        //     </div>
        //         `;
        //         }
        //     },
        //     {
        //         data: null,
        //         render: function(data, type, row) {
        //             return `
        //             <div class="text-start text-nowrap d-flex flex-column gap-2">
        //                 <div><strong>Ref Name :</strong> ${row.ref}</div>
        //                 <div><strong>User ID :</strong> ${row.id}</div>
        //                 <div><strong>DOJ :</strong> ${row.doj1}</div>
        //             </div>
        //         `;
        //         }
        //     },

        //     {
        //         data: null,
        //         render: function(data, type, row) {
        //             return `
        //             <div class="text-start text-nowrap d-flex flex-column gap-2">
        //                 <div><strong>Direct :</strong> ${row.direct}</div>
        //                 <div>
        //                     <strong>Upline :</strong>
        //                     <i class="ti tabler-eye text-primary ms-1 cursor-pointer"></i>
        //                 </div>
        //             </div>
        //         `;
        //         }
        //     },
        //     {
        //         data: null,
        //         render: function(data, type, row) {
        //             return `
        //             <div class="text-start text-nowrap d-flex flex-column gap-2">
        //                 <div><strong>Team :</strong> ${row.team}</div>
        //                 <div><strong>Investment :</strong> ${row.investment}</div>
        //             </div>
        //         `;
        //         }
        //     },
        //     {
        //         data: null,
        //         render: function(data, type, row) {
        //             return `
        //             <div class="text-start text-nowrapd-flex flex-column gap-2">
        //                 <div><strong>Deposit :</strong> ${row.product}</div>
        //                 <div><strong>Green :</strong> ${row.green}</div>
        //                 <div>Income Report : <a href="javascript:void(0)" title="View">
        //                     <i class="ti tabler-eye text-primary"></i>
        //                 </a></div>
        //             </div>
        //         `;
        //         }
        //     },
        //     {
        //         data: null,
        //         orderable: false,
        //         searchable: false,
        //         render: function(data, type, row) {
        //             return `
        //             <div class="d-flex justify-content-center align-items-center d-flex gap-2">
        //                 <a href="{{ route('admin.view_application') }}" title="View">
        //                     <i class="ti tabler-eye text-primary"></i>
        //                 </a>

        //                 <a href="javascript:void(0)" title="Link">
        //                     <i class="ti tabler-link text-success"></i>
        //                 </a>
        //             </div>
        //         `;
        //         }
        //     },
        // ]

    });
</script>




@endsection