@extends('layout.layout')
@section('content')
    <div class="container py-4">
        <h4 class="mb-4 text-primary border-bottom pb-2">Student Feedbacks 💬</h4>

        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h5 class="card-title text-secondary">Find & Filter Feedbacks</h5>
                <form method="GET" action="{{ route('getfeedback') }}" class="row g-3 align-items-end">
                    {{-- Search Input --}}
                    <div class="col-md-5">
                        <label for="search-input" class="form-label visually-hidden">Search Subject or Sender</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-search"></i></span>
                            <input id="search-input" type="text" name="search" value="{{ request('search') }}"
                                class="form-control" placeholder="Search by Subject or Sender's Name...">
                        </div>
                    </div>

                    {{-- Filter by From/Sender --}}
                    <div class="col-md-4">
                        <label for="from-select" class="form-label visually-hidden">Filter by Sender</label>
                        <select id="from-select" name="from" class="form-select" onchange="this.form.submit()"
                            aria-label="Filter by Sender">
                            <option value="" selected>Filter by Sender (All Students)</option>
                            @foreach ($students as $student)
                                <option value="{{ $student->id }}" {{ request('from') == $student->id ? 'selected' : '' }}>
                                    {{ $student->first_name }} {{ $student->last_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Action Buttons --}}
                    <div class="col-md-3 d-flex justify-content-end">
                        <button type="submit" class="btn btn-primary me-2">
                            <i class="bi bi-funnel-fill"></i> Apply Filter
                        </button>
                        <a href="{{ route('getfeedback') }}" class="btn btn-outline-secondary" aria-label="Reset Filters">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <div class="card shadow-lg">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle mb-0">
                        <thead class="table-dark">
                            <tr>
                                <th style="width: 5%;">#</th>
                                <th style="width: 35%;">Subject/Recommendation Preview</th>
                                <th style="width: 20%;">Sent By</th>
                                <th style="width: 15%;">Date</th>
                                <th style="width: 25%;">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($feedbacks as $feedback)
                                <tr>
                                    <td><span class="badge bg-secondary">{{ $feedback->id }}</span></td>
                                    {{-- Assuming 'recommendation' is the main subject/content --}}
                                    <td title="{{ $feedback->recommendation }}">
                                        <a href="{{ route('onefeedback', $feedback->id) }}"
                                            class="text-decoration-none fw-bold text-dark">
                                            {{ Str::limit($feedback->recommendation, 65) }}
                                        </a>
                                    </td>
                                    <td>
                                        <i class="bi bi-person-circle text-info me-1"></i>
                                        {{ $feedback->student->first_name }} {{ $feedback->student->last_name }}
                                    </td>
                                    <td>
                                        <i class="bi bi-calendar me-1"></i>
                                        {{ $feedback->created_at->format('M d, Y') }}
                                    </td>
                                    <td>
                                        {{-- Enhanced, visually distinct, but still disabled for now --}}
                                        <button class="btn btn-sm btn-info text-white" disabled data-bs-toggle="tooltip"
                                            title="View & Reply">
                                            <i class="bi bi-reply-fill"></i> Reply
                                        </button>
                                        <button class="btn btn-sm btn-success" disabled data-bs-toggle="tooltip"
                                            title="Schedule a Call">
                                            <i class="bi bi-telephone-fill"></i> Call
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4 text-muted">
                                        <i class="bi bi-inbox-fill fs-3 d-block mb-1"></i>
                                        <strong>No feedbacks found.</strong> Try adjusting your search or filter settings.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center mt-4">
            {{ $feedbacks->withQueryString()->links('pagination::bootstrap-5') }}
        </div>
    </div>

    {{-- Add Bootstrap Icons CDN (if not already included) and Tooltip initialization --}}
    @push('styles')
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @endpush

    @push('scripts')
        <script>
            // Initialize Bootstrap Tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        </script>
    @endpush
@endsection