@extends('layouts.admin')

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

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

    <form action="{{ route('page_gallery.store') }}" 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" placeholder="e.g. cf_quality" required>
            @error('section_name') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">Upload Images</label>
            <input type="file" name="images[]" class="form-control" accept="image/*" multiple required>
            @error('images.*') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

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

        <button type="submit" class="n-btn">Save</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