@extends('layouts.user.user') 

@section('title', 'Add Site Gallery Images')

@section('content')
    <div class="container py-4">

        {{-- Page Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="fw-bold">Add Site Gallery Images</h2>
            <a href="{{ url()->previous() }}" class="btn btn-secondary btn-sm">Back</a>
        </div>

        {{-- Success Message --}}
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <strong>There were some issues:</strong>
                <ul class="mb-0">
                    @foreach ($errors->all() as $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Upload Form --}}
        <div class="card shadow-sm">
            <div class="card-body">

                <form action="{{ route('add.siteGallery', $project->id) }}" method="POST"
                    enctype="multipart/form-data">

                    @csrf

                    {{-- Caption Field --}}
                    <div class="mb-3">
                        <label class="form-label">Caption (Optional)</label>
                        <input type="text" name="caption" class="form-control" placeholder="Enter caption...">
                    </div>

                    {{-- Image Upload --}}
                    <div class="mb-3">
                        <label class="form-label">Upload Site Images</label>
                        <input type="file" name="site_img[]" multiple class="form-control">
                        <small class="text-muted">You can upload multiple images.</small>
                    </div>

                    {{-- Submit Button --}}
                    <button type="submit" class="btn btn-primary mt-2">
                        <i class="bi bi-upload"></i> Upload Images
                    </button>

                </form>

            </div>
        </div>

    </div>
@endsection