@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-files me-2"></i>Files
            </h1>
            <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>

        <!-- Filters -->
        <div class="card mb-4">
            <div class="card-body">
                <form method="GET" action="{{ route('files.index') }}">
                    <div class="row g-3">
                        <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 d-flex align-items-end">
                            <button type="submit" class="btn btn-outline-primary me-2">
                                <i class="fas fa-filter me-1"></i>Filter
                            </button>
                            <a href="{{ route('files.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i>Clear
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Files List -->
        <div class="card">
            <div class="card-body">
                @if($files->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>File Name</th>
                                    <th>Type</th>
                                    <th>Size</th>
                                    <th>Visibility</th>
                                    <th>Owner</th>
                                    <th>Uploaded</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($files as $file)
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <i class="fas {{ $file->isImage() ? 'fa-image' : ($file->isVideo() ? 'fa-video' : 'fa-file') }} me-2 text-muted"></i>
                                                <div>
                                                    <div class="fw-bold">{{ $file->file_name }}</div>
                                                    <small class="text-muted">.{{ $file->extension }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-secondary">{{ $file->mime }}</span>
                                        </td>
                                        <td>{{ $file->file_size_formatted }}</td>
                                        <td>
                                            <span class="badge bg-{{ $file->visibility == 'public' ? 'success' : ($file->visibility == 'private' ? 'danger' : 'warning') }}">
                                                {{ ucfirst($file->visibility) }}
                                            </span>
                                        </td>
                                        <td>{{ $file->owner->name }}</td>
                                        <td>{{ $file->created_at->format('M j, Y') }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <a href="{{ route('files.download', $file) }}" 
                                                   class="btn btn-outline-primary" 
                                                   title="Download">
                                                    <i class="fas fa-download"></i>
                                                </a>
                                                
                                                @if($file->owner_user_id == auth()->id() || auth()->user()->isAdmin())
                                                    <button type="button" 
                                                            class="btn btn-outline-secondary" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-target="#visibilityModal{{ $file->id }}"
                                                            title="Change Visibility">
                                                        <i class="fas fa-eye"></i>
                                                    </button>
                                                    
                                                    <form action="{{ route('files.destroy', $file) }}" 
                                                          method="POST" 
                                                          class="d-inline"
                                                          onsubmit="return confirm('Are you sure you want to delete this file?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-outline-danger" title="Delete">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>

                                            <!-- Visibility Modal for each file -->
                                            <div class="modal fade" id="visibilityModal{{ $file->id }}" tabindex="-1">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <form action="{{ route('files.update-visibility', $file) }}" method="POST">
                                                            @csrf
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Change File Visibility</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <p class="mb-3">
                                                                    <strong>File:</strong> {{ $file->file_name }}<br>
                                                                    <strong>Current:</strong> 
                                                                    <span class="badge bg-{{ $file->visibility == 'public' ? 'success' : ($file->visibility == 'private' ? 'danger' : 'warning') }}">
                                                                        {{ ucfirst($file->visibility) }}
                                                                    </span>
                                                                </p>
                                                                
                                                                <div class="mb-3">
                                                                    <label for="visibility{{ $file->id }}" class="form-label">New Visibility</label>
                                                                    <select name="visibility" id="visibility{{ $file->id }}" class="form-select" required>
                                                                        <option value="private" {{ $file->visibility == 'private' ? 'selected' : '' }}>Private (Only you)</option>
                                                                        <option value="batch" {{ $file->visibility == 'batch' ? 'selected' : '' }}>Batch (Your batch members)</option>
                                                                        <option value="subject" {{ $file->visibility == 'subject' ? 'selected' : '' }}>Subject (Subject teachers)</option>
                                                                        <option value="public" {{ $file->visibility == 'public' ? 'selected' : '' }}>Public (Everyone)</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                                <button type="submit" class="btn btn-primary">Update Visibility</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <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>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('files.upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Upload New File</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="file" class="form-label">Select File (Max: 10MB)</label>
                        <input type="file" class="form-control" id="file" name="file" required>
                        @error('file')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div class="mb-3">
                        <label for="visibility" class="form-label">Visibility</label>
                        <select name="visibility" id="visibility" class="form-select" required>
                            <option value="private">Private (Only you)</option>
                            <option value="batch">Batch (Your batch members)</option>
                            <option value="subject">Subject (Subject teachers)</option>
                            <option value="public">Public (Everyone)</option>
                        </select>
                        @error('visibility')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-upload me-1"></i>Upload File
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Auto-show modal if there are validation errors
    @if($errors->has('file') || $errors->has('visibility'))
        document.addEventListener('DOMContentLoaded', function() {
            var uploadModal = new bootstrap.Modal(document.getElementById('uploadModal'));
            uploadModal.show();
        });
    @endif
</script>
@endpush