// Необходимые параметры и функции
var form_selector = '#form'

function b64toBlob(dataURI) {
    var 
    byteString = atob( dataURI.split(',')[1] ),
    ab = new ArrayBuffer( byteString.length ),
    ia = new Uint8Array( ab )

    for (var i = 0; i < byteString.length; i++)
      ia[i] = byteString.charCodeAt(i)
  
    return new Blob( [ab], { type: 'image/jpeg' } )
}

// Подключаем перетаскивание файлов
$(document)
  .find( form_selector )
  .find( '#files_prev ._items' )
  .sortable()

// При добавлении файлов
$(document)
  .find( form_selector )
  .find( '#file_add' )
  .on( 'change', function( elem ){
    var oFiles = elem.target.files // Файлы
    
    // + Перебираем выбранные файлы
    $.each( 
      oFiles, 
      function( index, elem ){
        // + Получаем изображение
        var readerImg = new FileReader()
        readerImg.onloadend = function () {
          // + Формируем html
          var 
          resultHtml  = '<li class="_item">'
            resultHtml += '<img'
              resultHtml += ' src="' + readerImg.result + '"'
              resultHtml += ' name="' + elem.name + '"'
            resultHtml += '/>'
            resultHtml += '<span class="_remove">x</span>'
            resultHtml += '<label>'
              resultHtml += '<input type="radio" name="main_img"/>'
              resultHtml += 'Обложка'
            resultHtml += '</label>'
          resultHtml += '</li>'

          // + Добавляем файлы в область файлов
          $(document)
            .find( form_selector )
            .find( '#files_prev ._items' )
            .append( resultHtml )
        }
        // + Загружаем изображение в превью
        readerImg.readAsDataURL( elem )
      }
    )
  
    return false
  })

// Сохраниение и отправка
$(document)
  .find( form_selector )
  .on( 'submit', function(){
    // + Если поля заполненны верно
    if ( $( document ).find( form_selector )[0].checkValidity() ){
      
     var formData = new FormData() // Все изображения

     // + Перебираем загруженные файл
     $.each( 
       $(document).find( '#files_prev ._items ._item img' ), 
       function( index, elem ){
         // + Добавляем все загруженные картинки
         formData.append(
           'files[]', 
           b64toBlob( $(this).attr('src') ), 
           $(this).attr('name')
         )
       }
      )
      
      // + Перебираем остальные поля
      var arrValues = $( document ).find( form_selector ).serializeArray()

      $.each( 
        arrValues, 
        function( index, value ){
          formData.append( 
            value['name'], 
            value['value'] 
          )
        }
      )
      
      // + Вывод результата
      for( var pair of formData.entries() ) {
        console.log(pair[0]+ ', '+ pair[1])
      } 
    }
    
    return false
  })

// Удаление
$(document)
  .on( 
    'click', 
    form_selector + ' #files_prev ._items ._item ._remove',
    function(){
      $(this).parents('._item').remove()
    }
  )

// Обложка
$(document)
  .on( 
    'click', 
    form_selector + ' #files_prev ._items ._item [name="main_img"]',
    function(){
      $(this).parents('._item').prependTo( form_selector + ' #files_prev ._items' )
    }
  )