{% extends "base.html" %}

{% block title %}Edit Project — {{ project.name }} — T & S Contractors Ltd Admin{% endblock %}
{% block description %}Edit project details.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <a href="/admin" style="color: var(--accent); font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 1rem;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            Back to Dashboard
        </a>
        <h1>Edit Project</h1>
        <p>{{ project.name }}</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="card" style="padding: 1.5rem; max-width: 900px;">
            {% if error is defined %}
            <div class="alert alert-danger" style="background: rgba(239,68,68,0.12); color: #f87171; padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem;">
                {{ error }}
            </div>
            {% endif %}
            <form method="post" action="/admin/projects/{{ project.id }}/edit" enctype="multipart/form-data">
                <div class="admin-form-grid">
                    <div class="form-group">
                        <label for="name">Project Name</label>
                        <input type="text" id="name" name="name" value="{{ project.name }}" required>
                    </div>
                    <div class="form-group">
                        <label for="location">Location</label>
                        <input type="text" id="location" name="location" value="{{ project.location }}" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="description">Description</label>
                    <textarea id="description" name="description" rows="3">{{ project.description }}</textarea>
                </div>
                <div class="admin-form-grid">
                    <div class="form-group">
                        <label for="map_url">Google Maps URL</label>
                        <input type="url" id="map_url" name="map_url" value="{{ project.map_url }}" placeholder="https://maps.app.goo.gl/...">
                    </div>
                    <div class="form-group">
                        <label for="status">Status</label>
                        <select id="status" name="status" style="width: 100%; padding: 0.65rem 0.9rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-alt); color: #fff; font-size: 0.9rem;">
                            <option value="ongoing" {% if project.status == 'ongoing' %}selected{% endif %}>Ongoing</option>
                            <option value="completed" {% if project.status == 'completed' %}selected{% endif %}>Completed</option>
                            <option value="commercial" {% if project.status == 'commercial' %}selected{% endif %}>Commercial</option>
                        </select>
                    </div>
                </div>
                <div class="admin-form-grid">
                    <div class="form-group">
                        <label for="budget">Budget / Project Value</label>
                        <input type="text" id="budget" name="budget" value="{{ project.budget or '' }}" placeholder="e.g. KES 12M">
                    </div>
                    <div class="form-group">
                        <label for="area_size">Area Size</label>
                        <input type="text" id="area_size" name="area_size" value="{{ project.area_size or '' }}" placeholder="e.g. 3,500 sq m">
                    </div>
                </div>
                <div class="form-group">
                    <label>Services Provided</label>
                    <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem;">
                        {% set service_list = ['General Construction','Architectural Design','Structural Works','Project Management','MEP Engineering','Landscaping','Renovations','Material Supply'] %}
                        {% for s in service_list %}
                        <label class="admin-service-checkbox" style="display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); font-size: 0.9rem; cursor: pointer;">
                            <input type="checkbox" name="services" value="{{ s }}" {% if s in (project.services or []) %}checked{% endif %}> {{ s }}
                        </label>
                        {% endfor %}
                    </div>
                </div>
                <div class="form-group">
                    <label for="video_urls">YouTube Video URLs</label>
                    <textarea id="video_urls" name="video_urls" rows="2" placeholder="One URL per line">{% for v in project.video_urls or [] %}{{ v }}{% if not loop.last %}
{% endif %}{% endfor %}</textarea>
                    <small style="color: var(--text-muted);">One YouTube URL per line.</small>
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 0.5rem; color: #fff; cursor: pointer;">
                        <input type="checkbox" name="is_featured" value="on" {% if project.is_featured %}checked{% endif %} style="width: auto;">
                        <strong>Feature this project on the home page</strong>
                    </label>
                </div>

                <div class="form-group">
                    <label>Main Project Image</label>
                    {% if project.image %}
                    <div style="margin-bottom: 0.75rem;">
                        <img src="{{ url_for('static', path=project.image) }}" alt="Current image" style="max-width: 200px; max-height: 120px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border);">
                    </div>
                    {% endif %}
                    <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png,.webp,.gif" style="color: var(--text-muted);">
                    <small style="color: var(--text-muted);">Upload a new image to replace the current one. Leave blank to keep it.</small>
                </div>

                {% if project.additional_images and project.additional_images|length > 0 %}
                <div class="form-group">
                    <label>Existing Additional Images</label>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; margin-bottom: 0.75rem;">
                        {% for img in project.additional_images %}
                        <label style="position: relative; cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); width: 100px; height: 75px;">
                            <img src="{{ url_for('static', path=img) }}" alt="" style="width: 100%; height: 100%; object-fit: cover;">
                            <input type="checkbox" name="delete_images" value="{{ img }}" style="position: absolute; top: 4px; right: 4px; width: auto; accent-color: #ef4444;">
                            <span style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(239,68,68,0.85); color: #fff; font-size: 0.65rem; text-align: center; padding: 2px 0; display: none;" class="delete-label">Delete</span>
                        </label>
                        {% endfor %}
                    </div>
                    <small style="color: var(--text-muted);">Check the boxes on images you want to remove.</small>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="additional_images">Add More Images (max {{ 30 - (project.additional_images|length) }} remaining)</label>
                    <input type="file" id="additional_images" name="additional_images" accept=".jpg,.jpeg,.png,.webp,.gif" multiple style="color: var(--text-muted);">
                    <small style="color: var(--text-muted);">Hold Ctrl / Cmd to select multiple images.</small>
                </div>
                <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                    <button type="submit" class="btn btn-primary" style="flex: 1; min-width: 120px;">Save Changes</button>
                    <a href="/admin" class="btn btn-outline" style="flex: 1; min-width: 120px; text-align: center;">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}