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

{% load static %}

{% block title %}
    {% if brand.pk %} Edit Brand - {{ brand.name }}
    {% else %} Add Brand {% endif %}
{% endblock title %}

{% block extra_css %}
<link href="{% static 'plugins/select2/css/select2.min.css' %}" rel="stylesheet" />
<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); }
   }

    /* Brand Preview Styles */
    .brand-preview {
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        background: #f8f9fa;
        margin-top: 20px;
    }
    
    .brand-preview img {
        max-width: 200px;
        max-height: 200px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .logo-upload-container {
        position: relative;
        width: 100%;
        max-width: 120px;
        margin: 0 auto;
    }
    
    .logo-preview {
        width: 120px;
        height: 120px;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f8f9fa;
        margin: 0 auto;
    }
    
    .logo-preview:hover {
        border-color: #007bff;
        background: #e3f2fd;
    }
    
    .logo-preview img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: cover;
    }
    
    .logo-placeholder {
        text-align: center;
        color: #6c757d;
    }
    
    .logo-placeholder i {
        font-size: 2rem;
        margin-bottom: 10px;
        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;
    }
    
    .required-field::after {
        content: " *";
        color: #dc3545;
        font-weight: bold;
    }
    
    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 5px;
    }
    
    .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 5px;
        padding: 8px 12px;
        background: #f8d7da;
        border: 1px solid #f5c6cb;
        border-radius: 4px;
    }
    
    .success-message {
        color: #155724;
        font-size: 0.875rem;
        margin-top: 5px;
        padding: 8px 12px;
        background: #d4edda;
        border: 1px solid #c3e6cb;
        border-radius: 4px;
    }
    
    .preview-logo {
        max-width: 150px;
        max-height: 150px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .preview-icon {
        width: 150px;
        height: 150px;
        background: #f8f9fa;
        border: 2px dashed #dee2e6;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6c757d;
        font-size: 3rem;
        margin: 0 auto;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">{% if brand.pk %}Edit Brand{% else %}Add Brand{% 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>
            <li class="breadcrumb-item"><a href="{% url 'agencies:brand_list' %}">Brands</a></li>
            {% if brand.pk %}
                <li class="breadcrumb-item"><a href="{% url 'agencies:brand_detail' brand.id %}">{{ brand.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 %}
<!-- Error Messages -->
{% if errors %}
    <div class="row">
        <div class="col-12">
            {% for error in errors %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fe fe-alert-circle me-2"></i>
                    {{ error }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        </div>
    </div>
{% endif %}

<!-- Brand Form -->
<form method="post" id="brand-form" enctype="multipart/form-data" novalidate>
    {% csrf_token %}
    
    <!-- Basic Information Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Brand Information</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Left Column - Logo -->
                <div class="col-md-3">
                    <label class="form-label">Brand Logo</label>
                    <div class="logo-upload-container">
                        <div class="logo-preview" onclick="document.getElementById('logo-input').click()" id="logo-preview">
                            {% if brand.logo %}
                                <img src="{{ brand.logo.url }}" alt="Brand Logo" id="logo-image">
                            {% else %}
                                <div class="logo-placeholder">
                                    <i class="fe fe-tag"></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 brand logo (PNG, JPG, SVG, WebP recommended)</div>
                </div>
                
                <!-- Right Column - Basic Info -->
                <div class="col-md-9">
                    <!-- Brand Name -->
                    <div class="mb-3">
                        <label class="form-label required-field">Brand Name</label>
                        <input class="form-control" placeholder="Enter brand name" name="name" type="text" 
                               value="{{ brand.name|default:'' }}" required>
                        <div class="help-text">Official name of the brand</div>
                    </div>
                    
                    <div class="row">
                        <!-- Agency -->
                        <div class="col-md-6">
                            <label class="form-label required-field">Managing Agency</label>
                            <select class="form-control select2-show-search form-select" name="agency" 
                                    data-placeholder="Choose one" required>
                                <option value="">Select agency...</option>
                                {% for agency in agencies %}
                                    <option value="{{ agency.id }}" {% if brand.agency and brand.agency.id == agency.id %}selected{% endif %}>
                                        {{ agency.name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="help-text">Select the agency that manages this brand</div>
                        </div>
                        
                        <!-- Category -->
                        <div class="col-md-6">
                            <label class="form-label">Category</label>
                            <select class="form-control select2-show-search form-select" name="category" 
                                    data-placeholder="Choose one">
                                <option value="">Select category...</option>
                                {% for category_code, category_name in brand_categories %}
                                    <option value="{{ category_code }}" {% if brand.category == category_code %}selected{% endif %}>
                                        {{ category_name }}
                                    </option>
                                {% endfor %}
                            </select>
                            <div class="help-text">Industry category for this brand</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 brand..." 
                          name="description" rows="3">{{ brand.description|default:'' }}</textarea>
                <div class="help-text">Detailed description of the brand and its offerings</div>
            </div>
        </div>
    </div>
    
    <!-- Status & Settings Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Status & Settings</h3>
        </div>
        <div class="card-body">
            <div class="row">
                <!-- Status -->
                <div class="col-lg-6">
                    <label class="form-label">Status</label>
                    <select class="form-control select2-show-search form-select" name="status" 
                            data-placeholder="Choose one">
                        <option value="">Select status...</option>
                        {% for status_code, status_name in brand_statuses %}
                            <option value="{{ status_code }}" {% if brand.status == status_code %}selected{% endif %}>
                                {{ status_name }}
                            </option>
                        {% endfor %}
                    </select>
                    <div class="help-text">Current status of the brand</div>
                </div>
                
                <!-- Featured Status -->
                <div class="col-lg-6">
                    <div class="form-check mt-4">
                        <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured"
                               {% if brand.is_featured %}checked{% endif %}>
                        <label class="form-check-label" for="is_featured">
                            Featured Brand
                        </label>
                        <div class="help-text">Check this to feature this brand prominently</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Brand Preview Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Brand Preview</h3>
        </div>
        <div class="card-body">
            <div class="brand-preview" id="brand-preview">
                <div id="preview-logo-container">
                    {% if brand.logo %}
                        <img src="{{ brand.logo.url }}" alt="Brand Logo" class="preview-logo" id="preview-logo">
                    {% else %}
                        <div class="preview-icon" id="preview-icon">
                            <i class="fe fe-tag"></i>
                        </div>
                    {% endif %}
                </div>
                <h5 class="text-dark mb-2" id="preview-name">Brand Name</h5>
                <p class="text-muted mb-3" id="preview-agency">Managing Agency</p>
                <div class="d-flex justify-content-center flex-wrap">
                    <span class="badge bg-secondary" id="preview-category">Category</span>
                    <span class="badge bg-info ms-2" id="preview-status">Status</span>
                    <span class="badge bg-warning ms-2" id="preview-featured" style="display: none;">Featured</span>
                </div>
                <p class="text-muted mt-3 mb-0" id="preview-description">Brand 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 brand.pk %}Update Brand{% else %}Add Brand{% endif %}
    </button>
    
    {% if brand.pk %}
    <button type="button" class="btn btn-outline-danger ms-2" onclick="deleteBrand('{{ brand.id }}')" style="width:150px;">
        Delete Brand
    </button>
    {% endif %}
</form>
{% endblock content %}

{% block modals %}
{% if brand.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 brand "{{ brand.name }}"?</p>
                <p class="text-warning"><strong>This action cannot be undone and will also delete all associated campaigns and adspots.</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 Brand</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%',
        allowClear: true
    });
    
    // Real-time preview updates
    updatePreview();
    
    // Form validation
    $('#brand-form').on('submit', function(e) {
        const name = $('input[name="name"]').val().trim();
        const agency = $('select[name="agency"]').val();
        
        if (!name) {
            e.preventDefault();
            showError('name', 'Brand name is required');
            return;
        }
        
        if (!agency) {
            e.preventDefault();
            showError('agency', 'Agency selection is required');
            return;
        }
        
        // Show loading state
        $('#submit-btn').addClass('btn-loading').prop('disabled', true);
    });
    
    // Real-time preview updates
    $('input[name="name"]').on('input', updatePreview);
    $('select[name="agency"]').on('change', updatePreview);
    $('select[name="category"]').on('change', updatePreview);
    $('select[name="status"]').on('change', updatePreview);
    $('input[name="is_featured"]').on('change', updatePreview);
    $('textarea[name="description"]').on('input', updatePreview);
});

// Logo preview functionality
function previewLogo(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const logoPreview = document.getElementById('logo-preview');
            logoPreview.innerHTML = `<img src="${e.target.result}" alt="Brand Logo" id="logo-image">`;
            updatePreview();
        };
        reader.readAsDataURL(input.files[0]);
    }
}

function removeLogo() {
    const logoPreview = document.getElementById('logo-preview');
    logoPreview.innerHTML = `
        <div class="logo-placeholder">
            <i class="fe fe-tag"></i>
            <small>Click to upload</small>
        </div>
    `;
    document.getElementById('logo-input').value = '';
    updatePreview();
}

// Update preview function
function updatePreview() {
    const name = $('input[name="name"]').val() || 'Brand Name';
    const agencySelect = $('select[name="agency"] option:selected');
    const agency = agencySelect.text() || 'Managing Agency';
    const categorySelect = $('select[name="category"] option:selected');
    const category = categorySelect.text() || 'Category';
    const statusSelect = $('select[name="status"] option:selected');
    const status = statusSelect.text() || 'Status';
    const description = $('textarea[name="description"]').val() || 'Brand description will appear here...';
    const isFeatured = $('input[name="is_featured"]').is(':checked');
    
    // Update preview elements
    $('#preview-name').text(name);
    $('#preview-agency').text(agency);
    $('#preview-category').text(category);
    $('#preview-status').text(status);
    $('#preview-description').text(description);
    
    // Show/hide featured badge
    if (isFeatured) {
        $('#preview-featured').show();
    } else {
        $('#preview-featured').hide();
    }
    
    // Update logo preview
    const logoInput = document.getElementById('logo-input');
    const logoPreview = document.getElementById('logo-preview');
    const logoImage = logoPreview.querySelector('#logo-image');
    
    if (logoImage) {
        const previewLogoContainer = document.getElementById('preview-logo-container');
        const existingLogo = previewLogoContainer.querySelector('#preview-logo');
        const existingIcon = previewLogoContainer.querySelector('#preview-icon');
        
        if (existingLogo) {
            existingLogo.src = logoImage.src;
        } else {
            const img = document.createElement('img');
            img.src = logoImage.src;
            img.alt = 'Brand Logo';
            img.className = 'preview-logo';
            img.id = 'preview-logo';
            previewLogoContainer.appendChild(img);
        }
        
        if (existingIcon) {
            existingIcon.style.display = 'none';
        }
    } else {
        const previewLogoContainer = document.getElementById('preview-logo-container');
        const existingLogo = previewLogoContainer.querySelector('#preview-logo');
        const existingIcon = previewLogoContainer.querySelector('#preview-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-tag"></i>';
            previewLogoContainer.appendChild(iconDiv);
        }
    }
}

// Show error function
function showError(fieldId, message) {
    const field = document.getElementById(fieldId);
    field.classList.add('is-invalid');
    
    // Remove existing error message
    const existingError = field.parentNode.querySelector('.validation-error');
    if (existingError) {
        existingError.remove();
    }
    
    // Add new error message
    const errorDiv = document.createElement('div');
    errorDiv.className = 'validation-error';
    errorDiv.textContent = message;
    field.parentNode.appendChild(errorDiv);
    
    // Scroll to field
    field.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    // Remove error on input
    field.addEventListener('input', function() {
        field.classList.remove('is-invalid');
        if (errorDiv) {
            errorDiv.remove();
        }
    }, { once: true });
}

// Delete brand function
{% if brand.pk %}
function deleteBrand(brandId) {
    Swal.fire({
        title: 'Delete Brand?',
        text: 'This action cannot be undone. All brand 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 brand.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
            
            $.ajax({
                url: '{% url "agencies:brand_delete" brand.id %}',
                method: 'POST',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                },
                success: function(response) {
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Brand has been successfully deleted.',
                        icon: 'success',
                        timer: 2000,
                        showConfirmButton: false
                    }).then(() => {
                        window.location.href = '{% url "agencies:brand_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 %}