@extends('layouts.app')

@section('title', 'Materials Management')
@section('page-title', 'Materials Management')

@section('header-buttons')
    @auth
        @if(auth()->user()->teacher)
            <a href="{{ route('materials.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i> Upload Material
            </a>
        @endif
    @endauth
@endsection

@section('content')
<!-- Quick Stats for Teachers -->
@auth
    @if(auth()->user()->teacher)
        @php
            // Calculate statistics
            $myMaterialsCount = \App\Models\Material::where('uploaded_by_teacher_id', auth()->user()->teacher->id)->count();
            $publishedCount = \App\Models\Material::where('uploaded_by_teacher_id', auth()->user()->teacher->id)->where('published', true)->count();
            $unpublishedCount = $myMaterialsCount - $publishedCount;
            $totalFileSize = \App\Models\Material::where('uploaded_by_teacher_id', auth()->user()->teacher->id)->sum('file_size');
            
            function formatBytes($bytes, $precision = 2) {
                $units = ['B', 'KB', 'MB', 'GB', 'TB'];
                $bytes = max($bytes, 0);
                $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
                $pow = min($pow, count($units) - 1);
                $bytes /= pow(1024, $pow);
                return round($bytes, $precision) . ' ' . $units[$pow];
            }
        @endphp
        
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card bg-primary text-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-0">{{ $myMaterialsCount }}</h4>
                                <p class="mb-0 small">Total Materials</p>
                            </div>
                            <div class="display-6 opacity-75">
                                <i class="fas fa-file-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-0">{{ $publishedCount }}</h4>
                                <p class="mb-0 small">Published</p>
                            </div>
                            <div class="display-6 opacity-75">
                                <i class="fas fa-eye"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-0">{{ $unpublishedCount }}</h4>
                                <p class="mb-0 small">Unpublished</p>
                            </div>
                            <div class="display-6 opacity-75">
                                <i class="fas fa-eye-slash"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-0">{{ formatBytes($totalFileSize) }}</h4>
                                <p class="mb-0 small">Storage Used</p>
                            </div>
                            <div class="display-6 opacity-75">
                                <i class="fas fa-database"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endauth

<div class="card shadow-sm border-0">
    <div class="card-header bg-transparent py-3">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h5 class="card-title mb-0 text-dark">
                    <i class="fas fa-file-alt text-primary me-2"></i>
                    @auth
                        @if(auth()->user()->teacher)
                            My Study Materials
                        @elseif(auth()->user()->student)
                            Available Study Materials
                        @else
                            All Study Materials
                        @endif
                    @endauth
                </h5>
            </div>
            <div class="col-md-6">
                <form id="filterForm" class="row g-2">
                    @auth
                        @if(auth()->user()->teacher)
                            <div class="col-md-4">
                                <select name="class_id" class="form-select" onchange="this.form.submit()">
                                    <option value="">All My Classes</option>
                                    @foreach($classes as $class)
                                        <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                            {{ $class->batch->name }} - {{ $class->subject->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select name="published" class="form-select" onchange="this.form.submit()">
                                    <option value="">All Status</option>
                                    <option value="1" {{ request('published') === '1' ? 'selected' : '' }}>Published</option>
                                    <option value="0" {{ request('published') === '0' ? 'selected' : '' }}>Unpublished</option>
                                </select>
                            </div>
                        @else
                            <div class="col-md-4">
                                <select name="class_id" class="form-select" onchange="this.form.submit()">
                                    <option value="">All Classes</option>
                                    @foreach($classes as $class)
                                        <option value="{{ $class->id }}" {{ request('class_id') == $class->id ? 'selected' : '' }}>
                                            {{ $class->batch->name }} - {{ $class->subject->title }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif
                    @endauth
                    
                    <div class="col-md-3">
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0">
                                <i class="fas fa-search text-muted"></i>
                            </span>
                            <input type="text" name="search" class="form-control border-start-0" placeholder="Search..." value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-outline-primary w-100">
                            <i class="fas fa-filter me-1"></i> Filter
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card-body">
        @auth
            @if(auth()->user()->teacher && $materials->isEmpty() && !request()->hasAny(['class_id', 'published', 'search']))
                <!-- Empty State for Teachers -->
                <div class="text-center py-5">
                    <div class="empty-state">
                        <i class="fas fa-cloud-upload-alt fa-4x text-muted mb-4"></i>
                        <h4 class="text-muted mb-3">No Materials Uploaded Yet</h4>
                        <p class="text-muted mb-4">Start sharing study materials with your students by uploading your first file.</p>
                        <a href="{{ route('materials.create') }}" class="btn btn-primary btn-lg">
                            <i class="fas fa-plus me-2"></i> Upload Your First Material
                        </a>
                    </div>
                </div>
            @else
                <!-- Results Summary -->
                @if($materials->isNotEmpty())
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center">
                                <span class="text-muted me-2">Showing</span>
                                <strong>{{ $materials->firstItem() }} - {{ $materials->lastItem() }}</strong>
                                <span class="text-muted mx-2">of</span>
                                <strong>{{ $materials->total() }}</strong>
                                <span class="text-muted ms-2">materials</span>
                                
                                @if(request()->hasAny(['class_id', 'published', 'search']))
                                    <a href="{{ route('materials.index') }}" class="btn btn-sm btn-outline-secondary ms-3">
                                        <i class="fas fa-times me-1"></i> Clear Filters
                                    </a>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6 text-end">
                            @if(auth()->user()->teacher)
                                <a href="{{ route('materials.create') }}" class="btn btn-primary">
                                    <i class="fas fa-plus me-1"></i> Upload New Material
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                <!-- Materials Table -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="25%">Material Title</th>
                                <th width="20%">Class Details</th>
                                <th width="15%">Uploaded By</th>
                                <th width="15%">File Information</th>
                                <th width="10%">Status</th>
                                <th width="10%">Upload Date</th>
                                <th width="15%">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($materials as $material)
                            <tr class="align-middle">
                                <td>
                                    <div class="d-flex align-items-start">
                                        <div class="file-icon me-3">
                                            @if($material->isPdf())
                                                <i class="fas fa-file-pdf text-danger fa-lg"></i>
                                            @elseif($material->isImage())
                                                <i class="fas fa-file-image text-success fa-lg"></i>
                                            @elseif($material->isVideo())
                                                <i class="fas fa-file-video text-warning fa-lg"></i>
                                            @else
                                                <i class="fas fa-file text-primary fa-lg"></i>
                                            @endif
                                        </div>
                                        <div class="flex-grow-1">
                                            <strong class="d-block text-dark">{{ Str::limit($material->title, 50) }}</strong>
                                            @auth
                                                @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                                                    <small class="text-info">
                                                        <i class="fas fa-user-edit me-1"></i>My Upload
                                                    </small>
                                                @endif
                                            @endauth
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div class="class-info">
                                        <strong class="d-block text-dark">Batch: {{ $material->class->batch->name }}</strong>
                                        <small class="text-muted">Subject: {{ $material->class->subject->title }}</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="teacher-info">
                                        <strong class="d-block text-dark">{{ $material->teacher->user->username }}</strong>
                                        <small class="text-muted">Teacher</small>
                                    </div>
                                </td>
                                <td>
                                    <div class="file-info">
                                        <div class="d-flex align-items-center mb-1">
                                            <i class="fas fa-file text-muted me-2"></i>
                                            <small class="text-dark text-uppercase">{{ $material->file_extension }}</small>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-weight text-muted me-2"></i>
                                            <small class="text-dark">{{ $material->file_size_formatted }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $material->published ? 'success' : 'warning' }} rounded-pill">
                                        <i class="fas fa-{{ $material->published ? 'eye' : 'eye-slash' }} me-1"></i>
                                        {{ $material->published ? 'Published' : 'Draft' }}
                                    </span>
                                </td>
                                <td>
                                    <small class="text-muted">{{ $material->created_at->format('M d, Y') }}</small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <a href="{{ route('materials.download', $material) }}" class="btn btn-outline-primary" title="Download">
                                            <i class="fas fa-download"></i>
                                        </a>
                                        <a href="{{ route('materials.show', $material) }}" class="btn btn-outline-info" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        
                                        @auth
                                            @if(auth()->user()->teacher && $material->uploaded_by_teacher_id == auth()->user()->teacher->id)
                                                <a href="{{ route('materials.edit', $material) }}" class="btn btn-outline-secondary" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-outline-{{ $material->published ? 'warning' : 'success' }} toggle-publish" 
                                                        data-id="{{ $material->id }}" title="{{ $material->published ? 'Unpublish' : 'Publish' }}">
                                                    <i class="fas fa-{{ $material->published ? 'eye-slash' : 'eye' }}"></i>
                                                </button>
                                                <form action="{{ route('materials.destroy', $material) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-outline-danger" title="Delete" 
                                                            onclick="return confirm('Are you sure you want to delete this material? This action cannot be undone.')">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        @endauth
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-5">
                                    <div class="empty-state-sm">
                                        <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                        <h5 class="text-muted">No materials found</h5>
                                        @if(request()->hasAny(['class_id', 'published', 'search']))
                                            <p class="text-muted mb-3">Try adjusting your filters or search terms</p>
                                            <a href="{{ route('materials.index') }}" class="btn btn-outline-primary">
                                                <i class="fas fa-times me-1"></i> Clear Filters
                                            </a>
                                        @elseif(auth()->user()->teacher)
                                            <p class="text-muted mb-3">Ready to upload your first study material?</p>
                                            <a href="{{ route('materials.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus me-1"></i> Upload Material
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                @if($materials->hasPages())
                    <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                        <div class="text-muted">
                            Showing {{ $materials->firstItem() }} to {{ $materials->lastItem() }} of {{ $materials->total() }} results
                        </div>
                        <div>
                            {{ $materials->links() }}
                        </div>
                    </div>
                @endif
            @endif
        @endauth
    </div>
</div>
@endsection

@section('styles')
<style>
    .card {
        transition: box-shadow 0.3s ease;
    }
    
    .card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .file-icon {
        width: 24px;
        text-align: center;
    }
    
    .empty-state {
        padding: 3rem 1rem;
    }
    
    .empty-state-sm {
        padding: 2rem 1rem;
    }
    
    .btn-group .btn {
        border-radius: 6px !important;
        margin: 1px;
    }
    
    .class-info, .teacher-info, .file-info {
        line-height: 1.4;
    }
</style>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // Toggle publish status with AJAX
    $('.toggle-publish').click(function() {
        const materialId = $(this).data('id');
        const button = $(this);
        
        // Show loading state
        button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
        
        $.ajax({
            url: `/materials/${materialId}/toggle-publish`,
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                // Reload to show updated status
                location.reload();
            },
            error: function(xhr) {
                // Restore button state
                button.prop('disabled', false);
                const isPublished = button.hasClass('btn-outline-warning');
                button.html(`<i class="fas fa-${isPublished ? 'eye-slash' : 'eye'}"></i>`);
                
                // Show error message
                alert('Error updating material status. Please try again.');
            }
        });
    });

    // Enhanced search with debounce
    let searchTimer;
    $('input[name="search"]').on('input', function() {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            $('#filterForm').submit();
        }, 500);
    });

    // Clear search on escape
    $('input[name="search"]').on('keydown', function(e) {
        if (e.key === 'Escape') {
            $(this).val('');
            $('#filterForm').submit();
        }
    });
});
</script>
@endsection