@extends('layouts.app')

@section('title', $assignment->title)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="page-header d-flex justify-content-between align-items-center mb-4">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('student.assignments') }}">My Assignments</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($assignment->title, 30) }}</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-0 text-primary">{{ $assignment->title }}</h1>
                    <p class="text-muted mb-0">{{ $assignment->subject->title }} • Due: {{ $assignment->due_at->format('M d, Y h:i A') }}</p>
                </div>
                <a href="{{ route('student.assignments') }}" class="btn btn-outline-primary">
                    <i class="fas fa-arrow-left me-1"></i>Back to Assignments
                </a>
            </div>

            <div class="row">
                <!-- Assignment Content -->
                <div class="col-lg-8">
                    <!-- Assignment Details Card -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-file-alt me-2"></i>Assignment Instructions
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="assignment-content">
                                <div class="bg-light p-4 rounded mb-4">
                                    {!! nl2br(e($assignment->instructions)) !!}
                                </div>

                                <!-- Attachments -->
                                @if($assignment->attachments && count($assignment->attachments) > 0)
                                <div class="attachments-section">
                                    <h6 class="text-muted mb-3">
                                        <i class="fas fa-paperclip me-1"></i>Attachments:
                                    </h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        @foreach($assignment->attachments as $attachment)
                                            @if(is_string($attachment))
                                                <a href="{{ asset('storage/'.$attachment) }}" 
                                                   class="btn btn-sm btn-outline-secondary d-flex align-items-center"
                                                   target="_blank"
                                                   download>
                                                    <i class="fas fa-download me-2"></i>
                                                    Download File
                                                </a>
                                            @else
                                                <a href="{{ asset('storage/'.($attachment['path'] ?? $attachment)) }}" 
                                                   class="btn btn-sm btn-outline-secondary d-flex align-items-center"
                                                   target="_blank"
                                                   download>
                                                    <i class="fas fa-download me-2"></i>
                                                    {{ $attachment['name'] ?? 'Download File' }}
                                                </a>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Submission Form - Only show if not submitted or if we're in submit mode -->
                    @if((!$submission || !$submission->isSubmitted()) && (request('submit') || !$submission))
                    <div class="card border-0 shadow-sm" id="submissionForm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-paper-plane me-2"></i>Submit Assignment
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Status Alert -->
                            @if($assignment->isOverdue())
                                <div class="alert alert-warning">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    This assignment is overdue. Late submissions may be penalized.
                                </div>
                            @endif

                            <!-- Display Validation Errors -->
                            @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            @if(session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                            @endif

                            @if(session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif

                            <form action="{{ route('student.assignments.submit', $assignment->id) }}" method="POST" enctype="multipart/form-data">
                                @csrf
                                
                                <div class="mb-4">
                                    <label for="answer_text" class="form-label fw-semibold">Your Answer Text</label>
                                    <textarea class="form-control @error('answer_text') is-invalid @enderror" 
                                              id="answer_text" 
                                              name="answer_text" 
                                              rows="8" 
                                              placeholder="Type your assignment submission here...">{{ old('answer_text', $submission->answer_text ?? '') }}</textarea>
                                    @error('answer_text')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">Write your assignment response in the text area above.</div>
                                </div>
                                
                                <div class="mb-4">
                                    <label for="file" class="form-label fw-semibold">Or Upload a File</label>
                                    <input type="file" 
                                           class="form-control @error('file') is-invalid @enderror" 
                                           id="file" 
                                           name="file">
                                    @error('file')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">
                                        Upload a single file. Maximum file size: 10MB. Supported formats: PDF, DOC, DOCX, TXT, JPG, JPEG, PNG.
                                    </div>
                                </div>

                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Note:</strong> You must provide either written answer text OR upload a file. Both are not required.
                                </div>
                                
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        @if(!request('submit'))
                                            <a href="{{ route('student.assignments.show', $assignment->id) }}" class="btn btn-outline-secondary">
                                                <i class="fas fa-times me-1"></i>Cancel
                                            </a>
                                        @endif
                                    </div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-paper-plane me-1"></i>Submit Assignment
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    @endif

                    <!-- Existing Submission Display -->
                    @if($submission && $submission->isSubmitted() && !request('submit'))
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-check-circle me-2"></i>Your Submission
                            </h5>
                        </div>
                        <div class="card-body">
                            <!-- Submission Status -->
                            <div class="alert alert-info">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        <i class="fas fa-paper-plane me-1"></i>
                                        <strong>Submitted</strong> 
                                        on {{ $submission->submitted_at->format('M d, Y \\a\\t h:i A') }}
                                        @if($submission->isLate())
                                            <span class="badge bg-danger ms-2">Late Submission</span>
                                        @endif
                                    </div>
                                    @if(!$assignment->isOverdue())
                                        <a href="{{ route('student.assignments.show', $assignment->id) }}?submit=true" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit me-1"></i>Resubmit
                                        </a>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- Submission Content -->
                            @if($submission->answer_text)
                            <div class="mb-4">
                                <h6 class="text-muted mb-3">Your Response:</h6>
                                <div class="bg-light p-4 rounded">
                                    {!! nl2br(e($submission->answer_text)) !!}
                                </div>
                            </div>
                            @endif
                            
                            <!-- Submission File -->
                            @if($submission->file_path)
                                <div class="mb-4">
                                    <h6 class="text-muted mb-3">Submitted File:</h6>
                                    <div class="d-flex flex-wrap gap-2">
                                        <a href="{{ asset('storage/'.$submission->file_path) }}" 
                                           class="btn btn-sm btn-outline-secondary d-flex align-items-center"
                                           target="_blank"
                                           download>
                                            <i class="fas fa-download me-2"></i>
                                            {{ $submission->file_name ?? basename($submission->file_path) }}
                                        </a>
                                    </div>
                                </div>
                            @endif
                            
                            <!-- Grade & Feedback -->
                            @if($submission->isGraded())
                                <div class="grade-section">
                                    <h6 class="text-muted mb-3">Grade & Feedback:</h6>
                                    <div class="alert alert-success">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div>
                                                <strong>Score: {{ $submission->score }}/{{ $assignment->max_score }}</strong>
                                                @if($submission->feedback)
                                                    <p class="mb-0 mt-2"><strong>Feedback:</strong> {{ $submission->feedback }}</p>
                                                @endif
                                            </div>
                                            <div class="text-end">
                                                <div class="fw-bold fs-5 text-success">
                                                    {{ number_format($submission->percentage, 1) }}%
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="alert alert-warning">
                                    <i class="fas fa-clock me-2"></i>
                                    Your submission is awaiting grading. Check back later for your score and feedback.
                                </div>
                            @endif
                        </div>
                    </div>
                    @endif
                </div>
                
                <!-- Assignment Info Sidebar -->
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-info-circle me-2"></i>Assignment Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="info-list">
                                <div class="info-item d-flex justify-content-between align-items-center py-2 border-bottom">
                                    <span class="text-muted">Subject:</span>
                                    <span class="fw-semibold">{{ $assignment->subject->title }}</span>
                                </div>
                                <div class="info-item d-flex justify-content-between align-items-center py-2 border-bottom">
                                    <span class="text-muted">Teacher:</span>
                                    <span class="fw-semibold">{{ $assignment->teacher->user->name ?? 'N/A' }}</span>
                                </div>
                                <div class="info-item d-flex justify-content-between align-items-center py-2 border-bottom">
                                    <span class="text-muted">Due Date:</span>
                                    <div class="text-end">
                                        <div class="fw-semibold {{ $assignment->isOverdue() ? 'text-danger' : '' }}">
                                            {{ $assignment->due_at->format('M d, Y') }}
                                        </div>
                                        <small class="text-muted">{{ $assignment->due_at->format('h:i A') }}</small>
                                    </div>
                                </div>
                                <div class="info-item d-flex justify-content-between align-items-center py-2 border-bottom">
                                    <span class="text-muted">Max Score:</span>
                                    <span class="fw-semibold">{{ $assignment->max_score }} points</span>
                                </div>
                                <div class="info-item d-flex justify-content-between align-items-center py-2">
                                    <span class="text-muted">Status:</span>
                                    <span class="badge bg-{{ $submission && $submission->isSubmitted() ? 'success' : 'warning' }}">
                                        {{ $submission && $submission->isSubmitted() ? 'Submitted' : 'Not Submitted' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Actions -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-bolt me-2"></i>Quick Actions
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                @if(!$submission || !$submission->isSubmitted())
                                    <a href="{{ route('student.assignments.show', $assignment->id) }}?submit=true" 
                                       class="btn btn-primary">
                                        <i class="fas fa-paper-plane me-2"></i>Submit Assignment
                                    </a>
                                @endif
                                
                                @if($submission && $submission->isSubmitted() && !$assignment->isOverdue())
                                    <a href="{{ route('student.assignments.show', $assignment->id) }}?submit=true" 
                                       class="btn btn-outline-primary">
                                        <i class="fas fa-edit me-2"></i>Resubmit
                                    </a>
                                @endif
                                
                                <a href="{{ route('student.assignments') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-arrow-left me-2"></i>Back to Assignments
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.page-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}
.assignment-content {
    line-height: 1.6;
}
.info-list .info-item:last-child {
    border-bottom: none !important;
}
.bg-light {
    background-color: #f8f9fa !important;
}
.attachment-item {
    transition: all 0.2s ease;
}
.attachment-item:hover {
    background-color: #f8f9fa !important;
    border-color: #007bff !important;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Auto-focus on answer_text textarea when submission form is shown
    @if(request('submit'))
        $('#answer_text').focus();
    @endif

    // File input styling
    $('#file').on('change', function() {
        const file = $(this)[0].files[0];
        if (file) {
            $(this).next('.form-text').html(
                `<i class="fas fa-check text-success me-1"></i>File selected: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`
            );
        }
    });

    // Character count for answer text
    $('#answer_text').on('input', function() {
        const charCount = $(this).val().length;
        const charCountDisplay = $(this).next('.form-text').find('.char-count');
        if (charCountDisplay.length) {
            charCountDisplay.text(`Characters: ${charCount}`);
        } else {
            $(this).next('.form-text').append(`<div class="char-count mt-1 text-muted">Characters: ${charCount}</div>`);
        }
    });

    // Form validation - ensure at least one field is filled
    $('form').on('submit', function(e) {
        const answerText = $('#answer_text').val().trim();
        const file = $('#file')[0].files[0];
        
        if (!answerText && !file) {
            e.preventDefault();
            alert('Please provide either answer text or upload a file.');
            return false;
        }

        // Show loading state
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.html('<i class="fas fa-spinner fa-spin me-1"></i>Submitting...');
        submitBtn.prop('disabled', true);
    });
});
</script>
@endpush