@extends('user.layout')

@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <style>
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        table.dataTable th,
        table.dataTable td {
            text-align: center;
            vertical-align: middle;
        }
    </style>

    <div class="container my-4">
        <div class="row d-flex justify-content-between">
            <h4 class="page-top-heading">Achievers List</h4>
        </div>

        <div class="card p-3">
            <div class="table-responsive">
                <table id="achieversTable" class="table table-hover table-borderless">
                    <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Profile</th>
                            <th>User ID</th>
                            <th>Name</th>
                            <th>Rank</th>
                            {{-- <th>Description</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        @php $sn = 1; @endphp
                        @foreach ($datatables as $data)
                            <tr>
                                <td>{{ $sn++ }}</td>
                                <td>
                                    <img src="{{ asset($data->profile_image ?? '/assets/images/avatar/avatar2.svg?v=2') }}"
                                        alt="Profile" width="40" height="40" class="rounded-circle">
                                </td>
                                <td>{{ $data->user_id }}</td>
                                <td>{{ $data->name }}</td>
                                <td class="text-success fw-bold">{{ $data->rank }}</td>
                                {{-- <td class="text-success fw-bold">{{ $data->description }}</td> --}}
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#achieversTable').DataTable();
        });
    </script>
@endsection