@extends('public.layout.app')
@section('title', __('front.grade_submission'))

@section('body')
<section class="pt-5" style="background-color: #f5f7fc;">
    <div class="container">

        @include('public.portals.teacher.partials.nav')

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">{{ __('front.grade_submission') }}</h4>
                <p class="text-muted2 mb-0">
                    <i class="fas fa-tasks me-1"></i> {{ $submission->assignment->title }}
                    <span class="mx-2">•</span>
                    <i class="fas fa-user me-1"></i> {{ $submission->student->name ?? 'Unknown' }}
                </p>
            </div>
            <a href="{{ route('teacher.submissions.show', $submission->id) }}"
               class="btn btn-outline-secondary btn-rounded">
                <i class="fas fa-arrow-left me-2"></i> {{ __('front.back_to_submission') }}
            </a>
        </div>

        <div class="row g-4">
            {{-- Left Column: Submission Info --}}
            <div class="col-lg-4">
                <div class="card-soft p-4 shadow-soft">
                    <h6 class="fw-bold mb-3"><i class="fas fa-info-circle me-2"></i> {{ __('front.submission_info') }}</h6>
                    <table class="table table-borderless">
                        <tr>
                            <td class="text-muted2">{{ __('front.student') }}</td>
                            <td class="fw-semibold">{{ $submission->student->name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.submitted') }}</td>
                            <td>{{ $submission->submitted_at->format('M d, Y h:i A') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.assignment') }}</td>
                            <td>{{ $submission->assignment->title }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted2">{{ __('front.max_grade') }}</td>
                            <td><span class="badge bg-secondary">{{ $submission->assignment->max_grade ?? 100 }}</span></td>
                        </tr>
                    </table>

                    <hr>
                    <div class="d-grid">
                        <a href="{{ route('teacher.submissions.download', $submission->id) }}"
                           class="btn btn-outline-primary rounded-pill">
                            <i class="fas fa-download me-2"></i> {{ __('front.download_submission') }}
                        </a>
                    </div>
                </div>
            </div>

            {{-- Right Column: Grade Form --}}
            <div class="col-lg-8">
                <div class="card-soft p-4 shadow-soft">
                    <h6 class="fw-bold mb-3"><i class="fas fa-check-circle me-2"></i> {{ __('front.enter_grade_feedback') }}</h6>

                    <form action="{{ route('teacher.submissions.update', $submission->id) }}" method="POST">
                        @csrf

                        {{-- Grade --}}
                        <div class="mb-4">
                            <label for="grade" class="form-label fw-semibold">
                                {{ __('front.grade') }} <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <input type="number"
                                       name="grade"
                                       id="grade"
                                       class="form-control rounded-pill @error('grade') is-invalid @enderror"
                                       value="{{ old('grade', $submission->grade) }}"
                                       min="0"
                                       max="{{ $submission->assignment->max_grade ?? 100 }}"
                                       step="0.5"
                                       placeholder="{{ __('front.enter_grade') }}">
                                <span class="input-group-text bg-light rounded-pill ms-2">
                                    / {{ $submission->assignment->max_grade ?? 100 }}
                                </span>
                                @error('grade')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Feedback --}}
                        <div class="mb-4">
                            <label for="feedback" class="form-label fw-semibold">
                                {{ __('front.feedback_2') }}
                            </label>
                            <textarea name="feedback"
                                      id="feedback"
                                      rows="6"
                                      class="form-control @error('feedback') is-invalid @enderror"
                                      placeholder="{{ __('front.provide_constructive_feedback') }}">{{ old('feedback', $submission->feedback) }}</textarea>
                            @error('feedback')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Submit --}}
                        <div class="d-flex justify-content-end gap-3">
                            <a href="{{ route('teacher.submissions.show', $submission->id) }}"
                               class="btn btn-outline-secondary rounded-pill px-4">
                                {{ __('front.cancel') }}
                            </a>
                            <button type="submit" class="btn btn-success rounded-pill px-5">
                                <i class="fas fa-check-circle me-2"></i> {{ __('front.submit_grade') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection