{% extends "layouts/base.html" %}

{% load static %}

{% block title %}
    {% if agency.pk %} Edit Agency - {{ agency.name }}
    {% else %} Add Agency {% endif %}
{% endblock title %}

{% block extra_css %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
       display: none;
   }
   
   /* Modern loading spinner */
   .loading-spinner {
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 3px solid #f3f3f3;
       border-top: 3px solid #3498db;
       border-radius: 50%;
       animation: spin 1s linear infinite;
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .btn-loading {
       position: relative;
       pointer-events: none;
   }
   
   .btn-loading::after {
       content: '';
       position: absolute;
       width: 16px;
       height: 16px;
       margin: auto;
       border: 2px solid transparent;
       border-top-color: #ffffff;
       border-radius: 50%;
       animation: spin 1s linear infinite;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
   }

   /* Disabled button styles */
   .btn.disabled, .btn:disabled {
       opacity: 0.5 !important;
       cursor: not-allowed !important;
       pointer-events: none !important;
   }

   /* Form validation styles */
   .form-control.is-invalid {
      border-color: #dc3545 !important;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
   }

   .form-control.is-valid {
      border-color: #28a745 !important;
      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
   }

   .validation-error {
      color: #dc3545;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .validation-success {
      color: #155724;
      font-size: 0.875rem;
      margin-top: 5px;
   }

   .shake-animation {
      animation: shake 0.5s ease-in-out;
   }

   @keyframes shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
   }

    /* Agency Preview Styles */
    .agency-preview {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        margin-top: 20px;
    }
    
    .preview-icon {
        font-size: 3rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .preview-logo {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 1rem;
        border: 2px solid #dee2e6;
    }
    
    .badge {
        margin: 0.25rem;
    }
    
    /* Card styles to match channel form */
    .card {
        margin-bottom: 1.5rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 1.25rem;
    }
    
    .card-title {
        margin-bottom: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
    
    .help-text {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 2px;
    }

    /* Logo upload styles */
    .logo-upload-container {
        position: relative;
        display: inline-block;
    }
    
    .logo-preview {
        width: 120px;
        height: 120px;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }
    
    .logo-preview:hover {
        border-color: #007bff;
        background: #e7f3ff;
    }
    
    .logo-preview.has-image {
        border-style: solid;
        border-color: #dee2e6;
    }
    
    .logo-preview img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
    
    .logo-placeholder {
        text-align: center;
        color: #6c757d;
    }
    
    .logo-placeholder i {
        font-size: 2rem;
        margin-bottom: 8px;
        display: block;
    }
    
    .logo-remove-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #dc3545;
        color: white;
        border: none;
        font-size: 12px;
        display: none;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .logo-upload-container:hover .logo-remove-btn {
        display: flex;
    }

    /* Multi-select styles */
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        min-height: 38px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #007bff;
        border: 1px solid #007bff;
        color: #fff;
        border-radius: 0.25rem;
        padding: 2px 8px;
        margin: 2px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: #fff;
        margin-right: 5px;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% if agency.pk %}Edit Agency{% else %}Add Agency{% endif %}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{% url 'agencies:agency_list' %}">Agencies</a></li>
            {% if agency.pk %}
                <li class="breadcrumb-item"><a href="{% url 'agencies:agency_detail' agency.id %}">{{ agency.name }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            {% else %}
                <li class="breadcrumb-item active" aria-current="page">Add</li>
            {% endif %}
        </ol>
    </div>
</div>
{% endblock breadcrumb %}

{% block content %}
<form method="post" id="agency-form" enctype="multipart/form-data" novalidate>
    {% csrf_token %}
    
    <!-- Basic Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Agency Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Left Column - Logo -->
                <div class="col-md-3">
                    <label class="form-label">Agency Logo</label>
                    <div class="logo-upload-container">
                        <div class="logo-preview" onclick="document.getElementById('logo-input').click()" id="logo-preview">
                            {% if agency.logo %}
                                <img src="{{ agency.logo.url }}" alt="Agency Logo" id="logo-image">
                            {% else %}
                                <div class="logo-placeholder">
                                    <i class="fe fe-briefcase"></i>
                                    <small>Click to upload</small>
                                </div>
                            {% endif %}
                        </div>
                        <button type="button" class="logo-remove-btn" onclick="removeLogo()" id="logo-remove-btn">
                            <i class="fe fe-x"></i>
                        </button>
                        <input type="file" id="logo-input" name="logo" accept="image/*" style="display: none;" onchange="previewLogo(this)">
                    </div>
                    <div class="help-text">Upload agency logo (PNG, JPG, SVG recommended)</div>
                </div>
                
                <!-- Right Column - Basic Info -->
                <div class="col-md-9">
                    <!-- Agency Name -->
                    <div class="mb-3">
                        <label class="form-label required-field">Agency Name</label>
                        <input class="form-control" placeholder="Enter agency name" name="name" type="text" 
                               value="{{ agency.name|default:'' }}" required>
                        <div class="help-text">Official business name of the agency</div>
                    </div>
                    
                    <div class="row">
                        <!-- Legal Name -->
                        <div class="col-md-6">
                            <label class="form-label">Legal Name</label>
                            <input class="form-control" placeholder="Legal business name" name="legal_name" 
                                   type="text" value="{{ agency.legal_name|default:'' }}">
                            <div class="help-text">Legal business name (if different)</div>
                        </div>
                        
                        <!-- Agency Type -->
                        <div class="col-md-6">
                            <label class="form-label required-field">Agency Type</label>
                            <select class="form-control select2-show-search form-select" name="agency_type" 
                                    data-placeholder="Choose one" required>
                                <option value="">Select agency type...</option>
                                {% for type in agency_types %}
                                    <option value="{{ type.id }}" {% if agency.agency_type_id == type.id %}selected{% endif %}>
                                        {{ type.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="help-text">Category/type of agency services</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Description -->
            <div class="mt-4">
                <label class="form-label">Description</label>
                <textarea class="form-control" placeholder="Brief description of the agency's services and expertise..." 
                          name="description" rows="3">{{ agency.description|default:'' }}</textarea>
                <div class="help-text">Detailed description of agency services and specializations</div>
            </div>
        </div>
    </div>
    
    <!-- Contact Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Contact Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Email -->
                <div class="col-lg-6">
                    <label class="form-label required-field">Email Address</label>
                    <input class="form-control" placeholder="contact@agency.com" name="email" 
                           type="email" value="{{ agency.email|default:'' }}" required>
                    <div class="help-text">Primary email address for communications</div>
                </div>
                
                <!-- Phone -->
                <div class="col-lg-6">
                    <label class="form-label">Phone Number</label>
                    <input class="form-control" placeholder="+1-555-123-4567" name="phone" 
                           type="text" value="{{ agency.phone|default:'' }}">
                    <div class="help-text">Primary phone number including country code</div>
                </div>
                
                <!-- Website -->
                <div class="col-lg-6">
                    <label class="form-label">Website URL</label>
                    <input class="form-control" placeholder="https://www.agency.com" name="website" 
                           type="url" value="{{ agency.website|default:'' }}">
                    <div class="help-text">Official agency website</div>
                </div>
                
                <!-- Founded Year -->
                <div class="col-lg-6">
                    <label class="form-label">Founded Year</label>
                    <input class="form-control" placeholder="2020" name="founded_year" 
                           type="number" value="{{ agency.founded_year|default:'' }}" min="1900" max="2030">
                    <div class="help-text">Year the agency was established</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Business Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Business Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Agency Size -->
                <div class="col-lg-6">
                    <label class="form-label">Agency Size</label>
                    <select class="form-control select2-show-search form-select" name="agency_size" 
                            data-placeholder="Choose one">
                        <option value="">Select agency size...</option>
                        <option value="startup" {% if agency.agency_size == 'startup' %}selected{% endif %}>Startup (1-10 employees)</option>
                        <option value="small" {% if agency.agency_size == 'small' %}selected{% endif %}>Small (11-50 employees)</option>
                        <option value="medium" {% if agency.agency_size == 'medium' %}selected{% endif %}>Medium (51-200 employees)</option>
                        <option value="large" {% if agency.agency_size == 'large' %}selected{% endif %}>Large (201-1000 employees)</option>
                        <option value="enterprise" {% if agency.agency_size == 'enterprise' %}selected{% endif %}>Enterprise (1000+ employees)</option>
                    </select>
                    <div class="help-text">Size category based on employee count</div>
                </div>
                
                <!-- Employee Count -->
                <div class="col-lg-6">
                    <label class="form-label">Employee Count</label>
                    <input class="form-control" placeholder="25" name="employee_count" 
                           type="number" value="{{ agency.employee_count|default:'' }}" min="1">
                    <div class="help-text">Exact number of employees (optional)</div>
                </div>
                
                <!-- Time Zone -->
                <div class="col-lg-6">
                    <label class="form-label">Time Zone</label>
                    <select class="form-control select2-show-search form-select" name="time_zone" 
                            data-placeholder="Choose one">
                        <option value="UTC" {% if agency.time_zone == 'UTC' %}selected{% endif %}>UTC</option>
                        <option value="America/New_York" {% if agency.time_zone == 'America/New_York' %}selected{% endif %}>Eastern Time</option>
                        <option value="America/Chicago" {% if agency.time_zone == 'America/Chicago' %}selected{% endif %}>Central Time</option>
                        <option value="America/Denver" {% if agency.time_zone == 'America/Denver' %}selected{% endif %}>Mountain Time</option>
                        <option value="America/Los_Angeles" {% if agency.time_zone == 'America/Los_Angeles' %}selected{% endif %}>Pacific Time</option>
                        <option value="Europe/London" {% if agency.time_zone == 'Europe/London' %}selected{% endif %}>London Time</option>
                        <option value="Europe/Paris" {% if agency.time_zone == 'Europe/Paris' %}selected{% endif %}>Paris Time</option>
                    </select>
                    <div class="help-text">Primary time zone for operations</div>
                </div>
                
                <!-- Language -->
                <div class="col-lg-6">
                    <label class="form-label">Primary Language</label>
                    <select class="form-control select2-show-search form-select" name="language" 
                            data-placeholder="Choose one">
                        <option value="en" {% if agency.language == 'en' %}selected{% endif %}>English</option>
                        <option value="es" {% if agency.language == 'es' %}selected{% endif %}>Spanish</option>
                        <option value="fr" {% if agency.language == 'fr' %}selected{% endif %}>French</option>
                        <option value="de" {% if agency.language == 'de' %}selected{% endif %}>German</option>
                        <option value="it" {% if agency.language == 'it' %}selected{% endif %}>Italian</option>
                        <option value="pt" {% if agency.language == 'pt' %}selected{% endif %}>Portuguese</option>
                    </select>
                    <div class="help-text">Primary language for communications</div>
                </div>
                
                <!-- Specializations -->
                <div class="col-12">
                    <label class="form-label">Specializations</label>
                    <select class="form-control select2-multiple form-select" name="specializations" 
                            data-placeholder="Select specializations..." multiple>
                        <option value="tv_advertising">TV Advertising</option>
                        <option value="digital_marketing">Digital Marketing</option>
                        <option value="creative_services">Creative Services</option>
                        <option value="media_planning">Media Planning</option>
                        <option value="brand_strategy">Brand Strategy</option>
                        <option value="public_relations">Public Relations</option>
                        <option value="social_media">Social Media</option>
                        <option value="content_creation">Content Creation</option>
                        <option value="data_analytics">Data Analytics</option>
                        <option value="full_service">Full Service</option>
                    </select>
                    <div class="help-text">Primary areas of expertise and services offered</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Address Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Address Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Street Address -->
                <div class="col-12">
                    <label class="form-label">Street Address</label>
                    <input class="form-control" placeholder="123 Main Street" name="street_address" 
                           type="text" value="{{ agency.street_address|default:'' }}">
                    <div class="help-text">Physical street address</div>
                </div>
                
                <!-- City -->
                <div class="col-lg-4">
                    <label class="form-label">City</label>
                    <input class="form-control" placeholder="New York" name="city" 
                           type="text" value="{{ agency.city|default:'' }}">
                    <div class="help-text">City name</div>
                </div>
                
                <!-- State -->
                <div class="col-lg-4">
                    <label class="form-label">State/Province</label>
                    <input class="form-control" placeholder="NY" name="state" 
                           type="text" value="{{ agency.state|default:'' }}">
                    <div class="help-text">State or province</div>
                </div>
                
                <!-- Postal Code -->
                <div class="col-lg-4">
                    <label class="form-label">Postal Code</label>
                    <input class="form-control" placeholder="10001" name="postal_code" 
                           type="text" value="{{ agency.postal_code|default:'' }}">
                    <div class="help-text">ZIP or postal code</div>
                </div>
                
                <!-- Country -->
                <div class="col-lg-6">
                    <label class="form-label">Country</label>
                    <select class="form-control select2-show-search form-select" name="country" 
                            data-placeholder="Choose one">
                        <option value="">Select country...</option>
                        <option value="US" {% if agency.country == 'US' %}selected{% endif %}>United States</option>
                        <option value="CA" {% if agency.country == 'CA' %}selected{% endif %}>Canada</option>
                        <option value="GB" {% if agency.country == 'GB' %}selected{% endif %}>United Kingdom</option>
                        <option value="DE" {% if agency.country == 'DE' %}selected{% endif %}>Germany</option>
                        <option value="FR" {% if agency.country == 'FR' %}selected{% endif %}>France</option>
                        <option value="ES" {% if agency.country == 'ES' %}selected{% endif %}>Spain</option>
                        <option value="IT" {% if agency.country == 'IT' %}selected{% endif %}>Italy</option>
                        <option value="AU" {% if agency.country == 'AU' %}selected{% endif %}>Australia</option>
                    </select>
                    <div class="help-text">Country location</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Agency Preview Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Agency Preview</h3>
        </div>
        <div class="card-body">
            <div class="agency-preview" id="agency-preview">
                <div id="preview-logo-container">
                    {% if agency.logo %}
                        <img src="{{ agency.logo.url }}" alt="Agency Logo" class="preview-logo" id="preview-logo">
                    {% else %}
                        <div class="preview-icon" id="preview-icon">
                            <i class="fe fe-briefcase"></i>
                        </div>
                    {% endif %}
                </div>
                <h5 class="text-dark mb-2" id="preview-name">Agency Name</h5>
                <p class="text-muted mb-3" id="preview-type">Agency Type</p>
                <div class="d-flex justify-content-center flex-wrap">
                    <span class="badge bg-secondary" id="preview-size">Size</span>
                    <div id="preview-specializations"></div>
                </div>
                <p class="text-muted mt-3 mb-0" id="preview-description">Agency description will appear here...</p>
            </div>
        </div>
    </div>
    
    <!-- Submit Button -->
    <button type="submit" style="width:200px; text-align:center;" class="btn btn-primary" id="submit-btn">
        {% if agency.pk %}Update Agency{% else %}Add Agency{% endif %}
    </button>
    
    {% if agency.pk %}
    <button type="button" class="btn btn-outline-danger ms-2" onclick="deleteAgency('{{ agency.id }}')" style="width:150px;">
        Delete Agency
    </button>
    {% endif %}
</form>
{% endblock content %}

{% block modals %}
{% if agency.pk %}
<!-- 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">Confirm Delete</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 "{{ agency.name }}"?</p>
                <p class="text-warning"><strong>This action cannot be undone and will also delete all associated brands and campaigns.</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete Agency</button>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock modals %}

{% block extra_js %}
<script src="{% static 'plugins/select2/js/select2.min.js' %}"></script>
<script src="{% static 'plugins/sweetalert2/sweetalert2.min.js' %}"></script>

<script>
$(document).ready(function() {
    'use strict';
    
    // Initialize Select2 dropdowns
    $('.select2-show-search').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true
    });

    // Initialize multi-select dropdowns
    $('.select2-multiple').select2({
        width: '100%',
        placeholder: function() {
            return $(this).data('placeholder');
        },
        allowClear: true,
        multiple: true
    });
    
    // Real-time preview update
    function updatePreview() {
        const name = $('input[name="name"]').val() || 'Agency Name';
        const type = $('select[name="agency_type"] option:selected').text() || 'Agency Type';
        const size = $('select[name="agency_size"] option:selected').text() || 'Size';
        const specializations = $('select[name="specializations"]').val() || [];
        const description = $('textarea[name="description"]').val() || 'Agency description will appear here...';
        
        $('#preview-name').text(name);
        $('#preview-type').text(type);
        $('#preview-size').text(size);
        $('#preview-description').text(description);
        
        // Update specialization badges
        const specializationContainer = $('#preview-specializations');
        specializationContainer.empty();
        if (specializations.length > 0) {
            specializations.forEach(function(spec) {
                const specText = $('select[name="specializations"] option[value="' + spec + '"]').text();
                const badge = $('<span class="badge bg-info">' + specText + '</span>');
                specializationContainer.append(badge);
            });
        }
    }
    
    // Bind preview update to form changes
    $('input[name="name"], textarea[name="description"]').on('input', updatePreview);
    $('select[name="agency_type"], select[name="agency_size"], select[name="specializations"]').on('change', updatePreview);
    
    // Initial preview update
    updatePreview();
    
    // Form validation with loading states
    $('#agency-form').on('submit', function(e) {
        let isValid = true;
        
        // Clear previous errors
        $('.validation-error').remove();
        $('.form-control, .form-select').removeClass('is-invalid');
        
        // Validate required fields
        const requiredFields = ['input[name="name"]', 'input[name="email"]', 'select[name="agency_type"]'];
        requiredFields.forEach(function(field) {
            if (!$(field).val()) {
                $(field).addClass('is-invalid');
                $(field).after('<div class="validation-error">This field is required.</div>');
                isValid = false;
            }
        });
        
        // Validate email format
        const email = $('input[name="email"]').val();
        if (email && !isValidEmail(email)) {
            $('input[name="email"]').addClass('is-invalid');
            $('input[name="email"]').after('<div class="validation-error">Please enter a valid email address.</div>');
            isValid = false;
        }
        
        // Validate URLs if provided
        const urlFields = ['input[name="website"]'];
        urlFields.forEach(function(field) {
            const value = $(field).val();
            if (value && !isValidUrl(value)) {
                $(field).addClass('is-invalid');
                $(field).after('<div class="validation-error">Please enter a valid URL.</div>');
                isValid = false;
            }
        });
        
        // Validate logo file size (max 5MB)
        const logoInput = document.getElementById('logo-input');
        if (logoInput.files[0]) {
            const fileSize = logoInput.files[0].size / 1024 / 1024; // in MB
            if (fileSize > 5) {
                $(logoInput).addClass('is-invalid');
                $('#logo-preview').after('<div class="validation-error">Logo file size must be less than 5MB.</div>');
                isValid = false;
            }
        }
        
        if (!isValid) {
            e.preventDefault();
            // Scroll to first error
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 100
            }, 500);
            return false;
        }
        
        // Show loading state
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.prop('disabled', true).addClass('btn-loading').text('Saving...');
        
        // Re-enable button after 3 seconds (in case of issues)
        setTimeout(function() {
            submitBtn.prop('disabled', false).removeClass('btn-loading').html(originalText);
        }, 3000);
    });
    
    // Email validation helper
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    // URL validation helper
    function isValidUrl(string) {
        try {
            new URL(string);
            return true;
        } catch (_) {
            return false;
        }
    }
});

// Logo preview function
function previewLogo(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const preview = document.getElementById('logo-preview');
            const existingImg = preview.querySelector('img');
            const placeholder = preview.querySelector('.logo-placeholder');
            
            if (existingImg) {
                existingImg.src = e.target.result;
            } else {
                if (placeholder) {
                    placeholder.style.display = 'none';
                }
                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = 'Agency Logo';
                img.id = 'logo-image';
                preview.appendChild(img);
            }
            
            preview.classList.add('has-image');
            
            // Update preview logo
            updatePreviewLogo(e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

// Remove logo function
function removeLogo() {
    const logoInput = document.getElementById('logo-input');
    const logoPreview = document.getElementById('logo-preview');
    const existingImg = logoPreview.querySelector('img');
    const placeholder = logoPreview.querySelector('.logo-placeholder');
    
    logoInput.value = '';
    
    if (existingImg) {
        existingImg.remove();
    }
    
    if (placeholder) {
        placeholder.style.display = 'block';
    } else {
        const newPlaceholder = document.createElement('div');
        newPlaceholder.className = 'logo-placeholder';
        newPlaceholder.innerHTML = '<i class="fe fe-briefcase"></i><small>Click to upload</small>';
        logoPreview.appendChild(newPlaceholder);
    }
    
    logoPreview.classList.remove('has-image');
    
    // Reset preview logo to icon
    updatePreviewLogo(null);
}

// Update preview logo function
function updatePreviewLogo(logoUrl) {
    const previewLogoContainer = document.getElementById('preview-logo-container');
    const existingLogo = previewLogoContainer.querySelector('#preview-logo');
    const existingIcon = previewLogoContainer.querySelector('#preview-icon');
    
    if (logoUrl) {
        // Show logo
        if (existingLogo) {
            existingLogo.src = logoUrl;
        } else {
            const img = document.createElement('img');
            img.src = logoUrl;
            img.alt = 'Agency Logo';
            img.className = 'preview-logo';
            img.id = 'preview-logo';
            previewLogoContainer.appendChild(img);
        }
        
        if (existingIcon) {
            existingIcon.style.display = 'none';
        }
    } else {
        // Show icon
        if (existingLogo) {
            existingLogo.remove();
        }
        
        if (existingIcon) {
            existingIcon.style.display = 'block';
        } else {
            const iconDiv = document.createElement('div');
            iconDiv.className = 'preview-icon';
            iconDiv.id = 'preview-icon';
            iconDiv.innerHTML = '<i class="fe fe-briefcase"></i>';
            previewLogoContainer.appendChild(iconDiv);
        }
    }
}
 
// Delete agency function
{% if agency.pk %}
function deleteAgency(agencyId) {
    Swal.fire({
        title: 'Delete Agency?',
        text: 'This action cannot be undone. All agency data will be permanently deleted.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Deleting...',
                text: 'Please wait while we delete the agency.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.ajax({
                url: '{% url "agencies:agency_delete" agency.id %}',
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Agency has been successfully deleted.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = '{% url "agencies:agency_list" %}';
                    });
                },
                error: function(xhr) {
                    let errorMessage = 'Delete failed. Please try again.';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    Swal.fire({
                        title: 'Error!',
                        text: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                }
            });
        }
    });
}
{% endif %}
</script>
{% endblock extra_js %}