@extends('admin.template')

@section('styles')

<link rel="stylesheet" href="/select2/css/select2.min.css">

<style type="text/css">
  .btn-file {
      position: relative;
      overflow: hidden;
  }
  .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
  }

  .img_upload{
      max-height: 150px;
      max-width: 150px;
  }

  .img_box{
      width: 100%;
      text-align: center;
      height: 150px;
      line-height: 150px;
      border:1px Solid #a9a9a9;
  }

  .img_main_box{
      max-width: 200px;
      float: left;
  }

  .sm_txt{
      font-size: 11px;
  }

  .m_top{
      margin-top: 5px;
  }

  .input_txt{
      font-size: 16px;
  }

  .file_btn{
      width: 84px;
      height: 34px;
  }

  .margintop5{
    margin-top: 5px;
  }

  #industries_drop ul{
    padding: 0px;
    list-style: none;
  }

  #industries_drop ul li{
    padding: 5px;
    border: 1px Solid #ccc;
    font-size: 12px;
    font-weight: bold;
    text-transform: capitalize;
  }

  #industries_drop ul li:hover{
    cursor: pointer;
    background-color: #949292;
    color: #fff;
  }

  .cap_txt{
    text-transform: capitalize;
  }

</style>

@endsection


@section('content')

<div class="main-content-container container-fluid px-4">
  <!-- Page Header -->
  <div class="page-header row no-gutters py-4">
    <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
      <span class="text-uppercase page-subtitle">Products</span>
      <h3 class="page-title">Add New Video</h3>
    </div>
  </div>
  <!-- End Page Header -->
  <!-- Default Light Table -->
  <div class="row">
    <div class="col-lg-12">
      <div class="card card-small mb-4">
        <div class="card-header border-bottom">
          <h6 class="m-0">Video Details</h6>
          @foreach ($errors->all() as $error)
            <div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
              {{ $error }}
            </div>
          @endforeach
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item p-3">
            <div class="row">
              <div class="col">
                {!! Form::open(['route' => 'admin.videos.store','class'=>'login_form','id'=>'login_form', 'files' => 'true']) !!}
                  
                  {{csrf_field()}}
                  
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Title</label>
                      {{Form::text('tittle',null,['class' => 'form-control', 'placeholder' => 'Please enter product title','required'=>''])}} 
                    </div>
                  </div>

                  
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Video Thumbnail Image 460x670</label> <br>
              
                      <input type='file' name='thumbnail' >
                    </div>
                  </div>
                  
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Video thumbicon Image </label> <br>
              
                      <input type='file' name='thumbicon' >
                    </div>
                  </div>
                  
                  
                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Video</label> <br>
                      <input type='file' name='video' >
                    </div>
                  </div>
                  
                  
                  <button type="submit" class="btn btn-accent">Add</button>
                {{Form::close()}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- End Default Light Table -->
</div>

@endsection


@section('scripts')


<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="/select2/js/select2.min.js"></script>

<script type="text/javascript">

    $(".select2").select2();

    function add_more(){
        var html = '';
        html += '<div class="row margintop5">';
        html += '<div class="col-md-6"><input class="form-control input input-sm" placeholder="label" name="attribute_label[]" type="text"></div>';
        html += '<div class="col-md-6"><input class="form-control input input-sm" placeholder="value" name="attribute_value[]" type="text"></div>';
        html += '</div>';

        $('#more_attributes').append(html);
    }

    $(document).ready( function() {
      
      $(document).on('change', '.btn-file :file', function() {
      var input = $(this),
          label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
      input.trigger('fileselect', [label]);
      });

      $('.btn-file :file').on('fileselect', function(event, label) {
          
          var input = $(this).parents('.input-group').find(':text'),
              log = label;
          
          if( input.length ) {
              input.val(log);
          } else {
              if( log ) alert(log);
          }
      
      });

      function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();
              
              reader.onload = function (e) {
                  $('#img_upload').attr('src', e.target.result);
              }
              
              reader.readAsDataURL(input.files[0]);
          }
      }

      $("#imgInp").change(function(){
          readURL(this);
      });


      @for($i=1;$i<6;$i++)
        function readURL_{{$i}}(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                
                reader.onload = function (e) {
                    $('#img_upload_{{$i}}').attr('src', e.target.result);
                }
                
                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#imgInp_{{$i}}").change(function(){
            readURL_{{$i}}(this);
        });
      @endfor

    });

    // tinymce.init({ selector:'textarea' });

    tinymce.init({
      mode : "specific_textareas",
      editor_selector : "mceEditor",
      // images_upload_url: '/member/mce_upload_image',
      file_picker_types: 'image media',
      relative_urls: false,
      file_picker_callback: function(callback, value, meta) {
          var input = document.createElement('input');
          input.setAttribute('type', 'file');
          //input.setAttribute('accept', 'image/*');
          
          input.onchange = function() {
              //var file = this.files[0];
              var token = "{{csrf_token()}}";
              var url = '/admin/mce_upload_image';
              //var data_str = $(this).serialize();
              
              var formData = new FormData();

              // add assoc key values, this will be posts values
              formData.append("file", this.files[0],"filetoupload");
              formData.append("_token", token);

              // formData = formData.serialize();
              
              $.ajax({
                  type: 'POST',
                  url: url,
                  data: formData,
                  cache : false,
                  processData: false,
                  contentType: false,
                  success: function(data){
                      callback(data, {alt: 'View File'});
                  },
                  error: function(data){
                    var err = data.responseJSON.errors.file[0];

                    // failure('Error : '+err);
                    tinymce.activeEditor.windowManager.alert('Error : '+err);
                  }
              });
          };
          
          input.click();
        },
      
      width: 600,
      height: 300,
      plugins: [
        'link image',
        'media',
        'code',
        'table'
      ],
      toolbar: [
        'link image',
        'media',
        'table'
      ]

    });
    

    var searchRequest = null;
    var minlength = 1;

    $("#industry_id").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            if (searchRequest != null) 
                searchRequest.abort();
            searchRequest = $.ajax({
                type: "GET",
                url: "/admin/get_industries",
                data: {
                    'search_ind' : value
                },
                dataType: "JSON",
                success: function(data){
                    var html = "<ul>";
                    $.each(data, function(key, item) {
                        html += "<li onclick=\"set_ind("+key+",'"+item+"')\" >"+item+"</li>";
                    });
                    html += "</ul>";

                    document.getElementById('industries_drop').innerHTML = html;
                    document.getElementById('industries_drop').style.display = 'block';
                }
            });
        }
    });


    function set_ind(id,item){
      document.getElementById('industry_id').value = item;
      document.getElementById('ind_id').value = id;

      document.getElementById('industries_drop').innerHTML = "";
      document.getElementById('industries_drop').style.display = "none";
    }


</script>

@endsection