@extends('admin.layouts.app')
@section('content')
    <div class="container-xl">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Gallery</h3>
                <div class="card-actions">
                    <a href="{{ url()->previous() }}" class="btn btn-primary btn-3">


                        Back
                    </a>
                </div>
            </div>
            <div class="card-body">

                <form action="{{ route('panel.gallery.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="col-md-6 mb-3">
                        <label>Municipality <span class="text-danger">*</span></label>
                        <select name="municipality_id" class="form-control @error('municipality_id') is-invalid @enderror"
                            required>
                            <option value="">Select Municipality</option>
                            @foreach ($municipalities as $municipality)
                                <option value="{{ $municipality->id }}"
                                    {{ old('municipality_id') == $municipality->id ? 'selected' : '' }}>
                                    {{ $municipality->name }}</option>
                            @endforeach
                        </select>
                        @error('municipality_id')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Ward <span class="text-danger">*</span></label>
                        <select name="ward_id" class="form-control @error('ward_id') is-invalid @enderror" required>
                            <option value="">Select Ward</option>
                            @foreach ($wards as $ward)
                                <option value="{{ $ward->id }}" {{ old('ward_id') == $ward->id ? 'selected' : '' }}>
                                    {{ $ward->name }}</option>
                            @endforeach
                        </select>
                        @error('ward_id')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label>Title</label>
                        <input type="text" name="title" class="form-control" required>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label>Category <span class="text-danger">*</span></label>
                        <select name="category_id" class="form-control @error('category_id') is-invalid @enderror" required>
                            <option value="">Select Category</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}</option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label>Description</label>
                        <textarea name="description" class="form-control" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label>Multiple Images</label>
                        <input type="file" name="images[]" class="form-control" multiple accept="image/*" required>
                        <small class="text-muted">You can select multiple images at once</small>
                    </div>

                    <div id="captions-container" class="mb-3">
                        <!-- Caption inputs will be added dynamically -->
                    </div>

                    <button type="submit" class="btn btn-primary">Create Gallery</button>
                </form>


            </div>
        </div>

    </div>

    <script>
        document.querySelector('input[name="images[]"]').addEventListener('change', function(e) {
            const container = document.getElementById('captions-container');
            container.innerHTML = '<label>Image Captions (Optional)</label>';

            for (let i = 0; i < this.files.length; i++) {
                container.innerHTML += `
            <div class="mb-2">
                <label>Caption for ${this.files[i].name}</label>
                <input type="text" name="captions[${i}]" class="form-control" placeholder="Enter caption...">
            </div>
        `;
            }
        });
    </script>
@endsection