@extends('layouts.admin')

@section('page-title', 'Edit-Gallery Imgs')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3>Edit Gallery</h3>
        <a href="{{ route('page_gallery.index') }}" class="btn btn-secondary">Back</a>
    </div>

    <form action="{{ route('page_gallery.update', $gallery->id) }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="mb-3">
            <label class="form-label">Section Name</label>
            <input type="text" name="section_name" class="form-control" value="{{ $gallery->section_name }}" required>
        </div>

        <div class="mb-3">
            <label class="form-label">Current Images</label><br>
            <td>
                    @foreach((array) json_decode($gallery->images, true) as $img)
                        <img src="{{ asset('uploads/page_gallery/' .$img) }}" width="80" height="80" class="rounded border">
                    @endforeach
            </td>
        </div>

        <div class="mb-3">
            <label class="form-label">Upload New Images (optional)</label>
            <input type="file" name="images[]" class="form-control" accept="image/*" multiple>
        </div>

        <div class="d-flex flex-wrap gap-2" id="preview"></div>

        <button type="submit" class="n-btn">Update</button>
    </form>
</div>

<script>
    document.querySelector('input[name="images[]"]').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';
        Array.from(event.target.files).forEach(file => {
            const reader = new FileReader();
            reader.onload = e => {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.width = 80;
                img.height = 80;
                img.className = "rounded border";
                preview.appendChild(img);
            };
            reader.readAsDataURL(file);
        });
    });
</script>
@endsection