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

<style media="screen">
   .select2-container--default .select2-results__option[aria-selected=true] {
   display:none;
   }
</style>

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<!--app-content open-->
<div class="app-content">
   <div class="side-app">
      <!-- PAGE-HEADER -->
      <div class="page-header">
         <div>
            <h1 class="page-title">Edit Playlist</h1>
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="#">Playlists</a></li>
               <li class="breadcrumb-item active" aria-current="page">Edit Your Playlist</li>
            </ol>
         </div>

      </div>

      <div class="row">
         <div class="col-12 col-sm-12">
            <form  method="post" action="{% url 'update_playlist' id_playlist=playlist.id_playlist %}" 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="{{number_of_wins}}" style="display:none;">
                <input class="form-control" id="version" name="version" type="text" value="{{  playlist.version }}" style="display:none;" >
                <input class="form-control" id="draft_version" name="draft_version" type="text" value="{{  playlist.draft_version }}" 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 : {{ playlist.id_channel.channel_name }}</label>
                        <input name="channel_id" id="channels" value="{{ playlist.id_channel.id_channel }}" style="display:none;">
                     </div>
                     <div class="form-group col-md-4">
                        <label class="form-label">Region : {{ region.region }}</label>
                        <input name="zonename" id="regions" value="{{  region.zonename }}" style="display:none;">
                     </div>
                     <div class="form-group col-md-4">
                        <label class="form-label">Day : {{ playlist.broadcastdate }}</label>
                        <div class="input-group">
                           <input name="day" value="{{ d }}" style="display:none;">
                        </div>
                     </div>

                  </div>
               </div>

               <div id="fieldList">

                  {% for window in data %}
                  <div class="card windoww" id="num[{{ window.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{{window.i}}" id="numofavails[{{window.i}}]" name="numofavails[{{window.i}}]" type="text" value="{{ window.num_of_avails }}"   style="display:none;">
                        <div class="form-group col-md-6">
                           <label class="form-label">Window Start (24H format) : {{ window.window_start }}</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 class="form-control" id="winstart_{{window.i}}" value="{{ window.window_start }}" name="windowstart[{{window.i}}]"  type="time" placeholder="HH:MM (ex: 14:30)" min="00:01" max="23:59" >
                           </div>
                        </div>
                        <div class="form-group col-md-6">
                           <label class="form-label">Window End (24H format) : {{ window.window_end }}</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 class="form-control" id="winend_{{window.i}}" value="{{ window.window_end }}" name="winend_[{{window.i}}]"  placeholder="HH:MM (ex: 15:00)" min="00:01" max="23:59" type="time" >
                           </div>
                        </div>


                        <div class="form-group col-md-12 availss">
                           <div id="avnum{{window.i}}">
                             {% for avail in window.avails_in_win %}

                              <div class="card" id="id_avail[{{ window.i }}][{{ avail.j }}]">
                                 <div class="card-header">
                                    <h3 class="card-title">Define an Adbreak </h3>
                                 </div>
                                 <div class="card-body row">
                                    <input class="form-control  windid{{window.i}}" id="numofads[{{window.i}}][{{avail.j}}]" name="numofads[{{window.i}}][{{avail.j}}]" type="text" value="{{ avail.num_of_adspots }}"  style="display:none;">
                                    <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 class="form-control windid{{window.i}}" value="{{ avail.avail_start }}" id="q" name="availstart[{{window.i}}][{{avail.j}}]" type="time" placeholder="HH:MM (ex: 14:30)" min="00:01" max="23:59" >
                                       </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{{window.i}}_{{avail.j}}">
                                            {% for ad in avail.adspots_in_avail %}
                                             <div class="form-group col-md-12" id="del_select_num_{{window.i}}_{{avail.j}}_{{ad.k}}">
                                                <select style="width:90%" class="form-control select2-show-search form-select optionsofads" name="ad[{{window.i}}][{{avail.j}}][{{ad.k}}]" id="'+id+'" >
                                                    <option value="{{ ad.id_adspot.id_adpost }}" selected>{{ ad.id_adspot.adspot_name }}</option>
                                                </select>
                                                <button class="btn btn-danger" type="button" name="button" onclick="removead(del_select_num_{{window.i}}_{{avail.j}}_{{ad.k}})">
                                                <i class="fe fe-trash"></i></button>
                                             </div>
                                             {% endfor %}
                                          </div>
                                          <button class="btn btn-primary" type="button" onclick="add_adspot({{window.i}}, {{avail.j}})">Add Adspot </button>
                                          </br> </br> <button class="btn btn-danger"  type="button" onclick="cancelav({{window.i}}, {{avail.j}})" style="float: right;">
                                          Cancel Avail <i class="fe fe-trash"></i></button>
                                       </div>
                                    </div>
                                 </div>
                           </div>
                           {% endfor %}

                         </div>
                      </div>
                           <div class="form-group col-md-12 ">
                           <button class="btn btn-primary" type="button" onclick="add_avail({{window.i}})">Add Adbreak</button>
                           <button class="btn btn-danger"  type="button" style="float: right;" onclick="cancelwind({{window.i}})">Cancel Window <i class="fe fe-trash"></i></button>
                         </div>
                  </div>
                  </div>
               {% endfor %}
               </div>
               <button class="btn btn-primary" type="button" id="addMore">Add Window</button>
               <!-- <button class="btn btn-success" style="float:right;" type="submit">Apply</button> -->
               <!-- <button class="btn btn-success" style="float:right;" type="submit" value="apply" name="apply_btn">Apply</button>
               <button class="btn btn-success" style="float:right;" type="submit" value="draft" name="draft_btn">Save as Draft</button> -->

               <button class="btn btn-success" style="float:right; margin-left:10px;" type="submit" value="apply" name="apply_btn">Submit 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>
            <br>
         <!-- COL END -->
      </div>
      <!-- ROW-5 END -->
   </div>
</div>

<!-- ============= -->
<!-- |||||||||||||||  this Javascript method, adds dynamicaly new fields, later we should make the name an array to loop on them via POST -->
<!-- ============= -->





 <script type="text/javascript">




   $(document).ready(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").append(data);
         // replace the contents of the adspots input with the data that came from the server
              }
            });
   });


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

       // function removead(index) {
       //       // document.getElementById(index).hide();
       //       // document.getElementById(index).value = -1;
       //       console.log(index+" "+document.getElementById(index).value)
       //
       // }

   });

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


   //var win_length = document.getElementsByClassName("card windoww").length
   //i = win_length;
   //document.getElementById("numofwins").value = i;
   //var av_length = document.getElementsByClassName("form-group col-md-12 availss").length
   //console.log(av_length);
   ///console.log(z);
   let i = {{number_of_wins}};
   console.log(i);
   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 ]
                        }
                  });
          });

  $(document).ready(function(){
    $("#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="0" 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+'" name="winend_['+i+']"  onchange="window_end_change('+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++;
      console.log(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) {
        var num_av=0;
        //console.log(index);
         //console.log(document.getElementById("numofavails["+index+"]"));
          //num_av = document.getElementById("numofavails["+index+"]").value;
          if (document.getElementById("numofavails["+index+"]") == null ) {
                num_av = 0;
           } else {
             num_av = document.getElementById("numofavails["+index+"]").value;
             console.log(num_av);
           }

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

          j = parseInt(num_av);
          //console.log(j);

           var id = "select_num_"+index+"_"+j
           var iddel = "del_select_num_"+index+"_"+j
           // $("#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="0" 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="q" 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 = j+1;

          return 1+1;
      }

      function add_adspot(win, av) {

             id = win+"_"+av;
             //num_ad = document.getElementById("numofads["+win+"]["+av+"]").value;
             //console.log(num_ad = document.getElementById("numofads["+win+"]["+av+"]").value);
             if (document.getElementById("numofads["+win+"]["+av+"]") == null ) {
               num_ad = 0;
             } else {
               num_ad = document.getElementById("numofads["+win+"]["+av+"]").value;
               console.log('num_ad:'+ num_ad);

             }
            //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 = parseInt(num_ad);

             var id = "select_num_"+win+"_"+av+"_"+j
             var iddel = "del_select_num_"+win+"_"+av+"_"+j
             // $("#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 = j + 1;

            return 1+1;
        }






</script>
{% endblock content %}