@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="fas fa-th me-2"></i>Files Grid View
            </h1>
            <div>
                <a href="{{ route('files.index') }}" class="btn btn-outline-primary me-2">
                    <i class="fas fa-list me-1"></i>List View
                </a>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
                    <i class="fas fa-upload me-1"></i>Upload File
                </button>
            </div>
        </div>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" action="{{ route('files.grid') }}">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-4">
                            <label for="visibility" class="form-label">Visibility</label>
                            <select name="visibility" id="visibility" class="form-select">
                                <option value="">All Visibility</option>
                                <option value="private" {{ request('visibility') == 'private' ? 'selected' : '' }}>Private</option>
                                <option value="batch" {{ request('visibility') == 'batch' ? 'selected' : '' }}>Batch</option>
                                <option value="subject" {{ request('visibility') == 'subject' ? 'selected' : '' }}>Subject</option>
                                <option value="public" {{ request('visibility') == 'public' ? 'selected' : '' }}>Public</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="mime_type" class="form-label">File Type</label>
                            <select name="mime_type" id="mime_type" class="form-select">
                                <option value="">All Types</option>
                                <option value="image" {{ request('mime_type') == 'image' ? 'selected' : '' }}>Images</option>
                                <option value="application" {{ request('mime_type') == 'application' ? 'selected' : '' }}>Documents</option>
                                <option value="video" {{ request('mime_type') == 'video' ? 'selected' : '' }}>Videos</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <button type="submit" class="btn btn-outline-primary me-2">
                                <i class="fas fa-filter me-1"></i>Filter
                            </button>
                            <a href="{{ route('files.grid') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i>Clear
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Files Grid -->
        @if($files->count() > 0)
            <div class="row">
                @foreach($files as $file)
                    <div class="col-xl-3 col-lg-4 col-md-6 mb-4">
                        @include('components.file-card', ['file' => $file])
                    </div>
                @endforeach
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-between align-items-center mt-4">
                <div class="text-muted">
                    Showing {{ $files->firstItem() }} to {{ $files->lastItem() }} of {{ $files->total() }} files
                </div>
                {{ $files->links() }}
            </div>
        @else
            <div class="text-center py-5">
                <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                <h4>No files found</h4>
                <p class="text-muted">Upload your first file to get started.</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
                    <i class="fas fa-upload me-1"></i>Upload File
                </button>
            </div>
        @endif
    </div>
</div>

@include('files.partials.upload-modal')
@endsection