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

{% load static %} 

{% block title %} Edit Advertiser {% endblock %}

{% block extra_css %}
{% endblock extra_css %}

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title">Edit Advertiser</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 'advertiser_list' %}">Advertisers</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit</li>
        </ol>
    </div>
</div>
{% endblock %}
 

{% block content %}   
<div class="row">
	<div class="col-12 col-sm-12">
		<form method="post" action="{% url 'update_advertiser' id_brand=brand.id_brand %}" enctype="multipart/form-data">
			{% csrf_token %}


		<div class="card">
			<div class="card-header bg-light">
				<h3 class="card-title mb-0">
					<i class="fe fe-edit-2 me-2"></i>Advertiser Information
				</h3>
			</div>
			<div class="card-body">
				<div class="row">
					<div class="col-lg-6 mb-3">
						<label class="form-label fw-semibold">
							<i class="fe fe-user me-1"></i>Advertiser Name
						</label>
						<input class="form-control" placeholder="Enter advertiser name" name="advertiser_name" value="{{ brand.brand_name }}" type="text" required>
					</div>
					<div class="col-lg-6 mb-3">
						<label class="form-label fw-semibold">
							<i class="fe fe-tag me-1"></i>Category
						</label>
						<select class="form-control select2-show-search form-select" name="category" data-placeholder="Choose category" required>
							<option value="technology" {% if brand.category == 'technology' %}selected{% endif %}>Technology</option>
							<option value="fashion" {% if brand.category == 'fashion' %}selected{% endif %}>Fashion</option>
							<option value="food_beverage" {% if brand.category == 'food_beverage' %}selected{% endif %}>Food & Beverage</option>
							<option value="automotive" {% if brand.category == 'automotive' %}selected{% endif %}>Automotive</option>
							<option value="healthcare" {% if brand.category == 'healthcare' %}selected{% endif %}>Healthcare</option>
							<option value="finance" {% if brand.category == 'finance' %}selected{% endif %}>Finance</option>
							<option value="entertainment" {% if brand.category == 'entertainment' %}selected{% endif %}>Entertainment</option>
							<option value="retail" {% if brand.category == 'retail' %}selected{% endif %}>Retail</option>
							<option value="travel" {% if brand.category == 'travel' %}selected{% endif %}>Travel</option>
							<option value="education" {% if brand.category == 'education' %}selected{% endif %}>Education</option>
							<option value="real_estate" {% if brand.category == 'real_estate' %}selected{% endif %}>Real Estate</option>
							<option value="other" {% if brand.category == 'other' %}selected{% endif %}>Other</option>
						</select>
					</div>
					<div class="col-lg-6 mb-3">
						<label class="form-label fw-semibold">
							<i class="fe fe-activity me-1"></i>Status
						</label>
						<select class="form-control select2-show-search form-select" name="active_0_1" data-placeholder="Choose status" required>
							<option value="1" {% if brand.status == '1' %}selected{% endif %}>Active</option>
							<option value="0" {% if brand.status == '0' %}selected{% endif %}>Inactive</option>
						</select>
					</div>
					<div class="col-12 mb-3">
						<label class="form-label fw-semibold">
							<i class="fe fe-file-text me-1"></i>Description (Optional)
						</label>
						<textarea name="advertiser_desc" class="form-control" rows="4" placeholder="Enter advertiser description" spellcheck="false">{{ brand.description }}</textarea>
					</div>
				</div>
			</div>
		</div>

			<div class="card">
				<div class="card-header bg-light">
					<h3 class="card-title mb-0">
						<i class="fe fe-image me-2"></i>Logo Upload
					</h3>
					<small class="text-muted">Supported formats: PNG, JPG, JPEG, SVG, WebP</small>
				</div>
				<div class="card-body">
					<div class="row">
						<div class="col-md-4">
							<div class="text-center">
								{% if brand.logo %}
									<img class="img-fluid rounded" style="max-width:150px; max-height:150px;" src="/{{ brand.logo }}" alt="Current Logo">
									<p class="text-muted mt-2">Current Logo</p>
								{% else %}
									<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width:150px; height:150px;">
										<i class="fe fe-image text-muted" style="font-size: 3rem;"></i>
									</div>
									<p class="text-muted mt-2">No Logo</p>
								{% endif %}
							</div>
						</div>
						<div class="col-md-8">
							<div class="input-group mb-3">
								<input type="text" class="form-control browse-file" placeholder="Choose new logo file" readonly>
								<label class="input-group-text btn btn-primary">
									<i class="fe fe-folder me-1"></i>Browse
									<input type="file" class="file-browserinput" name="advertiser_logo" style="display: none;" accept=".png,.jpg,.jpeg,.svg,.webp">
								</label>
							</div>
							<small class="text-muted">Upload a new logo to replace the current one</small>
						</div>
					</div>
				</div>
			</div>


			</div>


													<button type="submit" style="width:100px; text-align:center; right:0;" class="btn btn-primary" name="button">Submit</button>


		</form>


	</div><!-- COL END -->
</div> 
{% endblock content %}