@extends('layouts.app')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => $title])

<div class="row mt-4 mx-4">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-header pb-0">
                <div class="d-flex flex-row justify-content-between">
                    <h5 class="mb-3">{{ $title }}</h5>

                    <div class="dropdown">
                        <label for="userTypeDropdown" class="form-label">Select User Type</label>
                        <select class="form-select select2" id="userTypeDropdown">
                            <option value="3">Faculty</option>
                            <option value="5">Student</option>
                            <option value="4">Alumni</option>
                            <option value="6">Parent</option>
                            <option value="2">Employer</option>
                        </select>
                    </div>

                </div>
            </div>

            <div class="card-body px-0 pt-0 pb-2">
                <div class="table-responsive p-0">
                    <table class="table align-items-center mb-0 table-hover" id="myTable">
                        <thead>
                            <tr id="tableHeaders">
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">S.No
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Display
                                    Name</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Acedmic
                                    Year
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Semester
                                </th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Action
                                </th>
                            </tr>
                        </thead>
                        <tbody id="tableBody">
                            @forelse ($feedback as $index => $data)
                            <tr>
                                                        <td>
                                                            <p class="text-sm text-center font-weight-bold mb-0">{{ $index + 1 }}</p>
                                                        </td>
                                                        <td class="text-sm font-weight-bold ps-2">
                                                            {{ $data->display_name }}
                                                        </td>
                                                        <td class="text-sm font-weight-bold ps-2">
                                                            {{ $data->academic->academicdetail }}
                                                        </td>
                                                        <td class="text-sm text-center font-weight-bold mb-0">
                                                            {{ $data->semesters->semester_name }}
                                                        </td>
                                                        <td class="text-sm font-weight-bold ps-2">
                                                            <div class="d-flex justify-content-center align-items-center">
                                                                <a href="{{route('faculty-report',['id'=> $data->feedback_mst_sid ])}}" class="text-success" title="Edit">
                                                                    <i class="fas fa-eye"></i>
                                                                </a>
                                                            </div>
                                                        </td>
                                                        </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center">No feedback available</td>
                                </tr>
                            @endforelse

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @push('scripts')
        <script>

            $(document).ready(function () {
                // When a user selects a user type from the dropdown
                $('#userTypeDropdown').on('change', function () {
                    var userType = $(this).val(); // Get the selected user type value
                    console.log('Selected User Type:', userType);

                    // Send an AJAX request to get the feedback data
                    $.ajax({
                        url: '{{ route('feedback-data') }}',
                        method: 'GET',
                        data: { user_type: userType }, // Send the user type
                        success: function (response) {
                            // Update the table headers and body with the response data
                            $('#tableHeaders').html(response.headers);
                            $('#tableBody').html(response.rows);
                        },
                        error: function (xhr, status, error) {
                            console.error('Error loading data:', status, error);
                            console.error('Response:', xhr.responseText);
                            alert('Error loading data');
                        }
                    });
                });
            });

        </script>
    @endpush