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

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
    .import-export-container select {
        width: 100%;
        padding: 8px 12px;
        border: 2px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
        transition: border-color 0.3s ease;
        background: white;
    }
    
    .import-export-container select:focus {
        outline: none;
        border-color: #28a745;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    }
    
    .import-export-container button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
    }
    
    .export-info-grid h3 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>
{% endblock %}

{% block extrahead %}{{ block.super }}
  <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {{ form.media }}
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
    &rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
    &rsaquo; {% trans 'Export' %}
</div>
{% endblock %}

{% block content %}
<div class="import-export-container" style="max-width: 1200px; margin: 0 auto;">
    <h1 style="color: #1976d2; border-bottom: 2px solid #e3f2fd; padding-bottom: 10px; margin-bottom: 20px;">
        📈 Export Parts Data
    </h1>

    <div class="export-overview" style="background: linear-gradient(135deg, #e8f5e8 0%, #f8f9fa 100%); padding: 20px; border-radius: 8px; margin-bottom: 20px;">
        <h3 style="margin-top: 0; color: #2e7d32;">📋 Export Options</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px;">
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #4CAF50;">
                <strong>💰 Pricing Data:</strong><br>
                <small>Export current prices, master price list status, and basic part information</small>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #2196F3;">
                <strong>📊 Complete Data:</strong><br>
                <small>Export all part information including descriptions, images, and vehicle compatibility</small>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; border-left: 4px solid #FF9800;">
                <strong>🔧 Custom Format:</strong><br>
                <small>Choose CSV, Excel, or JSON format for your specific needs</small>
            </div>
        </div>
    </div>

    <div class="export-form-section" style="background: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <form action="" method="post">
            {% csrf_token %}
            
            <div style="display: grid; gap: 20px;">
                {% for field in form %}
                    <div class="form-field">
                        <label for="{{ field.id_for_label }}" style="display: block; font-weight: bold; margin-bottom: 5px; color: #333;">
                            {{ field.label }}
                        </label>
                        
                        {% if field.name == 'file_format' %}
                            <div style="background: #f8f9fa; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                                <small style="color: #666;">
                                    <strong>CSV:</strong> Best for spreadsheet applications and import back<br>
                                    <strong>XLSX:</strong> Excel format with better formatting<br>
                                    <strong>JSON:</strong> For technical/API integration use
                                </small>
                            </div>
                        {% endif %}
                        
                        {% if field.name == 'resource' %}
                            <div style="background: #e3f2fd; padding: 10px; border-radius: 4px; margin-bottom: 10px;">
                                <small style="color: #1976d2;">
                                    <strong>PartPricingExportResource:</strong> Pricing data only (recommended for price updates)<br>
                                    <strong>PartBulkDataResource:</strong> Complete part information
                                </small>
                            </div>
                        {% endif %}
                        
                        <div style="position: relative;">
                            {{ field }}
                            {% if field.errors %}
                                <div style="color: #dc3545; font-size: 12px; margin-top: 5px;">
                                    {{ field.errors|join:", " }}
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>

            <div style="margin-top: 30px; text-align: center;">
                <button type="submit" class="default" style="background: #28a745; color: white; border: none; padding: 12px 30px; border-radius: 6px; cursor: pointer; font-size: 16px;">
                    📥 Export Data
                </button>
            </div>
        </form>
    </div>

    <div class="export-info-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin-top: 20px;">
        <div class="pricing-export-info" style="background: #e8f5e8; border: 1px solid #4CAF50; border-radius: 6px; padding: 20px;">
            <h3 style="margin-top: 0; color: #2e7d32;">💰 Pricing Export Format</h3>
            <div style="background: #f1f8e9; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 11px; overflow-x: auto;">
                Boodmo ID | Part Name | Part Number | Brand | Current MRP (₹) | In Master Price List | Pack Quantity | HSN Code | GST % | Last Price Update
            </div>
            <small style="color: #2e7d32; margin-top: 10px; display: block;">
                Perfect for price updates - modify prices and import back
            </small>
        </div>
        
        <div class="bulk-export-info" style="background: #e3f2fd; border: 1px solid #2196F3; border-radius: 6px; padding: 20px;">
            <h3 style="margin-top: 0; color: #1976d2;">📊 Complete Data Export</h3>
            <div style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 11px; overflow-x: auto;">
                Boodmo ID | Part Name | Part Number | Alternative Numbers | Brand | Part Class | Category | MRP | Master List | Pack Qty | HSN | GST | Custom Images | Description
            </div>
            <small style="color: #1976d2; margin-top: 10px; display: block;">
                Complete part catalog for analysis and reporting
            </small>
        </div>
    </div>

    <div class="tips-section" style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 6px; padding: 20px; margin-top: 20px;">
        <h3 style="margin-top: 0; color: #856404;">💡 Export Tips & Best Practices</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
            <div>
                <h4 style="color: #856404;">📋 For Price Updates</h4>
                <ul style="color: #6c5ce7; margin: 0;">
                    <li>Use PartPricingExportResource</li>
                    <li>Export as CSV format</li>
                    <li>Modify only the pricing columns</li>
                    <li>Keep Boodmo ID unchanged</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #856404;">📊 For Analysis</h4>
                <ul style="color: #6c5ce7; margin: 0;">
                    <li>Use PartBulkDataResource</li>
                    <li>XLSX format for better readability</li>
                    <li>Includes all part information</li>
                    <li>Great for reports and inventory</li>
                </ul>
            </div>
            <div>
                <h4 style="color: #856404;">🔧 Technical Use</h4>
                <ul style="color: #6c5ce7; margin: 0;">
                    <li>JSON format for APIs</li>
                    <li>Structured data format</li>
                    <li>Easy integration with systems</li>
                    <li>Includes nested relationships</li>
                </ul>
            </div>
        </div>
    </div>

    {% if current_filters %}
        <div class="filter-info" style="background: #d1ecf1; border: 1px solid #17a2b8; border-radius: 6px; padding: 15px; margin-top: 20px;">
            <h4 style="margin-top: 0; color: #0c5460;">🔍 Active Filters</h4>
            <p style="color: #0c5460; margin: 0;">Export will include only the filtered data from your current view.</p>
            <small style="color: #0c5460;">To export all data, clear filters first from the main Parts list.</small>
        </div>
    {% endif %}
</div>
{% endblock %}