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

{% block title %}{{ advertiser.name }} - Advertiser Details - 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" />

<!-- INTERNAL Apexchart css -->
<link href="{% static 'plugins/apexcharts/apexcharts.css' %}" rel="stylesheet" />

<style>
.info-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.info-card h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
}
.logo-display {
    max-width: 150px;
    max-height: 75px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 10px;
    background: white;
}
.status-badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}
.metric-card {
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.color-preview {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    display: inline-block;
    margin-right: 10px;
}
</style>
{% endblock %}

{% block content %}
<!-- PAGE-HEADER -->
<div class="page-header">
    <h1 class="page-title">{{ advertiser.name }}</h1>
    <div>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="{% url 'advertisers:advertiser_list' %}">Advertisers</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ advertiser.name }}</li>
        </ol>
    </div>
</div>
<!-- PAGE-HEADER END -->

<!-- ROW-1 - Advertiser Overview -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Advertiser Information</h3>
                <div class="card-options">
                    <a href="{% url 'advertisers:advertiser_edit' advertiser.id %}" class="btn btn-primary btn-sm">
                        <i class="fa fa-edit"></i> Edit
                    </a>
                    <button type="button" class="btn btn-info btn-sm" onclick="sendReport()">
                        <i class="fa fa-file-pdf"></i> Send Report
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Basic Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Company Name:</strong></td>
                                    <td>{{ advertiser.name }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Industry:</strong></td>
                                    <td>{{ advertiser.get_industry_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Status:</strong></td>
                                    <td>
                                        <span class="badge status-badge {% if advertiser.status == 'active' %}bg-success{% elif advertiser.status == 'inactive' %}bg-secondary{% elif advertiser.status == 'pending' %}bg-warning{% else %}bg-danger{% endif %}">
                                            {{ advertiser.get_status_display }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Website:</strong></td>
                                    <td>
                                        {% if advertiser.website %}
                                        <a href="{{ advertiser.website }}" target="_blank">{{ advertiser.website }}</a>
                                        {% else %}-{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Created:</strong></td>
                                    <td>{{ advertiser.created_at|date:"M d, Y" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Contact Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Contact Name:</strong></td>
                                    <td>{{ advertiser.contact_name|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Title:</strong></td>
                                    <td>{{ advertiser.contact_title|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Email:</strong></td>
                                    <td>
                                        {% if advertiser.email %}
                                        <a href="mailto:{{ advertiser.email }}">{{ advertiser.email }}</a>
                                        {% else %}-{% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Phone:</strong></td>
                                    <td>{{ advertiser.phone|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Alt Phone:</strong></td>
                                    <td>{{ advertiser.alt_phone|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                
                {% if advertiser.description %}
                <div class="info-card">
                    <h6>Description</h6>
                    <p>{{ advertiser.description }}</p>
                </div>
                {% endif %}
                
                <div class="row">
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Address</h6>
                            {% if advertiser.address %}
                            <address>
                                {{ advertiser.address }}<br>
                                {% if advertiser.city %}{{ advertiser.city }}, {% endif %}{{ advertiser.state }} {{ advertiser.zip_code }}<br>
                                {{ advertiser.get_country_display|default:advertiser.country }}
                            </address>
                            {% else %}
                            <p class="text-muted">No address information available</p>
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="info-card">
                            <h6>Business Information</h6>
                            <table class="table table-borderless table-sm">
                                <tr>
                                    <td><strong>Company Size:</strong></td>
                                    <td>{{ advertiser.get_company_size_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Revenue Range:</strong></td>
                                    <td>{{ advertiser.get_revenue_range_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Payment Terms:</strong></td>
                                    <td>{{ advertiser.get_payment_terms_display|default:'-' }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Tax ID:</strong></td>
                                    <td>{{ advertiser.tax_id|default:'-' }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <!-- Logo and Branding -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Logo & Branding</h3>
            </div>
            <div class="card-body text-center">
                {% if advertiser.logo %}
                <img src="{{ advertiser.logo.url }}" alt="{{ advertiser.name }} Logo" class="logo-display mb-3">
                {% else %}
                <div class="text-muted mb-3">
                    <i class="fa fa-image fa-3x"></i>
                    <p>No logo uploaded</p>
                </div>
                {% endif %}
                
                {% if advertiser.primary_color or advertiser.secondary_color %}
                <div class="mt-3">
                    <h6>Brand Colors</h6>
                    {% if advertiser.primary_color %}
                    <div class="mb-2">
                        <span class="color-preview" style="background-color: {{ advertiser.primary_color }}"></span>
                        <small>Primary: {{ advertiser.primary_color }}</small>
                    </div>
                    {% endif %}
                    {% if advertiser.secondary_color %}
                    <div class="mb-2">
                        <span class="color-preview" style="background-color: {{ advertiser.secondary_color }}"></span>
                        <small>Secondary: {{ advertiser.secondary_color }}</small>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
                
                {% if advertiser.brand_guidelines_url %}
                <div class="mt-3">
                    <a href="{{ advertiser.brand_guidelines_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
                        <i class="fa fa-external-link-alt"></i> Brand Guidelines
                    </a>
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Quick Stats -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Quick Stats</h3>
            </div>
            <div class="card-body">
                <div class="metric-card mb-3">
                    <h4 class="text-primary">{{ stats.total_campaigns|default:0 }}</h4>
                    <p class="mb-0">Total Campaigns</p>
                </div>
                <div class="metric-card mb-3">
                    <h4 class="text-success">{{ stats.active_campaigns|default:0 }}</h4>
                    <p class="mb-0">Active Campaigns</p>
                </div>
                <div class="metric-card mb-3">
                    <h4 class="text-info">${{ stats.total_spent|default:0 }}</h4>
                    <p class="mb-0">Total Spent</p>
                </div>
                <div class="metric-card">
                    <h4 class="text-warning">{{ stats.total_impressions|default:0 }}</h4>
                    <p class="mb-0">Total Impressions</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-1 END -->

<!-- ROW-2 - Performance Charts -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Performance Overview</h3>
                <div class="card-options">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-outline-primary active" data-period="30">30 Days</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="90">90 Days</button>
                        <button type="button" class="btn btn-sm btn-outline-primary" data-period="365">1 Year</button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div id="performance-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Campaign Distribution</h3>
            </div>
            <div class="card-body">
                <div id="campaign-distribution-chart"></div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-2 END -->

<!-- ROW-3 - Campaigns Table -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Campaigns</h3>
                <div class="card-options">
                    <a href="{% url 'campaigns:campaign_create' %}?advertiser={{ advertiser.id }}" class="btn btn-primary btn-sm">
                        <i class="fa fa-plus"></i> New Campaign
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="campaigns-table">
                        <thead>
                            <tr>
                                <th>Campaign Name</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Budget</th>
                                <th>Spent</th>
                                <th>Impressions</th>
                                <th>CTR</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for campaign in campaigns %}
                            <tr>
                                <td>
                                    <a href="{% url 'campaigns:campaign_detail' campaign.id %}">{{ campaign.name }}</a>
                                </td>
                                <td>{{ campaign.get_campaign_type_display }}</td>
                                <td>
                                    <span class="badge {% if campaign.status == 'active' %}bg-success{% elif campaign.status == 'paused' %}bg-warning{% elif campaign.status == 'completed' %}bg-info{% else %}bg-secondary{% endif %}">
                                        {{ campaign.get_status_display }}
                                    </span>
                                </td>
                                <td>{{ campaign.start_date|date:"M d, Y" }}</td>
                                <td>{{ campaign.end_date|date:"M d, Y"|default:'-' }}</td>
                                <td>${{ campaign.budget|default:'-' }}</td>
                                <td>${{ campaign.spent|default:0 }}</td>
                                <td>{{ campaign.impressions|default:0 }}</td>
                                <td>{{ campaign.ctr|default:0 }}%</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'campaigns:campaign_detail' campaign.id %}" class="btn btn-sm btn-outline-primary" title="View">
                                            <i class="fa fa-eye"></i>
                                        </a>
                                        <a href="{% url 'campaigns:campaign_edit' campaign.id %}" class="btn btn-sm btn-outline-warning" title="Edit">
                                            <i class="fa fa-edit"></i>
                                        </a>
                                        {% if campaign.status == 'active' %}
                                        <button class="btn btn-sm btn-outline-secondary" onclick="pauseCampaign({{ campaign.id }})" title="Pause">
                                            <i class="fa fa-pause"></i>
                                        </button>
                                        {% elif campaign.status == 'paused' %}
                                        <button class="btn btn-sm btn-outline-success" onclick="activateCampaign({{ campaign.id }})" title="Activate">
                                            <i class="fa fa-play"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="10" class="text-center">No campaigns found for this advertiser</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-3 END -->

<!-- ROW-4 - Activity Log -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Recent Activity</h3>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom" id="activity-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Action</th>
                                <th>Description</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for activity in recent_activities %}
                            <tr>
                                <td>{{ activity.timestamp|date:"M d, Y H:i" }}</td>
                                <td>
                                    <span class="badge bg-primary">{{ activity.action }}</span>
                                </td>
                                <td>{{ activity.description }}</td>
                                <td>{{ activity.user.get_full_name|default:activity.user.username }}</td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center">No recent activity</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-4 END -->

{% if advertiser.notes %}
<!-- ROW-5 - Notes -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Notes</h3>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    {{ advertiser.notes|linebreaks }}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ROW-5 END -->
{% endif %}
{% 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>

<!-- INTERNAL Apexchart js -->
<script src="{% static 'js/apexcharts.js' %}"></script>

<script>
$(document).ready(function() {
    // Initialize DataTables
    $('#campaigns-table').DataTable({
        "pageLength": 10,
        "order": [[ 3, "desc" ]]
    });
    
    $('#activity-table').DataTable({
        "pageLength": 10,
        "order": [[ 0, "desc" ]],
        "searching": false,
        "info": false,
        "lengthChange": false
    });
    
    // Initialize charts
    initializeCharts();
    
    // Period selector
    $('.btn-group button').on('click', function() {
        $('.btn-group button').removeClass('active');
        $(this).addClass('active');
        updatePerformanceChart($(this).data('period'));
    });
});

function initializeCharts() {
    // Performance chart
    var performanceOptions = {
        chart: {
            height: 350,
            type: 'area',
            toolbar: {
                show: false
            }
        },
        series: [{
            name: 'Impressions',
            data: {{ chart_data.impressions|default:"[]" }}
        }, {
            name: 'Clicks',
            data: {{ chart_data.clicks|default:"[]" }}
        }, {
            name: 'Spend',
            data: {{ chart_data.spend|default:"[]" }}
        }],
        xaxis: {
            categories: {{ chart_data.dates|default:"[]" }}
        },
        colors: ['#6259ca', '#17a2b8', '#28a745'],
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.7,
                opacityTo: 0.3
            }
        }
    };
    
    var performanceChart = new ApexCharts(document.querySelector("#performance-chart"), performanceOptions);
    performanceChart.render();
    
    // Campaign distribution chart
    var distributionOptions = {
        chart: {
            type: 'donut',
            height: 300
        },
        series: {{ chart_data.campaign_distribution_values|default:"[]" }},
        labels: {{ chart_data.campaign_distribution_labels|default:"[]" }},
        colors: ['#6259ca', '#17a2b8', '#28a745', '#ffc107', '#dc3545']
    };
    
    var distributionChart = new ApexCharts(document.querySelector("#campaign-distribution-chart"), distributionOptions);
    distributionChart.render();
}

function updatePerformanceChart(period) {
    $.ajax({
        url: '/advertisers/{{ advertiser.id }}/chart-data/',
        data: {
            'period': period
        },
        success: function(data) {
            // Update chart with new data
            // Implementation depends on your backend API
        }
    });
}

function pauseCampaign(campaignId) {
    if (confirm('Are you sure you want to pause this campaign?')) {
        $.ajax({
            url: '/campaigns/' + campaignId + '/pause/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to pause campaign: ' + data.error);
                }
            }
        });
    }
}

function activateCampaign(campaignId) {
    if (confirm('Are you sure you want to activate this campaign?')) {
        $.ajax({
            url: '/campaigns/' + campaignId + '/activate/',
            method: 'POST',
            data: {
                'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
            },
            success: function(data) {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Failed to activate campaign: ' + data.error);
                }
            }
        });
    }
}

function sendReport() {
    $.ajax({
        url: '/advertisers/{{ advertiser.id }}/send-report/',
        method: 'POST',
        data: {
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val()
        },
        success: function(data) {
            if (data.success) {
                alert('Report sent successfully!');
            } else {
                alert('Failed to send report: ' + data.error);
            }
        },
        error: function() {
            alert('Failed to send report');
        }
    });
}
</script>
{% endblock %}