@extends('layouts.admin')

@section('title', 'Create Gallery')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3">Create New Gallery</h1>
    <a href="{{ route('admin.galleries.index') }}" class="btn btn-modern-primary">
        <i class="bi bi-arrow-left me-2"></i>Back to Galleries
    </a>
</div>

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.galleries.store') }}">
            @csrf

            @if(Auth::guard('admin')->user()->is_super_admin)
            <div class="mb-3">
                <label for="domain_id" class="form-label">Domain <span class="text-danger">*</span></label>
                <select class="form-select @error('domain_id') is-invalid @enderror" id="domain_id" name="domain_id" required>
                    <option value="">Select Domain</option>
                    @foreach($domains as $domain)
                        <option value="{{ $domain->id }}" {{ old('domain_id', $currentDomainId) == $domain->id ? 'selected' : '' }}>
                            {{ $domain->full_domain }}
                        </option>
                    @endforeach
                </select>
                <small class="form-text text-muted">Select the domain for this gallery</small>
                @error('domain_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            @endif

            <div class="mb-3">
                <label for="title" class="form-label">Gallery Title <span class="text-danger">*</span></label>
                <input type="text" class="form-control @error('title') is-invalid @enderror"
                       id="title" name="title" value="{{ old('title') }}"
                       placeholder="Enter gallery title" required>
                <small class="form-text text-muted">The title of your gallery</small>
                @error('title')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="gallery_date" class="form-label">Gallery Date <span class="text-danger">*</span></label>
                <input type="date" class="form-control @error('gallery_date') is-invalid @enderror"
                       id="gallery_date" name="gallery_date" value="{{ old('gallery_date', date('Y-m-d')) }}" required>
                <small class="form-text text-muted">The date when this gallery was created (will be displayed as "January 2026")</small>
                @error('gallery_date')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">Description</label>
                <textarea class="form-control @error('description') is-invalid @enderror"
                          id="description" name="description" rows="4">{{ old('description') }}</textarea>
                <small class="form-text text-muted">Optional description for the gallery</small>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Gallery Images</label>
                <div id="images-container">
                    <div class="image-input-group mb-2">
                        <div class="input-group">
                            <input type="text" class="form-control image-url" name="images[]" id="gallery-image-0" placeholder="Select an image or enter URL" value="{{ old('images.0') }}">
                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="filemanager" data-input="gallery-image-0" data-preview="gallery-image-preview-0">
                                <i class="bi bi-folder2-open"></i> Browse
                            </button>
                            <button type="button" class="btn btn-outline-danger remove-image" onclick="removeImageInput(this)" style="display: none;">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <div id="gallery-image-preview-0" class="mt-2">
                            @if(old('images.0'))
                                <img src="{{ old('images.0') }}" alt="Preview" class="img-fluid rounded" style="max-height: 100px;">
                            @endif
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addImageInput()">
                    <i class="bi bi-plus"></i> Add Another Image
                </button>
                <small class="form-text text-muted d-block">Add multiple images for this gallery. You can paste URLs or use the file manager to browse uploaded files.</small>
            </div>

            <div class="mb-3">
                <label class="form-label">Gallery Videos</label>
                <div id="videos-container">
                    <div class="video-input-group mb-2">
                        <div class="input-group">
                            <input type="text" class="form-control video-url" name="videos[]" id="gallery-video-0" placeholder="Select a video or enter URL" value="{{ old('videos.0') }}">
                            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="filemanager" data-input="gallery-video-0" data-preview="gallery-video-preview-0" data-type="video">
                                <i class="bi bi-folder2-open"></i> Browse
                            </button>
                            <button type="button" class="btn btn-outline-danger remove-video" onclick="removeVideoInput(this)" style="display: none;">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                        <div id="gallery-video-preview-0" class="mt-2">
                            @if(old('videos.0'))
                                <video src="{{ old('videos.0') }}" controls class="img-fluid rounded" style="max-height: 100px;"></video>
                            @endif
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="addVideoInput()">
                    <i class="bi bi-plus"></i> Add Another Video
                </button>
                <small class="form-text text-muted d-block">Add multiple videos for this gallery. You can paste URLs or use the file manager to browse uploaded video files.</small>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="sort_order" class="form-label">Sort Order</label>
                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror"
                           id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0">
                    <small class="form-text text-muted">Lower numbers appear first (0 = highest priority)</small>
                    @error('sort_order')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Status</label>
                    <div class="form-check form-switch">
                        <input type="hidden" name="is_active" value="0">
                        <input type="checkbox" name="is_active" id="is_active"
                               class="form-check-input" value="1"
                               {{ old('is_active', true) ? 'checked' : '' }}>
                        <label for="is_active" class="form-check-label">Active</label>
                    </div>
                    <small class="form-text text-muted">Inactive galleries won't be displayed on the frontend</small>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{{ route('admin.galleries.index') }}" class="btn btn-secondary">Cancel</a>
                <button type="submit" class="btn btn-modern-primary">
                    <i class="bi bi-check-circle me-2"></i>Create Gallery
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('vendor/laravel-filemanager/js/stand-alone-button.js') }}"></script>
<script>
let imageCounter = 1;
let videoCounter = 1;

// Initialize file managers for all file inputs
$(document).ready(function() {
    initializeFileManagers();
});

function initializeFileManagers() {
    // Initialize any file manager buttons
    $('[data-bs-toggle="filemanager"]').each(function() {
        const $btn = $(this);
        const inputId = $btn.data('input');
        const previewId = $btn.data('preview');
        const fileType = $btn.data('type') || 'file'; // Default to 'file' to allow all types

        // Check if already initialized
        if (!$btn.data('filemanager-initialized')) {
            try {
                // Use 'file' type to allow all file types including videos
                $btn.filemanager('file', {prefix: '/admin/filemanager'});
                $btn.on('filemanager.selected', function(e, data) {
                    $('#' + inputId).val(data.url);
                    if (previewId && $('#' + previewId).length > 0) {
                        // Check file extension to determine preview type
                        const fileUrl = data.url.toLowerCase();
                        if (fileUrl.includes('.mp4') || fileUrl.includes('.avi') || fileUrl.includes('.mov') ||
                            fileUrl.includes('.wmv') || fileUrl.includes('.flv') || fileUrl.includes('.webm') ||
                            fileUrl.includes('.mkv') || fileUrl.includes('.3gp') || fileUrl.includes('.mpg') ||
                            fileUrl.includes('.mpeg')) {
                            $('#' + previewId).html('<video src="' + data.url + '" controls class="img-fluid rounded" style="max-height: 100px;"></video>');
                        } else {
                            $('#' + previewId).html('<img src="' + data.url + '" class="img-fluid rounded" style="max-height: 100px;">');
                        }
                    }
                });
                $btn.data('filemanager-initialized', true);
            } catch (error) {
                console.error('Error initializing filemanager for', inputId, error);
            }
        }
    });
}

function addImageInput() {
    const container = document.getElementById('images-container');
    const index = imageCounter++;
    const newInputGroup = document.createElement('div');
    newInputGroup.className = 'image-input-group mb-2';
    newInputGroup.innerHTML = `
        <div class="input-group">
            <input type="text" class="form-control image-url" name="images[]" id="gallery-image-${index}" placeholder="Select an image or enter URL">
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="filemanager" data-input="gallery-image-${index}" data-preview="gallery-image-preview-${index}">
                <i class="bi bi-folder2-open"></i> Browse
            </button>
            <button type="button" class="btn btn-outline-danger remove-image" onclick="removeImageInput(this)">
                <i class="bi bi-trash"></i>
            </button>
        </div>
        <div id="gallery-image-preview-${index}" class="mt-2"></div>
    `;
    container.appendChild(newInputGroup);
    updateRemoveButtons();

    // Re-initialize file managers for the new input
    setTimeout(initializeFileManagers, 100);
}

function addVideoInput() {
    const container = document.getElementById('videos-container');
    const index = videoCounter++;
    const newInputGroup = document.createElement('div');
    newInputGroup.className = 'video-input-group mb-2';
    newInputGroup.innerHTML = `
        <div class="input-group">
            <input type="text" class="form-control video-url" name="videos[]" id="gallery-video-${index}" placeholder="Select a video or enter URL">
            <button type="button" class="btn btn-outline-secondary" data-bs-toggle="filemanager" data-input="gallery-video-${index}" data-preview="gallery-video-preview-${index}" data-type="video">
                <i class="bi bi-folder2-open"></i> Browse
            </button>
            <button type="button" class="btn btn-outline-danger remove-video" onclick="removeVideoInput(this)">
                <i class="bi bi-trash"></i>
            </button>
        </div>
        <div id="gallery-video-preview-${index}" class="mt-2"></div>
    `;
    container.appendChild(newInputGroup);
    updateRemoveButtons();

    // Re-initialize file managers for the new input
    setTimeout(initializeFileManagers, 100);
}

function removeImageInput(button) {
    button.closest('.image-input-group').remove();
    updateRemoveButtons();
}

function removeVideoInput(button) {
    button.closest('.video-input-group').remove();
    updateRemoveButtons();
}

function updateRemoveButtons() {
    // Update image remove buttons
    const imageGroups = document.querySelectorAll('.image-input-group');
    imageGroups.forEach(group => {
        const removeBtn = group.querySelector('.remove-image');
        removeBtn.style.display = imageGroups.length > 1 ? 'block' : 'none';
    });

    // Update video remove buttons
    const videoGroups = document.querySelectorAll('.video-input-group');
    videoGroups.forEach(group => {
        const removeBtn = group.querySelector('.remove-video');
        removeBtn.style.display = videoGroups.length > 1 ? 'block' : 'none';
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateRemoveButtons();

    // Add image and video preview functionality
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('image-url')) {
            updateImagePreview(e.target);
        } else if (e.target.classList.contains('video-url')) {
            updateVideoPreview(e.target);
        }
    });

    // Initialize existing image previews
    document.querySelectorAll('.image-url').forEach(input => {
        updateImagePreview(input);
    });

    // Initialize existing video previews
    document.querySelectorAll('.video-url').forEach(input => {
        updateVideoPreview(input);
    });
});

function updateImagePreview(input) {
    const index = input.id.replace('gallery-image-', '');
    const preview = document.getElementById(`gallery-image-preview-${index}`);

    if (input.value) {
        preview.innerHTML = `<img src="${input.value}" alt="Preview" class="img-fluid rounded" style="max-height: 100px;">`;
    } else {
        preview.innerHTML = '';
    }
}

function updateVideoPreview(input) {
    const index = input.id.replace('gallery-video-', '');
    const preview = document.getElementById(`gallery-video-preview-${index}`);

    if (input.value) {
        preview.innerHTML = `<video src="${input.value}" controls class="img-fluid rounded" style="max-height: 100px;"></video>`;
    } else {
        preview.innerHTML = '';
    }
}
</script>
@endpush