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

{% load static %} 

{% block title %} Add Campaign {% endblock %}

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

{% block breadcrumb %}
<div class="page-header">
    <h1 class="page-title"> Add 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">Add</li>
        </ol>
    </div>
</div> 
{% endblock breadcrumb %}


{% block content %}   
<form method='POST' action="{% url 'campaigns:add_campaign' %}" id="indexForm" data-creatives-url="{% url 'campaigns:ajax_load_creatives' %}" data-advertisers-url="{% url 'agencies:ajax_load_advertisers' %}">
  {% csrf_token %}
  <!-- Campaign Info -->
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">Info About The Campaign</h3>
    </div> 
    <div class="card-body">
      <!-- Campaign Name -->
      <div class="col-lg">
        <label class="form-label">Name</label>
        <input class="form-control mb-4" placeholder="Campaign Name" name="campaign_name" type="text" required>
      </div> 
      <div class="card-body ">
        <div class="row row-sm">
          <!-- Campaign Agency -->
          <div class="col-lg">
            <label class="form-label">Agency</label> 
            <select class="form-control select2-show-search form-select mb-4" id="agency" name="id_agency" data-placeholder="Choose one">
              {% for agency in data.agency %}
                <option value="{{ agency.id }}" {% if agency.name == "None" %}selected{% endif %}>
                  {{ agency.name }}
                </option>
              {% endfor %}
            </select> 
            <button type="button" class="btn btn-info-light" style="margin-top:5px;" id="button_agency">Add New Agency</button>
          </div> 
          <!-- Campaign Advertiser -->
          <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.name}}</option>
              {% endfor %}
            </select>
            <button type="button" class="btn btn-info-light" style="margin-top:5px;" id="button_brand">Add New Advertiser</button>
          </div>
          <!-- Campaign Product --> 
          <div class="col-lg">
            <label class="form-label">Product</label>
            <input class="form-control mb-4" placeholder="Product Name" name="product_name" type="text">
          </div> 
        </div>
      </div> 
      <div class="card-body pb-2">
        <div class="row row-sm">
          <!-- Campaign Category -->
          <div class="col-lg">
            <label for="categories" class="form-label">Category</label>            
            <select class="form-control select2-show-search form-select mb-4" id="categories" name="id_category" data-placeholder="Choose one"> 
              <option selected value=""> </option> 
              <option value="IAB2_Automotive">Automotive</option>
              <option value="IAB3_Business">Business</option>
              <option value="IAB4_Careers">Careers</option>
              <option value="IAB5_Education">Education</option>
              <option value="IAB6_Family_&_Parenting">Family & Parenting</option>
              <option value="IAB7_Health_&_Fitness">Health & Fitness</option>
              <option value="IAB8_Food_&_Drink">Food & Drink</option>
              <option value="IAB9_Hobbies_&_Interests">Hobbies & Interests</option>
              <option value="IAB10_Home_&_Garden">Home & Garden</option>
              <option value="IAB11_Law,_Government,_&_Politics">Law, Government, & Politics</option>
              <option value="IAB12_News_/_Weather_/_Information">News / Weather / Information</option>
              <option value="IAB13_Personal_Finance">Personal Finance</option>
              <option value="IAB14_Society">Society</option>
              <option value="IAB16_Pets">Pets</option>
              <option value="IAB17_Sports">Sports</option>
              <option value="IAB18_Style_&_Fashion">Style & Fashion</option>
              <option value="IAB19_Technology_&_Computing">Technology & Computing</option>
              <option value="IAB20_Travel">Travel</option>
              <option value="IAB21_Real_Estate">Real Estate</option>
              <option value="IAB22_Shopping">Shopping</option>
              <option value="IAB23_Religion_&_Spirituality">Religion & Spirituality</option>
              <option value="IAB24_Uncategorized">Uncategorized</option>
            </select>    
          </div> 
          <!-- Campaign Country -->
          <div class="col-lg">
            <label class="form-label">Country</label>
            <select class="form-control select2-show-search form-select mb-4" id="Countries" name="id_country" data-placeholder="Choose one"> 
              <option selected value=""> </option> 
              <option value="france">France</option>  
              <option value="italy">Italy</option> 
              <option value="spain">Spain</option> 
              <option value="netherlands">Netherlands</option>
              <option value="belgium">Belgium</option>
            </select>
          </div> 
        </div>
      </div>   
    </div>  
  </div>
  <!-- Campaign Planing -->
  <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" required>
        </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" required>
        </div>
      </div>
    </div>
  </div>
  <!-- Campaign CPM --> 
  <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"> Budget: </label>
          <input type="number" id="budget" name="budget" 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 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-lg ">
          <label class="form-label"> Broadcasts Number /Day: </label>
          <input type="number" id="broadcasts_day" name="broadcasts_day" class="form-control hasDatepicker" >
        </div> 
      </div>
    </div>
  </div>
  <!-- Campaign Media Planing --> 
  <div class="card">
    <div class="card-header">
        <h3 class="card-tittle"> MEDIA PLANNING </h3>
    </div> 
    <div class="card-body">
      <!-- Rotation -->
      <div class="row row-sm">
        <div class="col-lg mb-4">
          <label  class="form-label">General Rotation</label>
          <select class="form-control select2-show-search form-select mb-4"  name="general_rotation" data-placeholder="Choose one" id="general_rotation">
            <option  value="1">Yes</option>
            <option selected value="0" >No</option>
          </select> 
        </div>
      </div>
      <!-- Media Type -->
      <div class="row row-sm">
        <div class="col-lg mb-4">
          <label  class="form-label">Media Type</label>
          <select class="form-control select2-show-search form-select mb-4"  name="media_type" data-placeholder="Choose one" id="media_type">
            <option selected value="tv">Tv Linear</option>
            <option value="vod" >AVOD</option>
            <option value="ott" >OTT</option>
          </select> 
        </div>
      </div>
      <!-- Campaign Media planing channels -->
      <div class="row row-sm d-none" id="rotation_is_no"> 
        <label  class="form-label">Channels</label>
        {% for channel in data.channels %} 
        <div class="col-md-3 col-xl-3 list-item">
          <div class="card card-collapsed">
            <div class="card-header">
              <h3 class="card-title" for="coding">{{ channel.channel_name }}</h3>
              <div class="card-options">
                <label class="custom-switch m-0">
                  <a href="#" class="card-options-collapse" data-bs-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
                </label>
              </div>
            </div>
            <div class="card-body">
              <div class="row row-sm">
                {% for time in data.datetime %}
                  <div class="col-md-6">
                    <div>
                        <input onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel.id_channel }}" value="{{time.id_time}}">
                        <label for="coding">{{ time.name }}</label>
                      </div>
                  </div>
                  {% endfor %}
                </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div> 
      <div class="row row-sm d-md-flex" id="rotation_is_yes"> 
        <label  class="form-label">Channels</label>
        {% for channel in data.channels %} 
        <div class="col-md-3 col-xl-3 list-item ">
          <div class="card card-collapsed">
            <div class="card-header">
              <h3 class="card-title" for="coding">{{ channel.channel_name }}</h3>
              <div class="card-options">
                <label class="custom-switch m-0">
                  <input  onchange="velueChannels({{channel.id_channel}})"  type="checkbox" class="custom-switch-input" name="channels_checked" value="{{channel.id_channel}}">
                  <span class="custom-switch-indicator"></span>
                </label>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div> 
      <!-- Campaign Media planing  -->
      <div class="row row-sm">
        <!-- Campaign Media planing program categories -->
        <div class="col-lg">
          <label class="form-label">Program Category</label>
          <select class="form-control select2-show-search form-select mb-4" id="program_categories" name="program_categories" multiple data-placeholder="Choose one"> 
              <option value="drama">Drama</option>  
              <option value="news">News</option> 
              <option value="sports">Sports</option> 
              <option value="food">Food</option>
              <option value="comedy">Comedy</option>
              <option value="youth">Youth</option>
          </select>
        </div>
        <!-- Campaign Media planing Pacing -->
        <div class="col-lg">
          <label  class="form-label">Pacing</label>
          <select class="form-control select2-show-search form-select mb-4" name="pacing" data-placeholder="Choose one" id="pacing">
              <option value="1">Yes</option>
              <option value="0" >No</option>
          </select> 
        </div>
      </div> 
    </div>
  </div> 
  <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>
</form>  
{% endblock content %}  


{% block modals %} 
<!-- Advertiser Modal -->
<div class="modal fade" id="Brand_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Info About The Advertiser</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <form method="post" id="indexForm2" send-advertiser-url="{% url 'agencies:ajax_send_advertiser' %}" enctype="multipart/form-data">
        {% csrf_token %}
      <div class="modal-body">
        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Name</label>
          <div class="col-sm-8">
              <input id="name_adv" class="form-control mb-4" placeholder="Brand or Advertiser's Name" name="advertiser_name" type="text">
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Agency</label>
          <div class="col-sm-8">
            <select class="form-control select2-show-search form-select mb-4" id="agency_adv" name="id_agency" data-placeholder="Choose one">
                {% for agency in data.agency %}
                <option value="{{ agency.id_agency }}">{{agency.name}}</option>
                {% endfor %}
          </select>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Category</label>
          <div class="col-sm-8">
              <input id="category_adv" class="form-control mb-4" placeholder="" name="category" type="text">
          </div>
        </div>
        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Status</label>
          <div class="col-sm-8">
            <select id="status_adv" class="form-control select2-show-search form-select mb-4" name="active_0_1" data-placeholder="Choose one">
              <option value="1" selected="selected">Active</option>
              <option value="0">InActive</option>
            </select>
          </div>
        </div>

        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Description (Optional)</label>
          <div class="col-sm-8">
            <textarea id="description_adv" name="advertiser_desc" class="form-control" rows="3" spellcheck="false" data-gramm="false"></textarea>
          </div>
        </div>

        <!-- <div class="form-group row">
          <label class="col-sm-4 col-form-label">Logo Upload (.png)</label>
          <div class="col-sm-8">
            <div class="input-group mb-5 file-browser">
              <input  type="text" class="form-control browse-file" placeholder="Choose" readonly>
              <label class="input-group-text btn btn-primary">
                Browse <input id="logo_adv" type="file" class="file-browserinput" name="advertiser_logo" style="display: none;" accept=".png">
              </label>
            </div>
          </div>
        </div> -->
      </div>
      <div class="modal-footer">
        <button id="btn_adv" type="button" style="width:100px; text-align:center;" class="btn btn-primary" name="button">Submit</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Agency Modal -->
<div class="modal fade" id="agency_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Info About The Agency</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
      </div>
      <form method="post" id="indexForm3" send-agency-url="{% url 'agencies:ajax_send_agency' %}" enctype="multipart/form-data">
        {% csrf_token %}
      <div class="modal-body">
        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Name</label>
          <div class="col-sm-8">
              <input id="name_agency" class="form-control mb-4" placeholder="Agency Name" name="name_agency" type="text">
          </div>
        </div>

        <div class="form-group row">
          <label class="col-sm-4 col-form-label">Description </label>
          <div class="col-sm-8">
            <textarea id="description_agency" name="description_agency" class="form-control" rows="3" spellcheck="false" data-gramm="false"></textarea>
          </div>
        </div>

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


{% block extra_js %} 
<script > 
  $(document).ready(function() {
    $('#general_rotation').change(function(){ 
      general_rotation = document.getElementById('general_rotation').value;
      if(general_rotation=='0'){ 
        document.getElementById("rotation_is_yes").className = 'row row-sm d-none'; 
        document.getElementById("rotation_is_no").className = 'row row-sm d-md-flex';
      }else { 
        document.getElementById("rotation_is_no").className = 'row row-sm d-none'; 
        document.getElementById("rotation_is_yes").className = 'row row-sm d-md-flex';
      }
    });
  });

  $(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);
            }
          });
      });
    });

  $(document).ready(function() {
           $('#agency').change(function(){
               var url = $("#indexForm").attr("data-advertisers-url");
               var agencyId = document.getElementById("agency").value;
               console.log(agencyId);
               console.log(url)
               $.ajax({
                  url: url,
                  data: {
                    'agency': agencyId
                  },
                  success: function (data) {
                    console.log(data);
                    $("#advertisers").html(data);
                  }
                });
           });
      });

  $('#btn_adv').click(function(){
               var url = $("#indexForm2").attr("send-advertiser-url");
               var name = document.getElementById("name_adv").value;
               console.log(name)
               var category = document.getElementById("category_adv").value;
               console.log(category)
               var status = document.getElementById("status_adv").value;
               console.log(status)
               var description = document.getElementById("description_adv").value;
               console.log(description)
               // var logo = document.getElementById("logo_adv").file[0];
              //  var logo = $("#logo_adv").get(0).files[0];
              //  console.log(logo)
               var agency = document.getElementById("agency_adv").value;
               console.log(agency)

               formData = new FormData();
              //  formData.append('logo', logo);
               formData.append('name',name);
               formData.append('category',category);
               formData.append('status',status);
               formData.append('description',description);
               formData.append('agency',agency);
               formData.append('agency',agency);
               formData.append('csrfmiddlewaretoken','{{ csrf_token }}');


               $.ajax({
                  url: url,
                  type: 'POST',
                  contentType: false,
                  processData: false,
                  data: formData,
                  success: function (data) {
                    console.log("Successfully");
                      var url = $("#indexForm").attr("data-advertisers-url");
                      var agencyId = document.getElementById("agency").value;
                      $.ajax({
                         url: url,
                         data: {
                           'agency': agencyId
                         },
                         success: function (data) {
                           console.log(data);
                           $("#advertisers").html(data);
                         }
                       });

                       $('#Brand_form').modal('hide');
                       Swal.fire(
                           'Added!',
                           'Your Advertiser has been Successfully Added.',
                           'success'
                       )
                  }
                });
           });

  $('#btn_agency').click(function(){
               var url = $("#indexForm3").attr("send-agency-url");
               var name_agency = document.getElementById("name_agency").value;
               console.log(name_agency)
               var description_agency = document.getElementById("description_agency").value;
               console.log(description_agency)

               $.ajax({
                  url: url,
                  type: 'POST',
                  data: {
                    'name_agency': name_agency,
                    'description_agency' : description_agency,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                  },
                  success: function (data) {
                    console.log("Successfully");
                       $('#agency_form').modal('hide');
                       Swal.fire(
                           'Added!',
                           'Your Advertiser has been Successfully Added.',
                           'success'
                       )
                       var url = "{% url 'agencies:ajax_load_agency' %}";
                       $.ajax({
                          url: url,
                          success: function (data) {
                            console.log(data);
                            $("#agency").html(data);
                            $("#agency_adv").html(data);
                          }
                        });
                  }
                });
           });

  $('#product_btn').click(function(){
    var url = $("#product_form").attr("send-product-url");    
    var product_name = document.getElementById("product_name").value;
    var product_description = document.getElementById("product_description").value;
 
    if (product_name === null || product_name === undefined || product_name.trim() === "") {
      Swal.fire(
        "Product name cannot be null, undefined, or empty."
      )
    } else {
      formData = new FormData();
      formData.append('product_name', product_name);
      formData.append('product_description', product_description); 
      formData.append('csrfmiddlewaretoken','{{ csrf_token }}');

      $.ajax({
        url: url,
        type: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function (data) {
          console.log("Successfully");
          // Hide Product Modal
          $('#product_modal').modal('hide');
          Swal.fire(
            'Added!',
            'Your Product has been Successfully Added.',
            'success'
          )
          // Get New Products List
          var url = "{% url 'campaigns:ajax_load_creatives' %}";

          $.ajax({
            url: url,
            success: function (data) {
              console.log(data);
              $("#creatives").html(data);
            }
          });

        }
      });
    }



});

</script>

<script type="text/javascript">

  $("#button_brand").on('click',function(e){
    e.preventDefault();
    $('#Brand_form').modal('show');
  });
  $(".close").on('click',function(e){
    e.preventDefault();
    $('#Brand_form').modal('hide');
  });

  $("#button_agency").on('click',function(e){
    e.preventDefault();
    $('#agency_form').modal('show');
  });

  $(".close").on('click',function(e){
    e.preventDefault();
    $('#agency_form').modal('hide');
  });

  $("#product_button").on('click',function(e){
    e.preventDefault();
    $('#product_modal').modal('show');
  });

  $(".close").on('click',function(e){
    e.preventDefault();
    $('#product_modal').modal('hide');
  });
</script> 
{% endblock extra_js %}