@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">

<style>
    #usersTable thead th {
        background-color: #1a99d5;
        color: white;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        padding: 12px;
        position: relative;
        text-align: center;
    }

    /* Vertical Divider */
    #usersTable thead th:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 14px;
        background-color: #F6FBFB66;
        opacity: 1;
    }

    #usersTable tbody td {
        padding: 12px;
        vertical-align: middle;
        border-bottom: 1px solid #f0f0f0;
        color: #555;
        font-size: 14px;
        text-align: center;
    }

    /* Custom Search Box */
    .search-container {
        position: relative;
    }

    .search-container i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
    }

    .search-container input {
        padding-left: 35px !important;
        border-radius: 4px;
        border: 1px solid #ced4da;
    }

    /* Pagination Styling - Matches the blue squares in image */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #1a99d5 !important;
        color: white !important;
        border: 1px solid #1a99d5 !important;
        border-radius: 4px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        margin-left: 5px;
        border-radius: 4px;
    }

    /* Status Text Colors */
    .status-purchased {
        color: #28c76f;
        font-weight: 700;
    }

    .status-callback {
        color: #ff9f43;
        font-weight: 700;
    }

    .status-rejected {
        color: #ea5455;
        font-weight: 700;
    }

    .btn-excel {
        background-color: #e9ecef;
        border: 1px solid #dee2e6;
        color: #6c757d;
    }
</style>

@section('content')
    <div class="container-fluid">
        <div class="row mb-3 mt-3">
            <div class="col-auto">
                <h5>
                    <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                        <a href="{{ route('admin.level_team') }}">
                            <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 d="M15 6l-6 6l6 6" />
                            </svg>
                        </a>
                    </button>
                    Level Users
                </h5>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body">

                 <h5 class="mb-0">Filters</h5>
             <div class="row align-items-center g-3 p-3">



    <div class="col-lg-3 col-md-6">
        <select class="form-select">
            <option selected>Select Status</option>
        </select>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="position-relative">
            <i class="ti tabler-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
            <input type="text" id="customSearch" class="form-control ps-5" placeholder="Search User">
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <button class="btn btn-primary w-100">
            Search
        </button>
    </div>

</div>


                <div class="d-flex justify-content-between align-items-center p-3">
                    <div>
                        <select id="customLength" class="form-select" style="width: 80px;">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>

                    <div class="d-flex gap-3">
                        <div class="search-container">
                            <i class="ti tabler-search"></i>
                            <input type="text" id="customSearch" class="form-control" placeholder="Search User">
                        </div>

                        <button class="btn btn-secondary d-flex align-items-center gap-1">
                            <i class="ti tabler-upload"></i> Excel
                        </button>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table w-100 mb-0" id="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Level</th>
                                <th>Total Members</th>
                                <th>Active Members</th>
                                <th>Inactive Members</th>
                                <th>Investment</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody></tbody>
                    </table>
                </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() {
            // Data updated to match the image content
            const teamData = [{
                    level: 'Level 1',
                    total: 10,
                    active: 9,
                    inactive: 1,
                    investment: '₹1,000'
                },
                {
                    level: 'Level 2',
                    total: 15,
                    active: 12,
                    inactive: 3,
                    investment: '₹5,000'
                },
                {
                    level: 'Level 3',
                    total: 20,
                    active: 18,
                    inactive: 2,
                    investment: '₹10,000'
                }
            ];


            const table = $('#usersTable').DataTable({
                data: teamData,
                dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
                pageLength: 10,
                ordering: false,
                columns: [{
                        data: null,
                        render: (data, type, row, meta) => meta.row + 1
                    },
                    {
                        data: 'level'
                    },
                    {
                        data: 'total'
                    },
                    {
                        data: 'active'
                    },
                    {
                        data: 'inactive'
                    },
                    {
                        data: 'investment'
                    },
                    {
                        data: null,
                        render: function() {
                            return `<a href="{{ route('admin.user_level_tree') }}"
                        class="link">
                        View
                    </a>`;
                        }
                    }
                ]
            });

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

            $('#customLength').on('change', function() {
                table.page.len(this.value).draw();
            });
        });
    </script>
@endsection