
<?php $__env->startSection('style'); ?>
    <style>
        /* Global style */
        .btn-tertiary {
            color: #555;
            padding: 0;
            line-height: 30px;
            width: 100%;
            margin-top: -1px;
            display: block;
            border: 2px solid #555;

        &
        :hover,

        &
        :focus {
            color: lighten(#555, 20%);
            border-color: lighten(#555, 20%);
        }

        }

        /* input file style */

        .input-file {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;

        + .js-labelFile {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 10px;
            cursor: pointer;

        .icon:before {
        / / font-awesome content: "\f093";
        }

        &
        .has-file {

        .icon:before {
        / / font-awesome content: "\f00c";
            color: #5aac7b;
        }

        }
        }
        }
    </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>

    <?php echo Form::open(array('route' => $route,'method'=>'POST','file'=>'multipart/form-data','class'=>'jform')); ?>

    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 overflow-x-hidden">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 form-group">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="form-group">
                    <label for="file" class="btn btn-tertiary js-labelFile">
                        <input type="file" name="file[]" id="file" class="input-file" multiple accept="image/*">
                        <i class="icon fa fa-upload text-success"></i>
                        <span class="js-fileName">ជ្រើសរើសរូបភាព</span>
                    </label>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center show_percentage">
                <br>
                <h4 ><i class="fa fa-spinner fa-pulse fa-fw"></i><span class="percentage_number">0%</span></h4>
                <progress value="0" max="100" style="width: 100%"></progress>
            </div>
        </div>
        <button type="submit" class="display-none"></button>
    </div>
    <?php echo Form::close(); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('jq'); ?>
    <script>
        $(document).ready(function () {
            $('#file').on('change', function () {
                let text = 'ជ្រើសរើសរូបភាព'
                if (this.files.length <20) {
                    $.each(this.files, function (i, v) {
                        text += v.name + '<br>'
                    });
                } else {
                    text = (this.files.length) + ' files';
                }
                $('.js-fileName').html(text)
            })
        })
    </script>
<?php $__env->stopSection(); ?>





<?php echo $__env->make('layouts.jform', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/nsowos/public_html/shr-brand/resources/views/administrator/setup-item/products/image/upload-image.blade.php ENDPATH**/ ?>