<?php $__env->startSection('content'); ?>
 <!-- start top page -->
 <section class="top-page">
        <div class="container">
            <ol class="breadcrumb">
            <li><a href="<?php echo e(route('home')); ?>"><?php echo e(trans('massege.home')); ?></a></li>
                <?php if(app()->getLocale() == 'ar'): ?>
                <li class="active"><?php echo app('translator')->getFromJson('massege.Suggestions'); ?></li>
                <?php else: ?>
                <li class="active"><?php echo app('translator')->getFromJson('massege.Suggestions'); ?></li>
                <?php endif; ?>
            </ol>
        </div>
    </section>
    <!-- end top page -->
    <?php if(\Session::has('success')): ?>
            <div class="col-xs-12">
                <div class="alert alert-success">
                    <button type="button" class="close pull-left" data-dismiss="alert">x</button>
                  
                    <strong>success</strong>تم ارسال  اقتراح  بنجاح شكرا لاهتمامك
                </div>
            </div>
        <?php endif; ?>
    <!-- start contentpage -->
    <section class="content-page p-80">
        <div class="container">
            <div class="row  justify-content-center">
                <div class="col-md-10 col-sm-10 col-12">
                    <div class="box-account">
                        <form class="form_container" action="<?php echo e(route('suggest.store')); ?>" method="POST" enctype="multipart/form-data">
                                    <?php echo e(csrf_field()); ?>

                            <div class="title-sec">
                                <h3><i class="far fa-edit"></i> <?php echo app('translator')->getFromJson('massege.Suggestion'); ?></h3>
                                <hr>
                            </div>
                            <div class=" box">
                                <div class="row ">
                                    <div class=" col-md-12">
                                        <div class="form-group ">
                                            <label><?php echo app('translator')->getFromJson('massege.Description'); ?></label>
                                            <textarea class="form-control" rows="3" placeholder="<?php echo app('translator')->getFromJson('massege.Description'); ?>" name="description"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <fieldset class="form-group">
                                            <a href="javascript:void(0)" onclick="$('#pro_image').click()"><?php echo app('translator')->getFromJson('massege.Upload Image'); ?></a>
                                            <input type="file" id="pro_image" name="pro_image[]" style="display: none;" class="form-control" multiple>
                                        </fieldset>
                                       <div class="form-group">
                                        <div class="preview-images-zone" onclick="$('#pro_image').click()">
                                            <div class="preview-image preview-show-1">
                                                <div class="image-cancel" data-no="1">x</div>
                                                <div class="image-zone"><img id="pro-img-1" src="<?php echo e(asset('/')); ?>/assetfront/images/test.gif" class="img-fluid"></div>
                                               
                                            </div>
                                           
                                        </div>
                                       </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                             <video width="500" controls>
                                                <source src="<?php echo e(asset('/')); ?>/assetfront/images/2.jpg}}" id="video_here">
                                                        
                                               </video>
                                            </div>
                                               <div class="form-group">
                                               <div class="file-upload">
                                                    <label for="upload" class="file-upload__label"><?php echo app('translator')->getFromJson('massege.Upload Video'); ?></label>
                                                    <!-- <input id="upload" class="file-upload__input" type="file" name="file-upload"> -->
                                                    <input type="file" name="file" class="file_multi_video"  id="upload" accept="video/*">
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center"><button type="submit" class="btn  btn-lg btn-block green">
                                        <?php echo app('translator')->getFromJson('massege.send'); ?></button></div>

                        </form>
                        <!-- /form_container -->
                    </div>
                </div>

            </div>

        </div>
    </section>
    <!-- end contentpage -->

    <?php $__env->startSection('js'); ?>
    <script>
    $(document).ready(function () {
        document.getElementById('pro_image').addEventListener('change', readImage, false);

        $(".preview-images-zone").sortable();

        $(document).on('click', '.image-cancel', function () {
            let no = $(this).data('no');
            $(".preview-image.preview-show-" + no).remove();
        });
    });

    var num = 4;

    function readImage() {
        if (window.File && window.FileList && window.FileReader) {
            var files = event.target.files; //FileList object
            var output = $(".preview-images-zone");
            for (let i = 0; i < files.length; i++) {
                var file = files[i];
                if (!file.type.match('image')) continue;
                var picReader = new FileReader();
                picReader.addEventListener('load', function (event) {
                    var picFile = event.target;
                    var html = '<div class="preview-image preview-show-' + num + '">' +
                        '<div class="image-cancel" data-no="' + num + '">x</div>' +
                        '<div class="image-zone"><img id="pro-img-' + num + '" src="' + picFile.result +
                        '" class="img-fluid"></div>' +
                        '</div>';

                    output.append(html);
                    num = num + 1;
                });
                picReader.readAsDataURL(file);
            }
            // $("#pro_image").val('');
        } else {
            console.log('Browser not support');
        }
    }
</script>
    <script>
    
    $(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  $source[0].src = URL.createObjectURL(this.files[0]);
  $source.parent()[0].load();
});
    </script>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>