@extends('layouts.app')

@section('title', 'My Materials')
@section('page-title', 'My Study Materials')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-md-6">
                <h5 class="mb-0">Available Materials</h5>
            </div>
            <div class="col-md-6">
                <form class="row g-2">
                    <div class="col-md-8">
                        <input type="text" name="search" class="form-control" placeholder="Search materials..." value="{{ request('search') }}">
                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-outline-primary w-100">Search</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="card-body">
        @if($materials->count() > 0)
            <div class="row">
                @foreach($materials as $material)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100">
                        <div class="card-body">
                            <div class="text-center mb-3">
                                @if($material->isPdf())
                                    <i class="fas fa-file-pdf text-danger fa-3x"></i>
                                @elseif($material->isImage())
                                    <i class="fas fa-file-image text-success fa-3x"></i>
                                @elseif($material->isVideo())
                                    <i class="fas fa-file-video text-warning fa-3x"></i>
                                @else
                                    <i class="fas fa-file text-primary fa-3x"></i>
                                @endif
                            </div>
                            
                            <h6 class="card-title">{{ Str::limit($material->title, 50) }}</h6>
                            
                            <div class="small text-muted mb-2">
                                <i class="fas fa-book me-1"></i>
                                {{ $material->class->subject->title }}
                            </div>
                            
                            <div class="small text-muted mb-2">
                                <i class="fas fa-users me-1"></i>
                                {{ $material->class->batch->name }}
                            </div>
                            
                            <div class="small text-muted mb-2">
                                <i class="fas fa-user-graduate me-1"></i>
                                {{ $material->teacher->user->username }}
                            </div>
                            
                            <div class="small text-muted mb-3">
                                <i class="fas fa-calendar me-1"></i>
                                {{ $material->created_at->format('M d, Y') }}
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge bg-light text-dark">
                                    {{ strtoupper($material->file_extension) }} • {{ $material->file_size_formatted }}
                                </span>
                                <a href="{{ route('materials.download', $material) }}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    Showing {{ $materials->firstItem() }} to {{ $materials->lastItem() }} of {{ $materials->total() }} materials
                </div>
                {{ $materials->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No materials available</h5>
                <p class="text-muted">Your teachers haven't uploaded any materials for your classes yet.</p>
            </div>
        @endif
    </div>
</div>
@endsection