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

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


    </div>

    		<form action="#" method="post" enctype="multipart/form-data" autocomplete="off" 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=""> Choose one </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 type="text" name="emission_name" class="form-control mb-4" placeholder="Emission's Name"  list='emisionname'  required>
                        <datalist id="emisionname">
                          <option value="Choose one"></option>
                        </datalist>
                    </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" class="form-control mb-4" placeholder="Start Time Emission "  type="datetime-local" required>
                </div>
                <div class="col-lg">
                    <label class="form-label">End Time Emission </label>
                    <input id="emission_end" name="emission_end" class="form-control mb-4" placeholder="End Time Emission"  type="datetime-local" required>
                </div>
                
                

              </div>
              <br><br>
              
            </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>
                <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>
          </div>
          <button type="submit" style="width:100px; text-align:center;" class="btn btn-primary" name="button" onclick="load_video()">Submit</button>

									</div>
								</div>
    		</form>


</div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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')
					}
				}
			})
		})





    

   
</script>

<script type="text/javascript">
  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 %}