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

{% load static %} 

{% block title %} Edit Campaign {% endblock %}

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

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Edit Campaign </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);">Campaigns</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit</li>
        </ol>
    </div>
</div> 
{% endblock breadcrumb %}
 
{% block content %} 
{% if campaigns %}
<table class="table table-bordered text-nowrap mb-0">
    <thead class="border-top">
        <tr>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="name-search" onkeyup="search()" placeholder="Name.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="advertiser-search" onkeyup="search()" placeholder="Advertiser.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="product-search" onkeyup="search()" placeholder="Product.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="startday-search" onkeyup="search()" placeholder="Start day.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="endday-search" onkeyup="search()" placeholder="End day.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="target-search" onkeyup="search()" placeholder="Target Impressions.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="achievement-search" onkeyup="search()" placeholder="Achievement Impressions.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="total-ads-search" onkeyup="search()" placeholder="Total Ads.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                <input type="text" id="status-search" onkeyup="search()" placeholder="Status.." class="table-search-filters form-control">
            </th>
            <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">
                Action
            </th>
        </tr>  
    </thead>
    <tbody id="table">
        {% for campaign in campaigns %}
        <tr class="border-bottom">
            <td class="text-muted fs-13 fw-semibold text-center" width=10%>
                <div class="d-flex">
                    <div class="ms-2 mt-0 mt-sm-2 d-block">
                        <h6 class="mb-0 fs-14 fw-semibold"> {{ campaign.name }} {% if campaign.is_vast %} (VAST) {% endif %} <h6> 
                    </div>
                </div>
            </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> {{ campaign.id_brand.brand_name  }}</td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%>
                <div class="d-flex">
                    <div class="ms-2 mt-0 mt-sm-2 d-block">
                        <h6 class="mb-0 fs-14 fw-semibold">{{ campaign.product|default:""}}</h6>

                    </div>
                </div>
            </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> {{ campaign.start_day }} </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> {{ campaign.end_day }} </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> {{ campaign.volume }} </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> 
                {% if campaign.is_vast %}
                    {% for vast_result in vast_results %} 
                        {% if vast_result.id_campaign == campaign.id_campaign %}  
                            {{ vast_result.total_impressions }}
                        {% endif %}
                    {% endfor %}
                {% else %}
                    {% for no_vast_result in no_vast_results %} 
                        {% if no_vast_result.id_campaign == campaign.id_campaign %}  
                            {{ no_vast_result.total_impressions }}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%>
                {% if campaign.is_vast %}
                    {% for vast_result in  vast_results %} 
                        {% if vast_result.id_campaign == campaign.id_campaign %} 
                            {{ vast_result.total_ads }}
                        {% endif %}
                    {% endfor %}
                {% else %}
                    {% for no_vast_result in  no_vast_results %} 
                        {% if no_vast_result.id_campaign == campaign.id_campaign %} 
                            {{ no_vast_result.total_ads }}
                        {% endif %}
                    {% endfor %}
                {% endif %} 
            </td>
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> {{ campaign.status }} </td>  
            <td class="text-muted fs-15 fw-semibold text-center" width=10%> 
                <form action="{% url 'campaigns:edit_campaign' id_campaign=campaign.id_campaign %}" method="post"> 
                    {% csrf_token %}
                    <button type="submit" name="edit_btn" value="edit" class="btn btn-primary btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="Edit">
                        <i>
                            <svg class="table-edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="13">
                                <path d="M0 0h24v24H0V0z" fill="none"/>
                                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM5.92 19H5v-.92l9.06-9.06.92.92L5.92 19zM20.71 5.63l-2.34-2.34c-.2-.2-.45-.29-.71-.29s-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41z"/>
                            </svg>
                        </i>
                    </button>
                </form>
                <a href="{% url 'campaigns:view_campaign' id_campaign=campaign.id_campaign %}" type="submit" name="view_btn" value="view" class="btn btn-primary btn-sm rounded-11 me-2" data-bs-toggle="tooltip" data-bs-original-title="View">
                    <i>
                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"> 
                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/> 
                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/> 
                        </svg>
                    </i>
                </a>
                {% if campaign.id_campaign in start %} 
                <a href="{% url 'campaigns:campaign_report' data=campaign.id_campaign %}" class="btn btn-primary btn-icon"  aria-label="fa fa-download" name="load_btn" width="13"  data-bs-original-title="Reporting" >Reporting</a>
                {% endif %}  

            </td> 
        </tr>
        {% endfor %}
    </tbody>
</table> 
{% else %}
<div class="col-12">
    <div class="alert alert-warning">
        No Campaigns found.
    </div>
    <div>
        create a new <a href="{% url 'campaigns:add_campaign' %}">Campaign</a>
    </div>
</div> 
{% endif %}
{% endblock content %}  


{% block modals %} {% endblock modals %}


{% block extra_js %} 
<script type="text/javascript">     
    var input_name = document.getElementById("name-search");
    var input_advertiser = document.getElementById("advertiser-search");
    var input_product = document.getElementById("product-search");
    var input_startday = document.getElementById("startday-search");
    var input_endday = document.getElementById("endday-search");
    var input_target = document.getElementById("target-search");
    var input_achievement = document.getElementById("achievement-search");
    var input_total_ads = document.getElementById("total-ads-search");
    var input_status = document.getElementById("status-search");
    
    var table = document.getElementById("table");

    function search() {
        let filter_name = input_name.value.toUpperCase();
        let filter_advertiser = input_advertiser.value.toUpperCase();
        let filter_product = input_product.value.toUpperCase();
        let filter_startday = input_startday.value.toUpperCase();
        let filter_endday = input_endday.value.toUpperCase();
        let filter_target = input_target.value.toUpperCase();
        let filter_achievement = input_achievement.value.toUpperCase();
        let filter_total_ads = input_total_ads.value.toUpperCase();
        let filter_status = input_status.value.toUpperCase();

        let tr = table.rows;
        
        for (let i = 0; i < tr.length; i++) {
        
            td = tr[i].cells;

            td_name = td[0].innerText;
            td_advertiser = td[1].innerText;
            td_product = td[2].innerText;
            td_startday = td[3].innerText;
            td_endday = td[4].innerText;
            td_target = td[5].innerText;
            td_achievement = td[6].innerText;
            td_total_ads = td[7].innerText;
            td_status = td[8].innerText;
        
            if (
                td_name.toUpperCase().indexOf(filter_name) > -1 
                && td_advertiser.toUpperCase().indexOf(filter_advertiser) > -1
                && td_product.toUpperCase().indexOf(filter_product) > -1   
                && td_startday.toUpperCase().indexOf(filter_startday) > -1 
                && td_endday.toUpperCase().indexOf(filter_endday) > -1 
                && td_target.toUpperCase().indexOf(filter_target) > -1
                && td_achievement.toUpperCase().indexOf(filter_achievement) > -1
                && td_total_ads.toUpperCase().indexOf(filter_total_ads) > -1
                && td_status.toUpperCase().indexOf(filter_status) > -1
            ) {
                tr[i].style.display = "";
            } else
                tr[i].style.display = "none";
        }
    }
</script>
{% endblock extra_js %}