{% extends "DAIManagementApp/base.html" %}
{% block content %}
<style>
   .select2-container--default .select2-results__option[aria-selected=true] {
   display:none;
   }
   .ui-datepicker td.ui-state-disabled>span{background:#b5b5b5 !important;}
   .ui-datepicker td.ui-state-disabled{opacity:50 !important;}
</style>

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

      </div>

      {% for start in data.active_campaigns %}
      <p>{{start.name}}</p>
      {% endfor %}
      <!-- PAGE-HEADER END -->
      <!-- ROW-1 -->
      <!-- ROW-5 -->
      {% for start in data.windowstart %}
      <p>{{start}}</p>
      {% endfor %}
      {% if record_inserted == 1 %}
         <div class="alert alert-success">
              <strong>Playlist has been successfully generated</strong>
          </div>
      {% endif %}
      <div class="row">
         <div class="col-12 col-sm-12">
            <form action="/DAIManagement/generate_playlist_from_prediction/" method="post" id="indexForm" data-regions-url="{% url 'ajax_load_regions' %}" data-adspots-url="{% url 'ajax_load_adspots' %}">
               {% csrf_token %}
               <input class="form-control" id="numofwins" name="numofwin" type="text" value="" style="display:none;" >
               <div class="card">
                  <div class="card-header">
                     <h3 class="card-title">Select [ Zone - Channel - Day ]</h3>
                  </div>
                  <div class="card-body row">
                     <div class="form-group col-md-4">
                        <label class="form-label">Channel</label>
                        <select class="form-control select2-show-search form-select" id="channels" 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 class="form-group col-md-4">
                        <label class="form-label">Region</label>
                        <select class="form-control select2-show-search form-select" id="regions" name="zonename" data-placeholder="Choose one" >
                           <!-- <option label="Choose one"></option>
                              <option value="2005">France</option> -->
                        </select>
                     </div>
                     <div class="form-group col-md-4">
                        <label class="form-label">Day</label>
                        <div class="input-group">
                           <input class="form-control" name="day" id="datepicker123" placeholder="MM/DD/YYYY" type="text" autocomplete="off" required>
                        </div>
                     </div>
                  </div>
               </div>
               <div id="fieldList">
               </div>
               <!-- <button class="btn btn-primary" type="button" id="addMore">Add Window</button> -->
               <button class="btn btn-success" style="float:right; margin-left:10px;" type="submit" value="apply" name="apply_btn">Generate the playlist</button>
               <!-- <button class="btn btn-success" style="float:right; margin-left:10px; background: #86b7af !important;" type="submit" value="draft" name="draft_btn">Save as Draft</button> -->
            </form>
            <br>
            <br>
         </div>
         <!-- COL END -->
      </div>
      <!-- ROW-5 END -->
   </div>
</div>

<script type="text/javascript">

   $(document).ready(function() {
       $('#channels').change(function(){
           var url = $("#indexForm").attr("data-adspots-url"); // get the url of the `load_adspots` view
           var channelId = document.getElementById("channels").value; // get the selected channel ID from the HTML input
           console.log(channelId)
           $.ajax({                                // initialize an AJAX request
              url: url,                            // set the url of the request (= localhost:8000/DAIManagement/load-adspots/)
              data: {
                'channel': channelId               // add the channel id to the GET parameters
              },
              success: function (data) {           // `data` is the return of the `load_adspots` view function
                $(".optionsofads").html(data);
         // replace the contents of the adspots input with the data that came from the server
              }
            });
       });
   });


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

              }
            });
       });

   });


   $(document).ready(function() {
       $('#regions').change(function(){
           var url = "{% url 'load_region_dates' %}";
           var channelId = document.getElementById("channels").value;
           var regionId = document.getElementById("regions").value;

           $('#datepicker123').datepicker("destroy");

           $.ajax({
              url: url,
              data: {'channel': channelId, 'region': regionId},
              success: function (data) {
              var datesForDisable = [] = data.dates
                $('#datepicker123').datepicker({
                  beforeShowDay: function(date){
                  var date1 = $.datepicker.formatDate('dd.mm.yy', date);
                  return [ datesForDisable.indexOf(date1) == -1 ]
                  }
                });
              }
            });

       });

   });


   function loadoptions(id){
     $("#"+id).select2();
     var url = $("#indexForm").attr("data-adspots-url");
     var channelId = document.getElementById("channels").value;
     $.ajax({
        url: url,
        data: {
          'channel': channelId
        },
        success: function (data) {
          $("#"+id).html(data);
        }
      });
   }

</script>
<script type="text/javascript">
   let i = 0;
   let j = 0;
   num_of_avails_in_widnow= [];
   num_of_ads_in_avail = [];
   $(function() {



          // var datesForDisable = ["25.08.2021", "26.08.2021", "27.08.2021"]
          // $(document).ready(function(){
          //         $('#datepicker123').datepicker({
          //              beforeShowDay: function(date){
          //                 var date1 = $.datepicker.formatDate('dd.mm.yy', date);
          //                 return [ datesForDisable.indexOf(date1) == -1 ]
          //               }
          //         });
          // });


    $("#addMore").click(function(e) {
      e.preventDefault();
      $("#fieldList").append('<div class="card" id="num['+i+']"> <div class="card-header"> <h3 class="card-title">Define Window & Select Adspots </h3> </div> <div class="card-body row"> <input class="form-control  windid'+i+'" id="numofavails['+i+']" name="numofavails['+i+']" type="text" value="" style="display:none;" required> <div class="form-group col-md-6"> <label class="form-label">Window Start (24H format)</label> <div class="input-group"> <div class="input-group-text"> <i class="fa fa-clock-o tx-16 lh-0 op-6"></i> </div><!-- input-group-text --> <input class="form-control windid'+i+'" id="winstart_'+i+'" onchange="window_start_change('+i+')" name="windowstart['+i+']" type="time" placeholder="HH:MM (ex: 14:30)" min="00:01" max="23:59" required> </div> </div> <div class="form-group col-md-6"> <label class="form-label">Window End (24H format)</label> <div class="input-group"> <div class="input-group-text"> <i class="fa fa-clock-o tx-16 lh-0 op-6"></i> </div><!-- input-group-text --> <input class="form-control  windid'+i+'" id="winend_'+i+'" onchange="window_end_change('+i+')" name="windowend['+i+']" placeholder="HH:MM (ex: 15:00)" min="00:01" max="23:59" type="time" required> </div> </div> <div class="form-group col-md-12"> <div id="avnum'+i+'"></div><button class="btn btn-primary" type="button" onclick="add_avail('+i+')">Add Adbreak</button></br></br><button class="btn btn-danger"  type="button" style="float: right;" onclick="cancelwind('+i+')">Cancel Window <i class="fe fe-trash"></i></button> </div> </div> </div>');
      i++;
      document.getElementById("numofwins").value = i;

    });

   });

   function window_start_change(i){
     // to check if it's the first window or not
     if (i > 0){
       // to loop on previous windows
       for (let n = i-1; n >= 0; n--) {
         if (document.getElementById("winend_"+n)){
           // to get the value of it's end and to use it as min
           let end_value_previous = document.getElementById('winend_'+n).value;
           document.getElementById('winstart_'+i).setAttribute("min", end_value_previous);
           // once we found the first previous existing window, we apply this and exit from the loop
           break;
         }
       }
     }
     // end of same window set min
     start_value = document.getElementById('winstart_'+i).value;
     end_window = document.getElementById('winend_'+i);
     end_window.setAttribute("min", start_value);
     // avails set min
     avails = document.getElementById('AV_'+i);
     avails.setAttribute("min", start_value);

   }

   function window_end_change(i){
     // number of windows
     num_wins = document.getElementById("numofwins").value;
     console.log("num_wins:"+num_wins);
     if (i < num_wins){ // 4 5 6
       console.log("i:"+i);

       for (let n = i+1; n <= num_wins; n++) {
         console.log("n:"+n);

         // you can continue on this logic using the inverse of the last funtion
         if (document.getElementById("winstart_"+n)){

           // to get the value of it's end and to use it as min
           let end_value_previous = document.getElementById('winend_'+i).value;
           document.getElementById('winstart_'+n).setAttribute("min", end_value_previous);
           // once we found the first previous existing window, we apply this and exit from the loop
           break;
         }
     }
   }
     // avails set max
     end_value = document.getElementById('winend_'+i).value;
     avails = document.getElementById('AV_'+i);
     avails.setAttribute("max", end_value);
   }


    function cancelwind(index) {
         document.getElementById("num["+index+"]").remove();
         console.log(index+" "+document.getElementById("numofads["+index+"]").value)
    }

    function cancelav(index,j) {

          document.getElementById("id_avail["+index+"]["+j+"]").remove();
          console.log(index+" "+document.getElementById("numofads["+index+"]").value)
    }

    function removead(index) {
          document.getElementById(index.id).style.display = "none";
          document.getElementById(index.id).remove();
          // console.log(index.id)
    }

    function add_avail(index) {
          if (num_of_avails_in_widnow[index] == null ) {
                num_of_avails_in_widnow[index] = 0;
           }

          j = num_of_avails_in_widnow[index];

          window_start_value = document.getElementById('winstart_'+index).value;
          window_end_value = document.getElementById('winend_'+index).value;

           // var id = "select_num_"+index+"_"+j   // select_num_0_0 select_num_0_1 ...
           // var iddel = "del_select_num_"+index+"_"+j   // select_num_0_0 select_num_0_1 ...
           // $("#ads"+index).append('<p name="ad['+index+']['+j+']" id="'+id+'">adspot number '+j+' inside window number '+index+'</p><br>').clone()
           $("#avnum"+index).append('<div class="card" id="id_avail['+index+']['+j+']"> <div class="card-header"> <h3 class="card-title">Define an Adbreak </h3> </div> <div class="card-body row"> <input class="form-control  windid'+index+'" id="numofads['+index+']['+j+']" name="numofads['+index+']['+j+']" type="text" value="" style="display:none;" required> <div class="form-group col-md-4"> <label class="form-label">Avail Start (24H format) </label> <div class="input-group"> <div class="input-group-text"> <i class="fa fa-clock-o tx-16 lh-0 op-6"> </i> </div> <!-- input-group-text --> <input class="form-control windid'+index+'" id="AV_'+index+'" name="availstart['+index+']['+j+']" type="time" placeholder="HH:MM (ex: 14:30)" min="'+window_start_value+'" max="'+window_end_value+'"  value="'+window_start_value+'" required> </div> </div> <div class="form-group col-md-8"> <label class="form-label">Select Adspots</label> <div class="form-group col-md-12"> <div id="adnum'+index+'_'+j+'"> </div> <button class="btn btn-primary" type="button" onclick="add_adspot('+index+', '+j+')">Add Adspot </button> </br> </br> <button class="btn btn-danger"  type="button" onclick="cancelav('+index+', '+j+')" style="float: right;">Cancel Avail <i class="fe fe-trash"></i></button> </div> </div> </div>').clone()
           // here we can call the ajax function on the id
           // loadoptions(id);
           // console.log("#adnum"+index)
           num_of_avails_in_widnow[index]  =  num_of_avails_in_widnow[index]+1;
           document.getElementById("numofavails["+index+"]").value = num_of_avails_in_widnow[index];

          return 1+1;
      }

   function add_adspot(win, av) {
          id = win+"_"+av
          if (num_of_ads_in_avail[win] == null ) {
            num_of_ads_in_avail[win] =[]
          }
         if (num_of_ads_in_avail[win][av] == null ) {
               num_of_ads_in_avail.push({win, av});
               num_of_ads_in_avail[win][av]= 0;
          }
          j = num_of_ads_in_avail[win][av];
          var id = "select_num_"+win+"_"+av+"_"+j  // select_num_0_0 select_num_0_1 ...
          var iddel = "del_select_num_"+win+"_"+av+"_"+j   // select_num_0_0 select_num_0_1 ...
          // $("#ads"+win).append('<p name="ad['+win+']['+av+']" id="'+id+'">adspot number '+av+' inside window number '+win+'</p><br>').clone()
          $("#adnum"+win+"_"+av).append('<div class="form-group col-md-12" id="'+iddel+'"> <select style="width:90%" class="form-control select2-show-search form-select optionsofads" name="ad['+win+']['+av+']['+j+']" id="'+id+'" ></select> <button class="btn btn-danger" type="button" name="button" onclick="removead('+iddel+')"><i class="fe fe-trash"></i></button> </div>').clone()
          // here we can call the aavax function on the id
          loadoptions(id);
          console.log(id)
          num_of_ads_in_avail[win][av]  =  num_of_ads_in_avail[win][av]+1;
          document.getElementById("numofads["+win+"]["+av+"]").value = num_of_ads_in_avail[win][av];

         return 1+1;
     }


</script>
{% endblock content %}