{% extends "base.html" %}

{% block title %}Admin Dashboard — T & S Contractors Ltd{% endblock %}
{% block description %}Manage portfolio projects.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <h1>Admin Dashboard</h1>
        <p>Signed in as <strong>{{ admin_email }}</strong>. <a href="/admin/logout" style="color: var(--accent);">Log out</a></p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;">
            <h2 style="margin: 0;">Add New Project</h2>
            <button type="button" class="btn btn-primary" onclick="document.getElementById('addProjectForm').classList.toggle('active'); this.innerText = this.innerText === 'Cancel' ? '+ Add New Project' : 'Cancel';" style="min-height: 44px;">
                {% if error is defined %}Cancel{% else %}+ Add New Project{% endif %}
            </button>
        </div>
        <div id="addProjectForm" class="card{% if error is defined %} active{% endif %}" style="padding: 0; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease; margin-bottom: 0;">
            <div style="padding: 1.5rem;">
                {% 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" 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" required>
                    </div>
                    <div class="form-group">
                        <label for="location">Location *</label>
                        <input type="text" id="location" name="location" required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="image">Main Project Image *</label>
                    <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png,.webp,.gif" required style="color: var(--text-muted);">
                    <small style="color: var(--text-muted);">JPG, PNG, WEBP or GIF.</small>
                </div>

                <div class="form-group" style="margin: 1.25rem 0;">
                    <label style="display: flex; align-items: center; gap: 0.6rem; color: var(--accent); font-weight: 600; cursor: pointer; font-size: 0.95rem; user-select: none;">
                        <input type="checkbox" id="moreFieldsToggle" style="width: 20px; height: 20px; accent-color: var(--accent);" onchange="document.getElementById('moreFields').classList.toggle('active');">
                        Add more details (description, budget, status, services, videos, additional images)
                    </label>
                </div>

                <div id="moreFields" class="{% if error is defined %}active{% endif %}">
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" name="description" rows="3"></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" 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">Ongoing</option>
                                <option value="completed">Completed</option>
                                <option value="commercial">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" 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" 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;">
                            <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="General Construction"> General Construction
                            </label>
                            <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="Architectural Design"> Architectural Design
                            </label>
                            <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="Structural Works"> Structural Works
                            </label>
                            <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="Project Management"> Project Management
                            </label>
                            <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="MEP Engineering"> MEP Engineering
                            </label>
                            <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="Landscaping"> Landscaping
                            </label>
                            <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="Renovations"> Renovations
                            </label>
                            <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="Material Supply"> Material Supply
                            </label>
                        </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"></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" style="width: auto;">
                            <strong>Feature this project on the home page</strong>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="additional_images">Additional Images (max 30)</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>
                <button type="submit" class="btn btn-primary">Add Project</button>
            </form>
            </div>
        </div>

        <h2 style="margin-bottom: 1.5rem;">Existing Projects ({{ projects|length }})</h2>
        {% if not projects %}
        <p style="color: var(--text-muted);">No projects yet. Add one above.</p>
        {% else %}

        <!-- Desktop table -->
        <div style="overflow-x: auto;" class="admin-table-desktop">
            <table style="width: 100%; border-collapse: collapse; font-size: 0.9rem;">
                <thead>
                    <tr style="border-bottom: 1px solid var(--border);">
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Image</th>
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Name</th>
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Location</th>
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Status</th>
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Budget</th>
                        <th style="text-align: left; padding: 0.75rem; color: var(--accent);">Featured</th>
                        <th style="text-align: right; padding: 0.75rem; color: var(--accent);">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in projects %}
                    <tr style="border-bottom: 1px solid var(--border);">
                        <td style="padding: 0.75rem;">
                            {% if p.image %}
                            <img src="{{ url_for('static', path=p.image) }}" alt="{{ p.name }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;">
                            {% else %}
                            <span style="color: var(--text-muted); font-size: 0.75rem;">No image</span>
                            {% endif %}
                        </td>
                        <td style="padding: 0.75rem; color: #fff; font-weight: 500;">{{ p.name }}</td>
                        <td style="padding: 0.75rem; color: var(--text-muted);">{{ p.location }}</td>
                        <td style="padding: 0.75rem;">
                            <span class="portfolio-status status-{{ p.status }}">{{ p.status|capitalize }}</span>
                        </td>
                        <td style="padding: 0.75rem; color: var(--text-muted);">{{ p.budget or '-' }}</td>
                        <td style="padding: 0.75rem; color: var(--text-muted);">{{ 'Yes' if p.is_featured else 'No' }}</td>
                        <td style="padding: 0.75rem; text-align: right;">
                            <a href="/admin/projects/{{ p.id }}/edit" class="btn btn-outline admin-action-btn" style="margin-right: 0.5rem;">Edit</a>
                            <a href="/portfolio/{{ p.id }}" target="_blank" class="btn btn-outline admin-action-btn" style="margin-right: 0.5rem;">View</a>
                            <form method="post" action="/admin/projects/{{ p.id }}/delete" onsubmit="return confirm('Delete this project?');" style="display: inline;">
                                <button type="submit" class="btn btn-outline admin-action-btn" style="color: #f87171; border-color: rgba(239,68,68,0.3);">Delete</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Mobile cards -->
        <div class="admin-cards-mobile">
            {% for p in projects %}
            <div class="admin-card">
                <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;">
                    {% if p.image %}
                    <img src="{{ url_for('static', path=p.image) }}" alt="" style="width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius); flex-shrink: 0;">
                    {% endif %}
                    <div>
                        <h4>{{ p.name }}</h4>
                        <div class="meta">{{ p.location }} &middot; <span class="portfolio-status status-{{ p.status }}">{{ p.status|capitalize }}</span></div>
                    </div>
                </div>
                <div class="meta">
                    Budget: {{ p.budget or '-' }} &middot; Featured: {{ 'Yes' if p.is_featured else 'No' }}
                </div>
                <div class="actions">
                    <a href="/admin/projects/{{ p.id }}/edit" class="btn btn-outline admin-action-btn">Edit</a>
                    <a href="/portfolio/{{ p.id }}" target="_blank" class="btn btn-outline admin-action-btn">View</a>
                    <form method="post" action="/admin/projects/{{ p.id }}/delete" onsubmit="return confirm('Delete this project?');" style="display: inline; flex: 1;">
                        <button type="submit" class="btn btn-outline admin-action-btn" style="width: 100%; color: #f87171; border-color: rgba(239,68,68,0.3);">Delete</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}