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

{% block title %}Advertisers - Adtlas{% endblock %}

{% block extra_css %}
<!-- INTERNAL Data table css -->
<link href="{% static 'plugins/datatable/css/dataTables.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/responsive.bootstrap5.css' %}" rel="stylesheet" />
<link href="{% static 'plugins/datatable/css/buttons.bootstrap5.min.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">Advertisers</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Advertisers</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 Management</h3>
                <div class="card-options">
                    <a href="{% url 'advertisers:advertiser_create' %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> Add New Advertiser
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="advertisers-table">
                        <thead>
                            <tr>
                                <th class="wd-20p border-bottom-0">Advertiser</th>
                                <th class="wd-15p border-bottom-0">Contact</th>
                                <th class="wd-15p border-bottom-0">Industry</th>
                                <th class="wd-10p border-bottom-0">Campaigns</th>
                                <th class="wd-10p border-bottom-0">Status</th>
                                <th class="wd-15p border-bottom-0">Created</th>
                                <th class="wd-15p border-bottom-0">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for advertiser in advertisers %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="me-3">
                                            {% if advertiser.logo %}
                                                <span class="avatar avatar-md brround" style="background-image: url({{ advertiser.logo.url }})"></span>
                                            {% else %}
                                                <span class="avatar avatar-md brround bg-primary">{{ advertiser.name|first|upper }}</span>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ advertiser.name }}</h6>
                                            <small class="text-muted">{{ advertiser.company_name|default:"N/A" }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        {% if advertiser.email %}
                                            <div><i class="fa fa-envelope me-2"></i>{{ advertiser.email }}</div>
                                        {% endif %}
                                        {% if advertiser.phone %}
                                            <div><i class="fa fa-phone me-2"></i>{{ advertiser.phone }}</div>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    {% if advertiser.industry %}
                                        <span class="badge bg-info">{{ advertiser.get_industry_display }}</span>
                                    {% else %}
                                        <span class="text-muted">Not specified</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-secondary">{{ advertiser.campaigns_count|default:0 }}</span>
                                </td>
                                <td>
                                    {% if advertiser.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-danger">Inactive</span>
                                    {% endif %}
                                </td>
                                <td>{{ advertiser.created_at|date:"M d, Y" }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'advertisers:advertiser_detail' advertiser.pk %}" class="btn btn-sm btn-info" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'advertisers:advertiser_update' advertiser.pk %}" class="btn btn-sm btn-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        <a href="{% url 'campaigns:campaign_list' %}?advertiser={{ advertiser.pk }}" class="btn btn-sm btn-primary" title="View Campaigns">
                                            <i class="fa fa-bullhorn"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-danger" title="Delete" onclick="deleteAdvertiser({{ advertiser.pk }})">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="7" class="text-center">No advertisers found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - Statistics -->
<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Advertisers</h6>
                        <h2 class="mb-0 number-font">{{ total_advertisers|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-users fa-3x text-primary"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-secondary"><i class="fe fe-arrow-up-circle text-secondary"></i> 5.2%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Active Advertisers</h6>
                        <h2 class="mb-0 number-font">{{ active_advertisers|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-check-circle fa-3x text-success"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-green"><i class="fe fe-arrow-up-circle text-green"></i> 3.1%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Campaigns</h6>
                        <h2 class="mb-0 number-font">{{ total_campaigns|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-bullhorn fa-3x text-warning"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-warning"><i class="fe fe-arrow-up-circle text-warning"></i> 8.7%</span> last month</span>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6">
        <div class="card">
            <div class="card-body">
                <div class="d-flex">
                    <div class="mt-2">
                        <h6 class="">Total Revenue</h6>
                        <h2 class="mb-0 number-font">${{ total_revenue|default:0 }}</h2>
                    </div>
                    <div class="ms-auto">
                        <div class="chart-wrapper mt-1">
                            <i class="fa fa-dollar-sign fa-3x text-info"></i>
                        </div>
                    </div>
                </div>
                <span class="text-muted fs-12"><span class="text-info"><i class="fe fe-arrow-up-circle text-info"></i> 12.3%</span> last month</span>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->
{% endblock %}

{% block extra_js %}
<!-- INTERNAL Data tables js-->
<script src="{% static 'plugins/datatable/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.bootstrap5.js' %}"></script>
<script src="{% static 'plugins/datatable/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.bootstrap5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/jszip.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatable/js/buttons.print.min.js' %}"></script>

<!-- Sweet Alert -->
<script src="{% static 'plugins/sweet-alert/sweetalert.min.js' %}"></script>

<script>
$(document).ready(function() {
    $('#advertisers-table').DataTable({
        "responsive": true,
        "pageLength": 25,
        "order": [[ 5, "desc" ]],
        "dom": 'Bfrtip',
        "buttons": [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        "columnDefs": [
            { "orderable": false, "targets": 6 }
        ]
    });
});

function deleteAdvertiser(advertiserId) {
    swal({
        title: "Are you sure?",
        text: "This will also delete all associated campaigns and data!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel"
    }, function(isConfirm) {
        if (isConfirm) {
            // Create a form and submit it
            var form = document.createElement('form');
            form.method = 'POST';
            form.action = '/advertisers/' + advertiserId + '/delete/';
            
            var csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrfmiddlewaretoken';
            csrfToken.value = '{{ csrf_token }}';
            form.appendChild(csrfToken);
            
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>
{% endblock %}