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

{% block title %}{% if form.instance.pk %}Edit Agency{% else %}Create Agency{% 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 Agency{% else %}Create Agency{% 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:agency_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 Agency</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="agency-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 }}">Agency 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 agency name (must be unique)</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.contact_person.id_for_label }}">Contact Person</label>
                                {{ form.contact_person|add_class:"form-control" }}
                                {% if form.contact_person.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.contact_person.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Primary contact person name</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 agency</small>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.owner.id_for_label }}">Owner</label>
                        {{ form.owner|add_class:"form-control select2" }}
                        {% if form.owner.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.owner.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Select the user who owns this agency</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.email.id_for_label }}">Email</label>
                                {{ form.email|add_class:"form-control" }}
                                {% if form.email.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.email.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Primary contact email</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.phone.id_for_label }}">Phone</label>
                                {{ form.phone|add_class:"form-control" }}
                                {% if form.phone.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.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">Agency's official website URL</small>
                    </div>
                </div>
            </div>
            
            <!-- Address Information -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Address Information</h3>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <label class="form-label" for="{{ form.address.id_for_label }}">Address</label>
                        {{ form.address|add_class:"form-control" }}
                        {% if form.address.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.address.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Street address</small>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.city.id_for_label }}">City</label>
                                {{ form.city|add_class:"form-control" }}
                                {% if form.city.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.city.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">City name</small>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-label" for="{{ form.country.id_for_label }}">Country</label>
                                {{ form.country|add_class:"form-control" }}
                                {% if form.country.errors %}
                                    <div class="invalid-feedback d-block">
                                        {{ form.country.errors.0 }}
                                    </div>
                                {% endif %}
                                <small class="form-text text-muted">Country name</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-4">
            <!-- Agency Logo -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Agency 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-briefcase 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-check">
                            {{ form.is_active|add_class:"form-check-input" }}
                            <span class="form-check-label">Agency is Active</span>
                        </label>
                        {% if form.is_active.errors %}
                            <div class="invalid-feedback d-block">
                                {{ form.is_active.errors.0 }}
                            </div>
                        {% endif %}
                        <small class="form-text text-muted">Inactive agencies cannot create new campaigns</small>
                    </div>
                    
                    {% if form.instance.pk %}
                    <div class="alert alert-info">
                        <h6 class="alert-heading">Agency 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-1"><strong>Total Brands:</strong> {{ form.instance.total_brands }}</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 Agency{% else %}Create Agency{% endif %}
                        </button>
                        
                        {% if form.instance.pk %}
                        <a href="{% url 'advertisers:agency_detail' form.instance.pk %}" class="btn btn-outline-secondary">
                            <i class="fe fe-eye"></i> View Agency
                        </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_agency %}
                        <button type="button" class="btn btn-outline-danger" id="delete-agency">
                            <i class="fe fe-trash-2"></i> Delete Agency
                        </button>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

{% if form.instance.pk and perms.advertisers.delete_agency %}
<!-- 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 Agency</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 agency <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 brands, campaigns, and data will also be deleted.</p>
                </div>
                {% if form.instance.total_brands > 0 %}
                <div class="alert alert-danger">
                    <h6 class="alert-heading">Cannot Delete!</h6>
                    <p class="mb-0">This agency has {{ form.instance.total_brands }} brand(s). Please delete or transfer all brands before deleting the agency.</p>
                </div>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                {% if form.instance.total_brands == 0 %}
                <form method="post" action="{% url 'advertisers:agency_delete' form.instance.pk %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger">Delete Agency</button>
                </form>
                {% else %}
                <button type="button" class="btn btn-danger" disabled>Cannot Delete</button>
                {% endif %}
            </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-briefcase 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
    $('#agency-form').submit(function(e) {
        var isValid = true;
        var errors = [];
        
        // Check required fields
        if (!$('#{{ form.name.id_for_label }}').val().trim()) {
            errors.push('Agency name is required');
            isValid = false;
        }
        
        // Validate email format if provided
        var email = $('#{{ form.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 agency button
    $('#delete-agency').click(function() {
        $('#deleteModal').modal('show');
    });
    
    // Auto-save draft (optional)
    var autoSaveTimer;
    $('#agency-form input, #agency-form textarea, #agency-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 = $('#agency-form').serialize();
    
    $.ajax({
        url: '{% url "advertisers:agency_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 %}