{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="container-fluid p-4">
    <div class="card shadow-sm border-0" style="border-radius: 12px;">
        <div class="card-header bg-white border-0">
            <h4 class="fw-bold" style="color: #0e2e63;">
                {% if project %}Edit{% else %}Add New{% endif %} Project
            </h4>
        </div>
        <div class="card-body">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="row">
                    <div class="col-md-8 mb-3">
                        <label class="form-label fw-semibold">Project Title *</label>
                        <input type="text" name="title" class="form-control" value="{{ project.title|default:'' }}" required>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">Slug</label>
                        <input type="text" name="slug" class="form-control" value="{{ project.slug|default:'' }}" placeholder="Auto-generate">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Client Name *</label>
                        <input type="text" name="client_name" class="form-control" value="{{ project.client_name|default:'' }}" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Project Date *</label>
                        <input type="date" name="project_date" class="form-control" value="{{ project.project_date|date:'Y-m-d'|default:'' }}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Category</label>
                        <select name="category" class="form-select">
                            <option value="">Select Category</option>
                            {% for category in categories %}
                            <option value="{{ category.id }}" {% if project.category.id == category.id %}selected{% endif %}>
                                {{ category.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Status</label>
                        <select name="status" class="form-select">
                            <option value="draft" {% if project.status == 'draft' %}selected{% endif %}>Draft</option>
                            <option value="published" {% if project.status == 'published' %}selected{% endif %}>Published</option>
                            <option value="archived" {% if project.status == 'archived' %}selected{% endif %}>Archived</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Live Project URL</label>
                        <input type="url" name="project_url" class="form-control" value="{{ project.project_url|default:'' }}" placeholder="https://...">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">GitHub URL</label>
                        <input type="url" name="github_url" class="form-control" value="{{ project.github_url|default:'' }}" placeholder="https://github.com/...">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Description *</label>
                    <textarea name="description" class="form-control" rows="5" required>{{ project.description|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Challenge</label>
                    <textarea name="challenge" class="form-control" rows="4">{{ project.challenge|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Solution</label>
                    <textarea name="solution" class="form-control" rows="4">{{ project.solution|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Results</label>
                    <textarea name="results" class="form-control" rows="4">{{ project.results|default:'' }}</textarea>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Technologies Used</label>
                    <input type="text" name="technologies" class="form-control" value="{{ project.technologies|default:'' }}" placeholder="Python, Django, React, PostgreSQL">
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Cover Image</label>
                        <input type="file" name="cover_image" class="form-control" accept="image/*">
                        {% if project.cover_image %}
                        <small class="text-muted">Current: {{ project.cover_image.name }}</small>
                        {% endif %}
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-semibold">Order</label>
                        <input type="number" name="order" class="form-control" value="{{ project.order|default:0 }}">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">Image 1</label>
                        <input type="file" name="image1" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">Image 2</label>
                        <input type="file" name="image2" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-semibold">Image 3</label>
                        <input type="file" name="image3" class="form-control" accept="image/*">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4 mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="featured" class="form-check-input" {% if project.featured %}checked{% endif %}>
                            <label class="form-check-label">Featured Project</label>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="display_on_website" class="form-check-input" {% if project.display_on_website or not project %}checked{% endif %}>
                            <label class="form-check-label">Display on Website</label>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Meta Title (SEO)</label>
                    <input type="text" name="meta_title" class="form-control" value="{{ project.meta_title|default:'' }}">
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Meta Description (SEO)</label>
                    <textarea name="meta_description" class="form-control" rows="3">{{ project.meta_description|default:'' }}</textarea>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn" style="background: #0e2e63; color: #fff; padding: 10px 40px; border-radius: 8px;">
                        <i class="fas fa-save me-2"></i> {% if project %}Update{% else %}Create{% endif %} Project
                    </button>
                    <a href="{% url 'projects_admin' %}" class="btn btn-light">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}