@extends('layouts.app')

@section('title', 'Панель преподавателя')

@push('styles')
<style>
    .list-group-item:hover {
        background-color: var(--ax-gray-100, #eef1f6);
    }
    .list-group-item {
        min-height: 50px;
    }
</style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="ax-page-header">
            <h1 class="mb-0">Добро пожаловать</h1>
        </div>

        <div class="ax-card p-3 mb-4">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">{{ \App\Support\SessionAuth::user()['name'] ?? '' }}</h2>
                <a href="/journal.php" class="btn btn-primary">Журнал</a>
            </div>
        </div>

        <h2 class="mb-3">Ваши ученики:</h2><br>

        <ul class="list-group mb-4">
            @if (! empty($paginatedStudents))
                @foreach ($paginatedStudents as $student)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <strong>{{ $student->last_name.' '.$student->first_name.' '.$student->middle_name }}</strong>
                            <br>
                            <small class="text-muted">Группа: {{ $student->group_name }}</small>
                        </div>

                        <div class="d-flex gap-2">
                            <button
                                class="btn btn-sm btn-success open-feedback-modal"
                                data-type="praise"
                                data-student-id="{{ $student->id }}"
                                data-student-name="{{ $student->last_name.' '.$student->first_name }}"
                            >
                                Похвала
                            </button>

                            <button
                                class="btn btn-sm btn-danger open-feedback-modal"
                                data-type="complaint"
                                data-student-id="{{ $student->id }}"
                                data-student-name="{{ $student->last_name.' '.$student->first_name }}"
                            >
                                Жалоба
                            </button>
                        </div>
                    </li>
                @endforeach
            @else
                <li class="list-group-item text-muted">У вас нет учеников.</li>
            @endif
        </ul>

        @if ($totalPages > 1)
            <nav>
                <ul class="pagination">
                    @for ($i = 1; $i <= $totalPages; $i++)
                        <li class="page-item {{ $i === $currentPage ? 'active' : '' }}">
                            <a class="page-link" href="?page={{ $i }}">{{ $i }}</a>
                        </li>
                    @endfor
                </ul>
            </nav>
        @endif

        <div class="modal fade" id="feedbackModal" tabindex="-1">
            <div class="modal-dialog">
                <form method="post" action="/send_feedback.php" class="js-ajax-form" data-alert-target="#feedbackAlert">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Жалоба / Похвала</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">
                            <div id="feedbackAlert"></div>

                            <div class="mb-3">
                                <label class="form-label">Ученик</label>
                                <input type="text" id="studentName" class="form-control" disabled>
                                <input type="hidden" name="student_id" id="studentId">
                            </div>

                            <input type="hidden" name="type" id="feedbackType">

                            <div class="mb-3">
                                <label class="form-label">Сообщение</label>
                                <textarea name="message" class="form-control" rows="4" required></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Отправить</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
    document.querySelectorAll('.open-feedback-modal').forEach(btn => {
        btn.addEventListener('click', () => {
            const studentId = btn.dataset.studentId;
            const studentName = btn.dataset.studentName;
            const type = btn.dataset.type;

            document.getElementById('studentId').value = studentId;
            document.getElementById('studentName').value = studentName;
            document.getElementById('feedbackType').value = type;

            const modal = new bootstrap.Modal(document.getElementById('feedbackModal'));
            modal.show();
        });
    });

    document.getElementById('feedbackModal').querySelector('form').addEventListener('ajax-form:success', function () {
        this.querySelector('textarea[name="message"]').value = '';
    });
    </script>
@endsection