@extends('admin.layouts.app')

@section('content')
<div class="admin-content">
    <div class="section-header">
        <h1>Add Gallery Item</h1>
        <div class="breadcrumb">
            <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            <span>/</span>
            <a href="{{ route('admin.gallery.index') }}">Gallery</a>
            <span>/</span>
            <span>Add Gallery Item</span>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h5>Gallery Item Information</h5>
        </div>
        <div class="card-body">
            {{-- Success Message --}}
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle"></i> <strong>Success!</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Error Message --}}
            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle"></i> <strong>Error!</strong> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- Validation Errors --}}
            @if($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-triangle"></i> <strong>Please fix the following errors:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form method="POST" action="{{ route('admin.gallery.store') }}" enctype="multipart/form-data" id="galleryForm">
                @csrf
                
                {{-- Loading Overlay --}}
                <div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 9999; justify-content: center; align-items: center;">
                    <div style="text-align: center;">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="mt-3">
                            <strong>Uploading files... Please wait</strong>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="title" class="form-label">Title *</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                            @error('title')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control" id="description" name="description" rows="4"></textarea>
                            @error('description')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="type" class="form-label">Type *</label>
                            <select class="form-control" id="type" name="type" required onchange="toggleThumbnailField()">
                                <option value="">Select Type</option>
                                <option value="image">Image</option>
                                <option value="video">Video</option>
                            </select>
                            @error('type')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="sort_order" class="form-label">Sort Order</label>
                            <input type="number" class="form-control" id="sort_order" name="sort_order" value="0" min="0">
                            <small class="text-muted">Lower numbers appear first</small>
                            @error('sort_order')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="form-label">Files *</label>
                            <input type="file" class="form-control" id="file" name="files[]" multiple required onchange="previewFiles(this)">
                            <small class="text-muted">
                                Images: jpg, jpeg, png, gif (max 10MB each)<br>
                                Videos: mp4, mov, avi (max 10MB each)<br>
                                <strong>You can select multiple files at once</strong>
                            </small>
                            @error('files')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                            
                            <div id="filesPreview" class="mt-2" style="display: none;">
                                <div class="row" id="previewContainer"></div>
                            </div>
                        </div>

                        <div class="form-group" id="thumbnailField" style="display: none;">
                            <label class="form-label">Thumbnail (for videos)</label>
                            <input type="file" class="form-control" id="thumbnail" name="thumbnail" accept="image/*" onchange="previewThumbnail(this)">
                            <small class="text-muted">jpg, jpeg, png, gif (max 2MB)</small>
                            @error('thumbnail')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                            
                            <div id="thumbnailPreview" class="mt-2" style="display: none;"></div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="featured" name="featured">
                                <label class="form-check-label" for="featured">
                                    <i class="fas fa-star"></i> Featured
                                </label>
                            </div>
                            <small class="text-muted">Featured items appear on the main gallery page</small>
                        </div>

                        <div class="form-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="status" name="status" checked>
                                <label class="form-check-label" for="status">
                                    <i class="fas fa-eye"></i> Active
                                </label>
                            </div>
                            <small class="text-muted">Only active items are visible on the website</small>
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> Save Gallery Item
                            </button>
                            <a href="{{ route('admin.gallery.index') }}" class="btn btn-secondary">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function toggleThumbnailField() {
    const type = document.getElementById('type').value;
    const thumbnailField = document.getElementById('thumbnailField');
    
    if (type === 'video') {
        thumbnailField.style.display = 'block';
    } else {
        thumbnailField.style.display = 'none';
    }
}

function previewFiles(input) {
    const previewContainer = document.getElementById('previewContainer');
    const files = input.files;
    
    if (files.length > 0) {
        previewContainer.innerHTML = '';
        previewContainer.parentElement.parentElement.style.display = 'block';
        
        Array.from(files).forEach((file, index) => {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                const previewDiv = document.createElement('div');
                previewDiv.className = 'col-md-4 mb-3';
                
                if (file.type.startsWith('video/')) {
                    previewDiv.innerHTML = `
                        <div style="border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #f9fafb;">
                            <video src="${e.target.result}" controls style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px;"></video>
                            <div class="mt-2">
                                <strong>${file.name}</strong>
                                <div class="text-muted small">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                            </div>
                        </div>
                    `;
                } else {
                    previewDiv.innerHTML = `
                        <div style="border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #f9fafb;">
                            <img src="${e.target.result}" alt="${file.name}" style="width: 100%; height: 150px; object-fit: cover; border-radius: 4px;">
                            <div class="mt-2">
                                <strong>${file.name}</strong>
                                <div class="text-muted small">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                            </div>
                        </div>
                    `;
                }
                
                previewContainer.appendChild(previewDiv);
            };
            
            reader.readAsDataURL(file);
        });
    } else {
        previewContainer.parentElement.parentElement.style.display = 'none';
    }
}

function previewFile(input) {
    // Keep for backward compatibility
    previewFiles(input);
}

function previewThumbnail(input) {
    const preview = document.getElementById('thumbnailPreview');
    const file = input.files[0];
    
    if (file) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            preview.innerHTML = `
                <div style="border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #f9fafb;">
                    <img src="${e.target.result}" alt="Thumbnail Preview" style="max-width: 100%; height: 200px; object-fit: cover; border-radius: 4px;">
                    <div class="mt-2">
                        <strong>${file.name}</strong>
                        <div class="text-muted small">${(file.size / 1024 / 1024).toFixed(2)} MB</div>
                    </div>
                </div>
            `;
            preview.style.display = 'block';
        };
        
        reader.readAsDataURL(file);
    } else {
        preview.style.display = 'none';
    }
}

// Simple form submission - no AJAX
let isSubmitting = false;

document.getElementById('galleryForm').addEventListener('submit', function(e) {
    const filesInput = document.getElementById('file');
    const files = filesInput.files;
    
    if (files.length === 0) {
        e.preventDefault();
        alert('Please select at least one file to upload!');
        return false;
    }
    
    // Check file sizes
    for (let i = 0; i < files.length; i++) {
        if (files[i].size > 10 * 1024 * 1024) {
            e.preventDefault();
            alert('File "' + files[i].name + '" exceeds 10MB limit!');
            return false;
        }
    }
    
    if (isSubmitting) {
        e.preventDefault();
        return false;
    }
    
    isSubmitting = true;
    
    // Simple loading overlay
    const loadingOverlay = document.getElementById('loadingOverlay');
    loadingOverlay.innerHTML = `
        <div style="text-align: center; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
            <div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div class="mt-2">
                <strong>Saving...</strong>
            </div>
        </div>
    `;
    loadingOverlay.style.display = 'flex';
    
    // Disable submit button
    const submitBtn = this.querySelector('button[type="submit"]');
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
    }
    
    // Form submits normally - no AJAX
    return true;
});
</script>
@endsection