@extends('layout.layout')
@section('content')
<div class="container mt-5">
    <!-- Success/Error Messages -->
    {{-- @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert" id="successAlert">
                <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if ($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="fas fa-exclamation-circle me-2"></i>
    <ul class="mb-0">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif --}}
<div class="card shadow-lg border-0 rounded-3">
    <div class="card-header border-bottom py-3 px-3 d-flex justify-content-between align-items-center">
        <div class="mb-0"><i class="fas fa-clipboard-list me-2"></i> Student Requests</div>
    </div>
    <div class="card-body">
        <!-- Filters -->
        <div class="accordion mb-3" id="requestFilters">
            <div class="accordion-item">
                <div class="accordion-header" id="filterHeading">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#filterCollapse" aria-expanded="false" aria-controls="filterCollapse">
                        <i class="bi bi-funnel me-2"></i> Advanced Filters
                    </button>
                </div>
                <div id="filterCollapse" class="accordion-collapse collapse" aria-labelledby="filterHeading"
                    data-bs-parent="#requestFilters">
                    <div class="accordion-body">
                        <form method="GET" action="">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="search" class="form-label">Subject</label>
                                    <input type="text" name="search" id="search" class="form-control"
                                        placeholder="Enter Subject" value="{{ request('search') }}">
                                </div>


                                {{-- <div class="col-md-3">
                                            <label for="priority" class="form-label">Priority</label>
                                            <select name="priority" id="priority" class="form-select ">
                                                <option value="">Select Priority</option>
                                                <option value="high"
                                                    {{ request('priority') == 'high' ? 'selected' : '' }}>High</option>
                                <option value="medium"
                                    {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                                <option value="low" {{ request('priority') == 'low' ? 'selected' : '' }}>
                                    Low</option>
                                </select>
                            </div> --}}

                            <div class="col-md-3">
                                <label for="type" class="form-label">Type</label>
                                <select name="type" id="type" class="form-select ">
                                    <option value="">Select Type</option>
                                    <option value="complaint"
                                        {{ request('type') == 'complaint' ? 'selected' : '' }}>Complaint
                                    </option>
                                    <option value="request"
                                        {{ request('type') == 'request' ? 'selected' : '' }}>Request
                                    </option>
                                    <option value="information"
                                        {{ request('type') == 'information' ? 'selected' : '' }}>Information
                                    </option>
                                    <option value="need"
                                        {{ request('type') == 'need' ? 'selected' : '' }}>Need
                                    </option>
                                    <option value="escalation"
                                        {{ request('type') == 'escalation' ? 'selected' : '' }}>Escalations
                                    </option>
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label for="related_to" class="form-label">Related To</label>
                                <select name="related_to" id="related_to" class="form-select ">
                                    <option value="">Select Option</option>
                                    <option value="activities"
                                        {{ request('related_to') == 'activities' ? 'selected' : '' }}>
                                        Activities</option>
                                    <option value="homework"
                                        {{ request('related_to') == 'homework' ? 'selected' : '' }}>Homework
                                    </option>
                                    <option value="whiteboard"
                                        {{ request('related_to') == 'whiteboard' ? 'selected' : '' }}>
                                        Whiteboard</option>
                                    <option value="curriculum"
                                        {{ request('related_to') == 'curriculum' ? 'selected' : '' }}>
                                        Curriculum</option>
                                    <option value="time"
                                        {{ request('related_to') == 'time' ? 'selected' : '' }}>Time</option>
                                </select>
                            </div>

                            <div class="col-md-12 d-flex justify-content-end gap-2 mt-3">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-filter me-1"></i> Apply Filters
                                </button>
                                <a href="{{ url()->current() }}" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-lg me-1"></i> Clear
                                </a>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    @if ($rows->isNotEmpty())
    <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
        <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
            <thead class="">
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center">Subject</th>
                    <th class="text-center">Type</th>
                    <th class="text-center">Related To</th>
                    {{-- <th class="text-center">Priority</th> --}}
                    <th class="text-center">Created Date</th>
                    {{-- <th class="text-center">Instructor</th>
                                    <th class="text-center">Priority</th> --}}
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                {{-- @dd($rows) --}}
                @foreach ($rows as $row)
                <tr>
                    <td>
                        {{ $row->id }}
                    </td>
                    <td>
                        {{ $row->subject }}
                        {{-- @if ($row->session)
                                                <span class="badge bg-info ms-2">{{ $row->session }}</span>
                        @endif --}}
                    </td>
                    <td><span class="badge bg-secondary">{{ ucfirst($row->type) }}</span></td>
                    <td><span class="badge bg-light text-dark">{{ ucfirst($row->related_to) }}</span>
                    </td>
                    {{-- <td>
                                            <span
                                                class="badge 
                                                {{ $row->priority === 'high' ? 'bg-danger' : ($row->priority === 'medium' ? 'bg-warning text-dark' : 'bg-success') }}">
                    {{ ucfirst($row->priority) }}
                    </span>
                    </td> --}}
                    <td><span class="badge bg-light text-dark">{{ $row->created_at }}</span></td>

                    {{-- <td>
                                            @if ($row->creator)
                                                {{ $row->creator->first_name . $row->creator->last_name }}
                    @else
                    <span class="text-muted">-</span>
                    @endif
                    </td>
                    <td>
                        @if ($row->instructor)
                        {{ $row->instructor->first_name . $row->instructor->last_name }}
                        @else
                        <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td>
                        <span
                            class="badge 
                                                {{ $row->priority === 'high' ? 'bg-danger' : ($row->priority === 'medium' ? 'bg-warning text-dark' : 'bg-success') }}">
                            {{ ucfirst($row->priority) }}
                        </span>
                    </td> --}}
                    <td>
                        <a href="{{ route('studentRequests.show', $row->id) }}" class="btn btn-sm btn-info text-white">
                            View
                        </a>

                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <div class="mt-3">
            {{ $rows->appends(request()->except('page'))->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @endif
</div>
</div>
</div>
@endsection

@push('scripts')
<script>
    setTimeout(() => {
        let alert = document.getElementById('successAlert');
        if (alert) {
            let bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        }
    }, 10000);
</script>
@endpush