@extends('master')
@push('styles')
<style>
    .upload-area:hover {
        background-color: #f8f9fa;
        border-color: #0d6efd;
    }
    input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #dc3545;
    }
</style>
@endpush
@section('content')
<section class="section">
    @include('admin.layout.breadcrumbs', [
        'title' => __('Event Gallery'),
        'headerData' => __('Event'),
        'url' => 'events',
    ])

    <div class="section-body">
        <div class="card shadow-lg border-0 p-4">
            <h2 class="section-title mb-4">{{ __('Event Gallery') }}</h2>

            {{-- Status Alert --}}
            @if (session('status'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('status') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            {{-- Gallery Items --}}
            <form method="POST" action="{{ route('event-management.galleries.items.destroyMultiple', $gallery->id) }}">
                @csrf
                @method('DELETE')

                <div class="row">
                    @foreach ($gallery->items as $item)
                        <div class="col-md-3 col-sm-6 mb-4 position-relative">
                            {{-- Checkbox --}}
                            <div class="position-absolute" style="top: 8px; right: 24px; z-index: 10;">
                                <input type="checkbox" name="item_ids[]" value="{{ $item->id }}">
                            </div>

                            @if (strtolower($gallery->type) === 'image')
                                <img src="{{ url('gallery/upload/' . $item->file_path) }}"
                                     alt="{{ $item->file_path }}"
                                     class="img-fluid w-100 rounded"
                                     style="object-fit: cover; height: 200px;">
                            @else
                                <video class="w-100 rounded" height="200" controls preload="metadata" style="object-fit: cover;">
                                    <source src="{{ url('gallery/upload/' . $item->file_path) }}" type="video/mp4">
                                </video>
                            @endif

                            <div class="small text-muted mt-1 text-truncate">{{ $item->file_path }}</div>
                        </div>
                    @endforeach
                </div>

                <button type="submit" class="btn btn-danger mt-2" onclick="return confirm('Delete selected items?')">
                    {{ __('Delete Selected') }}
                </button>
            </form>

            <hr>

            {{-- Upload Form --}}
            <form method="POST" action="{{ route('event-management.galleries.items.store', $gallery->id) }}" enctype="multipart/form-data">
                @csrf
                <div class="upload-area border border-2 border-dashed rounded p-4 text-center mb-3" style="cursor: pointer;">
                    <i class="fas fa-cloud-upload-alt fa-2x text-primary mb-2"></i>
                    <p class="fw-bold mb-1">{{ __('Drag & drop files here or click to browse') }}</p>
                    <small class="text-muted">
                        {{ strtolower($gallery->type) == 'image' ? 'PNG, JPG, JPEG, SVG, GIF' : 'MP4, MOV, AVI, WEBM' }}
                    </small>
                    <input type="file" name="files[]" multiple id="galleryUpload" class="d-none"
                           accept="{{ strtolower($gallery->type) == 'image' ? '.png,.jpg,.jpeg,.svg,.gif' : '.mp4,.mov,.avi,.webm' }}">
                </div>

                {{-- Preview --}}
                <div class="row" id="uploadPreview"></div>

                <button type="submit" class="btn btn-primary mt-3">{{ __('Upload Files') }}</button>
            </form>

            <div class="mt-3">
                <a href="{{ url('events') }}" class="btn btn-secondary">{{ __('Back') }}</a>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
    <script>
        document.querySelector('.upload-area').addEventListener('click', () => {
            document.getElementById('galleryUpload').click();
        });

        document.getElementById('galleryUpload').addEventListener('change', function() {
            const previewContainer = document.getElementById('uploadPreview');
            previewContainer.innerHTML = '';

            Array.from(this.files).forEach(file => {
                const col = document.createElement('div');
                col.classList.add('col-md-3', 'col-sm-6', 'mb-3');

                if (file.type.startsWith('image/')) {
                    const img = document.createElement('img');
                    img.classList.add('img-fluid', 'w-100', 'rounded');
                    img.style.height = '200px';
                    img.style.objectFit = 'cover';
                    const reader = new FileReader();
                    reader.onload = e => img.src = e.target.result;
                    reader.readAsDataURL(file);
                    col.appendChild(img);
                } else if (file.type.startsWith('video/')) {
                    const video = document.createElement('video');
                    video.controls = true;
                    video.preload = 'metadata';
                    video.muted = true;
                    video.style.width = '100%';
                    video.style.height = '200px';
                    video.style.objectFit = 'cover';
                    const source = document.createElement('source');
                    source.src = URL.createObjectURL(file);
                    source.type = file.type;
                    video.appendChild(source);
                    video.load();
                    col.appendChild(video);
                }

                previewContainer.appendChild(col);
            });
        });
    </script>
@endpush