{% extends "advertisers/base.html" %}
{% load static %}
{% load widget_tweaks %}

{% block title %}{% if form.instance.pk %}Edit Brand{% else %}Create Brand{% endif %} - Adtlas{% endblock %}

{% block extra_css %}
<link href="{% static 'assets/plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<link href="{% static 'assets/plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">{% if form.instance.pk %}Edit Brand{% else %}Create Brand{% endif %}</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'advertisers:list' %}">Advertisers</a></li>
            {% if form.instance.pk %}
            <li class="breadcrumb-item"><a href="{% url 'advertisers:brand_detail' form.instance.pk %}">{{ form.instance.name }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit</li>
            {% else %}
            <li class="breadcrumb-item active" aria-current="page">Create Brand</li>
            {% endif %}
        </ol>
    </div>
    <div class="ms-auto pageheader-btn">
        <a href="{% url 'advertisers:list' %}" class="btn btn-outline-secondary">
            <i class="fe fe-arrow-left"></i> Back to List
        </a>
    </div>
</div>

<form method="post" enctype="multipart/form-data" id="brand-form">
    {% csrf_token %}
    
    <div class="row">
        <div class="col-xl-8">
            <!-- Basic Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Basic Information</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.name.id_for_label }}">Brand Name <span class="text-danger">*</span></label>
                                {{ form.name|add_class:"form-control" }}
                                {% if form.name.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.name.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Enter the brand name (must be unique within the agency)</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.agency.id_for_label }}">Agency <span class="text-danger">*</span></label>
                                {{ form.agency|add_class:"form-control select2" }}
                                {% if form.agency.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.agency.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Select the agency this brand belongs to</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.category.id_for_label }}">Category</label>
                                {{ form.category|add_class:"form-control select2" }}
                                {% if form.category.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.category.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Select the brand category</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.industry.id_for_label }}">Industry</label>
                                {{ form.industry|add_class:"form-control" }}
                                {% if form.industry.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.industry.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Enter the industry sector</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.description.id_for_label }}">Description</label>
                        {{ form.description|add_class:"form-control" }}
                        {% if form.description.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.description.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Provide a detailed description of the brand</small>
                    </div>
                </div>
            </div>
            
            <!-- Contact Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Contact Information</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.contact_email.id_for_label }}">Contact Email</label>
                                {{ form.contact_email|add_class:"form-control" }}
                                {% if form.contact_email.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.contact_email.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Primary contact email for this brand</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.contact_phone.id_for_label }}">Contact Phone</label>
                                {{ form.contact_phone|add_class:"form-control" }}
                                {% if form.contact_phone.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.contact_phone.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Primary contact phone number</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.website.id_for_label }}">Website</label>
                        {{ form.website|add_class:"form-control" }}
                        {% if form.website.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.website.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Brand's official website URL</small>
                    </div>
                </div>
            </div>
            
            <!-- Marketing Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Marketing Information</h3>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.target_audience.id_for_label }}">Target Audience</label>
                        {{ form.target_audience|add_class:"form-control" }}
                        {% if form.target_audience.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.target_audience.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Describe the target audience for this brand</small>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.annual_budget.id_for_label }}">Annual Budget</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            {{ form.annual_budget|add_class:"form-control" }}
                        </div>
                        {% if form.annual_budget.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.annual_budget.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Annual advertising budget for this brand</small>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-4">
            <!-- Brand Logo -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Brand Logo</h3>
                </div>
                <div class="card-body text-center">
                    <div class="mb-3">
                        {% if form.instance.logo %}
                        <img src="{{ form.instance.logo.url }}" alt="Current Logo" class="avatar avatar-xxl mb-3" id="logo-preview">
                        {% else %}
                        <div class="avatar avatar-xxl mb-3 bg-primary-transparent" id="logo-preview">
                            <i class="fe fe-image fs-30"></i>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="{{ form.logo.id_for_label }}">Upload Logo</label>
                        {{ form.logo|add_class:"form-control" }}
                        {% if form.logo.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.logo.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Recommended size: 200x200px, Max: 2MB</small>
                    </div>
                    
                    {% if form.instance.logo %}
                    <div class="mt-3">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input" name="remove_logo" id="remove-logo">
                            <span class="form-check-label">Remove current logo</span>
                        </label>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Status -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Status</h3>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.status.id_for_label }}">Brand Status</label>
                        {{ form.status|add_class:"form-control select2" }}
                        {% if form.status.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.status.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Current status of the brand</small>
                    </div>
                    
                    {% if form.instance.pk %}
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Brand Information</h6>
                        <p class="mb-1"><strong>Created:</strong> {{ form.instance.created_at|date:"F d, Y" }}</p>
                        <p class="mb-1"><strong>Last Updated:</strong> {{ form.instance.updated_at|date:"F d, Y" }}</p>
                        <p class="mb-0"><strong>Total Campaigns:</strong> {{ form.instance.total_campaigns }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Form Actions -->
            <div class="card">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fe fe-save"></i> 
                            {% if form.instance.pk %}Update Brand{% else %}Create Brand{% endif %}
                        </button>
                        
                        {% if form.instance.pk %}
                        <a href="{% url 'advertisers:brand_detail' form.instance.pk %}" class="btn btn-outline-secondary">
                            <i class="fe fe-eye"></i> View Brand
                        </a>
                        {% endif %}
                        
                        <a href="{% url 'advertisers:list' %}" class="btn btn-outline-secondary">
                            <i class="fe fe-x"></i> Cancel
                        </a>
                        
                        {% if form.instance.pk and perms.advertisers.delete_brand %}
                        <button type="button" class="btn btn-outline-danger" id="delete-brand">
                            <i class="fe fe-trash-2"></i> Delete Brand
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

{% if form.instance.pk and perms.advertisers.delete_brand %}
<!-- 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">Delete Brand</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 the brand <strong>{{ form.instance.name }}</strong>?</p>
                <div class="alert alert-warning">
                    <h6 class="alert-heading">Warning!</h6>
                    <p class="mb-0">This action cannot be undone. All associated campaigns and data will also be affected.</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form method="post" action="{% url 'advertisers:brand_delete' form.instance.pk %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Brand</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'assets/plugins/select2/js/select2.full.min.js' %}"></script>
<script src="{% static 'assets/plugins/fileuploads/js/fileupload.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
    
    // Logo preview
    $('#{{ form.logo.id_for_label }}').change(function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#logo-preview').html('<img src="' + e.target.result + '" alt="Logo Preview" class="avatar avatar-xxl">');
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Remove logo checkbox
    $('#remove-logo').change(function() {
        if ($(this).is(':checked')) {
            $('#logo-preview').html('<div class="avatar avatar-xxl bg-primary-transparent"><i class="fe fe-image fs-30"></i></div>');
        } else {
            // Restore original logo if unchecked
            {% if form.instance.logo %}
            $('#logo-preview').html('<img src="{{ form.instance.logo.url }}" alt="Current Logo" class="avatar avatar-xxl">');
            {% endif %}
        }
    });
    
    // Form validation
    $('#brand-form').submit(function(e) {
        var isValid = true;
        var errors = [];
        
        // Check required fields
        if (!$('#{{ form.name.id_for_label }}').val().trim()) {
            errors.push('Brand name is required');
            isValid = false;
        }
        
        if (!$('#{{ form.agency.id_for_label }}').val()) {
            errors.push('Agency selection is required');
            isValid = false;
        }
        
        // Validate email format if provided
        var email = $('#{{ form.contact_email.id_for_label }}').val();
        if (email && !isValidEmail(email)) {
            errors.push('Please enter a valid email address');
            isValid = false;
        }
        
        // Validate website URL if provided
        var website = $('#{{ form.website.id_for_label }}').val();
        if (website && !isValidURL(website)) {
            errors.push('Please enter a valid website URL');
            isValid = false;
        }
        
        if (!isValid) {
            e.preventDefault();
            Swal.fire({
                title: 'Validation Error',
                html: errors.join('<br>'),
                icon: 'error',
                confirmButtonText: 'OK'
            });
        }
    });
    
    // Delete brand button
    $('#delete-brand').click(function() {
        $('#deleteModal').modal('show');
    });
    
    // Auto-save draft (optional)
    var autoSaveTimer;
    $('#brand-form input, #brand-form textarea, #brand-form select').on('input change', function() {
        clearTimeout(autoSaveTimer);
        autoSaveTimer = setTimeout(function() {
            saveDraft();
        }, 5000); // Save after 5 seconds of inactivity
    });
});

function isValidEmail(email) {
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function isValidURL(url) {
    try {
        new URL(url);
        return true;
    } catch {
        return false;
    }
}

function saveDraft() {
    // Optional: Implement auto-save functionality
    var formData = $('#brand-form').serialize();
    
    $.ajax({
        url: '{% url "advertisers:brand_draft" %}',
        method: 'POST',
        data: formData,
        success: function(response) {
            if (response.success) {
                // Show subtle notification
                $('.page-title').append(' <small class="text-muted">(Draft saved)</small>');
                setTimeout(function() {
                    $('.page-title small').fadeOut();
                }, 2000);
            }
        },
        error: function() {
            // Silently fail for draft saves
        }
    });
}
</script>
{% endblock %}