{% extends "base.html" %}

{% block title %}Manage Services | Admin{% endblock %}

{% block content %}
<section class="admin-section">
    <div class="container">
        <div class="section-header">
            <h1>Manage Services</h1>
            <button class="btn btn-primary" onclick="document.getElementById('addModal').style.display='block'">
                + Add Service
            </button>
        </div>
        
        {% for category, services in services_by_category.items() %}
        <div class="category-section">
            <h2>{{ category|replace('_', ' ')|title }}</h2>
            
            {% for service in services %}
            <div class="service-admin-card">
                <div class="service-admin-info">
                    <h3>{{ service.name }}</h3>
                    <p class="service-admin-price">KES {{ service.price }}</p>
                    {% if service.additional_price > 0 %}
                        <p class="service-extra">+ KES {{ service.additional_price }} per addition</p>
                    {% endif %}
                    {% if service.description %}
                        <p class="service-desc">{{ service.description }}</p>
                    {% endif %}
                    <p class="service-status">
                        {% if service.is_active %}
                            <span class="badge active">Active</span>
                        {% else %}
                            <span class="badge inactive">Inactive</span>
                        {% endif %}
                    </p>
                </div>
                
                <div class="service-admin-actions">
                    <form method="POST" action="{{ url_for('admin.toggle_service', service_id=service.id) }}">
                        <button type="submit" class="btn btn-sm btn-secondary">
                            {% if service.is_active %}Deactivate{% else %}Activate{% endif %}
                        </button>
                    </form>
                    
                    <button class="btn btn-sm btn-primary" onclick="document.getElementById('imageModal{{ service.id }}').style.display='block'">
                        Upload Images
                    </button>
                </div>
            </div>
            
            <!-- Image Upload Modal -->
            <div id="imageModal{{ service.id }}" class="modal">
                <div class="modal-content">
                    <span class="close" onclick="document.getElementById('imageModal{{ service.id }}').style.display='none'">&times;</span>
                    <h2>Upload Images for {{ service.name }}</h2>
                    <form method="POST" action="{{ url_for('admin.upload_service_images', service_id=service.id) }}" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>Select Images (up to 5)</label>
                            <input type="file" name="images" accept="image/*" multiple required>
                            <small>JPG, PNG, GIF, or WebP - Max 5MB each</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Upload Images</button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
</section>

<!-- Add Service Modal -->
<div id="addModal" class="modal">
    <div class="modal-content">
        <span class="close" onclick="document.getElementById('addModal').style.display='none'">&times;</span>
        <h2>Add New Service</h2>
        <form method="POST" action="{{ url_for('admin.add_service') }}">
            <div class="form-group">
                <label>Service Name *</label>
                <input type="text" name="name" required>
            </div>
            <div class="form-group">
                <label>Category *</label>
                <select name="category" required>
                    <option value="manicure">Manicure</option>
                    <option value="pedicure">Pedicure</option>
                    <option value="tips">Tips</option>
                    <option value="builder_natural">Builder (Natural)</option>
                    <option value="builder_extension">Builder (Extension)</option>
                    <option value="gumgel_natural">Gumgel (Natural)</option>
                    <option value="gumgel_extension">Gumgel (Extension)</option>
                    <option value="acrylics">Acrylics</option>
                    <option value="cateye">Cat Eye</option>
                </select>
            </div>
            <div class="form-group">
                <label>Price (KES) *</label>
                <input type="number" name="price" required min="0">
            </div>
            <div class="form-group">
                <label>Additional Price</label>
                <input type="number" name="additional_price" min="0" value="0">
            </div>
            <div class="form-group">
                <label>Description</label>
                <textarea name="description" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Add Service</button>
        </form>
    </div>
</div>

<style>
.admin-section {
    padding: 3rem 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.category-section {
    margin-bottom: 3rem;
}

.category-section h2 {
    margin-bottom: 1.5rem;
}

.service-admin-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}

.service-admin-info h3 {
    margin-bottom: 0.5rem;
}

.service-admin-price {
    font-size: 1.5rem;
    color: var(--primary-pink);
    font-weight: 700;
}

.service-extra,
.service-desc {
    color: var(--light-text);
    margin: 0.5rem 0;
}

.service-status {
    margin-top: 1rem;
}

.service-admin-actions {
    display: flex;
    gap: 0.5rem;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.badge.active {
    background: #4CAF50;
    color: white;
}

.badge.inactive {
    background: #9E9E9E;
    color: white;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
}

.modal-content {
    background: white;
    margin: 5% auto;
    padding: 2rem;
    border-radius: var(--radius-lg);
    max-width: 500px;
}

.close {
    float: right;
    font-size: 2rem;
    cursor: pointer;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
}

.form-group small {
    display: block;
    margin-top: 0.5rem;
    color: var(--light-text);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .service-admin-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .service-admin-actions {
        width: 100%;
        margin-top: 1rem;
    }
}
</style>
{% endblock %}