@extends('layout.layout')

{{-- NOTE: This file uses static data to render the table rows based on the provided UI image. --}}
@section('content')
    <div class="container-fluid py-4">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="row align-items-center mb-40">
                    {{-- Title (Placeholder) --}}
                    <div class="col-md-6">
                    </div>

                    {{-- Search and Sort Controls --}}
                    <div class="col-md-6 d-flex justify-content-end align-items-center gap-3">
                        
                        {{-- Search Input --}}
                        <div class="input-group input-group-sm w-50">
                            <span class="input-group-text bg-white border-end-0">
                                <iconify-icon icon="mdi:magnify" style="color: #6c757d; font-size: 18px;"></iconify-icon>
                            </span>
                            <input type="text" class="form-control border-start-0" placeholder="Search">
                        </div>
                        
                        {{-- Sort Dropdown --}}
                        <div class="dropdown">
                            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" 
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Sort by: Level
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li><a class="dropdown-item" href="#">Level (Asc)</a></li>
                                <li><a class="dropdown-item" href="#">Level (Desc)</a></li>
                                <li><a class="dropdown-item" href="#">Date</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle table-striped mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th scope="col" class="text-secondary fw-semibold">ID</th>
                                <th scope="col" class="text-secondary fw-semibold">Name</th>
                                <th scope="col" class="text-secondary fw-semibold">Level</th>
                                <th scope="col" class="text-secondary fw-semibold">Group/Private</th>
                                <th scope="col" class="text-secondary fw-semibold">Uploaded Date</th>
                                {{-- Removed fixed width: 250px --}}
                                <th scope="col" class="text-secondary fw-semibold text-center">Action</th> 
                            </tr>
                        </thead>
                        <tbody>
                            {{-- Static Data Rows --}}
                            <tr>
                                <td>5</td>
                                <td>ST00186_Level1_Group_20Jan2024_202033</td>
                                <td>Level 1</td>
                                <td>Group</td>
                                <td>20 Jan, 2024</td>
                                {{-- Added d-flex and justify-content-center to keep buttons inline --}}
                                <td class="text-center d-flex justify-content-center">
                                    <a href="#" class="btn btn-success btn-sm me-2">Feedback</a>
                                    <a href="#" class="btn btn-info btn-sm text-white">Request a Meeting</a>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>ST00155_Level5_Private_20Feb2024_203033</td>
                                <td>Level 5</td>
                                <td>Private</td>
                                <td class="text-center">22 Feb, 2024</td>
                                <td class="text-center d-flex justify-content-center">
                                    <a href="#" class="btn btn-success btn-sm me-2">Feedback</a>
                                    <a href="#" class="btn btn-info btn-sm text-white">Request a Meeting</a>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>ST00144_Level3_Group_20Jan2024_223033</td>
                                <td>Level 3</td>
                                <td>Group</td>
                                <td>22 Feb, 2024</td>
                                <td class="text-center d-flex justify-content-center">
                                    <a href="#" class="btn btn-success btn-sm me-2">Feedback</a>
                                    <a href="#" class="btn btn-info btn-sm text-white">Request a Meeting</a>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>ST00155_Level7_Private_22Feb2024_143033</td>
                                <td>Level 7</td>
                                <td>Private</td>
                                <td>22 Feb, 2024</td>
                                <td class="text-center d-flex justify-content-center">
                                    <a href="#" class="btn btn-success btn-sm me-2">Feedback</a>
                                    <a href="#" class="btn btn-info btn-sm text-white">Request a Meeting</a>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>ST00186_Level10_Group_22Feb2024_173033</td>
                                <td>Level 10</td>
                                <td>Group</td>
                                <td>22 Feb, 2024</td>
                                <td class="text-center d-flex justify-content-center">
                                    <a href="#" class="btn btn-success btn-sm me-2">Feedback</a>
                                    <a href="#" class="btn btn-info btn-sm text-white">Request a Meeting</a>
                                </td>
                            </tr>
                            {{-- End of Static Data Rows --}}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .card-body {
            padding: 1.5rem;
        }
        .table thead th {
            border-bottom: 2px solid #e9ecef;
            font-size: 0.9rem;
        }
        .table tbody td {
            font-size: 0.85rem;
            vertical-align: middle;
            border-top: 1px solid #e9ecef;
        }
        /* Custom styling for the search input group */
        .input-group.w-50 {
            max-width: 250px; /* Constrain search bar width */
        }
        .input-group-text {
            border: 1px solid #ced4da;
            border-right: none;
            background-color: #fff;
        }
        .form-control {
            border: 1px solid #ced4da;
        }
    </style>
@endpush