@extends('Admin.layout')
<link href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
@section('content')
@section('navlink')
<a href="{{ route('dashboard') }}" class="link-secondary text-decoration-none">Home</a> / <span>User Management</span>
@endsection
<div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-4">
    <div>
        <h1 class="h3 mb-1">User Management</h1>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-secondary btn-sm">Export</button>
        <button class="btn btn-primary btn-sm">+ New Entry</button>
    </div>
</div>

<!-- TABLE CARD -->
<div class="card card-animated-border mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="h6 mb-0 text-gold">All Users</h3>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-primary btn-sm">Filter</button>
            <button class="btn btn-link btn-sm">View all</button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-striped align-middle mb-0" id="users-table">
            <thead>
                <tr class="text-uppercase small text-secondary">
                    <th>#</th>
                    <th>Joining&nbsp;Date</th>
                    <th>User&nbsp;ID</th>
                    <th>User&nbsp;Name</th>
                    <th>Ref&nbsp;Details</th>
                    <th>Team</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>

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

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

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

<script>
    const users = [
    {
        id: 1,
        joining_date: "17-09-2026 09:28:05",
        user_id: "2026091701",
        password: "12345678",
        user_name: "Test",
        ref_name: "Test",
        ref_id: "2026070801",
        direct_team: 0,
        upline_team: 2,
        downline_team: 0,
        user_status: "Active",
        package_status: "Inactive"
    }
];

const data = $('#users-table').DataTable({
    processing: true,
    serverSide: false,
    responsive: false,
    autoWidth: false,
    data: users,

    columns: [
        {
            data: null,
            render: function (data, type, row, meta) {
                return meta.row + 1;
            }
        },
        {
            data: 'joining_date'
        },
        {
            data: null,
            render: function (data, type, row) {
                return `
                    <div class="text-nowrap">
                        <div>ID : ${row.user_id}</div>
                        <div>Password : ${row.password}</div>
                    </div>
                `;
            }
        },
        {
            data: 'user_name'
        },
        {
            data: null,
            render: function (data, type, row) {
                return `
                    <div class="text-nowrap">
                        <div>Ref Name : ${row.ref_name}</div>
                        <div>Ref ID : ${row.ref_id}</div>
                    </div>
                `;
            }
        },
        {
            data: null,
            render: function (data, type, row) {
                return `
                    <div class="text-nowrap">
                        <div>
                            <strong>Direct Team: ${row.direct_team}</strong>
                            <i class="ti ti-eye text-primary ms-1"></i>
                        </div>
                        <div>
                            <strong>Upline Team: ${row.upline_team}</strong>
                            <i class="ti ti-eye text-primary ms-1"></i>
                        </div>
                        <div>
                            <strong>Downline Team: ${row.downline_team}</strong>
                            <i class="ti ti-eye text-primary ms-1"></i>
                        </div>
                    </div>
                `;
            }
        },
        {
            data: null,
            render: function (data, type, row) {
                const userStatusClass =
                    row.user_status === 'Active' ? 'text-success' : 'text-danger';

                const packageStatusClass =
                    row.package_status === 'Active' ? 'text-success' : 'text-danger';

                return `
                    <div class="text-nowrap">
                        <div>
                            <strong>User Status :</strong>
                            <span class="${userStatusClass}">${row.user_status}</span>
                        </div>
                        <div>
                            <strong>Package Status :</strong>
                            <span class="${packageStatusClass}">${row.package_status}</span>
                        </div>
                    </div>
                `;
            }
        },
        {
            data: null,
            orderable: false,
            searchable: false,
            render: function (data, type, row) {
                return `
                    <button type="button"
                        class="btn btn-warning btn-sm view-user"
                        data-id="${row.id}">
                        View
                    </button>
                `;
            }
        }
    ],

    order: [[1, 'desc']],
    pageLength: 10,
    lengthMenu: [10, 25, 50, 100],
    lengthChange: true,
    searching: true,
    info: true,

    language: {
        search: "",
        searchPlaceholder: "Search users...",
        emptyTable: "No users available",
        zeroRecords: "No matching users found",
        lengthMenu: "Show _MENU_ entries"
    },

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

$('#users-table').on('click', '.view-user', function () {
    const userId = $(this).data('id');
    const user = users.find(item => item.id == userId);

    if (user) {
        console.log(user);
        // Add your view modal or navigation here.
    }
});
</script>

@endsection