@extends('layouts.app')

@section('title', 'Жалобы и похвалы')

@push('styles')
<style>
    .feedback-card { transition: 0.2s; }
    .feedback-card:hover { transform: translateY(-2px); }
</style>
@endpush

@section('content')
    <div class="container mt-4">
        <h2 class="mb-4">Жалобы и похвалы</h2>

        <div class="row">
            <div class="col-md-6">
                <h4 class="text-success">Похвалы</h4>
                @include('shared.feedback-column', ['items' => $praises, 'borderClass' => 'border-success', 'emptyText' => 'Похвал пока нет', 'showMarkRead' => true])
            </div>

            <div class="col-md-6">
                <h4 class="text-danger">Жалобы</h4>
                @include('shared.feedback-column', ['items' => $complaints, 'borderClass' => 'border-danger', 'emptyText' => 'Жалоб пока нет', 'showMarkRead' => true])
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.mark-read').forEach(btn => {
    btn.addEventListener('click', () => {
        const id = btn.dataset.id;

        fetch('/adviser/mark_feedback_read.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            body: 'id=' + id
        });

        const card = btn.closest('.card');

        if (card) {
            card.classList.add('border-secondary');
            btn.remove();

            const badge = card.querySelector('.badge');
            if (badge) {
                badge.className = 'badge bg-secondary';
                badge.textContent = 'Просмотрено';
            }
        }
    });
});
</script>
@endpush