almasvareh/packages/product/src/views/product/create.blade.php

@component('panel.layouts.component', ['title' => 'ثبت محصول جدید'])

    @slot('style')
        <style>
            .card-header {
                text-align: center !important;
            }

            .form-control {

                background-color: hsl(315, 22%, 86%);
            }

            .required {
                color: red;
            }

            .py-5 {
                padding-top: 0 !important;
            }

            .select2 {
                width: 100% !important;
            }

            .photo {
                border: 0px;
                background-color: #fff;
            }



  /* Fine Uploader Gallery View Styles
  /* ---------------------------------------*/

            .media {
                border-radius: 10px;
                display: flex;
                text-align: center;
                margin: 10px;
                padding: 10px;
                border: 2px solid #752360;
                align-items: flex-start;
            }

            #gallery img {
                width: 150px;
                margin-bottom: 10px;
                margin-right: 10px;
                vertical-align: middle;
            }

            .hide-element {
                display: none;
            }

            /* Feature Images*/


            .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;
            }

            .alert {
                box-shadow: 10px 10px 5px;
                -moz-box-shadow: 10px 10px 5px;
                -webkit-box-shadow: 10px 10px 5px;
            }


            .media-left {
                z-index: 1000;
                cursor: pointer;


            }

            .media-left {
                z-index: 1000;
                cursor: pointer;


            }

            .dz-preview .form-control {
                width: 60% !important;
                display: flex;
                padding: 10px;
            }

            .media-left img {
                z-index: 1000;
                cursor: pointer;

                display: flex;
            }

            .thumbnail {
                color: #006dcc;
                *color: #0044cc;
            }

            .media-left img {
                cursor: pointer;
                display: flex !important;

            }
            .media-body {
                flex: 1;
                padding: 15px;
            }
            #delete {
                display: flex;
                margin-left: -40px;
                position: relative;
            }

            .label-tags i {
                cursor: pointer;
            }

            /*    *****************************/
            output span{
                padding: 6px;
                text-align: center;
            }

            .test{
                padding: 10px;
            }
            .DeleteImages{
                border:2px solid #752360;
                margin: 5px;
                border-radius: 10px;
            }

            @media only screen and (min-width: 900px) {
                .b{
                    padding: 0 17px;
                }
            }

        </style>
    @endslot
    @slot('subject')
        <h1><i class="fa fa-users"></i> ثبت محصول جدید </h1>
        <p>ثبت محصول جدید در فروشگاه.</p>
    @endslot
    @slot('breadcrumb')
        <li class="breadcrumb-item">محصولات</li>
    @endslot

    @slot('content')
        <div class="auth-background h-auto py-5">
            <div class="container py-5">
                <div class="row align-items-center ">
                    <div class="col-lg-12 col-md-12 mx-auto">
                        <div class="card">
                            <div class="card-header"><strong>{{ __('ثبت محصول جدید') }}</strong></div>
                            @component('product::components.message')
                            @endcomponent
                            <div class="card-body mx-lg-5 px-lg-3">
                                <form method="POST" action="{{ route('products.store') }}"
                                      enctype="multipart/form-data">
                                    @csrf

                                    <div class="form-group">
                                        <label for="title">{{ __('product.title') }}</label><i class="required">&nbsp;
                                            *</i>
                                        <input id="title" type="text"
                                               class="form-control @error('title') is-invalid @enderror" name="title"
                                               value="{{ old('title') }}" autocomplete="title" autofocus>

                                        @error('title')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-lg-4">
                                            <label for="slug">{{ __('product.slug') }}</label>
                                            <input type="text" name="slug"
                                                   class="form-control @error('slug') is-invalid  @enderror"
                                                   value="{{old('slug')}}" autocomplete="slug" autofocus>
                                            @error('slug')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="sku">{{ __('product.sku') }}</label>
                                            <input id="sku" type="text"
                                                   class="form-control @error('sku') is-invalid @enderror" name="sku"
                                                   autocomplete="sku" value="{{ old('sku') }}" autofocus>

                                            @error('sku')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="type">{{ __('product.type') }}</label></label><i
                                                class="required">&nbsp;
                                                *</i>
                                            <select id="type" type="text"
                                                    class="form-control @error('type') is-invalid @enderror" name="type"
                                                    value="{{ old('type') }}" autocomplete="type">
                                                <option value="">انتخاب کنید</option>
                                                <option value="0" {{ (old('type') == '0') ? 'selected' : '' }}>ساده
                                                </option>
                                                <option value="1" {{ (old('type') == '1') ? 'selected' : '' }}>متغیر
                                                </option>
                                                <option value="2" {{ (old('type') == '2') ? 'selected' : '' }}>باندل
                                                </option>

                                            </select>

                                            @error('type')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-row ">
                                        <div class="form-group col-lg-4">
                                            <label for="title">{{ __('product.price') }}</label><i class="required">&nbsp;
                                                *</i>
                                            <input id="input.price" type="text"
                                                   class="form-control price @error('price') is-invalid @enderror"
                                                   name="price"
                                                   value="{{ old('price') }}" autocomplete="price" autofocus>

                                            @error('price')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="sale_price">@lang('product.sale_price')</label>
                                            <input id="sale_price" type="text"
                                                   class="form-control price @error('sale_price') is-invalid @enderror"
                                                   name="sale_price"
                                                   value="{{ old('sale_price') }}" autocomplete="sale_price" autofocus>

                                            @error('sale_price')
                                            <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-lg-4">
                                            <label for="status">{{ __('product.status') }}</label><i class="required">&nbsp;
                                                *</i>
                                            <select id="status" type="text"
                                                    class="form-control  @error('status') is-invalid @enderror"
                                                    name="status"
                                                    autocomplete="status">
                                                <option value="">انتخاب کنید</option>
                                                <option value="1" {{ (old('status') == '1') ? 'selected' : '' }}>موجود
                                                </option>
                                                <option value="0" {{ (old('status') == '0') ? 'selected' : '' }}>
                                                    ناموجود
                                                </option>
                                            </select>
                                            @error('status')
                                            <span class="invalid-feedback" role="alert">
                                               <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="discription">{{ __('product.discription') }}</label></label><i
                                            class="required">&nbsp; *</i>
                                        <textarea id="discription" type="text"
                                                  class="form-control  @error('discription') is-invalid @enderror"
                                                  name="discription"

                                                  autocomplete="discription"
                                                  autofocus>{{ old('discription') }}</textarea>

                                        @error('discription')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-group">
                                        <label for="categories">{{ __('product.categories') }}</label><i
                                            class="required">&nbsp; *</i>
                                        <select id=""
                                                class="form-control select2 @error('categories') is-invalid @enderror"
                                                name="categories[]" multiple>

                                            <option value="">انتخاب کنید</option>
                                            @foreach($categories as $cat)
                                                <option value="{{$cat->id }}">{{$cat->title}}</option>
                                            @endforeach
                                        </select>
                                        @error('categories')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                    <div class="form-group col-md-8">
                                        <label for="title">
                                            {{ __('product.featured_image') }}
                                        </label> <i class="required">&nbsp; *</i>

                                        <span class="btn btn-primary btn-file">
                                            <input type="file" id="uploadImages" name="featured_image" accept="image/*"
                                                class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
                                                 value="{{old('featured_image')}}" autocomplete="featured_image" autofocus>تصویر شاخص
                                        </span>
                                        <div class="hide-element" id="previewImages">
                                            <div class="media">
                                                <div class="media-left ">
                                                    <a href="" role="button" class="btn btn-danger pull-right" id="delete">
                                                        <i class="icon fa fa-close"></i>
                                                    </a>
                                                    <img class="media-object img-thumbnail" src=""
                                                         alt="" id="0" title="" data-toggle="modal"
                                                         data-target="#individualImagePreview"
                                                    style="width: 250px; height: 150px;" >
                                                </div>

                                                <div class="media-body">
                                                    <p>
                                                        <label for="featureDescription">توضیحات: </label>
                                                        <input type="text" class="form-control"  value="" name="featureDescription">
                                                    </p>
                                                    <p>
                                                        <label for="featureCaption">عنوان: </label>
                                                        <input type="text" class="form-control" value="" name="featureCaption">
                                                    </p>

                                                </div>
                                            </div>
                                        </div>
                                        @error('featured_image')
                                        <span class="invalid-feedback" role="alert">
                                                 <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                    <div class="form-row ">
                                        <div class="upload-widget test ">

                                            <div class="select">
                                                <label for="title">
                                                    {{ __('product.gallery_image') }}
                                                </label>
                                                <span class="btn btn-primary btn-file">
                                                <input class="files" type="file" name="gallery_image[]" value="{{old('gallery_image[]')}}" multiple>
                                                    {{ __('product.gallery_images') }}
                                                </span>
                                                <output class="list row " >
                                                </output>
                                            </div>
                                            <div class="dropZone col-3">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mb-0">
                                        <div class="">
                                            <button type="submit" class="btn btn-primary">
                                                {{ __('ثبت محصول') }}
                                            </button>

                                            <a href={{ route('products.index') }} type="button" class="btn btn-warning">
                                                انصراف</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="card-footer">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endslot

    @slot('script')

        <script>
            //**************************show images gallery**********************************************
            $(document).ready(function(){
                $('.upload-widget').on('click', '.deleteGallary', function(e){
                    e.preventDefault();
                    $(this).closest(".DeleteImages").remove();
                });

            });
            var FileUploader = (function() {

                function FileUploader(options) {
                    options = options || {};

                    this.widget = document.querySelector(options.className);
                    this.dropZone = this.widget.querySelector('.dropZone');
                    this.input = this.widget.querySelector('.files');
                    this.output = this.widget.querySelector('.list');
                };


                FileUploader.prototype.init = function() {
                    var self = this;

                    self.dropZone.addEventListener('drop', function(e) {self.handleFile(e, self);}, false);
                    self.input.addEventListener('change', function(e) {self.handleFile(e, self);}, false);
                    self.dropZone.addEventListener('dragover', self.handleDragOver, false);
                };

                //
                FileUploader.prototype.handleFile = function(evt, that) {
                    var self = that;
                    var files;

                    evt.stopPropagation();
                    evt.preventDefault();

                    if (evt.type === 'change') {
                        files = evt.target.files;
                    } else if (evt.type === 'drop') {
                        files = evt.dataTransfer.files;
                    }

                    self.selectLogic(files, self);
                };


                FileUploader.prototype.handleDragOver = function(evt) {
                    evt.stopPropagation();
                    evt.preventDefault();
                    evt.dataTransfer.dropEffect = 'link';
                };


                FileUploader.prototype.selectLogic = function(files, that) {
                    var self = that;
                    var reader;

                    for (var i = 0, file; file = files[i]; i++) {

                        reader = new FileReader();
                        reader.onload = (function(theFile) {
                            return function(e) {
                                var
                                    div = document.createElement('div'),
                                    canvas = document.createElement('canvas'),
                                    ctx = canvas.getContext('2d'),
                                    image = new Image(),
                                    ratio,
                                    thumb;
                                div.className = 'b';
                                image.src = e.target.result;
                                //size image
                                image.onload = function() {
                                    ratio = 150/image.width;
                                    ratio = 150/image.height;


                                    canvas.width = image.width * ratio;
                                    canvas.height = image.height * ratio;
                                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

                                    // Gallery Description Input Fields
                                    thumb = canvas.toDataURL(theFile.type);

                                    div.innerHTML = '<div class="DeleteImages">' +
                                        '<a href="" class="deleteGallary btn btn-danger pull-right position-absolute"> ' +
                                        '<i class="icon fa fa-close"></i>' +
                                        '</a>' +
                                        '<img class="thumb img-thumbnail" style="width: 200px; height: 150px;" src="' + thumb + '" title="' + escape(theFile.name) + '">' +
                                        '<span class="form-input py-3 md-form" style="display: block;"> ' +
                                        '<label for="description">توضیحات: </label>' +
                                        '<input type="text" class="form-control" name="descriptionGallery[]">\n' +
                                        '<label for="caption">عنوان: </label>' +
                                        '<input type="text" class="form-control" name="captionGallery[]">' +
                                        '</span>' +
                                        '</div>';
                                }



                                self.output.insertBefore(div, null);
                            }
                        })(file)
                        reader.readAsDataURL(file);
                    }
                }
                return FileUploader;
            })();

            var test = new FileUploader({className: '.test'});
            test.init();

            //***************FEATURE IMAGES***************************************

            $(document).ready(function(){
                $('#previewImages').on('click', '#delete', function(e){
                    e.preventDefault();
                    $(this).closest(".media").remove();
                });
            });
            $(document).ready(function () {
                $('[data-toggle="tooltip"]').tooltip({
                    html: true
                });
                $('.media').addClass('hide-element');
                $('#imagesUploadForm').submit(function (evt) {
                    evt.preventDefault();
                });
                $('#edit').click(function () {
                    console.log('click detected inside circl-o of edit');
                    $('#edit').toggleClass('fa-circle-o').toggleClass('fa-check-circle');
                    if ($('#edit').hasClass('fa-check-circle')) {
                        $('#captionForImage').toggleClass('hide-element');
                    } else {
                        $('#captionForImage').toggleClass('hide-element');
                    }
                });
                //Delete features Image

                //namespace variable to determine whether to continue or not
                var proceed = false;
                //Ensure that FILE API is supported by the browser to proceed
                if (window.File && window.FileReader && window.FileList && window.Blob) {
                    if (window.webkitURL || window.URL) {
                        $('#errorMessaage').removeClass('hide-element').addClass(
                            '').html('');
                        proceed = true;
                    } else {
                        $('#errorMessaage').removeClass('hide-element').addClass(
                            'alert-warning').html('');
                    }

                } else {
                    $('#errorMessaage').removeClass('hide-element').addClass(
                        'alert-warning').html('');
                }
                if (proceed) {
                    var input = "";
                    var formData = new FormData();
                    $('input[name=featured_image]').on("change", function (e) {
                        var counter = 0;
                        var modalPreviewItems = "";
                        input = this.files;
                        $($(this)[0].files).each(function (i, file) {
                            formData.append("file[]", file);
                        });
                        $('#previewImages').removeClass('hide-element');
                        $('#imagesUpload').removeClass('disabled');
                        var successUpload = 0;
                        var failedUpload = 0;
                        var extraFiles = 0;
                        var size = input.length;
                        $(input).each(function () {
                            var reader = new FileReader();
                            var uploadImage = this;
                            console.log(this);
                            reader.readAsArrayBuffer(this);
                            reader.onload = function (e) {
                                var magicNumbers = validateImage.magicNumbersForExtension(e);
                                var fileSize = validateImage.isUploadedFileSizeValid(uploadImage);
                                var extension = validateImage.uploadFileExtension(uploadImage);
                                var isValidImage = validateImage.validateExtensionToMagicNumbers(magicNumbers);
                                var thumbnail = validateImage.generateThumbnail(uploadImage);
                                if (fileSize && isValidImage) {
                                    $('#' + counter).parents('.media').removeClass('hide-element');
                                    $('#' + counter).attr('src', thumbnail).height('200');
                                    $('#uploadDataInfo').removeClass('hide-element').addClass('alert-success');
                                    successUpload++;
                                    modalPreviewItems += carouselInsideModal.createItemsForSlider(thumbnail, counter);

                                } else {
                                    $('#uploadDataInfo').removeClass('hide-element alert-success').addClass('alert-warning');
                                    failedUpload++;
                                }
                                counter++;
                                if (counter === size) {
                                    $('#myCarousel').append(carouselInsideModal.createIndicators(successUpload, "myCarousel"));
                                    $('#previewItems').append(modalPreviewItems);
                                    $('#previewItems .item').first().addClass('active');
                                    $('#carouselIndicators > li').first().addClass('active');
                                    $('#myCarousel').carousel({
                                        interval: 2000,
                                        cycle: true
                                    });
                                    if (size > 4) {
                                        $('#toManyFilesUploaded').html("Only files displayed below will be uploaded");
                                        extraFiles = size - 4;
                                    }

                                    $('#filesCount').html(successUpload + " files are ready to upload");
                                    if (failedUpload !== 0 || extraFiles !== 0) {
                                        failedUpload === 0 ? "" : failedUpload;
                                        extraFiles === 0 ? "" : extraFiles;
                                        $('#filesUnsupported').html(failedUpload + extraFiles + " files were not selected for upload");
                                    }

                                }
                            };
                        });

                    });

                    var toBeDeleted = [];
                    var eachImageValues = [];
                    $('.media').each(function (index) {
                        var imagePresent = "";
                        $("body").on("click", "#delete" + index, function () {
                            imagePresent = $("#" + index).attr('src');
                            $("#undo" + index).removeClass('hide-element');
                            $("#" + index).attr('src', './img/200x200.gif');
                            $("#delete" + index).addClass('hide-element');
                            toBeDeleted.push(index);

                        });
                        $("body").on("click", "#undo" + index, function () {
                            $("#" + index).attr('src', imagePresent);
                            $("#undo" + index).addClass('hide-element');
                            $("#delete" + index).removeClass('hide-element');
                            var indexToDelete = toBeDeleted.indexOf(index);
                            if (indexToDelete > -1) {
                                toBeDeleted.splice(indexToDelete, 1);
                                // console.log(toBeDeleted);
                                $("#delete" + index).parent().find('input[type="text"]').prop('disabled', false).removeClass('disabled');
                            }
                            if (toBeDeleted.length === 4) {
                                $('#sendImagesToServer').prop('disabled', true).html('No Files to Upload');

                            } else {
                                $('#sendImagesToServer').prop('disabled', false).html('Update &amp; Preview');
                            }
                        });
                    });


                    var validateImage = {
                        magicNumbersForExtension: function (event) {
                            var headerArray = (new Uint8Array(event.target.result)).subarray(0, 4);
                            var magicNumber = "";
                            for (var counter = 0; counter < headerArray.length; counter++) {
                                magicNumber += headerArray[counter].toString(16);
                            }
                            return magicNumber;
                        },
                        isUploadedFileSizeValid: function (fileUploaded) {
                            var fileSize = fileUploaded.size;
                            var maximumSize = 2097125;
                            var isValid = "";
                            if (fileSize <= maximumSize) {
                                isValid = true;
                            } else {
                                isValid = false;
                            }
                            return isValid;
                        },
                        uploadFileExtension: function (fileUploaded) {
                            var fileExtension = "";
                            var imageType = "";
                            imageType = fileUploaded.type.toLowerCase();
                            fileExtension = imageType.substr((imageType.lastIndexOf('/') + 1));
                            return fileExtension;
                        },
                        validateExtensionToMagicNumbers: function (magicNumbers) {
                            var properExtension = "";
                            if (magicNumbers.toLowerCase() === "ffd8ffe0" || magicNumbers.toLowerCase() === "ffd8ffe1" ||
                                magicNumbers.toLowerCase() === "ffd8ffe8" ||
                                magicNumbers.toLocaleLowerCase() === "89504e47") {
                                properExtension = true;

                            } else {
                                properExtension = false;
                            }
                            return properExtension;
                        },
                        generateThumbnail: function (uploadImage) {
                            if (window.URL)
                                imageSrc = window.URL.createObjectURL(uploadImage);
                            else
                                imageSrc = window.webkitURL.createObjectURL(uploadImage);
                            return imageSrc;
                        }
                    };
                    var carouselInsideModal = {
                        createIndicators: function (carouselLength, dataTarget) {
                            var carouselIndicators = '<ol class = "carousel-indicators" id="carouselIndicators">';
                            for (var counter = 0; counter < carouselLength; counter++) {
                                carouselIndicators += '<li data-target = "#' + dataTarget + '"data-slide-to="' + counter + '"></li>';
                            }
                            carouselIndicators += "</ol>";
                            return carouselIndicators;
                        },
                        createItemsForSlider: function (imgSrc, counter) {
                            var item = '<div class = "item">' + '<img src="' + imgSrc + '" id="preview' + counter + '" /></div>';
                            return item;
                        }
                    };
                }
            });

        </script>
    @endslot

@endcomponent