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

{% block content %}
<div class="app-content">
    <div class="side-app">
        <!-- PAGE-HEADER -->
        <div class="page-header">
            <div>
                <h1 class="page-title">Add New Campaign</h1>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">Campaigns</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Add New Campaign</li>
                </ol>
            </div> 
        </div>
        <!-- <form method='POST' action="{% url 'add_campaign' %}" id="indexForm" data-creatives-url="{% url 'ajax_load_creatives' %}"> -->
        <form method='POST' action="null" id="indexForm" data-creatives-url="{% url 'ajax_load_creatives' %}">
            {% csrf_token %}
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Info About The Campaign</h3>
                </div>

                <div class="card-body">
                    <div class="card-body pb-2">
                        <div class="row row-sm">
                            <div class="col-lg">
                                <label class="form-label">Name</label>
                                <input class="form-control mb-4" placeholder="Campaign Name" name="campaign_name" type="text">
                            </div>
                            <div class="col-lg">
                                <label class="form-label">Advertiser</label>
                                <select class="form-control select2-show-search form-select mb-4" id="advertisers" name="id_brand" data-placeholder="Choose one">
                                    {% for brand in data.brands %}
                                    <option value="{{ brand.id_brand.id_brand }}">{{brand.id_brand.brand_name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-lg">
                                <label class="form-label">Creative</label>
                                <select class="form-control select2-show-search form-select mb-4" id="creatives" name="id_adpost" data-placeholder="Choose one">
                                    {% for adspot in data.adspots %}
                                    <option value="{{ adspot.id_adpost }}">{{adspot.adspot_name}}</option>
                                    {% endfor %}
                                </select>
                            </div> 
                        </div> 
                    </div> 
                </div> 
            </div> 
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> Periode : </h3>
                </div>
                <div class= "card-body">
                    <div class="row row-sm">
                        <div class="form-group col-lg ">
                            <label class="form-label">DATE Start : </label>
                            <input type="date" id="start_day" name="start_day" class="form-control hasDatepicker" placeholder="MM/DD/YYYY" autocomplete="off">
                        </div>
                        <div class="form-group col-lg ">
                            <label class="form-label">DATE End : </label>
                            <input type="date" id="end_day" name="end_day" class="form-control hasDatepicker" placeholder="MM/DD/YYYY" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h3 class="card-tittle"> CPM </h3>
                </div>

                <div class="card-body">
                    <div class="row row-sm">

                        <div class="col-lg">
                            <label  class="form-label">Pacing</label>
                            <select class="form-control select2-show-search form-select mb-4" onchange="dis()" name="pacing" data-placeholder="Choose one" id="pacing">
                                <option value="1">Yes</option>
                                <option value="0" >No</option>
                            </select>
                        </div>
                        <div class="col-lg ">
                            <label class="form-label"> Volume Total: </label>
                            <input type="number" id="volume" name="volume" class="form-control hasDatepicker" >
                        </div>
                        <div class="col-log">
                            <label class="form-label"> Daily Delivery : </label>
                            <input type="number"  id="delivery" name="delivery" class="form-control hasDatepicker"  >
                        </div>
                        <div class="col-lg ">
                            <label class="form-label"> CPM : </label>
                            <input type="number" id="cpm" name="cpm" class="form-control hasDatepicker" >
                        </div>
                    </div>


                </div>
            </div>
            <div class='card'>
                <div class= "card-header">
                    <h3 class="card-title">Placement</h3>
                </div>
                <div class="card-body">
                    <div class="row row-sm">

                        <div class="col-lg">
                            {% for time in data.datetime %}
                            <div >
                                <input type="checkbox"   id="coding" name="{{ time.name }}" value="{{time.id_time}}">
                                <label for="coding"  >{{ time.name }}</label>
                            </div>
                            {% endfor %}
                        </div>

                    </div>
                </div>
            </div>
            <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>
        </form>
    </div>
</div>
{% endblock content %}  


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


{% block extra_js %} 
<script>
function dis(){
    var val  = document.getElementById('pacing').value;

    if ( val == "0"){
      document.getElementById("delivery").value = '';
        document.getElementById("delivery").disabled = true;
    }
    if ( val == "1"){
        document.getElementById("delivery").disabled = false;
    }
}
</script>

<script type="text/javascript">
  $(document).ready(function() {
       $('#advertisers').change(function(){
           var url = $("#indexForm").attr("data-creatives-url");
           var advertiserId = document.getElementById("advertisers").value;
           console.log(advertiserId);
           console.log(url)
           $.ajax({
              url: url,
              data: {
                'advertiser': advertiserId
              },
              success: function (data) {
                console.log(data);
                $("#creatives").html(data);
              }
            });
       });
      });
</script> 
{% endblock content %}