{% extends "admin/base.html" %}

{% block title %}{{ 'Edit Product' if product else 'Add Product' }}{% endblock %}

{% block extra_css %}
<style>
    .form-container {
        max-width: 800px;
        margin: 30px auto;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 2px solid #e0e0e0;
        border-radius: 5px;
        font-size: 14px;
        transition: border-color 0.3s;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #667eea;
    }

    .form-group textarea {
        min-height: 100px;
        resize: vertical;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .checkbox-group input[type="checkbox"] {
        width: auto;
    }

    .image-preview {
        margin-top: 10px;
        max-width: 200px;
    }

    .image-preview img {
        width: 100%;
        border-radius: 5px;
        border: 2px solid #e0e0e0;
    }

    .form-actions {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .alert {
        padding: 12px 20px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .alert-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .alert-error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <div class="card">
        <div class="card-header">
            <i class="fas fa-{{ 'edit' if product else 'plus' }}"></i>
            {{ 'Edit Product' if product else 'Add New Product' }}
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="alert alert-{{ category }}">
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        <form method="POST" enctype="multipart/form-data">
            <div class="form-group">
                <label for="name">Product Name *</label>
                <input type="text" id="name" name="name" required value="{{ product.name if product else '' }}">
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="category_id">Category *</label>
                    <select id="category_id" required onchange="loadSubcategories()">
                        <option value="">Select Category</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="subcategory_id">Subcategory *</label>
                    <select id="subcategory_id" name="subcategory_id" required>
                        <option value="">Select Subcategory</option>
                        {% for subcategory in subcategories %}
                        <option value="{{ subcategory.id }}" {% if product and product.subcategory_id==subcategory.id
                            %}selected{% endif %}>
                            {{ subcategory.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="description">Description</label>
                <textarea id="description" name="description">{{ product.description if product else '' }}</textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="price_current">Current Price (₹) *</label>
                    <input type="number" id="price_current" name="price_current" step="0.01" required
                        value="{{ product.price_current if product else '' }}">
                </div>

                <div class="form-group">
                    <label for="price_original">Original Price (₹)</label>
                    <input type="number" id="price_original" name="price_original" step="0.01"
                        value="{{ product.price_original if product else '' }}">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="badge">Badge</label>
                    <select id="badge" name="badge">
                        <option value="">No Badge</option>
                        <option value="Premium" {% if product and product.badge=='Premium' %}selected{% endif %}>Premium
                        </option>
                        <option value="New" {% if product and product.badge=='New' %}selected{% endif %}>New</option>
                        <option value="Bestseller" {% if product and product.badge=='Bestseller' %}selected{% endif %}>
                            Bestseller</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="rating_stars">Rating (Stars)</label>
                    <select id="rating_stars" name="rating_stars">
                        {% for i in range(1, 6) %}
                        <option value="{{ i }}" {% if product and product.rating_stars==i %}selected{% elif not product
                            and i==5 %}selected{% endif %}>
                            {{ i }} Star{{ 's' if i > 1 else '' }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="rating_count">Number of Reviews</label>
                    <input type="number" id="rating_count" name="rating_count" min="0"
                        value="{{ product.rating_count if product else 0 }}">
                </div>

                <div class="form-group">
                    <label for="product_image">Product Image</label>
                    <input type="file" id="product_image" name="product_image" accept="image/*">
                    {% if primary_image %}
                    <div class="image-preview">
                        <img src="/{{ primary_image.image_path }}" alt="Current image">
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="form-group">
                <div class="checkbox-group">
                    <input type="checkbox" id="is_active" name="is_active" {% if not product or product.is_active
                        %}checked{% endif %}>
                    <label for="is_active" style="margin: 0;">Active (Show on website)</label>
                </div>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> {{ 'Update Product' if product else 'Add Product' }}
                </button>
                <a href="{{ url_for('products') }}" class="btn btn-danger">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<script>
    function loadSubcategories() {
        const categoryId = document.getElementById('category_id').value;
        const subcategorySelect = document.getElementById('subcategory_id');

        if (!categoryId) {
            subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
            return;
        }

        fetch(`/api/subcategories/${categoryId}`)
            .then(response => response.json())
            .then(data => {
                subcategorySelect.innerHTML = '<option value="">Select Subcategory</option>';
                data.forEach(sub => {
                    const option = document.createElement('option');
                    option.value = sub.id;
                    option.textContent = sub.name;
                    subcategorySelect.appendChild(option);
                });
            });
    }
</script>
{% endblock %}