{% extends "DAIManagementApp/base.html" %}
{% block content %}

    <div class="app-content">
        <div class="side-app">

        <div class="page-header">
            <div>
                <h1 class="page-title">Edit Campaigns </h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#"> Campaigns</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Edit Campaigns</li>
                </ol>
            </div> 
        </div>  
        <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">
                        &nbsp;&nbsp;&nbsp;&nbsp; 
                    </th>
                </tr> 
                <tr>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Name </th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Advertiser</th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Product</th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Start day </th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">End day</th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Target</th> 
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Achievement</th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Total Ads</th>
                    <th  style="width:10%;" class="bg-transparent border-bottom-0 text-cente">Status</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 '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>
                            <button 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></button>
                            {% if campaign.id_campaign in start %}
                                <!-- <button class="btn btn-primary btn-icon"  aria-label="fa fa-download" name="load_btn" width="13" data-id="{{ campaign.id_campaign }}"  data-bs-original-title="Reporting" >Reporting</button> -->
                                <a href="{% url '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 %} 
                        </form>

                    </td> 
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>


    <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 content %}