@extends('layouts.master')
@section('content')
<div class="container text-center">    
  <div class="row">
    <div class="col-sm-11">
    	<h1><small>Create Help Topics</small></h1>
    </div>
  </div>
</div>
@if( $errors->count() > 0 )
      <ul>
        @foreach( $errors->all() as $message )
<!--             @component('alert')
 -->              <li class="error ">{{ $message }}</li>
<!--             @endcomponent
 -->        @endforeach
      </ul>
    
@endif

<div class=" col-md-offset-11 paddingBottom10" class="col-sm-7">
    <a class="btn btn-primary" href="{{ $url = route('hot_topics.index')}}"><i class="fa fa-arrow-left" aria-hidden="true"></i>Back</a> 
</div>
{{ Form::Open( [ 'route'=>'hot_topics.store', 'method'=>'post','enctype'=>'multipart/form-data'])}}
  <div class="container">    
    <div class="row">

          <div class = "row">
              <div  class="col-sm-8">
                <div  class= 'form-group'>
                  <label for="category_id">*Category</label>
                    <select name="category_id" id="category_id" class="form-control" required="">
                      <option value=""> -- Select Category --</option>
                      @foreach ($categories as $cat)
                          <option value="{{ $cat->id }}">{{ $cat->category_name }}</option>
                      @endforeach 
                  </select>
                </div>
              </div>
            </div>
            <div class = "row">
              <div  class="col-sm-8">
                <div  class= 'form-group'>
                  <label for="topic_id">*Topics</label>
                    <select name="topic_id" id="topic_id" class="form-control" required="">
                      <option value=""></option>
                      
                  </select>
                </div>
              </div>
            </div>
          <div class = "row">
              <div  class="col-sm-4">
                  <div  class= 'form-group'>
                      {{ Form::label('image',' *Feature Image ')}} 
                    <input type="file" name="image" onchange="readURL(this);" accept=".png, .jpg, .jpeg" class="form-control">
                  </div>
              </div>
              <div  class="col-sm-4">
                <div  class= 'form-group'>
                  <img id="blah" style="margin-top: 15px;" src="{{{asset('images/no-image-tut.png')}}}" class="" width="50" height="50"/>
                </div>
              </div>        
          </div>

          
     </div>
    <div class = "container col-md-offset-7">
           {{ Form::submit('Save',['class' => 'btn btn-primary']) }}
    </div>
  </div>   
{{ Form::close()}}

<!-- CK Editor -->
<script src="https://cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>
<script>
  $(window).load(function(){
    CKEDITOR.replace('editor1');      
  });
</script>
<script>
 function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
              }
            }

  $("select[name='category_id']").change(function(){
      var id = $(this).val();
      var token = $("input[name='_token']").val();
      $.ajax({
          url: "{{ url('get_topics') }}",
          method: 'POST',
          data: {id:id, _token:token},
          success: function(data) {
            if(data && data.length>0){
                console.log(data);
                $("select[name='topic_id'").html('');
                option='<option value=""> -- Select Topic --</option>';
                data.forEach(function(dt){
                   option+='<option value="'+dt.id+'">'+dt.topic+'</option>';
                });               
                $("select[name='topic_id'").html(option);              
            }else{
              $("select[name='topic_id'").html(''); 
            }
          }
      });
  });    
</script>
@endsection()