{% extends "base.html" %}
{% load static %}
{% block content %}
<div class="app-content">
    <div class="side-app">

    <div class="page-header">
        <div>
            <h1 class="page-title">Edit Emission</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#"> Emissions </a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit Emission </li>
            </ol>
        </div>


    </div>

    		<form action="{% url 'update_emission' id_emission=emission.id_emission %}" autocomplete="off" method="post" enctype="multipart/form-data" id='post-form'>
    			{% csrf_token %}
          <div class="row">
            <div class="card">
              <div class="card-header">
                  <h3 class ="card-title" >Info About The Emissions</h3>

              </div>
              <div class="card-body">
                <div class="row row-sm">
                  <div class="col-lg">
                    <label class="form-label">Channel</label>
                    <select class="form-control select2-show-search form-select mb-4" id="channel" name="channel" data-placeholder="Choose one">
                      <option value="{{ emission.id_channel }}"> {{ emission.id_channel.channel_name }} </option>
                      {% for channel in channels %}
                        <option value="{{ channel.id_channel}}"> {{ channel.channel_name}}</option>
                      {% endfor %}
                    </select>
                  </div>
                    <div class="col-lg">
                        <label class="form-label">Name</label>
                        <input name="emission_name" value='{{ emission.emission_name}}' class="form-control mb-4" placeholder="Emission's Name"  type="text" >
                    </div>
                   
              </div>
              <div class="row row-sm">
                <div class="col-lg">
                    <label class="form-label">Start Time Emission </label>
                    <input id="emission_start" name="emission_start" value='{{start}}' class="form-control mb-4" placeholder="Start Time Emission "  type="datetime-local" >
                </div>
                <div class="col-lg">
                    <label class="form-label">End Time Emission </label>
                    <input name="emission_end" value='{{end}}' class="form-control mb-4" placeholder="End Time Emission"  type="datetime-local" >
                </div>
                <div class="row row-sm">
                  <div class="col-lg">
                    <label class="form-label">Episode Name</label>
                    <input id="episode_name" name="episode_name" value="{{ emission.episode_name}}" class="form-control mb-4" placeholder="Episode Name"  type="text" >
                  </div>
                  <div class="col-lg">
                    <label class="form-label">Season Number</label>
                    <input name="season_number" value="{{emission.season_number}}" class="form-control mb-4" placeholder="Season Number"  type="text" >
                  </div>
                  <div class="col-lg">
                    <label class="form-label">Episode Number</label>
                    <input name="episode_number" value="{{ emission.episode_number }}" class="form-control mb-4" placeholder="Episode Number"  type="text" >
                  </div>
                  
  
  
                </div>
                <div class="col-md-12">
                  <label class="form-label">Short Description (Optional)</label>
                  <textarea name="short_desc" class="form-control" rows="3" spellcheck="false" data-gramm="false">{{moreinfo.desc_short}}</textarea>
               </div>

              </div>
              <br><br>
              
            </div>

          </div>
          <div id="more" class="card"  >
            <div class="card-header"> 
              <h3 class="card-title"> More info </h3>
            </div>
            <div class="card-body">
              <div class="row row-sm">
                <div class="col-lg">
                  <label class="form-label">Genre</label>
                  <input name="genre" value='{{ moreinfo.genre }}' class="form-control mb-4" placeholder="Genre"  type="text" >
                </div>
                <div class="col-lg">
                  <label class="form-label">Category</label>
                  <input name="category" value='{{ moreinfo.category }}' class="form-control mb-4" placeholder="Category"  type="text" >
                </div>


              </div>
              <div class="row row-sm">
                
                  <label class="form-label">Extended Description</label>
                  <textarea name="extended" class="form-control" rows="3" spellcheck="false" data-gramm="false">{{ moreinfo.extended_desc }}</textarea>
               </div>


              </div>
            </div>
          </div>
          <div id="more1" class="card"  >
            <div class="card-header"> 
              <h3 class="card-title"> Casts  </h3>
            </div>
            <div class="card-body">
              <div class="row row-sm">
                <div class="col-lg">
                  <label class="form-label">Role</label>
                  <input name="role" class="form-control mb-4" placeholder="Role" value="{{ role.role }}"  type="text" >
                </div>
                <div class="col-lg">
                  <label class="form-label">Name</label>
                  <input name="director_name" class="form-control mb-4" placeholder="Name .."  value="{{ role.name }}" type="text" >
                </div>


              </div>
              
            </div>
          </div>
          <div id="more2" class="card" >
             <div class="card-header">
               <h3 class="card-title"> Image About Emission</h3>
             </div>
             <div class="card-body">
              <div class="col-md-12">
                <label class="form-label">Image</label>
                <img src="/static/{{moreinfo.image}}"  width="320" height="240">
                <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" id="videoUpload" class="file_multi_video" name="image" style="display: none;" accept=".jpg , .png"  />
                  </label>
                </div>
             </div>
             <div class="col-md-12">
              <label class="form-label">Trailer</label>
              <video width="320" height="240" controls>
                <source src="/static/{{ moreinfo.trailer }}" type="video/mp4">
              </video>
              <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" id="videoUpload" class="file_multi_video" name="trailer" style="display: none;" accept=".mp4"  />
                </label>
              </div>
           </div>
           <div class="col-md-12">
            <label class="form-label">GIF</label>
            <img src="/static/{{moreinfo.gif}}" alt="{{emission.emission_name}}" width="320" height="240">
            <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" id="videoUpload" class="file_multi_video" name="gif" style="display: none;" accept=".gif"  />
              </label>
            </div>
         </div>

             </div>
          </div>
        	<div class="card" >
 				<div class="card-header">
							<h3 class="card-title">Video procesing</h3>
									</div>
									<div class="card-body">
                    <p class="btn btn-primary" onclick="showDevice()">Device</p>
                    <p class="btn btn-primary" >URL</p>
                    <div class="row row-sm">
                      <div id='device'>
                      <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" id="videoUpload" class="file_multi_video" name="file" style="display: none;" accept=".mp4"  />
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="row row-sm">
                    <div class="col-md-12">
                    <div id='url' style="display:none"  >
											<label class="form-label">URL</label>
                        <input id="url_input" name="url" class="form-control mb-4" placeholder="url"  type="text" >
										</div>
                  </div>
										<br>

                  </div>  
									</div>
                  <div class="row row-sm">
                  <div class="col-lg">
                  <center>
  									<video autoplay width="480" height="480" id="video" controls >
    										<source src="/static/{{moreinfo.emission_video_path}}"  type="video/mp4">
  									</video>
                  </center>
                  </div>
                  <div class="col-lg">
                    <center>
                      <video autoplay width="480" height="480" id="video" controls >
                          <source  id="source" type="video/mp4">
                      </video>
                    </center>
                </div>
              </div>
                  <div class="card-body">
										<div class="row row-sm">


                        <div class="col-lg">
                            <label class="form-label">Start Time </label>
                            <input name="start" class="form-control mb-4" placeholder="00:00:00"  type="text" >
                        </div>
                        <div class="col-lg">
                            <label class="form-label">End Time </label>
                            <input name="end" class="form-control mb-4" placeholder="00:00:00"  type="text" >
                        </div>
                        </div>
												<button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button" onclick="load_video()">Submit</button>
											</div>
										</div>
									</div>
								</div>
    		</form>


</div>
</div>
<script type="text/javascript">
  $(document).ready(function() {
       $('#emission_start').change(function(){
           //var url = "{% url 'get_emission' %}";
           var start = document.getElementById("emission_start").value;
           console.log(start);
           document.getElementById('emission_end').setAttribute('min',start);
           
       });

   });
</script>
<script type="text/javascript">
  		document.getElementById('post-form').reset();
		$(document).on("change", ".file_multi_video", function(evt) {
	  	var $source = $('#source');
	  	$source[0].src = URL.createObjectURL(this.files[0]);
	  	$source.parent()[0].load();
		});

		$('#end').change(function(){
			var end=$(this).val();
			console.log(end);
			$.ajax({
				url:'check_time',
				data:{
					'end':end
				},
				dataType:'json',
				success:function(data){
					if(data.greather){
						alert('Enter a valid end time')
					}
				}
			})
		})

    

    function showHideRow() {
      var x = document.getElementById('more');
      var y = document.getElementById('more2');
      var z = document.getElementById('more1');
  if (x.style.display === 'none') {
    x.style.display = 'block';
    y.style.display = 'block';
    z.style.display = 'block';
  } else {
    x.style.display = 'none';
    y.style.display = 'none';
    z.style.display = 'none';
  }
          }
          function showURL() {
      var x = document.getElementById('device');
      var y = document.getElementById('url');
      
  if (y.style.display === 'none') {
    x.style.display = 'none';
    y.style.display = 'block';
    document.getElementById('videoUpload').removeAttribute('required');
    document.getElementById('url_input').required = true;
    
  } 
          }
    function showDevice() {
      var x = document.getElementById('device');
      var y = document.getElementById('url');
      
  if (x.style.display === 'none') {
    y.style.display = 'none';
    x.style.display = 'block';
    document.getElementById('device').required = true;
    document.getElementById('url').required = false;
    
  } 
          }


</script>



<!--<script type="text/javascript">
	'undefined'=== typeof _trfq || (window._trfq = []);
	'undefined'=== typeof _trfd && (window._trfd=[]),
	_trfd.push({'tccl.baseHost':'secureserver.net'}),
	_trfd.push({'ap':'cpbh-mt'},
		{'server':'p3plmcpnl487010'},
		{'id':'8437534'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support
</script>
<script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'> -->
  {% endblock %}