@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.dashboard') }}">
                        <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>
               Direct Team
            </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 Package</option>
        </select>
    </div>

    <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>Date</th>
                            <th>User ID</th>
                            <th>Level</th>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Status</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 = [
            { date: '12/10/2024', user_id: 'VIPOM001234', level: 'Level -1', name: 'John', address: 'Chennai', status: 'Purchased' },
            { date: '12/10/2024', user_id: 'VIPOM001234', level: 'Level -1', name: 'John', address: 'Chennai', status: 'Call Back' },
            { date: '12/10/2024', user_id: 'VIPOM001234', level: 'Level -1', name: 'John', address: 'Chennai', status: 'Rejected' }
        ];

        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: 'date' },
                { data: 'user_id' },
                { data: 'level' },
                { data: 'name' },
                { data: 'address' },
                {
                    data: 'status',
                    render: function(data) {
                        let cls = data.toLowerCase().replace(' ', '');
                        return `<span class="status-${cls}">${data}</span>`;
                    }
                }
            ]
        });

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

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