@extends('layouts.app')

@section('title', 'Assignment Details - ' . $assignment->title)

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Header Section -->
            <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('assignments.index') }}">Assignments</a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ Str::limit($assignment->title, 30) }}</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-0">Assignment Details</h1>
                </div>
                <div class="btn-group">
                    <a href="{{ route('assignments.edit', $assignment->id) }}" class="btn btn-warning">
                        <i class="fas fa-edit me-1"></i> Edit
                    </a>
                    <a href="{{ route('assignments.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i> Back to List
                    </a>
                </div>
            </div>

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

                                <!-- Attachments Section -->
                                @if(count($assignment->attachments) > 0)
                                <div class="attachments-section mb-4">
                                    <h6 class="text-muted mb-3">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-primary 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-primary 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>
                </div>

                <!-- Assignment Info Sidebar -->
                <div class="col-lg-4">
                    <div class="card shadow-sm border-0 mb-4">
                        <div class="card-header bg-white py-3">
                            <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">Batch:</span>
                                    <span class="fw-semibold">{{ $assignment->batch->name }}</span>
                                </div>
                                <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-{{ $assignment->published ? 'success' : 'secondary' }} fs-6">
                                        {{ $assignment->published ? 'Published' : 'Unpublished' }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Statistics Card -->
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white py-3">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-chart-bar me-2"></i>Submission Stats
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="stats-grid">
                                <div class="stat-item text-center p-3 bg-light rounded">
                                    <div class="stat-number text-primary fw-bold fs-4">{{ $assignment->submission_count }}</div>
                                    <div class="stat-label text-muted small">Submitted</div>
                                </div>
                                <div class="stat-item text-center p-3 bg-light rounded">
                                    <div class="stat-number text-success fw-bold fs-4">{{ $assignment->graded_count }}</div>
                                    <div class="stat-label text-muted small">Graded</div>
                                </div>
                                <div class="stat-item text-center p-3 bg-light rounded">
                                    <div class="stat-number text-info fw-bold fs-4">{{ round($assignment->submission_rate) }}%</div>
                                    <div class="stat-label text-muted small">Completion</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submissions Section -->
            <div class="row">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-users me-2"></i>Student Submissions
                                <span class="badge bg-primary ms-2">{{ $assignment->submissions->count() }}</span>
                            </h5>
                            <div class="submission-filters">
                                <select class="form-select form-select-sm" id="submissionFilter" {{ $assignment->submissions->count() === 0 ? 'disabled' : '' }}>
                                    <option value="all">All Submissions</option>
                                    <option value="submitted">Submitted</option>
                                    <option value="graded">Graded</option>
                                    <option value="pending">Pending</option>
                                    <option value="late">Late</option>
                                </select>
                            </div>
                        </div>
                        <div class="card-body">
                            @if($assignment->submissions->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover" id="submissionsTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Student Details</th>
                                                <th>Submission Date</th>
                                                <th>Score</th>
                                                <th>Status</th>
                                                <th>Feedback</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($assignment->submissions as $submission)
                                                <tr class="submission-row" data-status="{{ $submission->status }}">
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <div class="avatar-sm bg-primary rounded-circle d-flex align-items-center justify-content-center me-3">
                                                                <span class="text-white fw-bold">
                                                                    @if($submission->student->user && $submission->student->user->name)
                                                                        {{ substr($submission->student->user->name, 0, 1) }}
                                                                    @else
                                                                        {{ substr($submission->student->name ?? 'N', 0, 1) }}
                                                                    @endif
                                                                </span>
                                                            </div>
                                                            <div>
                                                                <!-- Student Name -->
                                                                <div class="fw-semibold">
                                                                    {{ $submission->student->name ?? 'N/A' }}
                                                                </div>
                                                                <!-- Student Details -->
                                                                <div class="student-details">
                                                                    @if($submission->student->father_name)
                                                                        <small class="text-muted d-block">Father: {{ $submission->student->father_name }}</small>
                                                                    @endif
                                                                    @if($submission->student->institute_id)
                                                                        <small class="text-muted d-block">Institute ID: {{ $submission->student->institute_id }}</small>
                                                                    @endif
                                                                    @if($submission->student->national_id)
                                                                        <small class="text-muted d-block">National ID: {{ $submission->student->national_id }}</small>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        @if($submission->submitted_at)
                                                            <div>
                                                                <div class="fw-semibold">{{ $submission->submitted_at->format('M d, Y') }}</div>
                                                                <small class="text-muted">{{ $submission->submitted_at->format('h:i A') }}</small>
                                                                @if($submission->isLate())
                                                                    <div class="badge bg-danger mt-1">Late</div>
                                                                @endif
                                                            </div>
                                                        @else
                                                            <span class="text-muted fst-italic">Not submitted</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if($submission->score !== null)
                                                            <div class="score-display">
                                                                <span class="fw-bold text-primary">{{ $submission->score }}</span>
                                                                <small class="text-muted">/ {{ $assignment->max_score }}</small>
                                                                <div class="progress mt-1" style="height: 4px;">
                                                                    <div class="progress-bar bg-primary" 
                                                                         style="width: {{ $submission->percentage }}%">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @else
                                                            <span class="text-muted">-</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <span class="badge status-badge bg-{{ $submission->isGraded() ? 'success' : ($submission->isSubmitted() ? 'info' : 'warning') }}">
                                                            {{ $submission->grade_status }}
                                                        </span>
                                                    </td>
                                                    <td>
                                                        @if($submission->feedback)
                                                            <button class="btn btn-sm btn-outline-secondary view-feedback" 
                                                                    data-feedback="{{ $submission->feedback }}">
                                                                <i class="fas fa-comment"></i>
                                                            </button>
                                                        @else
                                                            <span class="text-muted">No feedback</span>
                                                        @endif
                                                    </td>
                                                    <td>
                                                        <div class="btn-group btn-group-sm">
                                                            @if($submission->isSubmitted())
                                                                <button class="btn btn-outline-primary view-submission" 
                                                                        data-submission="{{ $submission->id }}"
                                                                        title="View Submission">
                                                                    <i class="fas fa-eye"></i>
                                                                </button>
                                                                @if(!$submission->isGraded())
                                                                    <button class="btn btn-outline-success grade-submission" 
                                                                            data-submission="{{ $submission->id }}"
                                                                            data-student-name="{{ $submission->student->name }}"
                                                                            title="Grade Submission">
                                                                        <i class="fas fa-check"></i>
                                                                    </button>
                                                                @else
                                                                    <button class="btn btn-outline-warning edit-grade" 
                                                                            data-submission="{{ $submission->id }}"
                                                                            data-student-name="{{ $submission->student->name }}"
                                                                            data-current-score="{{ $submission->score }}"
                                                                            data-current-feedback="{{ $submission->feedback }}"
                                                                            title="Edit Grade">
                                                                        <i class="fas fa-edit"></i>
                                                                    </button>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <!-- Empty State with Action Buttons -->
                                <div class="text-center py-5">
                                    <div class="empty-state-icon mb-4">
                                        <i class="fas fa-file-upload fa-4x text-muted opacity-50"></i>
                                    </div>
                                    <h4 class="text-muted mb-3">No Submissions Yet</h4>
                                    <p class="text-muted mb-4">Students haven't submitted any work for this assignment.</p>
                                    
                                    <!-- Action Buttons -->
                                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                                        <!-- Send Reminder Button -->
                                        <button class="btn btn-outline-primary btn-lg px-4 send-reminder" 
                                                data-assignment-id="{{ $assignment->id }}">
                                            <i class="fas fa-envelope me-2"></i>Send Reminder
                                        </button>
                                        
                                        <!-- View Students Button -->
                                        <a href="{{ route('batches.show', $assignment->batch_id) }}" 
                                           class="btn btn-outline-info btn-lg px-4 view-students">
                                            <i class="fas fa-list me-2"></i>View Student List
                                        </a>
                                        
                                        <!-- Extend Deadline Button -->
                                        <button class="btn btn-outline-warning btn-lg px-4 extend-deadline"
                                                data-assignment-id="{{ $assignment->id }}"
                                                data-current-deadline="{{ $assignment->due_at->format('Y-m-d\TH:i') }}">
                                            <i class="fas fa-clock me-2"></i>Extend Deadline
                                        </button>
                                    </div>

                                    <!-- Additional Information -->
                                    <div class="mt-5">
                                        <div class="row justify-content-center">
                                            <div class="col-md-8 col-lg-6">
                                                <div class="card bg-light border-0">
                                                    <div class="card-body py-3">
                                                        <div class="row text-center">
                                                            <div class="col-4">
                                                                <div class="h5 mb-1 text-primary">0</div>
                                                                <small class="text-muted">Submitted</small>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="h5 mb-1 text-dark">{{ $assignment->batch->students_count ?? 'N/A' }}</div>
                                                                <small class="text-muted">Total Students</small>
                                                            </div>
                                                            <div class="col-4">
                                                                <div class="h5 mb-1 text-{{ $assignment->due_at->isPast() ? 'danger' : 'success' }}">
                                                                    {{ $assignment->due_at->isPast() ? 'Overdue' : 'Active' }}
                                                                </div>
                                                                <small class="text-muted">Status</small>
                                                            </div>
                                                        </div>
                                                        <hr class="my-3">
                                                        <small class="text-muted">
                                                            <i class="fas fa-clock me-1"></i>
                                                            Due date: <strong>{{ $assignment->due_at->format('M d, Y h:i A') }}</strong>
                                                            @if($assignment->due_at->isPast())
                                                                <span class="badge bg-danger ms-2">Overdue</span>
                                                            @else
                                                                <span class="badge bg-success ms-2">Active</span>
                                                            @endif
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Submission Modal -->
<div class="modal fade" id="submissionModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Submission Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="submissionContent">
                <!-- Content will be loaded via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Feedback Modal -->
<div class="modal fade" id="feedbackModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Feedback</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="feedbackContent">
                <!-- Feedback content will be loaded here -->
            </div>
        </div>
    </div>
</div>

<!-- Grade Submission Modal -->
<div class="modal fade" id="gradeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="gradeModalTitle">Grade Submission</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="gradeForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="submission_id" id="submission_id">
                    <div class="mb-3">
                        <label for="score" class="form-label">Score (Max: {{ $assignment->max_score }})</label>
                        <input type="number" class="form-control" id="score" name="score" 
                               min="0" max="{{ $assignment->max_score }}" required>
                    </div>
                    <div class="mb-3">
                        <label for="feedback" class="form-label">Feedback</label>
                        <textarea class="form-control" id="feedback" name="feedback" rows="4" 
                                  placeholder="Provide feedback to the student..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Submit Grade</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Send Reminder Modal -->
<div class="modal fade" id="reminderModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Reminder</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Send a reminder email to all students in <strong>{{ $assignment->batch->name }}</strong> about this assignment?</p>
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="includeLateStudents">
                    <label class="form-check-label" for="includeLateStudents">
                        Include personalized message for late submissions
                    </label>
                </div>
                <div class="mb-3">
                    <label for="reminderMessage" class="form-label">Custom Message (Optional)</label>
                    <textarea class="form-control" id="reminderMessage" rows="3" 
                              placeholder="Add a custom message to the reminder..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="confirmSendReminder">
                    <i class="fas fa-paper-plane me-1"></i>Send Reminder
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Extend Deadline Modal -->
<div class="modal fade" id="extendDeadlineModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Extend Deadline</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="extendDeadlineForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" name="assignment_id" id="assignment_id">
                    <div class="mb-3">
                        <label for="newDeadline" class="form-label">New Due Date & Time</label>
                        <input type="datetime-local" class="form-control" id="newDeadline" name="new_deadline" required>
                        <div class="form-text">Current deadline: {{ $assignment->due_at->format('M d, Y h:i A') }}</div>
                    </div>
                    <div class="mb-3">
                        <label for="extensionReason" class="form-label">Reason for Extension (Optional)</label>
                        <textarea class="form-control" id="extensionReason" name="extension_reason" rows="3"
                                  placeholder="Explain why you're extending the deadline..."></textarea>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="notifyStudents" name="notify_students" checked>
                        <label class="form-check-label" for="notifyStudents">
                            Notify students about deadline extension
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">
                        <i class="fas fa-save me-1"></i>Extend Deadline
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.page-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
}
.avatar-sm {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.info-list .info-item:last-child {
    border-bottom: none !important;
}
.submission-row:hover {
    background-color: #f8f9fa;
}
.status-badge {
    font-size: 0.75em;
}
.progress {
    background-color: #e9ecef;
    border-radius: 2px;
}
.assignment-content {
    line-height: 1.6;
}
.attachment-item {
    transition: all 0.2s ease;
}
.attachment-item:hover {
    background-color: #f8f9fa !important;
    border-color: #007bff !important;
}
.student-details small {
    font-size: 0.75rem;
}
.empty-state-icon {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.send-reminder:hover .empty-state-icon,
.view-students:hover .empty-state-icon,
.extend-deadline:hover .empty-state-icon {
    opacity: 1;
}
.btn-lg {
    border-radius: 8px;
    transition: all 0.3s ease;
}
.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.btn-outline-info:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}
.btn-outline-warning:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Filter submissions
    $('#submissionFilter').on('change', function() {
        const filter = $(this).val();
        $('.submission-row').show();
        
        if (filter !== 'all') {
            $('.submission-row').each(function() {
                const status = $(this).data('status');
                if (status !== filter) {
                    $(this).hide();
                }
            });
        }
    });

    // View submission - FIXED VERSION
    $('.view-submission').on('click', function() {
        const submissionId = $(this).data('submission');
        const button = $(this);
        
        // Show loading state
        const originalHtml = button.html();
        button.html('<i class="fas fa-spinner fa-spin"></i>');
        button.prop('disabled', true);
        
        // Load submission details via AJAX
        $.get(`/assignment-submissions/${submissionId}`, function(response) {
            // Check if response has html property (JSON response)
            if (response.html) {
                $('#submissionContent').html(response.html);
            } else {
                // If it's direct HTML (fallback)
                $('#submissionContent').html(response);
            }
            $('#submissionModal').modal('show');
            
            // Add event listeners for buttons inside the modal
            attachModalEventListeners();
        }).fail(function(xhr) {
            console.error('AJAX Error:', xhr);
            let errorMessage = 'Error loading submission';
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMessage = xhr.responseJSON.message;
            }
            $('#submissionContent').html(`
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    ${errorMessage}
                </div>
            `);
            $('#submissionModal').modal('show');
        }).always(function() {
            // Reset button state
            button.html(originalHtml);
            button.prop('disabled', false);
        });
    });

    // Function to attach event listeners to modal buttons
    function attachModalEventListeners() {
        // Grade submission button in modal
        $('.grade-submission-btn').off('click').on('click', function() {
            const submissionId = $(this).data('submission-id');
            const studentName = $(this).data('student-name');
            
            $('#submission_id').val(submissionId);
            $('#score').val('');
            $('#feedback').val('');
            $('#gradeModalTitle').text('Grade Submission - ' + studentName);
            $('#submissionModal').modal('hide');
            $('#gradeModal').modal('show');
        });
        
        // Edit grade button in modal
        $('.edit-grade-btn').off('click').on('click', function() {
            const submissionId = $(this).data('submission-id');
            const studentName = $(this).data('student-name');
            const currentScore = $(this).data('current-score');
            const currentFeedback = $(this).data('current-feedback');
            
            $('#submission_id').val(submissionId);
            $('#score').val(currentScore);
            $('#feedback').val(currentFeedback || '');
            $('#gradeModalTitle').text('Edit Grade - ' + studentName);
            $('#submissionModal').modal('hide');
            $('#gradeModal').modal('show');
        });
    }

    // View feedback
    $('.view-feedback').on('click', function() {
        const feedback = $(this).data('feedback');
        $('#feedbackContent').html('<p class="mb-0">' + (feedback || 'No feedback provided') + '</p>');
        $('#feedbackModal').modal('show');
    });

    // Grade submission
    $('.grade-submission').on('click', function() {
        const submissionId = $(this).data('submission');
        const studentName = $(this).data('student-name');
        
        $('#submission_id').val(submissionId);
        $('#score').val('');
        $('#feedback').val('');
        $('#gradeModalTitle').text('Grade Submission - ' + studentName);
        $('#gradeModal').modal('show');
    });

    // Edit grade
    $('.edit-grade').on('click', function() {
        const submissionId = $(this).data('submission');
        const studentName = $(this).data('student-name');
        const currentScore = $(this).data('current-score');
        const currentFeedback = $(this).data('current-feedback');
        
        $('#submission_id').val(submissionId);
        $('#score').val(currentScore);
        $('#feedback').val(currentFeedback || '');
        $('#gradeModalTitle').text('Edit Grade - ' + studentName);
        $('#gradeModal').modal('show');
    });

    // Handle grade form submission
    $('#gradeForm').on('submit', function(e) {
        e.preventDefault();
        
        const submissionId = $('#submission_id').val();
        const formData = $(this).serialize();
        
        // Show loading state
        const submitBtn = $(this).find('button[type="submit"]');
        submitBtn.html('<i class="fas fa-spinner fa-spin me-1"></i>Grading...');
        submitBtn.prop('disabled', true);
        
        $.ajax({
            url: `/submissions/${submissionId}/grade`,
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.success) {
                    $('#gradeModal').modal('hide');
                    // Show success message
                    showAlert('Submission graded successfully!', 'success');
                    // Reload after short delay
                    setTimeout(() => {
                        location.reload();
                    }, 1000);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Error grading submission';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    errorMessage = Object.values(xhr.responseJSON.errors).flat().join(', ');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                showAlert(errorMessage, 'error');
            },
            complete: function() {
                // Reset button state
                submitBtn.html('Submit Grade');
                submitBtn.prop('disabled', false);
            }
        });
    });

    // Empty State Button Functionality
    // Send Reminder
    $('.send-reminder').on('click', function() {
        const assignmentId = $(this).data('assignment-id');
        $('#reminderModal').modal('show');
    });

    // Extend Deadline
    $('.extend-deadline').on('click', function() {
        const assignmentId = $(this).data('assignment-id');
        const currentDeadline = $(this).data('current-deadline');
        
        $('#assignment_id').val(assignmentId);
        $('#newDeadline').val(currentDeadline);
        $('#extendDeadlineModal').modal('show');
    });

    // Confirm Send Reminder
    $('#confirmSendReminder').on('click', function() {
        const assignmentId = $('.send-reminder').data('assignment-id');
        const customMessage = $('#reminderMessage').val();
        const includeLate = $('#includeLateStudents').is(':checked');

        // Show loading state
        const btn = $(this);
        btn.html('<i class="fas fa-spinner fa-spin me-1"></i>Sending...');
        btn.prop('disabled', true);

        // Simulate API call
        setTimeout(() => {
            $('#reminderModal').modal('hide');
            showAlert('Reminder sent successfully to all students!', 'success');
            btn.html('<i class="fas fa-paper-plane me-1"></i>Send Reminder');
            btn.prop('disabled', false);
        }, 2000);
    });

    // Extend Deadline Form Submission
    $('#extendDeadlineForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = $(this).serialize();
        const btn = $(this).find('button[type="submit"]');
        
        // Show loading state
        btn.html('<i class="fas fa-spinner fa-spin me-1"></i>Extending...');
        btn.prop('disabled', true);

        // Simulate API call
        setTimeout(() => {
            $('#extendDeadlineModal').modal('hide');
            showAlert('Deadline extended successfully!', 'success');
            btn.html('<i class="fas fa-save me-1"></i>Extend Deadline');
            btn.prop('disabled', false);
            // Reload page to see updated deadline
            setTimeout(() => {
                location.reload();
            }, 1500);
        }, 2000);
    });

    // Helper function to show alerts
    function showAlert(message, type) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show position-fixed top-0 end-0 m-3" style="z-index: 9999;">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        $('body').append(alertHtml);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            $('.alert').alert('close');
        }, 5000);
    }
});
</script>
@endpush