@push('css-stack')
<style type="text/css">
.container1 {
  width: 550px;
  padding: 15px;
}
</style>
@endpush

<div id="myDIV" class="alert alert-danger fade in alert-dismissable myDIV" style="display:none !important;">
          Choose atleast one screensaver.
</div>

<div class="box-body">
    <p>
        <div class='form-group{{ $errors->has('name') ? ' has-error' : '' }}'>
		    {!! Form::label('Brand') !!}
                <select name="brand" id="brand" class="form-control" style="width:300px;" message="select a brand" required>
                    <option value="">None</option>
                                              @foreach($brands as $brand) 
                        <option value="{{$brand->brand_key}}">{{$brand->name}}</option>
                        @endforeach
                                      </select>
                <br>
                

            {!! Form::label('Image') !!}
                <!-- <input type='file' name="image[]" onchange="readURL(this);" required accept="image/x-png,image/gif,image/jpeg" onchange="validateFileType();" multiple/>
                <div class="box-body" id="myDIV" style="display:none !important">
                    <img class="img-rounded" id="blah" src="#" style="width:80%;height:200px;" alt="" >
                </div> -->
                <div class="container1" data-bind="fileDrag: multiFileData">
                    <div class="form-group row">
                        <div class="col-md-12">
                            <input type="file" name="images[]" id="images" multiple data-bind="fileInput: multiFileData, customFileInput: {
                              buttonClass: 'btn btn-success',
                              fileNameClass: 'disabled form-control',
                              onClear: onClear,
                            }"  required>
                                  <!-- ko foreach: {data: multiFileData().dataURLArray, as: 'dataURL'} -->
                            <img style="height: 100px;width:auto; margin: 5px;float: left;" class="img-rounded  thumb" data-bind="attr: { src: dataURL }, visible: dataURL">
                                  <!-- /ko --><br>
                            <div data-bind="ifnot: fileData().dataURL">
                                <label class="drag-label">Drag files here</label>
                            </div>
                        </div>
                    </div>
                </div>
		</div>
    </p>
</div>

<div class="form-group" id="progressbar" style="display:none !important;">
    <div class="progress"  >
        <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
    </div>

    <div class="msg"></div>
</div>

@push('js-stack')
<script type="text/javascript">
var x = document.getElementById("myDIV");
x.style.display = "none";
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var x = document.getElementById("myDIV");
                    x.style.display = "block";
                    $('#blah').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
<!--     <script type="text/javascript">
    function validateFileType(){
        var fileName = document.getElementById("fileName").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
            //TO DO
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
    }
</script> -->
<script type="text/javascript">
      $(function(){
  var viewModel = {};
  viewModel.fileData = ko.observable({
    dataURL: ko.observable(),
    // base64String: ko.observable(),
  });
  viewModel.multiFileData = ko.observable({
    dataURLArray: ko.observableArray(),
  });
  viewModel.onClear = function(fileData){
    if(confirm('Are you sure?')){
      fileData.clear && fileData.clear();
    }                            
  };
  viewModel.debug = function(){
    window.viewModel = viewModel;
    console.log(ko.toJSON(viewModel));
    debugger; 
  };
  ko.applyBindings(viewModel);
});
</script>


<script>
            $(function () {
                $('#ajaxsubmit-form').click(function (e) { 
                  //e.preventDefault();
                    $('.myprogress').css('width', '0');
                    $('.msg').text('');
                    var filename = $('#brand').val();
                    var myfile = $('#images').val();
                    if (filename == '' || myfile == '') {
                        alert('Please enter file name and select file');
                        return;
                    }
                    $('#ajaxsubmit-form').attr('disabled', 'disabled');
                    var x = document.getElementById("progressbar");
                    x.style.display = "block";
                    $('.msg').text('Uploading in progress...');

                    var formData = new FormData($('#screensaverSubmit')[0]);
                    console.log(formData.entries);
                    $.ajax({
                        url: "