@extends('layouts.app')
@section('title', 'Learning Materials & PDF Notes')
@section('page-title', 'PDF Notes Upload')

@section('content')
<div class="container-fluid p-0">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h5 class="fw-bold mb-1"><i class="fa fa-book-open text-primary me-2"></i>Learning Materials & PDF Notes</h5>
            <p class="text-muted small mb-0">Upload and access class notes, revision materials, and syllabus PDFs.</p>
        </div>
        <button class="btn btn-primary btn-sm px-3 shadow-sm fw-semibold" data-bs-toggle="modal" data-bs-target="#uploadNotesModal">
            <i class="fa fa-upload me-1"></i> Upload New Notes
        </button>
    </div>

    <!-- Filters Bar -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 8px;">
        <div class="card-body p-3">
            <form method="GET" action="{{ route('notes.index') }}" class="row g-2 align-items-center">
                <div class="col-md-3">
                    <select name="class_level" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">-- Filter by Class --</option>
                        @foreach($classes as $c)
                            <option value="{{ $c }}" {{ request('class_level') == $c ? 'selected' : '' }}>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" name="search" class="form-control form-control-sm" placeholder="Search notes by title or subject..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-sm w-100">Search</button>
                </div>
                @if(request('class_level') || request('search'))
                <div class="col-md-2">
                    <a href="{{ route('notes.index') }}" class="btn btn-secondary btn-sm w-100">Clear Filter</a>
                </div>
                @endif
            </form>
        </div>
    </div>

    <!-- Notes List Grid -->
    <div class="row g-3">
        @forelse($notes as $note)
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm h-100" style="border-radius: 8px;">
                <div class="card-body p-3 d-flex flex-column">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <span class="badge bg-primary bg-opacity-10 text-primary px-2 py-1" style="font-size: 0.75rem;">
                            {{ $note->class_level }}
                        </span>
                        @if($note->subject_name)
                        <span class="badge bg-info bg-opacity-10 text-info px-2 py-1" style="font-size: 0.75rem;">
                            {{ $note->subject_name }}
                        </span>
                        @endif
                    </div>
                    <h6 class="fw-bold text-dark mb-1"><i class="fa fa-file-pdf text-danger me-2"></i>{{ $note->title }}</h6>
                    @if($note->description)
                    <p class="text-muted small mb-3 flex-grow-1" style="font-size: 0.8rem;">{{ Str::limit($note->description, 100) }}</p>
                    @endif
                    <div class="mt-auto pt-2 border-top d-flex justify-content-between align-items-center small text-secondary">
                        <div>
                            <i class="fa fa-user-circle me-1"></i> {{ $note->uploader->name ?? 'Staff' }}
                            <div class="text-muted" style="font-size: 0.7rem;">{{ $note->created_at->format('M d, Y') }}</div>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('notes.download', $note) }}" class="btn btn-sm btn-outline-primary" title="Download PDF">
                                <i class="fa fa-download"></i>
                            </a>
                            @if(auth()->user()->isAdmin() || $note->uploaded_by === auth()->id())
                            <form action="{{ route('notes.destroy', $note) }}" method="POST" class="d-inline" onsubmit="return confirm('Delete these notes?');">
                                @csrf @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12">
            <div class="card border-0 shadow-sm text-center py-5">
                <i class="fa fa-folder-open text-muted opacity-50 fa-3x mb-3"></i>
                <h6 class="fw-bold text-secondary">No PDF Notes Uploaded Yet</h6>
                <p class="text-muted small mb-0">Click "Upload New Notes" above to share study materials with students.</p>
            </div>
        </div>
        @endforelse
    </div>

    @if($notes->hasPages())
    <div class="mt-4">
        {{ $notes->links() }}
    </div>
    @endif
</div>

<!-- Upload Notes Modal -->
<div class="modal fade" id="uploadNotesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-primary text-white border-0">
                <h6 class="modal-title fw-bold"><i class="fa fa-upload me-2"></i>Upload PDF Notes</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ route('notes.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-secondary">Title / Document Name <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" placeholder="e.g. Chapter 1 - Algebra Basics Notes" required>
                    </div>
                    <div class="row g-2 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-secondary">Class Level <span class="text-danger">*</span></label>
                            <select name="class_level" class="form-select" required>
                                <option value="">-- Select Class --</option>
                                @foreach($classes as $c)
                                    <option value="{{ $c }}">{{ $c }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-secondary">Subject (Optional)</label>
                            <select name="subject_name" class="form-select">
                                <option value="">-- Select Subject --</option>
                                @foreach($subjects as $s)
                                    <option value="{{ $s }}">{{ $s }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-secondary">Description / Remarks</label>
                        <textarea name="description" class="form-control" rows="2" placeholder="Brief summary of the notes contents..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold small text-secondary">Select PDF File <span class="text-danger">*</span></label>
                        <input type="file" name="file" class="form-control" accept=".pdf,.doc,.docx,.ppt,.pptx" required>
                    </div>
                </div>
                <div class="modal-footer bg-light border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="fa fa-save me-1"></i> Upload Document</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection