@extends('layouts.app')

@section('content')
<section class="section light">
    <div class="container">
        <div class="post-header" style="margin-bottom: 40px;">
            <h1 style="font-size: 3rem;">Upload to Gallery</h1>
            <p>Share photos and videos of our community impact with the world.</p>
        </div>

        <div class="form-container">
            @if($errors->any())
                <div class="alert-error">
                    <ul style="margin-left: 20px;">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('gallery.upload.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>Event / Group</label>
                    <select name="group_id" class="form-control" style="width: 100%; padding: 16px 20px; border: 2px solid #eee; border-radius: 10px; font-size: 1.1rem; background: #fcfcfc;">
                        <option value="">-- Select Existing Group (Optional) --</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Or Create New Group</label>
                    <input type="text" name="new_group" placeholder="e.g., Annual Gala 2026">
                </div>

                <div class="form-group">
                    <label>Gallery Title</label>
                    <input type="text" name="title" value="{{ old('title') }}" placeholder="e.g., Community Food Drive 2026" required autofocus>
                </div>

                <div class="form-group">
                    <label>Description (Optional)</label>
                    <textarea name="description" rows="3" placeholder="Tell us more about these photos/videos...">{{ old('description') }}</textarea>
                </div>

                <div class="form-group">
                    <label>Select Photos or Videos</label>
                    <input type="file" name="media[]" accept="image/*,video/*" required multiple>
                    <p style="font-size: 0.8rem; color: #888; margin-top: 10px;">You can select multiple files at once. (Max 20MB per file)</p>
                </div>

                <div style="text-align: right; margin-top: 40px;">
                    <a href="{{ route('gallery') }}" style="margin-right: 20px; color: #666; text-decoration: none; font-weight: 600;">Cancel</a>
                    <button type="submit" class="button button-primary" style="margin: 0; padding: 16px 50px;">Start Upload</button>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection