@props(['project' => null])

{{-- --- Project Gallery (Section 9.8/9.24) ------------------------------ --}}
<div class="admin-card p-4 mb-4">
    <h2 class="h6 mb-3">Project Gallery</h2>

    @if($project && $project->images->isNotEmpty())
        <div class="row row-cols-3 row-cols-md-4 g-2 mb-3">
            @foreach($project->images as $image)
                <div class="col">
                    <div class="position-relative">
                        <img src="{{ $image->url() }}" alt="" class="w-100 rounded" style="aspect-ratio: 1; object-fit: cover;">
                        <label class="position-absolute top-0 end-0 m-1 bg-white rounded-circle d-flex align-items-center justify-content-center" style="width: 24px; height: 24px; cursor: pointer;">
                            <input type="checkbox" name="remove_gallery_images[]" value="{{ $image->id }}" class="form-check-input m-0" title="Remove this image">
                        </label>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="form-text mb-3">Check an image and save to remove it from the gallery.</div>
    @endif

    <label for="gallery_images" class="form-label">Add Gallery Images</label>
    <input type="file" name="gallery_images[]" id="gallery_images" class="form-control" accept="image/jpeg,image/png,image/webp" multiple>
    <div class="form-text">You can select multiple images at once. They'll be added to the gallery in the order selected.</div>
</div>

{{-- --- SEO (Section 9.27) ------------------------------------------------ --}}
<div class="admin-card p-4 mb-4">
    <h2 class="h6 mb-3">SEO</h2>
    <p class="text-muted small mb-3">Leave any field blank to fall back to the project title/description automatically.</p>

    <div class="mb-3">
        <label for="seo_title" class="form-label">Meta Title</label>
        <input type="text" name="seo_title" id="seo_title" class="form-control" value="{{ old('seo_title', $project->seo_title ?? '') }}">
    </div>

    <div class="mb-3">
        <label for="seo_meta_description" class="form-label">Meta Description</label>
        <textarea name="seo_meta_description" id="seo_meta_description" class="form-control" rows="2" maxlength="320">{{ old('seo_meta_description', $project->seo_meta_description ?? '') }}</textarea>
    </div>

    <div class="mb-3">
        <label for="seo_keywords" class="form-label">Keywords</label>
        <input type="text" name="seo_keywords" id="seo_keywords" class="form-control" value="{{ old('seo_keywords', $project->seo_keywords ?? '') }}">
    </div>

    <div class="mb-3">
        <label for="seo_og_image" class="form-label">Social Share Image (OG Image)</label>
        @if(($project->seo_og_image_path ?? null))
            <div class="mb-2">
                <img src="{{ asset('storage/'.$project->seo_og_image_path) }}" alt="" style="max-height: 80px; border-radius: var(--radius-card);">
            </div>
        @endif
        <input type="file" name="seo_og_image" id="seo_og_image" class="form-control" accept="image/jpeg,image/png,image/webp">
        <div class="form-text">Falls back to the Featured Image if left blank.</div>
    </div>

    <div class="mb-0">
        <label for="seo_canonical_url" class="form-label">Canonical URL <span class="text-muted">(optional)</span></label>
        <input type="url" name="seo_canonical_url" id="seo_canonical_url" class="form-control" value="{{ old('seo_canonical_url', $project->seo_canonical_url ?? '') }}">
    </div>
</div>

{{-- --- Publishing --------------------------------------------------------- --}}
<div class="admin-card p-4 mb-4">
    <h2 class="h6 mb-3">Publishing</h2>

    <div class="mb-3">
        <label for="status" class="form-label">Status</label>
        <select name="status" id="status" class="form-select @error('status') is-invalid @enderror">
            <option value="draft" @selected(old('status', $project->status ?? 'draft') === 'draft')>Draft</option>
            <option value="published" @selected(old('status', $project->status ?? 'draft') === 'published')>Published</option>
        </select>
        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-check">
        <input type="checkbox" name="is_featured" id="is_featured" class="form-check-input" value="1" @checked(old('is_featured', $project->is_featured ?? false))>
        <label for="is_featured" class="form-check-label">Feature this project on the homepage</label>
    </div>
</div>