@extends('admin.layout')

@section('title', 'User Management')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<div class="container-fluid">

    <h4 class="mb-4 fw-bold">User Management</h4>

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

        {{-- ===== Filters ===== --}}
        <div class="card-body border-bottom">
            <h6 class="fw-semibold mb-3">Filters</h6>

            <div class="row g-3 align-items-end">
                <div class="col-md-4">
                    <label class="form-label">User ID</label>
                    <select class="form-select">
                        <option>Select User ID</option>
                        <option>#BU0881</option>
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Status</label>
                    <select class="form-select">
                        <option>Select Status</option>
                        <option>Active</option>
                        <option>Blocked</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <button class="btn btn-warning w-100">Search</button>
                </div>
            </div>
        </div>

        {{-- ===== Table ===== --}}
        <div class="card-body">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <select class="form-select w-auto">
                    <option>10</option>
                    <option>25</option>
                    <option>50</option>
                </select>

                <div class="d-flex gap-2">
                    <input type="text" class="form-control" placeholder="Search">
                    <button class="btn btn-outline-secondary">
                        <i class="ti ti-upload me-sm-1"></i>
                        Excel
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>SNO</th>
                            <th>NAME</th>
                            <th>PHONE</th>
                            <th>EMAIL</th>
                            <th>USER ID</th>
                            <th>KYC STATUS</th>
                            <th>STATUS</th>
                            <th>VIEW</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for($i = 1; $i <= 6; $i++) <tr>
                            <td>{{ $i }}</td>
                            <td>John</td>
                            <td>9876543212</td>
                            <td>john@gmail.com</td>
                            <td>#BU0881</td>
                            <td>
                                <span class="badge bg-success">Approved</span>
                            </td>
                            <td>
                                <span class="badge bg-success">Active</span>
                            </td>
                            <td>
                                <div class="d-flex align-items-center gap-2"></div>
                                <a href="{{ route('user_profile') }}" class="text-warning me-2">View</a>
                                <a href="" class="btn btn-sm btn-danger" title="Delete User">
                                    <i class="ti ti-trash"></i>
                                </a>


                                <a href="" class="btn btn-sm btn-secondary" title="Block User">
                                    <i class="ti ti-ban"></i>
                                </a>
            </div>
            </td>
            </tr>
            @endfor
            </tbody>
            </table>
        </div>

        {{-- ===== Pagination ===== --}}
        <div class="d-flex justify-content-between align-items-center mt-3">
            <small class="text-muted">Showing 1 to 10 of 50 entries</small>

            <nav>
                <ul class="pagination mb-0">
                    <li class="page-item disabled"><a class="page-link">«</a></li>
                    <li class="page-item active"><a class="page-link">1</a></li>
                    <li class="page-item"><a class="page-link">2</a></li>
                    <li class="page-item"><a class="page-link">3</a></li>
                    <li class="page-item"><a class="page-link">»</a></li>
                </ul>
            </nav>
        </div>

    </div>
</div>

</div>
@endsection