{% extends 'base/base.html' %}
{% load static crispy_forms_tags %}

{% block title %}{% if form.instance.pk %}Edit Equipment{% else %}Add New Equipment{% endif %} | {{ block.super }}{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">{% if form.instance.pk %}Edit Equipment{% else %}Add New Equipment{% endif %}</h4>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
                        {% csrf_token %}
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                {{ form.name|as_crispy_field }}
                            </div>
                            <div class="col-md-6">
                                {{ form.category|as_crispy_field }}
                            </div>
                            <div class="col-md-6">
                                {{ form.equipment_model|as_crispy_field }}
                                <div id="model-loading" class="d-none">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <span class="ms-2">Loading models...</span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{ form.variant|as_crispy_field }}
                                <div id="variant-loading" class="d-none">
                                    <div class="spinner-border spinner-border-sm" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <span class="ms-2">Loading variants...</span>
                                </div>
                            </div>
                            <div class="col-12">
                                {{ form.serial_number|as_crispy_field }}
                                <small class="form-text text-muted">Optional serial number for identification</small>
                            </div>
                            <div class="col-12">
                                {{ form.description|as_crispy_field }}
                            </div>
                            
                            <!-- Pricing Section -->
                            <div class="col-12">
                                <h5 class="mt-3 mb-3">Pricing (KSH)</h5>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{ form.daily_rate|as_crispy_field }}
                                    <small class="form-text text-muted">Required. Daily rental rate</small>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{ form.weekly_rate|as_crispy_field }}
                                    <small class="form-text text-muted">Optional. Weekly rate (discounted)</small>
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    {{ form.monthly_rate|as_crispy_field }}
                                    <small class="form-text text-muted">Optional. Monthly rate (discounted)</small>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.security_deposit|as_crispy_field }}
                                    <small class="form-text text-muted">Recommended. Security deposit amount</small>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.condition|as_crispy_field }}
                                    <small class="form-text text-muted">Select the current condition of your equipment</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.location|as_crispy_field }}
                                    <small class="form-text text-muted">Where is the equipment located? (City, Area)</small>
                                </div>
                            </div>
                            
                            <div class="col-12">
                                <h5 class="mt-4 mb-3">Contact Information</h5>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.contact_phone|as_crispy_field }}
                                    <small class="form-text text-muted">Phone number where you can be reached</small>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.contact_email|as_crispy_field }}
                                    <small class="form-text text-muted">Email for rental inquiries</small>
                                </div>
                            </div>
                            
                            <!-- Image Upload Section -->
                            <div class="col-12">
                                <h5 class="mt-4 mb-3">Equipment Images</h5>
                                <p class="text-muted mb-3">Upload clear photos of your equipment. First image will be used as the main display image.</p>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.main_image|as_crispy_field }}
                                    <small class="form-text text-muted">Main display image (JPEG, PNG, or WebP)</small>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.additional_images|as_crispy_field }}
                                    <small class="form-text text-muted">Additional images (optional, max 5MB per image)</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                            <a href="{% if is_update %}{% url 'equipment:detail' object.slug %}{% else %}{% url 'equipment:my_listings' %}{% endif %}" 
                               class="btn btn-outline-secondary me-md-2">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                {% if is_update %}Update{% else %}Submit for Approval{% endif %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            {% if is_update %}
            <div class="card mt-4 border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">Danger Zone</h5>
                </div>
                <div class="card-body">
                    <p>Deleting this equipment will remove it from the marketplace. This action cannot be undone.</p>
                    <form method="post" action="{% url 'equipment:delete' object.slug %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger" 
                                onclick="return confirm('Are you sure you want to delete this equipment? This action cannot be undone.');">
                            Delete Equipment
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script src="{% static 'equipment/js/equipment_form.js' %}"></script>
<script>
    // Initialize HTMX for dynamic loading
    document.addEventListener('DOMContentLoaded', function() {
        // Show loading indicator when model changes
        document.getElementById('id_equipment_model').addEventListener('change', function() {
            document.getElementById('variant-loading').classList.remove('d-none');
        });
        
        // Initialize model loading indicator
        const modelSelect = document.getElementById('id_equipment_model');
        if (modelSelect && !modelSelect.value) {
            document.getElementById('model-loading').classList.remove('d-none');
        }
    });
// Client-side form validation
(function () {
    'use strict'
    
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')
    
    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                
                form.classList.add('was-validated')
            }, false)
        })
})()
</script>
{% endblock %}