@extends('Admin.layout')
<style>
    .dt-search,
    .dt-length {
        display: none !important;
    }
</style>
@section('content')

    <h5><button type="button" class="btn btn-icon bg-white me-2 waves-effect waves-light"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('admin.profit_report_silver') }}">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M15 6l-6 6l6 6"></path>
                </svg>
            </a>
        </button> Report</h5>

    <div class="row mt-5">
        <div class="col-lg-12">
            <div class="card">

                <div class="card-body">
                    <div class="row g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <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>
                                <option value="All">All</option>
                            </select>

                        </div>

                        <div class="col-12 col-lg-auto">

                            <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">


                                <input type="text" id="customSearch" class="form-control" placeholder="Search table...">

                                <button class="btn btn-label-secondary">
                                    Export
                                </button>
                            </div>

                        </div>

                    </div>

                    <div class="table-responsive">
                        <table id="usersTable" class="table table-striped table-bordered align-middle nowrap w-100">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>User ID</th>
                                    <th>Investment</th>
                                    <th>Name</th>
                                    <th>Account Name</th>
                                    <th>Account No</th>
                                    <th>IFSC</th>
                                    <th>Branch</th>
                                    <th>Amount</th>
                                    <th>TDS</th>
                                    <th>Pan No</th>
                                    <th>Admin Charge</th>
                                    <th>Payable Amount</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function () {

            const profitData = [

                {
                    id: 1,
                    date: '2026-05-18',
                    user_id: 'USR1001',
                    investment: '₹50,000',
                    name: 'Arun Kumar',
                    account_name: 'Arun Kumar',
                    account_no: '45879632145',
                    ifsc: 'SBIN0004587',
                    branch: 'Chennai',
                    amount: '₹5,000',
                    tds: '₹500',
                    pan_no: 'ABCDE1234F',
                    admin_charge: '₹100',
                    payable_amount: '₹4,400',
                    status: 'Paid'
                },

                {
                    id: 2,
                    date: '2026-05-18',
                    user_id: 'USR1002',
                    investment: '₹75,000',
                    name: 'Rahul',
                    account_name: 'Rahul',
                    account_no: '78541236987',
                    ifsc: 'HDFC0002587',
                    branch: 'Coimbatore',
                    amount: '₹7,500',
                    tds: '₹750',
                    pan_no: 'PQRSX4567K',
                    admin_charge: '₹150',
                    payable_amount: '₹6,600',
                    status: 'Pending'
                }

            ];

            let table = $('#usersTable').DataTable({

                data: profitData,

                pageLength: 10,
                ordering: false,
                searching: true,
                info: true,
                lengthChange: false,

                columnDefs: [
                    {
                        targets: '_all',
                        className: 'text-nowrap text-center align-middle'
                    }
                ],

                columns: [

                    {
                        data: 'id'
                    },

                    {
                        data: 'date'
                    },

                    {
                        data: 'user_id'
                    },

                    {
                        data: 'investment'
                    },

                    {
                        data: 'name'
                    },

                    {
                        data: 'account_name'
                    },

                    {
                        data: 'account_no'
                    },

                    {
                        data: 'ifsc'
                    },

                    {
                        data: 'branch'
                    },

                    {
                        data: 'amount'
                    },

                    {
                        data: 'tds'
                    },

                    {
                        data: 'pan_no'
                    },

                    {
                        data: 'admin_charge'
                    },

                    {
                        data: 'payable_amount'
                    },

                    {
                        data: 'status',
                        render: function (data) {

                            let badgeClass = 'bg-label-warning';

                            if (data === 'Paid') {
                                badgeClass = 'bg-label-success';
                            }

                            return `
                                <span class="badge ${badgeClass}">
                                    ${data}
                                </span>
                            `;
                        }
                    }

                ]

            });

            /*
            |--------------------------------------------------------------------------
            | Custom Search
            |--------------------------------------------------------------------------
            */
            $('#customSearch').on('keyup', function () {

                table.search($(this).val()).draw();

            });

            /*
            |--------------------------------------------------------------------------
            | Custom Page Length
            |--------------------------------------------------------------------------
            */
            $('#pageLength').on('change', function () {

                let value = $(this).val() === 'All'
                    ? -1
                    : parseInt($(this).val());

                table.page.len(value).draw();

            });

        });
    </script>



@endsection