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

{% block content %}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

<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">
        {% 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>

<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="modal fade" id="creative_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 Creative</h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
      </div>
      <form method="post" id="indexForm4" send-creative-url="{% url 'ajax_send_creative' %}" enctype="multipart/form-data">
        {% csrf_token %}

        <div class="modal-body">

          <div class="card">
            <div class="card-header">
                <h3 class="card-title">Select [ Channel - Advertiser ]</h3>
            </div>
            <div class="card-body row">

                <div >
                  <label class="form-label">Channel</label>
                  <select class="form-control select2-show-search form-select" id="channel_id" name="channel_id" data-placeholder="Choose one" required>
                      <option label="Choose one"></option>
                      {% for channel in data.channels %}
                        <option value="{{channel.id_channel}}">{{channel.channel_name}}</option>
                      {% endfor %}

                  </select>
                </div>
                <div >
                  <label class="form-label">Advertiser</label>
                  <select class="form-control select2-show-search form-select" id="advertiser_id" name="advertiser_id" data-placeholder="Choose one" required>
                      <option label="Choose one"></option>
                      {% for advertiser in data.advertisers_for_creative %}
                        <option value="{{advertiser.id_brand.id_brand}}">{{advertiser.id_brand.brand_name}}</option>
                      {% endfor %}

                  </select>
                </div>

            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h3 class="card-title">Info About The Creative</h3>
            </div>
            <div class="card-body pb-2">
              <div class="row row-sm">
                <div >
                  <label class="form-label">Name</label>
                  <input class="form-control mb-4" placeholder="Creative Name or Product Name" id="adspot_name" name="adspot_name" type="text" required>
                </div>
                <div >
                  <label class="form-label">Duration (in seconds)</label>
                  <input class="form-control mb-4" placeholder="30" id="adspot_duration" name="adspot_duration" type="text" required>
                </div>
                <div >
                  <label class="form-label">Status</label>
                  <select class="form-control select2-show-search form-select mb-4" id="active_0_1" name="active_0_1" data-placeholder="Choose one">
                    <option value="1" selected="selected">Active</option>
                    <option value="0">InActive</option>
                  </select>
                </div>


              </div>

            </div>
          </div>

          <div class="card">

          <div class="card-header">
            <h3 class="card-title">File Upload</h3>
          </div>
          <div class=" card-body">

            <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 type="file" class="file-browserinput" id="adspot_file" name="adspot_file" style="display: none;" accept=".mp4, .ts" required>
              </label>
            </div>
            <br>

          </div>


          </div>

        </div>

      <div class="modal-footer">
        <button id="btn_creative" 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">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_new' %}" 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">Info About The Campaign</h3>
          </div>
          
          <div class="card-body">
            <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="card-body pb-2">
              <div class="row row-sm">
                <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_agency }}">{{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>
                          <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 }}">{{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>
                        <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>
                            <button type="button" class="btn btn-info-light" style="margin-top:5px;" id="button_creative">Add New Creative</button>
                        </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" 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-tittle"> CHANNELS </h3>
                            </div>
                            <div class="card-body">
                                <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">Yes</option>
                                            <option selected value="0" >No</option>
                                        </select><br><br>
                                    </div>
                                </div>

                                <div class="row row-sm " id="rotation_is_no">
                                    {% 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">
                                            <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  " 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">
                                            <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>
                            </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;
    }
}
</script> -->

<script >

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



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

           $('#btn_creative').click(function(){
               var url = $("#indexForm4").attr("send-creative-url");

               var channel_id = document.getElementById("channel_id").value;
               var advertiser_id = document.getElementById("advertiser_id").value;
               var adspot_name = document.getElementById("adspot_name").value;
               var adspot_duration = document.getElementById("adspot_duration").value;
               var active_0_1 = document.getElementById("active_0_1").value;
               // var adspot_file = document.getElementById("adspot_file").value;
               var adspot_file = $("#adspot_file").get(0).files[0];

               formData = new FormData();
               formData.append('adspot_file', adspot_file);
               console.log(adspot_file)
               formData.append('channel_id',channel_id);
               console.log(channel_id)
               formData.append('advertiser_id',advertiser_id);
               console.log(advertiser_id)
               formData.append('adspot_name',adspot_name);
               console.log(adspot_name)
               formData.append('adspot_duration',adspot_duration);
               console.log(adspot_duration)
               formData.append('active_0_1',active_0_1);
               console.log(active_0_1)
               formData.append('csrfmiddlewaretoken','{{ csrf_token }}');

               $.ajax({
                  url: url,
                  type: 'POST',
                  contentType: false,
                  processData: false,
                  data: formData,
                  success: function (data) {
                    console.log("Successfully");
                       $('#creative_form').modal('hide');
                       Swal.fire(
                           'Added!',
                           'Your Creative has been Successfully Added.',
                           'success'
                       )
                       var url = "{% url 'ajax_load_creative' %}";
                       $.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');
  });

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

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




{% endblock content %}