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

{% load static %} 

{% block title %} Add Advertiser {% endblock %}

{% block extra_css %}
<style>
    .form-label.required::after {
        content: " *";
        color: #dc3545;
    }
    .file-preview {
        margin-top: 10px;
        max-width: 200px;
    }
    .file-preview img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        border: 1px solid #dee2e6;
    }
    .invalid-feedback {
        display: block;
    }
</style>
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Add Brand </h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Brands</a></li>
            <li class="breadcrumb-item active" aria-current="page">Add</li>
        </ol>
    </div>
</div>
{% endblock %}

{% block content %}   
<div class="row">
    <div class="col-12 col-sm-12">
        <form method="post" action="{% url 'agencies:add_advertiser' %}" enctype="multipart/form-data" novalidate>
            {% csrf_token %} 
            
            <!-- Display form errors if any -->
            {% if form.non_field_errors %}
                <div class="alert alert-danger" role="alert">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
            
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Brand Information</h3>
                </div>
                <div class="card-body pb-2">
                    <div class="row row-sm">
                        <!-- Brand Name Field -->
                        <div class="col-lg-6">
                            <label class="form-label required">Brand Name</label>
                            <input 
                                class="form-control mb-4 {% if form.name.errors %}is-invalid{% endif %}" 
                                placeholder="Enter brand name (max 255 characters)" 
                                name="name" 
                                type="text" 
                                maxlength="255"
                                value="{{ form.name.value|default:'' }}"
                                required
                            >
                            {% if form.name.errors %}
                                <div class="invalid-feedback">
                                    {{ form.name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Brand Name Field -->
                        <div class="col-lg-6"> 
                            <!-- Adveriser Agency -->
                            <div class="col-lg">
                                <label class="form-label">Agency</label> 
                                <select class="form-control select2-show-search form-select mb-4" name="agency" id="agency" data-placeholder="Choose one">
                                {% for agency in agencies %}
                                    <option value="{{ agency.id }}" {% if agency.name == "None" %}selected{% endif %}>
                                    {{ agency.name }}
                                    </option>
                                {% endfor %}
                                </select>  
                            </div> 
                            {% if form.name.errors %}
                                <div class="invalid-feedback">
                                    {{ form.name.errors.0 }}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Category Field -->
                        <div class="col-lg-6">
                            <label class="form-label required">Category</label>
                            <select 
                                class="form-control select2-show-search form-select mb-4 {% if form.category.errors %}is-invalid{% endif %}" 
                                name="category" 
                                data-placeholder="Choose category"
                                required
                            >
                                <option value="">Select Category</option>
                                <option value="technology" {% if form.category.value == 'technology' %}selected{% endif %}>Technology</option>
                                <option value="fashion" {% if form.category.value == 'fashion' %}selected{% endif %}>Fashion</option>
                                <option value="food_beverage" {% if form.category.value == 'food_beverage' %}selected{% endif %}>Food & Beverage</option>
                                <option value="automotive" {% if form.category.value == 'automotive' %}selected{% endif %}>Automotive</option>
                                <option value="healthcare" {% if form.category.value == 'healthcare' %}selected{% endif %}>Healthcare</option>
                                <option value="finance" {% if form.category.value == 'finance' %}selected{% endif %}>Finance</option>
                                <option value="entertainment" {% if form.category.value == 'entertainment' %}selected{% endif %}>Entertainment</option>
                                <option value="retail" {% if form.category.value == 'retail' %}selected{% endif %}>Retail</option>
                                <option value="travel" {% if form.category.value == 'travel' %}selected{% endif %}>Travel</option>
                                <option value="education" {% if form.category.value == 'education' %}selected{% endif %}>Education</option>
                                <option value="real_estate" {% if form.category.value == 'real_estate' %}selected{% endif %}>Real Estate</option>
                                <option value="other" {% if form.category.value == 'other' %}selected{% endif %}>Other</option>
                            </select>
                            {% if form.category.errors %}
                                <div class="invalid-feedback">
                                    {{ form.category.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Status Field -->
                        <div class="col-lg-6">
                            <label class="form-label required">Status</label>
                            <select 
                                class="form-control select2-show-search form-select mb-4 {% if form.status.errors %}is-invalid{% endif %}" 
                                name="status" 
                                data-placeholder="Choose status"
                                required
                            >
                                <option value="active" {% if form.status.value == 'active' or not form.status.value %}selected{% endif %}>Active</option>
                                <option value="inactive" {% if form.status.value == 'inactive' %}selected{% endif %}>Inactive</option>
                                <option value="pending" {% if form.status.value == 'pending' %}selected{% endif %}>Pending</option>
                                <option value="suspended" {% if form.status.value == 'suspended' %}selected{% endif %}>Suspended</option>
                                <option value="archived" {% if form.status.value == 'archived' %}selected{% endif %}>Archived</option>
                            </select>
                            {% if form.status.errors %}
                                <div class="invalid-feedback">
                                    {{ form.status.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Featured Brand Field -->
                        <div class="col-lg-6">
                            <label class="form-label">Featured Brand</label>
                            <div class="form-check mt-2 mb-4">
                                <input 
                                    class="form-check-input" 
                                    type="checkbox" 
                                    name="is_featured" 
                                    id="is_featured"
                                    {% if form.is_featured.value %}checked{% endif %}
                                >
                                <label class="form-check-label" for="is_featured">
                                    Mark as featured brand
                                </label>
                            </div>
                            {% if form.is_featured.errors %}
                                <div class="invalid-feedback">
                                    {{ form.is_featured.errors.0 }}
                                </div>
                            {% endif %}
                        </div>
                        
                        <!-- Description Field -->
                        <div class="col-md-12">
                            <label class="form-label">Description (Optional)</label> 
                            <textarea 
                                name="description" 
                                class="form-control {% if form.description.errors %}is-invalid{% endif %}" 
                                rows="4" 
                                maxlength="1000"
                                placeholder="Brief description of the brand (max 1000 characters)"
                                spellcheck="false" 
                                data-gramm="false"
                            >{{ form.description.value|default:'' }}</textarea>
                            <small class="form-text text-muted">
                                <span id="desc-count">0</span>/1000 characters
                            </small>
                            {% if form.description.errors %}
                                <div class="invalid-feedback">
                                    {{ form.description.errors.0 }}
                                </div>
                            {% endif %}
                        </div> 
                    </div> 
                </div>
            </div> 
            
            <!-- Logo Upload Section -->
            <div class="card"> 
                <div class="card-header">
                    <h3 class="card-title">Brand Logo Upload</h3>
                    <small class="text-muted">Supported formats: JPG, JPEG, PNG, SVG, WebP</small>
                </div>
                <div class="card-body"> 
                    <div class="input-group mb-3 file-browser">
                        <input 
                            type="text" 
                            class="form-control browse-file" 
                            placeholder="Choose logo file" 
                            readonly
                        >
                        <label class="input-group-text btn btn-primary">
                            Browse 
                            <input 
                                id="logoFile" 
                                type="file" 
                                class="file-browserinput" 
                                name="logo" 
                                style="display: none;" 
                                accept=".jpg,.jpeg,.png,.svg,.webp"
                            >
                        </label>
                    </div>
                    
                    <!-- File Preview -->
                    <div id="file-preview" class="file-preview" style="display: none;">
                        <img id="preview-image" src="#" alt="Logo Preview">
                        <p><small class="text-muted">Logo Preview</small></p>
                    </div>
                    
                    {% if form.logo.errors %}
                        <div class="alert alert-danger">
                            {{ form.logo.errors.0 }}
                        </div>
                    {% endif %}
                    
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary btn-lg px-4" name="button">
                                <i class="fe fe-save me-2"></i>Create Brand
                            </button>
                        </div>
                        <div class="col-md-6 text-end">
                            <a href="{% url 'agencies:views_advertiser' %}" class="btn btn-secondary btn-lg px-4">
                                <i class="fe fe-times me-2"></i>Cancel
                            </a>
                        </div>
                    </div>
                </div> 
            </div> 
        </form> 
    </div> 
</div>
{% endblock content %}  

{% block extra_js %}
<script type="text/javascript">
    $(document).ready(function() {
        // Handle file selection and preview
        $('#logoFile').change(function(){
            const file = this.files[0];
            const fileInput = $('.browse-file');
            const preview = $('#file-preview');
            const previewImg = $('#preview-image');
            
            if (file) {
                // Display filename
                fileInput.val(file.name);
                
                // Show preview for image files
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.attr('src', e.target.result);
                        preview.show();
                    }
                    reader.readAsDataURL(file);
                } else {
                    preview.hide();
                }
                
                // Validate file size (optional - adjust as needed)
                const maxSize = 5 * 1024 * 1024; // 5MB
                if (file.size > maxSize) {
                    alert('File size should not exceed 5MB');
                    $(this).val('');
                    fileInput.val('');
                    preview.hide();
                }
            } else {
                fileInput.val('');
                preview.hide();
            }
        });
        
        // Character counter for description
        const descTextarea = $('textarea[name="description"]');
        const descCounter = $('#desc-count');
        
        function updateDescCounter() {
            const count = descTextarea.val().length;
            descCounter.text(count);
            
            if (count > 900) {
                descCounter.parent().removeClass('text-muted').addClass('text-warning');
            } else if (count === 1000) {
                descCounter.parent().removeClass('text-muted text-warning').addClass('text-danger');
            } else {
                descCounter.parent().removeClass('text-warning text-danger').addClass('text-muted');
            }
        }
        
        descTextarea.on('input keyup', updateDescCounter);
        updateDescCounter(); // Initial count
        
        // Form validation
        $('form').on('submit', function(e) {
            let isValid = true;
            
            // Check required fields
            $('input[required], select[required]').each(function() {
                if (!$(this).val().trim()) {
                    $(this).addClass('is-invalid');
                    isValid = false;
                } else {
                    $(this).removeClass('is-invalid');
                }
            });
            
            if (!isValid) {
                e.preventDefault();
                alert('Please fill in all required fields.');
            }
        });
        
        // Remove invalid class on input
        $('input, select, textarea').on('input change', function() {
            $(this).removeClass('is-invalid');
        });
    });
</script>
{% endblock extra_js %}