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

{% block title %}{% if advertiser %}Edit Advertiser{% else %}Add Advertiser{% endif %} - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Select2 css -->
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />

<!-- INTERNAL File Upload css -->
<link href="{% static 'plugins/fileuploads/css/fileupload.css' %}" rel="stylesheet" type="text/css" />

<style>
.form-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.form-section h5 {
    color: #495057;
    margin-bottom: 15px;
    font-weight: 600;
}
.logo-preview {
    max-width: 200px;
    max-height: 100px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    background: white;
}
.upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}
.upload-area:hover {
    border-color: #6259ca;
    background: #f0f0ff;
}
.upload-area.dragover {
    border-color: #28a745;
    background: #d4edda;
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{% if advertiser %}Edit Advertiser{% else %}Add New Advertiser{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'advertisers:advertiser_list' %}">Advertisers</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% if advertiser %}Edit{% else %}Add{% endif %}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Advertiser Information</h3>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" id="advertiser-form">
                    {% csrf_token %}
                    
                    <!-- Basic Information Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-building"></i> Basic Information</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Company Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="name" value="{{ advertiser.name|default:'' }}" required>
                                    <small class="form-text text-muted">Enter the official company name</small>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Industry</label>
                                    <select class="form-control select2" name="industry">
                                        <option value="">Select Industry</option>
                                        <option value="automotive" {% if advertiser.industry == 'automotive' %}selected{% endif %}>Automotive</option>
                                        <option value="technology" {% if advertiser.industry == 'technology' %}selected{% endif %}>Technology</option>
                                        <option value="healthcare" {% if advertiser.industry == 'healthcare' %}selected{% endif %}>Healthcare</option>
                                        <option value="finance" {% if advertiser.industry == 'finance' %}selected{% endif %}>Finance</option>
                                        <option value="retail" {% if advertiser.industry == 'retail' %}selected{% endif %}>Retail</option>
                                        <option value="food_beverage" {% if advertiser.industry == 'food_beverage' %}selected{% endif %}>Food & Beverage</option>
                                        <option value="entertainment" {% if advertiser.industry == 'entertainment' %}selected{% endif %}>Entertainment</option>
                                        <option value="travel" {% if advertiser.industry == 'travel' %}selected{% endif %}>Travel & Tourism</option>
                                        <option value="education" {% if advertiser.industry == 'education' %}selected{% endif %}>Education</option>
                                        <option value="real_estate" {% if advertiser.industry == 'real_estate' %}selected{% endif %}>Real Estate</option>
                                        <option value="other" {% if advertiser.industry == 'other' %}selected{% endif %}>Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-label">Description</label>
                                    <textarea class="form-control" name="description" rows="3" placeholder="Enter company description">{{ advertiser.description|default:'' }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Website</label>
                                    <input type="url" class="form-control" name="website" value="{{ advertiser.website|default:'' }}" placeholder="https://example.com">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Status</label>
                                    <select class="form-control" name="status">
                                        <option value="active" {% if advertiser.status == 'active' or not advertiser %}selected{% endif %}>Active</option>
                                        <option value="inactive" {% if advertiser.status == 'inactive' %}selected{% endif %}>Inactive</option>
                                        <option value="pending" {% if advertiser.status == 'pending' %}selected{% endif %}>Pending</option>
                                        <option value="suspended" {% if advertiser.status == 'suspended' %}selected{% endif %}>Suspended</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Contact Information Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-address-book"></i> Contact Information</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Primary Contact Name</label>
                                    <input type="text" class="form-control" name="contact_name" value="{{ advertiser.contact_name|default:'' }}" placeholder="John Doe">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Contact Title</label>
                                    <input type="text" class="form-control" name="contact_title" value="{{ advertiser.contact_title|default:'' }}" placeholder="Marketing Manager">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" name="email" value="{{ advertiser.email|default:'' }}" required>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Phone</label>
                                    <input type="tel" class="form-control" name="phone" value="{{ advertiser.phone|default:'' }}" placeholder="+1 (555) 123-4567">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Alternative Phone</label>
                                    <input type="tel" class="form-control" name="alt_phone" value="{{ advertiser.alt_phone|default:'' }}" placeholder="+1 (555) 987-6543">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Address Information Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-map-marker-alt"></i> Address Information</h5>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-label">Street Address</label>
                                    <input type="text" class="form-control" name="address" value="{{ advertiser.address|default:'' }}" placeholder="123 Main Street">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">City</label>
                                    <input type="text" class="form-control" name="city" value="{{ advertiser.city|default:'' }}" placeholder="New York">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">State/Province</label>
                                    <input type="text" class="form-control" name="state" value="{{ advertiser.state|default:'' }}" placeholder="NY">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">ZIP/Postal Code</label>
                                    <input type="text" class="form-control" name="zip_code" value="{{ advertiser.zip_code|default:'' }}" placeholder="10001">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Country</label>
                                    <select class="form-control select2" name="country">
                                        <option value="">Select Country</option>
                                        <option value="US" {% if advertiser.country == 'US' %}selected{% endif %}>United States</option>
                                        <option value="CA" {% if advertiser.country == 'CA' %}selected{% endif %}>Canada</option>
                                        <option value="GB" {% if advertiser.country == 'GB' %}selected{% endif %}>United Kingdom</option>
                                        <option value="AU" {% if advertiser.country == 'AU' %}selected{% endif %}>Australia</option>
                                        <option value="DE" {% if advertiser.country == 'DE' %}selected{% endif %}>Germany</option>
                                        <option value="FR" {% if advertiser.country == 'FR' %}selected{% endif %}>France</option>
                                        <option value="IT" {% if advertiser.country == 'IT' %}selected{% endif %}>Italy</option>
                                        <option value="ES" {% if advertiser.country == 'ES' %}selected{% endif %}>Spain</option>
                                        <option value="JP" {% if advertiser.country == 'JP' %}selected{% endif %}>Japan</option>
                                        <option value="CN" {% if advertiser.country == 'CN' %}selected{% endif %}>China</option>
                                        <option value="IN" {% if advertiser.country == 'IN' %}selected{% endif %}>India</option>
                                        <option value="BR" {% if advertiser.country == 'BR' %}selected{% endif %}>Brazil</option>
                                        <option value="MX" {% if advertiser.country == 'MX' %}selected{% endif %}>Mexico</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Time Zone</label>
                                    <select class="form-control select2" name="timezone">
                                        <option value="">Select Time Zone</option>
                                        <option value="America/New_York" {% if advertiser.timezone == 'America/New_York' %}selected{% endif %}>Eastern Time (ET)</option>
                                        <option value="America/Chicago" {% if advertiser.timezone == 'America/Chicago' %}selected{% endif %}>Central Time (CT)</option>
                                        <option value="America/Denver" {% if advertiser.timezone == 'America/Denver' %}selected{% endif %}>Mountain Time (MT)</option>
                                        <option value="America/Los_Angeles" {% if advertiser.timezone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time (PT)</option>
                                        <option value="Europe/London" {% if advertiser.timezone == 'Europe/London' %}selected{% endif %}>GMT</option>
                                        <option value="Europe/Paris" {% if advertiser.timezone == 'Europe/Paris' %}selected{% endif %}>CET</option>
                                        <option value="Asia/Tokyo" {% if advertiser.timezone == 'Asia/Tokyo' %}selected{% endif %}>JST</option>
                                        <option value="Australia/Sydney" {% if advertiser.timezone == 'Australia/Sydney' %}selected{% endif %}>AEST</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Logo and Branding Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-image"></i> Logo and Branding</h5>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Company Logo</label>
                                    {% if advertiser.logo %}
                                    <div class="mb-3">
                                        <img src="{{ advertiser.logo.url }}" alt="Current Logo" class="logo-preview">
                                        <p class="text-muted mt-2">Current logo</p>
                                    </div>
                                    {% endif %}
                                    <div class="upload-area" onclick="document.getElementById('logo-input').click()">
                                        <i class="fa fa-cloud-upload fa-3x text-muted"></i>
                                        <p class="mt-2">Click to upload or drag and drop</p>
                                        <small class="text-muted">Supported formats: JPG, PNG, SVG (Max: 2MB)</small>
                                    </div>
                                    <input type="file" id="logo-input" name="logo" accept="image/*" style="display: none;">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Brand Colors</label>
                                    <div class="row">
                                        <div class="col-6">
                                            <label class="form-label">Primary Color</label>
                                            <input type="color" class="form-control" name="primary_color" value="{{ advertiser.primary_color|default:'#6259ca' }}">
                                        </div>
                                        <div class="col-6">
                                            <label class="form-label">Secondary Color</label>
                                            <input type="color" class="form-control" name="secondary_color" value="{{ advertiser.secondary_color|default:'#17a2b8' }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">Brand Guidelines URL</label>
                                    <input type="url" class="form-control" name="brand_guidelines_url" value="{{ advertiser.brand_guidelines_url|default:'' }}" placeholder="https://brand.example.com/guidelines">
                                    <small class="form-text text-muted">Link to brand guidelines document</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Business Information Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-briefcase"></i> Business Information</h5>
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Tax ID / VAT Number</label>
                                    <input type="text" class="form-control" name="tax_id" value="{{ advertiser.tax_id|default:'' }}" placeholder="12-3456789">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Business Registration Number</label>
                                    <input type="text" class="form-control" name="business_reg_number" value="{{ advertiser.business_reg_number|default:'' }}">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="form-label">Company Size</label>
                                    <select class="form-control" name="company_size">
                                        <option value="">Select Size</option>
                                        <option value="startup" {% if advertiser.company_size == 'startup' %}selected{% endif %}>Startup (1-10)</option>
                                        <option value="small" {% if advertiser.company_size == 'small' %}selected{% endif %}>Small (11-50)</option>
                                        <option value="medium" {% if advertiser.company_size == 'medium' %}selected{% endif %}>Medium (51-200)</option>
                                        <option value="large" {% if advertiser.company_size == 'large' %}selected{% endif %}>Large (201-1000)</option>
                                        <option value="enterprise" {% if advertiser.company_size == 'enterprise' %}selected{% endif %}>Enterprise (1000+)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Annual Revenue Range</label>
                                    <select class="form-control" name="revenue_range">
                                        <option value="">Select Range</option>
                                        <option value="under_1m" {% if advertiser.revenue_range == 'under_1m' %}selected{% endif %}>Under $1M</option>
                                        <option value="1m_10m" {% if advertiser.revenue_range == '1m_10m' %}selected{% endif %}>$1M - $10M</option>
                                        <option value="10m_50m" {% if advertiser.revenue_range == '10m_50m' %}selected{% endif %}>$10M - $50M</option>
                                        <option value="50m_100m" {% if advertiser.revenue_range == '50m_100m' %}selected{% endif %}>$50M - $100M</option>
                                        <option value="100m_500m" {% if advertiser.revenue_range == '100m_500m' %}selected{% endif %}>$100M - $500M</option>
                                        <option value="over_500m" {% if advertiser.revenue_range == 'over_500m' %}selected{% endif %}>Over $500M</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label class="form-label">Preferred Payment Terms</label>
                                    <select class="form-control" name="payment_terms">
                                        <option value="net_15" {% if advertiser.payment_terms == 'net_15' %}selected{% endif %}>Net 15</option>
                                        <option value="net_30" {% if advertiser.payment_terms == 'net_30' or not advertiser %}selected{% endif %}>Net 30</option>
                                        <option value="net_45" {% if advertiser.payment_terms == 'net_45' %}selected{% endif %}>Net 45</option>
                                        <option value="net_60" {% if advertiser.payment_terms == 'net_60' %}selected{% endif %}>Net 60</option>
                                        <option value="prepaid" {% if advertiser.payment_terms == 'prepaid' %}selected{% endif %}>Prepaid</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Additional Settings Section -->
                    <div class="form-section">
                        <h5><i class="fa fa-cogs"></i> Additional Settings</h5>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label class="form-label">Notes</label>
                                    <textarea class="form-control" name="notes" rows="4" placeholder="Internal notes about this advertiser">{{ advertiser.notes|default:'' }}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="allow_adult_content" {% if advertiser.allow_adult_content %}checked{% endif %}>
                                        <label class="form-check-label">Allow adult content advertising</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="require_approval" {% if advertiser.require_approval %}checked{% endif %}>
                                        <label class="form-check-label">Require approval for all campaigns</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="send_reports" {% if advertiser.send_reports %}checked{% endif %}>
                                        <label class="form-check-label">Send automated performance reports</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="api_access" {% if advertiser.api_access %}checked{% endif %}>
                                        <label class="form-check-label">Enable API access</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="form-group">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fa fa-save"></i> {% if advertiser %}Update Advertiser{% else %}Create Advertiser{% endif %}
                                </button>
                                <a href="{% url 'advertisers:advertiser_list' %}" class="btn btn-light">
                                    <i class="fa fa-times"></i> Cancel
                                </a>
                                {% if advertiser %}
                                <a href="{% url 'advertisers:advertiser_detail' advertiser.id %}" class="btn btn-info">
                                    <i class="fa fa-eye"></i> View Details
                                </a>
                                <button type="button" class="btn btn-warning" onclick="sendTestEmail()">
                                    <i class="fa fa-envelope"></i> Send Test Email
                                </button>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Select2 js -->
<script src="{% static 'plugins/select2/js/select2.full.min.js' %}"></script>

<!-- INTERNAL File Upload js -->
<script src="{% static 'plugins/fileuploads/js/fileupload.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select2').select2({
        placeholder: 'Select an option',
        allowClear: true
    });
    
    // Logo upload handling
    $('#logo-input').on('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('.upload-area').html('<img src="' + e.target.result + '" class="logo-preview" alt="Logo Preview">');
            };
            reader.readAsDataURL(file);
        }
    });
    
    // Drag and drop functionality
    $('.upload-area').on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('dragover');
    });
    
    $('.upload-area').on('dragleave', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
    });
    
    $('.upload-area').on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('dragover');
        
        var files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) {
            $('#logo-input')[0].files = files;
            $('#logo-input').trigger('change');
        }
    });
    
    // Form validation
    $('#advertiser-form').on('submit', function(e) {
        var isValid = true;
        var errors = [];
        
        // Check required fields
        $('[required]').each(function() {
            if (!$(this).val()) {
                isValid = false;
                $(this).addClass('is-invalid');
                errors.push($(this).prev('label').text() + ' is required');
            } else {
                $(this).removeClass('is-invalid');
            }
        });
        
        // Validate email format
        var email = $('[name="email"]').val();
        if (email && !isValidEmail(email)) {
            isValid = false;
            errors.push('Please enter a valid email address');
        }
        
        // Validate website URL
        var website = $('[name="website"]').val();
        if (website && !isValidURL(website)) {
            isValid = false;
            errors.push('Please enter a valid website URL');
        }
        
        if (!isValid) {
            e.preventDefault();
            alert('Please fix the following errors:\n' + errors.join('\n'));
        }
    });
    
    // Auto-format phone numbers
    $('[name="phone"], [name="alt_phone"]').on('input', function() {
        var value = $(this).val().replace(/\D/g, '');
        if (value.length >= 10) {
            var formatted = value.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
            $(this).val(formatted);
        }
    });
});

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 sendTestEmail() {
    {% if advertiser %}
    $.ajax({
        url: '/advertisers/{{ advertiser.id }}/send-test-email/',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                alert('Test email sent successfully!');
            } else {
                alert('Failed to send test email: ' + data.error);
            }
        },
        error: function() {
            alert('Failed to send test email');
        }
    });
    {% endif %}
}
</script>
{% endblock %}