@extends('Admin.layout')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        .user-box {
            text-align: left;
        }

        .user-name {
            font-weight: 700;
            /* color: #111827; */
            margin-bottom: 4px;
        }

        .user-id {
            font-size: 13px;
            /* color: #6b7280; */
        }

        .amount {
            font-weight: 700;
            color: #059669;
        }

        .badge-soft-success {
            background: #dcfce7;
            color: #15803d;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 700;
        }

        .badge-soft-warning {
            background: #fef3c7;
            color: #b45309;
            padding: 8px 12px;
            border-radius: 10px;
            font-weight: 700;
        }

        .action-btn {
            border-radius: 10px;
            font-size: 13px;
            padding: 7px 12px;
            font-weight: 600;
        }

        .dataTables_info,
        .dataTables_paginate {
            padding: 15px 18px !important;
        }

        @media(max-width:768px) {
            .table-wrap {
                padding: 0 10px 10px;
            }
        }
    </style>

    <div class="row align-items-center justify-content-between mt-3 mb-3 m-2">
        <div class="col-auto">
            <h5 class="page-title">
                <i class="ti tabler-leaf me-2 text-primary"></i>Green Advance
            </h5>
        </div>
    </div>

    <div class="card main-card m-2">

        <div class="filter-section p-3">
            <div class="row g-3 align-items-end d-flex justify-content-end">
                <div class="col-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-lg-2 col-md-6">
                    <label class="form-label">From Date</label>
                    <input type="date" class="form-control">
                </div>

                <div class="col-lg-2 col-md-6">
                    <label class="form-label">To Date</label>
                    <input type="date" class="form-control">
                </div>

                <div class="col-lg-2 col-md-6">
                    <label class="form-label">User Name</label>
                    <input type="text" class="form-control" placeholder="Search user">
                </div>

                <div class="col-lg-auto col-md-6">
                    <button class="btn btn-primary w-100">
                        <i class="ti tabler-search me-1"></i> Search
                    </button>
                </div>
                <div class="col-md-3 ms-auto">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
                </div>

                <div class="col-lg-auto col-md-6">
                    <button class="btn btn-label-secondary w-100">
                        <i class="ti tabler-download me-1"></i> Export
                    </button>
                </div>

            </div>
        </div>


        <div class="table-wrap">
            <table class="table w-100" id="usersTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>User Details</th>
                        <th>Address</th>
                        <th>Phone</th>
                        <th>Referral ID</th>
                        <th>Referral Name</th>
                        <th>Investment</th>
                        <th>Available Amount</th>
                        <th>Debited Amount</th>
                        <th>View Investments</th>
                        <th>Income Status</th>
                        <th>Package Status</th>
                        <th>Action</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 () {

    const users = [
        {
            date: '28/08/2022',
            name: 'Rahul Sharma',
            id: 'USR1025',
            address: 'Chennai, Tamil Nadu',
            phone: '9876543210',
            referral_id: 'REF1001',
            referral_name: 'Amit Kumar',
            investment: '50000',
            available_amount: '20000',
            debited_amount: '5000',
            income_status: 'Active',
            package_status: 'Running'
        },
        {
            date: '12/10/2022',
            name: 'Amit Kumar',
            id: 'USR1026',
            address: 'Bangalore, Karnataka',
            phone: '9123456780',
            referral_id: 'REF1002',
            referral_name: 'Suresh',
            investment: '85000',
            available_amount: '35000',
            debited_amount: '10000',
            income_status: 'Pending',
            package_status: 'Completed'
        }
    ];

    let table = $('#usersTable').DataTable({
        data: users,
        pageLength: 10,
        ordering: false,
        searching: true,
        lengthChange: false,
        info: true,

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

        columns: [

            /* # */
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + 1;
                }
            },

            /* Date */
            { data: 'date' },

            /* User Details */
            {
                data: null,
                render: function (data, type, row) {
                    return `
                        <div class="user-box">
                            <div class="user-name">
                                <i class="ti tabler-user me-1 text-primary"></i>${row.name}
                            </div>
                            <div class="user-id">
                                <i class="ti tabler-id me-1"></i>${row.id}
                            </div>
                        </div>
                    `;
                }
            },

            /* Address */
            { data: 'address' },

            /* Phone */
            { data: 'phone' },

            /* Referral ID */
            { data: 'referral_id' },

            /* Referral Name */
            { data: 'referral_name' },

            /* Investment */
            {
                data: 'investment',
                render: function (data) {
                    return `<span class="badge bg-success">₹ ${data}</span>`;
                }
            },

            /* Available Amount */
            {
                data: 'available_amount',
                render: function (data) {
                    return `<span class="badge bg-primary">₹ ${data}</span>`;
                }
            },

            /* Debited Amount */
            {
                data: 'debited_amount',
                render: function (data) {
                    return `<span class="badge bg-danger">₹ ${data}</span>`;
                }
            },

            /* View Investments */
            {
                data: null,
                render: function () {
                    return `
                        <a href="{{ route('admin.green_deposit_report') }}">
                            <i class="ti tabler-eye text-primary fs-5"></i>
                        </a>
                    `;
                }
            },

            /* Income Status */
            {
                data: 'income_status',
                render: function (data) {
                    let cls = data === 'Active'
                        ? 'bg-success'
                        : 'bg-warning';

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

            /* Package Status */
            {
                data: 'package_status',
                render: function (data) {
                    let cls = data === 'Running'
                        ? 'bg-info'
                        : 'bg-secondary';

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

            /* Action */
            {
                data: null,
                render: function () {
                    return `
                        <button class="btn btn-sm btn-label-danger action-btn"
                            data-bs-toggle="modal"
                            data-bs-target="#delete">
                            <i class="ti tabler-trash me-1"></i>
                        </button>
                    `;
                }
            }

        ]
    });

    $('#customSearch').keyup(function () {
        table.search($(this).val()).draw();
    });

    $('#pageLength').change(function () {
        let value = $(this).val() === 'All' ? -1 : $(this).val();
        table.page.len(value).draw();
    });

});
</script>

@endsection