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

<!-- 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 'ajax_send_advertiser' %}" enctype="multipart/form-data" data-creatives-url="{% url 'ajax_load_creatives' %}" data-advertisers-url="{% url 'ajax_load_advertisers' %}">
        {% 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 '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>

<div class="app-content">
    <div class="side-app">
      <!-- PAGE-HEADER -->
      <div class="page-header">
          <div>
              <h1 class="page-title">Edit Campaign</h1>
              <ol class="breadcrumb">
                  <li class="breadcrumb-item"><a href="#">Campaigns</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Edit  Campaign</li>
              </ol>
          </div>
        </div>

        <form method='POST' action="{% url 'update_campaign' id_campaign=data.campaign.id_campaign %}" id="indexForm" data-creatives-url="{% url 'ajax_load_creatives' %}" data-advertisers-url="{% url 'ajax_load_advertisers' %}">
          {% csrf_token %}
          <div class="card">
            <div class="card-header">
                <h3 class="card-title"> Campaign Information</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" value="{{ data.campaign.name }}">
              </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.agencies %}
                      <!-- <option value="{{ agency.id_agency }}" {% if agency.name == "None" %}selected{% endif %}> -->

                        <option value="{{ agency.id_agency }}" {% if agency.id_agency == data.campaign.id_agency.id_agency %}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.advertisiers %}
                      <option value="{{ brand.id_brand }}" {% if brand.id_brand == data.campaign.id_brand %}selected{% endif %}>{{brand.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" value="{{ data.campaign.product }}">
                  </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" {% if data.campaign.category == "IAB2_Automotive" %}selected{% endif %}>Automotive</option>
                      <option value="IAB3_Business" {% if data.campaign.category == "IAB3_Business" %}selected{% endif %}>Business</option>
                      <option value="IAB4_Careers" {% if data.campaign.category == "IAB4_Careers" %}selected{% endif %}>Careers</option>
                      <option value="IAB5_Education" {% if data.campaign.category == "IAB5_Education" %}selected{% endif %}>Education</option>
                      <option value="IAB6_Family_&_Parenting" {% if data.campaign.category == "IAB6_Family_&_Parenting" %}selected{% endif %}>Family & Parenting</option>
                      <option value="IAB7_Health_&_Fitness" {% if data.campaign.category == "IAB7_Health_&_Fitness" %}selected{% endif %}>Health & Fitness</option>
                      <option value="IAB8_Food_&_Drink" {% if data.campaign.category == "IAB8_Food_&_Drink" %}selected{% endif %}>Food & Drink</option>
                      <option value="IAB9_Hobbies_&_Interests" {% if data.campaign.category == "IAB9_Hobbies_&_Interests" %}selected{% endif %}>Hobbies & Interests</option>
                      <option value="IAB10_Home_&_Garden" {% if data.campaign.category == "IAB10_Home_&_Garden" %}selected{% endif %}>Home & Garden</option>
                      <option value="IAB11_Law,_Government,_&_Politics" {% if data.campaign.category == "IAB11_Law,_Government,_&_Politics" %}selected{% endif %}>Law, Government, & Politics</option>
                      <option value="IAB12_News_/_Weather_/_Information" {% if data.campaign.category == "IAB12_News_/_Weather_/_Information" %}selected{% endif %}>News / Weather / Information</option>
                      <option value="IAB13_Personal_Finance" {% if data.campaign.category == "IAB13_Personal_Finance" %}selected{% endif %}>Personal Finance</option>
                      <option value="IAB14_Society" {% if data.campaign.category == "IAB14_Society" %}selected{% endif %}>Society</option>
                      <option value="IAB16_Pets" {% if data.campaign.category == "IAB16_Pets" %}selected{% endif %}>Pets</option>
                      <option value="IAB17_Sports" {% if data.campaign.category == "IAB17_Sports" %}selected{% endif %}>Sports</option>
                      <option value="IAB18_Style_&_Fashion" {% if data.campaign.category == "IAB18_Style_&_Fashion" %}selected{% endif %}>Style & Fashion</option>
                      <option value="IAB19_Technology_&_Computing" {% if data.campaign.category == "IAB19_Technology_&_Computing" %}selected{% endif %}>Technology & Computing</option>
                      <option value="IAB20_Travel" {% if data.campaign.category == "IAB20_Travel" %}selected{% endif %}>Travel</option>
                      <option value="IAB21_Real_Estate" {% if data.campaign.category == "IAB21_Real_Estate" %}selected{% endif %}>Real Estate</option>
                      <option value="IAB22_Shopping" {% if data.campaign.category == "IAB22_Shopping" %}selected{% endif %}>Shopping</option>
                      <option value="IAB23_Religion_&_Spirituality" {% if data.campaign.category == "IAB23_Religion_&_Spirituality" %}selected{% endif %}>Religion & Spirituality</option>
                      <option value="IAB24_Uncategorized" {% if data.campaign.category == "IAB24_Uncategorized" %}selected{% endif %}>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" {% if data.campaign.country == "france" %}selected{% endif %}>France</option>
                      <option value="italy" {% if data.campaign.country == "italy" %}selected{% endif %}>Italy</option>
                      <option value="spain" {% if data.campaign.country == "spain" %}selected{% endif %}>Spain</option>
                      <option value="netherlands" {% if data.campaign.country == "netherlands" %}selected{% endif %}>Netherlands</option>
                      <option value="belgium" {% if data.campaign.country == "belgium" %}selected{% endif %}>Belgium</option>
                    </select>
                  </div>
                </div>
              </div>
              <!--  -->
              <!-- <div class="card-body pb-2">
                <div class="row row-sm">

                  <div class="col-lg">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="checkbox" value="" id="vastCheckbox" name="vastCheckbox"/>
                      <label class="form-check-label" for="vastCheckbox"> VAST </label>
                    </div>
                  </div>
                  <div class="col-lg" id="vastInputContainer">
                    <label class="form-label">VAST Info</label>
                    <input class="form-control mb-4" placeholder="VAST Info" name="vast_url" type="text" id="vastUrlInput" disabled />
                  </div>
                </div>
              </div> -->
                  <div class="row row-sm"> 
                    <!-- Campaign Status -->
                    <div class="col-sm-4">
                      <label class="form-label">Status</label>
                      <select class="form-control select2-show-search form-select mb-4" name="status" data-placeholder="Choose one" id="status">  
                        <option value="Prebooked" {% if data.campaign.status == "Prebooked" %}selected{% endif %} >Prebooked</option> 
                        <option value="Booked" {% if data.campaign.status == "Booked" %}selected{% endif %}>Booked</option> 
                        <option value="Canceled" {% if data.campaign.status == "Canceled" %}selected{% endif %}>Canceled</option>  
                        <option value="In_progress" {% if data.campaign.status == "In_progress" %}selected{% endif %}>In progress</option>  
                        <option value="Treminated" {% if data.campaign.status == "Treminated" %}selected{% endif %} >Treminated</option>  
                      </select> 
                    </div>
                  </div> 
            </div>
          </div>

          <div class="card">
              <div class="card-header">
                  <h3 class="card-title"> Period : </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" value="{{ data.campaign.start_day}}">
                      </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" value="{{ data.campaign.end_day}}">
                      </div>
                  </div>
              </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h3 class="card-tittle"> Volume </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" value="{{data.campaign.budget}}">
                </div>
                <div class="col-lg ">
                  <label class="form-label"> Volume Total: </label>
                  <input type="number" id="volume" name="volume" class="form-control hasDatepicker" value>
                </div>
              </div>
              <div class="row row-sm">
                <div class="col-lg ">
                  <label class="form-label"> CPM : </label>
                  <input type="number" id="cpm" name="cpm" class="form-control hasDatepicker" value="{{data.campaign.cpm}}">
                </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" value="{{data.campaign.broadcasts_day}}">
                </div>
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
                <h3 class="card-title"> Media Planning </h3>
            </div>
            <div class="card-body">
                <!--General Rotation -->
                <div class="row row-sm">
                    <div class="col-lg">
                        <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" {% if data.campaign.general_rotation == "1" %} Selected {% endif%}>Yes</option>
                          <option value="0" {% if data.campaign.general_rotation == "0" %} Selected {% endif%}>No</option>
                        </select><br><br>
                    </div>
                </div>
                <!-- Media Type -->
                <div class="row row-sm">
                  <div class="col-lg">
                    <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" {% if data.campaign.media_type == "tv" %} Selected {% endif%}>Tv Linear</option>
                      <option value="vod" {% if data.campaign.media_type == "vod" %} Selected {% endif%}>AVOD</option>
                      <option value="ott" {% if data.campaign.media_type == "ott" %} Selected {% endif%}>OTT</option>
                    </select>
                    <br>
                    <br>
                  </div>
                </div>

                <!-- Channels -->
                <div class="row row-sm " id="rotation_is_no">
                  {% for channel_placements in data.channels_and_placement %}
                  <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_placements.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>
                                {% if channel_placements.channel_id in data.placement_channel %}
                                  {% if time.id_time in channel_placements.placement %}
                                    <input checked="true" onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel_placements.channel_id }}" value="{{time.id_time}}">
                                    <label for="coding">{{ time.name }}</label>

                                  {% endif %}
                                {% else %}
                                <input onchange="veluePlacement({{time.id_time}})" class="playlist_checkbox" type="checkbox" id="coding" name="check_placement_{{ channel_placements.channel_id }}" value="{{time.id_time}}">
                                <label for="coding">{{ time.name }}</label>
                                {% endif %}
                              </div>
                            </div>
                            {% endfor %}
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
                <div class="row row-sm" id="rotation_is_yes">
                    {% for channel in data.channels %}
                    <!-- <div class="col-md-12 col-xl-3"> -->
                    <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">
                            {% if channel.id_channel in data.placement_channel %}
                            <input checked="true"   onchange="velueChannels({{channel.id_channel}})"  type="checkbox" class="custom-switch-input" name="channels_checked" value="{{channel.id_channel}}">
                            <span class="custom-switch-indicator"></span>
                            {% else %}
                            <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>
                            {% endif %}
                          </label>
                        </div>
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>

                <!-- Campaign Media planing program categories & Pacing -->
                <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_category[]" multiple data-placeholder="Choose one">
                        <option value="drama" {% if "drama" in data.campaign.program_category %} Selected {% endif %} >Drama</option>
                        <option value="news" {% if "news" in data.campaign.program_category %} Selected {% endif %}>News</option>
                        <option value="sports" {% if "sports" in data.campaign.program_category %} Selected {% endif %}>Sports</option>
                        <option value="food" {% if "food" in data.campaign.program_category %} Selected {% endif %}>Food</option>
                        <option value="comedy" {% if "comedy" in data.campaign.program_category %} Selected {% endif %}>Comedy</option>
                        <option value="youth" {% if "youth" in data.campaign.program_category %} Selected {% endif %}>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" id="pacing" onchange="dis()" name="pacing" data-placeholder="Choose one">
                        <option value="1" {% if data.campaign.pacing == "1" %} Selected {% endif%}>Yes</option>
                        <option value="0" {% if data.campaign.pacing == "0" %} Selected {% endif%}>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>
    </div>
</div>


<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;
    }
}

$(document).ready(function() {
     $('#general_rotation').change(function(){
        console.log(document.getElementById('general_rotation').value);
        general_rotation = document.getElementById('general_rotation').value;
        if(general_rotation=='0'){
          // document.getElementById("rotation_is_yes").style.display = 'none';
          document.getElementById("rotation_is_yes").className = 'row row-sm d-none';
          // document.getElementById("rotation_is_no").style.display = 'block';
          document.getElementById("rotation_is_no").className = 'row row-sm d-md-flex';

        }else {
          // document.getElementById("rotation_is_no").style.display = 'none';
          document.getElementById("rotation_is_no").className = 'row row-sm d-none';
          // document.getElementById("rotation_is_yes").style.display = 'block';
          document.getElementById("rotation_is_yes").className = 'row row-sm d-md-flex';
        }
     });
    });
    let budget = "{{ data.campaign.budget }}";
    let volume = "{{ data.campaign.volume }}";
    let delivery = "{{ data.campaign.delivery }}";
    let cpm = "{{ data.campaign.cpm }}";
    $(document).ready(function() {
      document.getElementById("budget").value = parseFloat(budget.replace(/,/g, ''));
          document.getElementById("volume").value = parseFloat(volume.replace(/,/g, ''));
          document.getElementById("delivery").value = parseFloat(delivery.replace(/,/g, ''));
          document.getElementById("cpm").value = parseFloat(cpm.replace(/,/g, ''));
      });


</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);
              }
            });
       });
      });

  $(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 '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 '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>

<script type="text/javascript">
  // Get the checkbox and input elements
  var vastCheckbox = document.getElementById('vastCheckbox');
  var vastInputContainer = document.getElementById('vastInputContainer');
  var vastUrlInput = document.getElementById('vastUrlInput');

  // Add an event listener to the checkbox
  vastCheckbox.addEventListener('change', function () {
    // If the checkbox is checked, enable the input field and make it required
    vastUrlInput.disabled = !vastCheckbox.checked;
    // vastUrlInput.required = vastCheckbox.checked;
  });
</script>




{% endblock content %}