{% extends "admin/change_form.html" %}
{% load i18n admin_urls %}

{% block extrastyle %}{{ block.super }}
<style>
    /* Enhanced Admin Form Styling */
    .form-row {
        background: white;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        transition: box-shadow 0.3s ease;
    }
    
    .form-row:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    .form-row .field-box {
        background: transparent;
        border: none;
        padding: 0;
    }
    
    /* Enhanced Fieldsets */
    fieldset.module {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
        margin-bottom: 20px;
        overflow: hidden;
    }
    
    fieldset.module h2 {
        background: linear-gradient(135deg, #495057 0%, #343a40 100%);
        color: white;
        padding: 15px 20px;
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    fieldset.module h2:before {
        content: "📝";
        font-size: 14px;
    }
    
    /* Special styling for different fieldset types */
    fieldset.module h2:contains("Basic Information"):before { content: "ℹ️"; }
    fieldset.module h2:contains("Pricing"):before { content: "💰"; }
    fieldset.module h2:contains("Image"):before { content: "🖼️"; }
    fieldset.module h2:contains("Vehicle"):before { content: "🚗"; }
    fieldset.module h2:contains("System"):before { content: "⚙️"; }
    fieldset.module h2:contains("CSV"):before { content: "📊"; }
    fieldset.module h2:contains("Description"):before { content: "📄"; }
    
    .module .form-row {
        border: none;
        box-shadow: none;
        background: transparent;
        padding: 10px 20px;
        margin-bottom: 0;
        border-bottom: 1px solid #f8f9fa;
    }
    
    .module .form-row:last-child {
        border-bottom: none;
    }
    
    /* Enhanced form inputs */
    input[type="text"], input[type="number"], input[type="email"], 
    input[type="url"], textarea, select {
        border: 2px solid #e9ecef;
        border-radius: 4px;
        padding: 8px 12px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        font-size: 14px;
    }
    
    input[type="text"]:focus, input[type="number"]:focus, 
    input[type="email"]:focus, input[type="url"]:focus, 
    textarea:focus, select:focus {
        border-color: #1976d2;
        box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
        outline: none;
    }
    
    /* Enhanced help text */
    .help {
        background: #e3f2fd;
        border: 1px solid #90caf9;
        border-radius: 4px;
        padding: 8px 12px;
        margin-top: 5px;
        font-size: 12px;
        color: #1565c0;
        display: block;
    }
    
    .help:before {
        content: "💡 ";
        font-size: 11px;
    }
    
    /* Enhanced submit buttons */
    .submit-row {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
        border: 1px solid #dee2e6;
    }
    
    .submit-row input[type="submit"], .submit-row .button {
        background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
    }
    
    .submit-row input[type="submit"]:hover, .submit-row .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
    }
    
    .submit-row .deletelink {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        padding: 12px 24px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    }
    
    .submit-row .deletelink:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
        color: white;
    }
    
    /* Enhanced error styling */
    .errorlist {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
        padding: 8px 12px;
        margin: 5px 0;
        color: #721c24;
    }
    
    .errorlist li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .errorlist li:before {
        content: "⚠️ ";
        font-size: 12px;
    }
    
    /* Enhanced breadcrumbs */
    .breadcrumbs {
        background: linear-gradient(135deg, #495057 0%, #343a40 100%);
        color: white;
        padding: 12px 20px;
        border-radius: 6px;
        margin-bottom: 20px;
        font-size: 14px;
    }
    
    .breadcrumbs a {
        color: #90caf9;
        text-decoration: none;
    }
    
    .breadcrumbs a:hover {
        color: white;
        text-decoration: underline;
    }
    
    /* Enhanced object tools */
    .object-tools {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid #dee2e6;
    }
    
    .object-tools li {
        margin-right: 10px;
    }
    
    .object-tools a {
        background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    }
    
    .object-tools a:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
        color: white;
    }
    
    /* Enhanced content area */
    .content {
        background: #f8f9fa;
        border-radius: 12px;
        padding: 20px;
        margin: 20px 0;
    }
    
    #content-main {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid #e9ecef;
    }
</style>
{% endblock %}

{% block content_title %}
{% if opts %}
    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 20px;">
        <h1 style="margin: 0; color: #495057;">
            {% if add %}
                ➕ Add {{ opts.verbose_name }}
            {% else %}
                ✏️ Change {{ opts.verbose_name }}
            {% endif %}
        </h1>
        {% if not add and object %}
            <span style="background: #e3f2fd; color: #1565c0; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;">
                ID: {{ object.pk }}
            </span>
        {% endif %}
    </div>
{% endif %}
{% endblock %}

{% block field_sets %}
{% if adminform.form.non_field_errors %}
    <div class="alert alert-error" style="background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 6px; padding: 15px; margin-bottom: 20px; color: #721c24;">
        <strong>⚠️ Please correct the following errors:</strong>
        {{ adminform.form.non_field_errors }}
    </div>
{% endif %}

{{ block.super }}
{% endblock %}

{% block extrahead %}{{ block.super }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add icons to fieldset headers based on content
    const fieldsets = document.querySelectorAll('fieldset.module h2');
    fieldsets.forEach(function(header) {
        const text = header.textContent.toLowerCase();
        if (text.includes('basic') || text.includes('information')) {
            header.style.setProperty('--icon', '"ℹ️"');
        } else if (text.includes('pricing') || text.includes('price')) {
            header.style.setProperty('--icon', '"💰"');
        } else if (text.includes('image') || text.includes('photo')) {
            header.style.setProperty('--icon', '"🖼️"');
        } else if (text.includes('vehicle') || text.includes('compatibility')) {
            header.style.setProperty('--icon', '"🚗"');
        } else if (text.includes('system') || text.includes('technical')) {
            header.style.setProperty('--icon', '"⚙️"');
        } else if (text.includes('csv') || text.includes('import') || text.includes('export')) {
            header.style.setProperty('--icon', '"📊"');
        } else if (text.includes('description') || text.includes('content')) {
            header.style.setProperty('--icon', '"📄"');
        }
    });
    
    // Add helpful tooltips to form fields
    const formFields = document.querySelectorAll('input, textarea, select');
    formFields.forEach(function(field) {
        const label = field.closest('.form-row')?.querySelector('label');
        if (label && !field.title) {
            field.title = `Enter ${label.textContent.replace(':', '').toLowerCase()}`;
        }
    });
    
    // Enhance form validation
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function(e) {
            const requiredFields = form.querySelectorAll('[required]');
            let hasErrors = false;
            
            requiredFields.forEach(function(field) {
                if (!field.value.trim()) {
                    field.style.borderColor = '#dc3545';
                    field.style.boxShadow = '0 0 0 3px rgba(220, 53, 69, 0.1)';
                    hasErrors = true;
                } else {
                    field.style.borderColor = '#28a745';
                    field.style.boxShadow = '0 0 0 3px rgba(40, 167, 69, 0.1)';
                }
            });
            
            if (hasErrors) {
                const firstError = form.querySelector('[style*="border-color: rgb(220, 53, 69)"]');
                if (firstError) {
                    firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstError.focus();
                }
            }
        });
    }
});
</script>
{% endblock %}