@extends('layout.layout')

@section('title', __('Feedback Details'))

@section('content')
<div class="container py-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary">
            {{-- <i class="fa fa-comment-dots me-2"></i> Feedback Details --}}
        </h2>
        <a href="{{ route('teacher_feedback.index') }}" class="btn btn-outline-secondary">
            <i class="fa fa-arrow-left"></i> Back
        </a>
    </div>
    <!-- Card for Feedback -->
    <div class="card shadow-sm border-0 rounded-3">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold"><i class="fa fa-user-graduate me-2"></i> Student Feedback</span>
            <span class="badge bg-light text-dark text-capitalize">{{ $feedback->type }}</span>
        </div>

        <div class="card-body">
            <!-- Student Info -->
            <div class="mb-4">
                <h5 class="fw-bold text-secondary">Student Information</h5>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><strong>Name:</strong> {{ $feedback->student->first_name .$feedback->student->last_name }}</li>
                    <li class="list-group-item"><strong>Code:</strong> {{ $feedback->student->student_code }}</li>
                </ul>
            </div>

            <!-- Feedback Details -->
            <div class="mb-4">
                <h5 class="fw-bold text-secondary">Feedback Details</h5>
                <div class="row g-3">
                    @if($feedback->type === 'initial' || $feedback->type === 'mid')
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Level</strong>
                                <p class="mb-0">{{ $feedback->level ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Need</strong>
                                <p class="mb-0">{{ $feedback->need ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>First Feedback</strong>
                                <p class="mb-0">{{ $feedback->first_feedback ?? '-' }}</p>
                            </div>
                        </div>
                    @else
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Level</strong>
                                <p class="mb-0">{{ $feedback->level ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Result</strong>
                                <p class="mb-0">{{ $feedback->result ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Score</strong>
                                <p class="mb-0">{{ $feedback->score ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Up to Level</strong>
                                <p class="mb-0">{{ $feedback->up_to_level ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Grammar</strong>
                                <p class="mb-0">{{ $feedback->grammar ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Speaking</strong>
                                <p class="mb-0">{{ $feedback->speaking ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Appropriacy</strong>
                                <p class="mb-0">{{ $feedback->appropriacy ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Listening</strong>
                                <p class="mb-0">{{ $feedback->listening ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Reading</strong>
                                <p class="mb-0">{{ $feedback->reading ?? '-' }}</p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border rounded bg-light">
                                <strong>Writing</strong>
                                <p class="mb-0">{{ $feedback->writing ?? '-' }}</p>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="p-3 border rounded bg-light">
                                <strong>Teacher’s Note</strong>
                                <p class="mb-0">{{ $feedback->teachers_note ?? '-' }}</p>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Footer -->
            <div class="d-flex justify-content-end mt-4">
            
                <form action="{{ route('teacher_feedback.destroy', $feedback) }}" method="POST" 
                      onsubmit="return confirm('Are you sure you want to delete this feedback?');">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger">
                        <i class="fa fa-trash"></i> Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection