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

@section('body')
<section class="pt-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white border-0 py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="fw-bold mb-0">{{ __('front.submit_assignment') }}</h5>
                            <a href="{{ route('student.assignments.show', $assignment->id) }}" class="btn btn-outline-secondary btn-sm">
                                <i class="fas fa-arrow-left me-2"></i> {{ __('front.back') }}
                            </a>
                        </div>
                    </div>
                    <div class="card-body p-4">
                        <!-- Assignment Info -->
                        <div class="bg-light rounded-3 p-3 mb-4">
                            <h6 class="fw-bold mb-2">{{ $assignment->title }}</h6>
                            <p class="text-muted small mb-2">
                                <i class="fas fa-calendar me-2"></i> {{ __('front.due') }}: {{ $assignment->due_at ? $assignment->due_at->format('F d, Y h:i A') : 'No due date' }}
                            </p>
                            <p class="text-muted small mb-0">
                                <i class="fas fa-file me-2"></i> {{ __('front.max_grade') }}: {{ $assignment->max_grade }}
                            </p>
                        </div>

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

                        <form action="{{ route('student.assignments.store', $assignment->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <!-- File Upload -->
                            <div class="mb-4">
                                <label for="submission_file" class="form-label fw-semibold">{{ __('front.upload_your_work') }}</label>
                                <div class="upload-area border rounded-3 p-4 text-center" id="uploadArea">
                                    <i class="fas fa-cloud-upload-alt fa-3x text-primary mb-3"></i>
                                    <h6 class="fw-bold">{{ __('front.drag_drop_file_here') }}</h6>
                                    <p class="text-muted small mb-3">{{ __('front.or_click_to_browse') }}</p>
                                    <input type="file" class="form-control d-none" id="submission_file" name="submission_file" accept=".pdf,.doc,.docx,.txt,.zip,.jpg,.jpeg,.png">
                                    <button type="button" class="btn btn-primary btn-rounded" id="browseBtn">
                                        <i class="fas fa-folder-open me-2"></i> {{ __('front.browse_files') }}
                                    </button>
                                    <div id="fileInfo" class="mt-3 text-start d-none">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-file text-primary me-2"></i>
                                            <span id="fileName" class="fw-semibold"></span>
                                            <span id="fileSize" class="text-muted small ms-2"></span>
                                            <button type="button" class="btn btn-link text-danger ms-2 p-0" id="removeFile">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @error('submission_file')
                                        <div class="text-danger small mt-2">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="form-text">{{ __('front.accepted_formats_pdf_doc_docx_txt_zip_jpg_png_max_10mb') }}</div>
                            </div>

                            <!-- Comments -->
                            <div class="mb-4">
                                <label for="comments" class="form-label fw-semibold">{{ __('front.additional_comments_optional') }}</label>
                                <textarea class="form-control" id="comments" name="comments" rows="3" placeholder="{{ __('front.add_any_notes_or_comments_for_your_instructor') }}">{{ old('comments') }}</textarea>
                                @error('comments')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Submit Button -->
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="fas fa-upload me-2"></i> {{ __('front.submit_assignment') }}
                                </button>
                            </div>
                        </form>

                        <div class="alert alert-warning mt-4 mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            {{ __('front.once_submitted_you_cannot_modify_your_submission_please') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadArea = document.getElementById('uploadArea');
    const fileInput = document.getElementById('submission_file');
    const browseBtn = document.getElementById('browseBtn');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    const removeFile = document.getElementById('removeFile');

    // Browse button click
    browseBtn.addEventListener('click', function() {
        fileInput.click();
    });

    // File selection
    fileInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const file = this.files[0];
            fileName.textContent = file.name;
            fileSize.textContent = `(${(file.size / 1024).toFixed(2)} KB)`;
            fileInfo.classList.remove('d-none');
        }
    });

    // Drag & drop
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('border-primary', 'bg-primary', 'bg-opacity-10');
    });

    uploadArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary', 'bg-primary', 'bg-opacity-10');
    });

    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('border-primary', 'bg-primary', 'bg-opacity-10');

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            const event = new Event('change', { bubbles: true });
            fileInput.dispatchEvent(event);
        }
    });

    // Remove file
    removeFile.addEventListener('click', function() {
        fileInput.value = '';
        fileInfo.classList.add('d-none');
    });
});
</script>

<style>
.upload-area {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed #dee2e6;
}
.upload-area:hover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.02);
}
</style>
@endsection