{% 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">View Playlist</h1>
            <ol class="breadcrumb">
               <li class="breadcrumb-item"><a href="#">Playlists</a></li>
               <li class="breadcrumb-item active" aria-current="page">View Your Playlist</li>
            </ol>
         </div>

         <div class="ms-auto pageheader-btn">
           <form method="post" action="{% url 'edit_playlist' id_playlist=playlist.id_playlist %}">
             {% csrf_token %}
             <button class="btn btn-primary btn-icon text-white me-2"  name="edit_btn" value="edit" type="submit">Edit</button>	&nbsp;
             <button class="btn btn-primary btn-icon text-white me-2"  name="duplicate_btn" value="duplicate" type="submit">Duplicate</button>
             <button class="btn btn-primary btn-icon text-white me-2"  name="insertion_results_btn" value="insertion_results" type="submit">insertion results</button>
           </form>
         </div>

      </div>

      {% if record_inserted == 1 %}
         <div class="alert alert-success">
              <strong>Playlist has been successfully updated</strong>
          </div>
      {% endif %}
      {% if record_inserted == 2 %}
         <div class="alert alert-success">
              <strong>Playlist has been successfully inserted</strong>
          </div>
      {% endif %}
      <div>

      </div>
      <div class="row">

         <div class="col-12 col-sm-12">

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

               <div class="card">
                  <div class="card-header">
                     <h3 class="card-title">[ Channel - Zone - 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">Window & 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) </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 disabled="disabled" class="form-control" id="q" 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)</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 disabled="disabled" class="form-control" id="q"  value="{{ window.window_end }}" name="windowend[{{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"> 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 disabled="disabled" 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">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 disabled="disabled" 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>

            </form>
         <!-- 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="q" 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="q" 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++;
      console.log(i);
      document.getElementById("numofwins").value = i;
    });
   });
   });

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

          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="00:01" max="23:59" 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 %}