@extends('layouts.app')

@section('title', 'My Assignments')

@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>
                    <h1 class="h3 mb-0 text-primary">
                        <i class="fas fa-tasks me-2"></i>My Assignments
                    </h1>
                    <p class="text-muted mb-0">Batch: {{ $student->batch->name ?? 'Not assigned' }}</p>
                </div>
                <div class="assignment-stats">
                    <div class="btn-group">
                        <button class="btn btn-outline-primary active" data-filter="all">All</button>
                        <button class="btn btn-outline-primary" data-filter="pending">Pending</button>
                        <button class="btn btn-outline-primary" data-filter="submitted">Submitted</button>
                        <button class="btn btn-outline-primary" data-filter="graded">Graded</button>
                    </div>
                </div>
            </div>

            <!-- Assignments List -->
            <div class="row" id="assignmentsContainer">
                @forelse($assignments as $assignment)
                    <div class="col-lg-6 mb-4 assignment-card" data-status="{{ $assignment->submission_status }}">
                        <div class="card assignment-card h-100 border-0 shadow-sm">
                            <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
                                <h5 class="card-title mb-0 text-truncate">
                                    {{ $assignment->title }}
                                </h5>
                                <span class="badge bg-{{ $assignment->is_overdue ? 'danger' : 'primary' }}">
                                    {{ $assignment->due_at->format('M d') }}
                                </span>
                            </div>
                            <div class="card-body">
                                <div class="assignment-info mb-3">
                                    <div class="d-flex justify-content-between text-sm text-muted mb-2">
                                        <span>
                                            <i class="fas fa-book me-1"></i>
                                            {{ $assignment->subject->title }}
                                        </span>
                                        <span>
                                            <i class="fas fa-user me-1"></i>
                                            {{ $assignment->teacher->user->username ?? 'N/A' }}
                                        </span>
                                    </div>
                                    <p class="text-muted small mb-3">
                                        {{ Str::limit($assignment->instructions, 120) }}
                                    </p>
                                </div>

                                <!-- Submission Status -->
                                <div class="submission-status mb-3">
                                    @if($assignment->submission_status === 'not_submitted')
                                        <div class="alert alert-warning py-2 mb-0">
                                            <i class="fas fa-clock me-1"></i>
                                            Not Submitted
                                            @if($assignment->is_overdue)
                                                <span class="badge bg-danger ms-2">Overdue</span>
                                            @endif
                                        </div>
                                    @elseif($assignment->submission_status === 'submitted' || $assignment->submission_status === 'late')
                                        <div class="alert alert-info py-2 mb-0">
                                            <i class="fas fa-paper-plane me-1"></i>
                                            Submitted
                                            @if($assignment->submission_status === 'late')
                                                <span class="badge bg-danger ms-2">Late</span>
                                            @endif
                                        </div>
                                    @elseif($assignment->submission_status === 'graded')
                                        <div class="alert alert-success py-2 mb-0">
                                            <i class="fas fa-check-circle me-1"></i>
                                            Graded: {{ $assignment->submission_score }}/{{ $assignment->max_score }}
                                        </div>
                                    @endif
                                </div>

                                <!-- Due Date & Actions -->
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">
                                        Due: {{ $assignment->due_at->format('M d, Y h:i A') }}
                                    </small>
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('student.assignments.show', $assignment->id) }}" 
                                           class="btn btn-outline-primary">
                                            <i class="fas fa-eye me-1"></i>View
                                        </a>
                                        @if($assignment->submission_status === 'not_submitted' || $assignment->submission_status === 'late')
                                            <a href="{{ route('student.assignments.show', $assignment->id) }}?submit=true" 
                                               class="btn btn-primary">
                                                <i class="fas fa-paper-plane me-1"></i>Submit
                                            </a>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-5">
                                <i class="fas fa-tasks fa-3x text-muted mb-3"></i>
                                <h4 class="text-muted">No Assignments</h4>
                                <p class="text-muted">You don't have any assignments at the moment.</p>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            @if($assignments->hasPages())
                <div class="d-flex justify-content-center mt-4">
                    {{ $assignments->links() }}
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.assignment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.assignment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
.assignment-info {
    min-height: 80px;
}
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    // Filter assignments
    $('[data-filter]').on('click', function() {
        const filter = $(this).data('filter');
        
        // Update active button
        $('[data-filter]').removeClass('active');
        $(this).addClass('active');
        
        // Show/hide assignments
        $('.assignment-card').hide();
        
        if (filter === 'all') {
            $('.assignment-card').show();
        } else if (filter === 'pending') {
            $('.assignment-card[data-status="not_submitted"]').show();
        } else if (filter === 'submitted') {
            $('.assignment-card[data-status="submitted"], .assignment-card[data-status="late"]').show();
        } else if (filter === 'graded') {
            $('.assignment-card[data-status="graded"]').show();
        }
    });
});
</script>
@endpush