{% extends "base.html" %}

{% block title %}Edit Product - Price Tracker{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h2 class="mb-0">
                    <i class="fas fa-edit me-2 text-primary"></i>Edit Product: {{ product.name }}
                </h2>
            </div>
            <div class="card-body">
                <form method="POST">
                    {{ form.hidden_tag() }}
                    
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            {{ form.name.label(class="form-label fw-bold") }}
                            {{ form.name(class="form-control form-control-lg") }}
                            {% if form.name.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.name.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        <div class="col-md-4 mb-3">
                            {{ form.target_price.label(class="form-label fw-bold") }}
                            <div class="input-group">
                                <span class="input-group-text">£</span>
                                {{ form.target_price(class="form-control form-control-lg") }}
                            </div>
                            {% if form.target_price.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.target_price.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                            <small class="text-muted">Optional: Alert when price drops below this</small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        {{ form.description.label(class="form-label fw-bold") }}
                        {{ form.description(class="form-control", rows="3") }}
                        {% if form.description.errors %}
                            <div class="text-danger small mt-1">
                                {% for error in form.description.errors %}
                                    <div>{{ error }}</div>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    
                    <hr class="my-4">
                    <h5 class="mb-3">
                        <i class="fas fa-link me-2 text-secondary"></i>Store URLs
                    </h5>
                    <p class="text-muted small mb-3">Add URLs from the stores you want to track. At least one URL is required.</p>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            {{ form.jjfoodservice_url.label(class="form-label fw-bold") }}
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-store text-primary"></i>
                                </span>
                                {{ form.jjfoodservice_url(class="form-control", placeholder="https://www.jjfoodservice.com/...") }}
                            </div>
                            {% if form.jjfoodservice_url.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.jjfoodservice_url.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            {{ form.atoz_catering_url.label(class="form-label fw-bold") }}
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-store text-success"></i>
                                </span>
                                {{ form.atoz_catering_url(class="form-control", placeholder="https://www.atoz-catering.co.uk/...") }}
                            </div>
                            {% if form.atoz_catering_url.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.atoz_catering_url.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            {{ form.amazon_uk_url.label(class="form-label fw-bold") }}
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fab fa-amazon text-warning"></i>
                                </span>
                                {{ form.amazon_uk_url(class="form-control", placeholder="https://www.amazon.co.uk/...") }}
                            </div>
                            {% if form.amazon_uk_url.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.amazon_uk_url.errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="d-flex justify-content-between">
                        <div>
                            <button type="submit" class="btn btn-primary btn-lg me-3">
                                <i class="fas fa-save me-2"></i>Update Product
                            </button>
                            <a href="{{ url_for('product_detail', product_id=product.id) }}" class="btn btn-outline-secondary btn-lg">
                                <i class="fas fa-arrow-left me-2"></i>Cancel
                            </a>
                        </div>
                        
                        <!-- Delete button -->
                        <div>
                            <button type="button" class="btn btn-outline-danger btn-lg" data-bs-toggle="modal" data-bs-target="#deleteModal">
                                <i class="fas fa-trash me-2"></i>Delete Product
                            </button>
                        </div>
                    </div>
                </form>
                
                <!-- Help section -->
                <div class="mt-5">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">
                                <i class="fas fa-info-circle me-2 text-info"></i>How to find product URLs
                            </h6>
                            <ul class="card-text small mb-0">
                                <li><strong>JJ Food Service:</strong> Search for your product and copy the URL from the product page</li>
                                <li><strong>A to Z Catering:</strong> Navigate to the specific product and copy the URL</li>
                                <li><strong>Amazon UK:</strong> Find the product and copy the URL (we'll extract the essential part)</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2 text-warning"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete <strong>"{{ product.name }}"</strong>?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-warning me-2"></i>
                    <strong>Warning:</strong> This action cannot be undone. All price history for this product will be permanently deleted.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ url_for('delete_product', product_id=product.id) }}" style="display: inline;">
                    <button type="submit" class="btn btn-danger">
                        <i class="fas fa-trash me-2"></i>Delete Product
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}