{{-- resources/views/admin/projects/_form.blade.php --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Main --}}
    <div class="lg:col-span-2 space-y-5">
        <div class="admin-card space-y-5">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Project Details</h2>

            <div>
                <label class="form-label">Project Title <span style="color:#dc2626;">*</span></label>
                <input type="text" name="title" value="{{ old('title', $project?->title) }}"
                       placeholder="e.g. NaijaBank Mobile Dashboard"
                       class="form-field" required>
            </div>

            <div>
                <label class="form-label">Summary <span style="color:#dc2626;">*</span></label>
                <textarea name="summary" rows="2" class="form-field" required
                          placeholder="One-line summary shown on the portfolio listing…">{{ old('summary', $project?->summary) }}</textarea>
            </div>

            <div>
                <label class="form-label">Full Description</label>
                <p class="form-hint mb-1">HTML is supported. Describe the challenge, solution, and outcomes.</p>
                <textarea name="description" rows="14" class="form-field"
                          placeholder="Describe the project in detail — problem statement, solution, tech decisions, results…">{{ old('description', $project?->description) }}</textarea>
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-5">

        <div class="admin-card space-y-4">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Publish Settings</h2>

            <div>
                <label class="form-label">Status <span style="color:#dc2626;">*</span></label>
                <select name="status" class="form-field" required>
                    <option value="draft"     {{ old('status', $project?->status ?? 'draft') === 'draft'     ? 'selected':'' }}>Draft</option>
                    <option value="published" {{ old('status', $project?->status) === 'published' ? 'selected':'' }}>Published</option>
                </select>
            </div>

            <div class="flex items-center gap-3">
                <input type="hidden" name="featured" value="0">
                <input type="checkbox" id="featured" name="featured" value="1"
                       {{ old('featured', $project?->featured) ? 'checked' : '' }}
                       style="width:1rem;height:1rem;accent-color:#2d3aff;">
                <label for="featured" style="font-size:0.82rem;font-weight:600;color:#0f0f14;cursor:pointer;">Feature on homepage</label>
            </div>

            <div>
                <label class="form-label">Completed Date</label>
                <input type="date" name="completed_at"
                       value="{{ old('completed_at', $project?->completed_at?->format('Y-m-d')) }}"
                       class="form-field">
            </div>

            <div class="flex gap-3 pt-1">
                <button type="submit" class="btn btn-primary" style="flex:1;justify-content:center;">
                    {{ $project ? 'Update Project' : 'Create Project' }}
                </button>
                <a href="{{ route('admin.projects.index') }}" class="btn btn-outline">Cancel</a>
            </div>
        </div>

        <div class="admin-card space-y-4">
            <h2 style="font-family:'Fraunces',serif;font-size:0.95rem;font-weight:700;padding-bottom:0.75rem;border-bottom:1px solid #f3f4f6;">Project Meta</h2>

            <div>
                <label class="form-label">Category <span style="color:#dc2626;">*</span></label>
                <select name="category" class="form-field" required>
                    <option value="" disabled {{ !old('category', $project?->category) ? 'selected':'' }}>Select…</option>
                    @foreach(['web'=>'Web Development','fintech'=>'Fintech & Payments','ussd'=>'USSD & Telecoms','security'=>'Cybersecurity & QA','other'=>'Other'] as $val=>$label)
                    <option value="{{ $val }}" {{ old('category',$project?->category)===$val?'selected':'' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="form-label">Client</label>
                <input type="text" name="client" value="{{ old('client', $project?->client) }}"
                       placeholder="e.g. NaijaBank Ltd" class="form-field">
            </div>

            <div>
                <label class="form-label">Tech Stack</label>
                <input type="text" name="tech_stack"
                       value="{{ old('tech_stack', is_array($project?->tech_stack) ? implode(', ', $project->tech_stack) : $project?->tech_stack) }}"
                       placeholder="Laravel, Vue.js, MySQL, Redis"
                       class="form-field">
                <p class="form-hint">Comma-separated.</p>
            </div>

            <div>
                <label class="form-label">Live URL</label>
                <input type="url" name="url" value="{{ old('url', $project?->url) }}"
                       placeholder="https://…" class="form-field">
            </div>

            <div>
                <label class="form-label">Cover Image URL</label>
                <input type="text" name="cover_image" value="{{ old('cover_image', $project?->cover_image) }}"
                       placeholder="https://…" class="form-field">
                @if($project?->cover_image)
                <img src="{{ $project->cover_image }}" alt="Cover"
                     style="margin-top:0.75rem;width:100%;border-radius:8px;aspect-ratio:16/9;object-fit:cover;border:1px solid #e5e7eb;">
                @endif
            </div>
        </div>

    </div>
</div>