Continuation page edit product

packages/product/src/Http/Controllers/ProductController.php

@@ -150,10 +150,19 @@ class ProductController extends Controller
         $product->update($data);
 
         $product->categories()->sync($request->categories);
-        if ($request->has('photo')) {
-            $file = $request->file('photo');
+        if ($request->has('gallery_image')) {
+            $file = $request->only('gallery_image', 'captionGallery', 'descriptionGallery');
+            $type = 'gallery_image';
+            $diskName = 'product';
+            $this->uploadGallery($file, $diskName, $product, $type);
+
+        }
+        if ($request->has('featured_image')) {
+            $info = $request->only(['featureDescription', 'featureCaption']);
+            $file = $request->file('featured_image');
+            $type = 'featured_image';
             $diskName = 'product';
-            $this->uploader($file, $diskName, $product);
+            $this->updateFeature($file, $diskName, $product, $type, $info);
 
         }
 
@@ -211,6 +220,45 @@ class ProductController extends Controller
 
 
     }
+
+    public function updateFeature($file, $diskName, $product, $type,$info)
+    {
+
+        $fileExtension = $file->getClientOriginalExtension();
+
+        $fileMimeType = $file->getMimeType();
+
+        $afterDiskRoot = '/' . jdate()->format('Y') . '/' . jdate()->format('m');
+
+        $fileName = jdate(time())->format('Ymd') . '_' . $file->getClientOriginalName();
+
+        $filePath = storage_path('app/public/' . $diskName . $afterDiskRoot . '/' . $fileName);
+
+        if (File::exists($filePath)) {
+            $fileName = time() . '_' . $fileName;
+        }
+
+        $upload = $file->storeAs($afterDiskRoot, $fileName, $diskName);
+
+
+        $uploadData = [
+            'name' => $fileName,
+            'path' => $upload,
+            'mime_type' => $fileMimeType,
+            'extension' => $fileExtension,
+            'type' => $type,
+            'descriptionImg' => $info['featureDescription'],
+            'caption' => $info['featureCaption'],
+
+
+        ];
+
+
+        $uploaded = $product->uploads()->update($uploadData);
+
+
+    }
+
 //************************delete image in th product**********************
     public function destroyFile(Upload $upload)
     {

packages/product/src/Http/Requests/ProductRequest.php

@@ -33,9 +33,11 @@ class ProductRequest extends FormRequest
             'categories' => ['required'],
             'featureDescription' => ['nullable'],
             'featureCaption' => ['nullable'],
+            'descriptionImg' => ['nullable'],
+            'caption' => ['nullable'],
             'gallery_image' => ['nullable'],
             'featured_image' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
-            'galleries.*' => ['nullable']
+
 
         ];
 

packages/product/src/js/product.js

@@ -0,0 +1,317 @@
+
+//**************************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 () {
+    $('[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
+    $(document).ready(function(){
+        $('#previewImages').on('click', '#delete', function(e){
+            e.preventDefault();
+            $(this).closest(".media").remove();
+        });
+    });
+    //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;
+            }
+        };
+    }
+});
+

packages/product/src/sass/product.scss

@@ -0,0 +1,136 @@
+
+            .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;
+
+
+            }
+            .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-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;
+                }
+            }
+

packages/product/src/views/index.blade.php

@@ -13,6 +13,9 @@
                 margin-right: 0;
                  margin-left: 0px !important;
             }
+            .message{
+                margin: auto;
+            }
         </style>
     @endslot
 
@@ -28,10 +31,15 @@
     @slot('content')
         <div class="row">
             <div class="col-md-12">
+                <div class="col-md-11 message">
                 @component('product::components.message')
                 @endcomponent
+                </div>
                 @component('components.collapse-card' , ['title' => 'جست جو محصولات'])
+                    @component('product::components.message')
+                    @endcomponent
                     @slot('body')
+
                           <form method="GET" action="">
                                 <div class="form-row">
                                     <div class="col">

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

@@ -39,7 +39,7 @@
                 text-align: center;
                 margin: 10px;
                 padding: 10px;
-                border: 5px solid #752360;
+                border: 2px solid #752360;
                 align-items: flex-start;
             }
 
@@ -120,7 +120,6 @@
 
             .media-left img {
                 cursor: pointer;
-                padding-left: 20px;
                 display: flex !important;
 
             }
@@ -139,34 +138,26 @@
             }
 
             /*    *****************************/
-
-            output{
-                display: flex;
-                /*flex-flow: row;*/
-                flex-wrap: wrap;
-                flex: none;
-
-            }
             output span{
-                padding: 5px;
-
-                text-align: center;
-            }
-            list{
-                padding: 10px;
-                border:5px solid #752360;
+                padding: 6px;
                 text-align: center;
             }
-            output span a{
-                position: absolute;
-            }
+
             .test{
                 padding: 10px;
             }
             .DeleteImages{
-                border:5px solid #752360;
+                border:2px solid #752360;
+                margin: 5px;
                 border-radius: 10px;
             }
+
+            @media only screen and (min-width: 900px) {
+                .b{
+                    padding: 0 17px;
+                }
+            }
+
         </style>
     @endslot
     @slot('subject')
@@ -349,9 +340,10 @@
                                                     <a href="" role="button" class="btn btn-danger pull-right" id="delete">
                                                         <i class="icon fa fa-close"></i>
                                                     </a>
-                                                    <img class="media-object thumbnail " src=""
+                                                    <img class="media-object img-thumbnail" src=""
                                                          alt="" id="0" title="" data-toggle="modal"
-                                                         data-target="#individualImagePreview">
+                                                         data-target="#individualImagePreview"
+                                                    style="width: 250px; height: 150px;" >
                                                 </div>
 
                                                 <div class="media-body">
@@ -373,7 +365,7 @@
                                             </span>
                                         @enderror
                                     </div>
-                                    <div class="form-row">
+                                    <div class="form-row ">
                                         <div class="upload-widget test ">
 
                                             <div class="select">
@@ -381,13 +373,13 @@
                                                     {{ __('product.gallery_image') }}
                                                 </label>
                                                 <span class="btn btn-primary btn-file">
-                                                <input class="files" type="file" name="gallery_image[]" multiple>
+                                                <input class="files" type="file" name="gallery_image[]" value="{{old('gallery_image[]')}}" multiple>
                                                     {{ __('product.gallery_images') }}
                                                 </span>
-                                                <output class="list" >
+                                                <output class="list row " >
                                                 </output>
                                             </div>
-                                            <div class="dropZone col-4">
+                                            <div class="dropZone col-3">
                                             </div>
                                         </div>
                                     </div>
@@ -421,6 +413,7 @@
                     e.preventDefault();
                     $(this).closest(".DeleteImages").remove();
                 });
+
             });
             var FileUploader = (function() {
 
@@ -477,13 +470,13 @@
                         reader.onload = (function(theFile) {
                             return function(e) {
                                 var
-                                    span = document.createElement('span'),
+                                    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() {
@@ -498,23 +491,23 @@
                                     // Gallery Description Input Fields
                                     thumb = canvas.toDataURL(theFile.type);
 
-                                    span.innerHTML = '<div class="DeleteImages"><a href="" class="deleteGallary btn btn-danger pull-right"\n' +
-                                        '> <i\n' +
-                                        'class="icon fa fa-close"></i></a><img class="thumb" style="width: 250px; height: 250px;" src="' + thumb + '" title="' + escape(theFile.name) + '" /> <span style="display: block;"> ' +
-                                        '<label for="description">توضیحات: </label><input type="text"\n' +
-                                        ' class="form-control"\n' +
-                                        '   name="descriptionGallery[]">\n' +
-                                        ' <label for="caption">عنوان: </label><input type="text"\n' +
-                                        ' class="form-control"\n' +
-                                        '  name="captionGallery[]"></span></div>';
+                                    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>';
                                 }
 
 
-                                // span.addEventListener('click', function() {
-                                //     window.open(e.target.result);
-                                // });
 
-                                self.output.insertBefore(span, null);
+                                self.output.insertBefore(div, null);
                             }
                         })(file)
                         reader.readAsDataURL(file);
@@ -527,6 +520,13 @@
             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
@@ -545,12 +545,7 @@
                     }
                 });
                 //Delete features Image
-                $(document).ready(function(){
-                    $('#previewImages').on('click', '#delete', function(e){
-                        e.preventDefault();
-                        $(this).closest(".media").remove();
-                    });
-                });
+
                 //namespace variable to determine whether to continue or not
                 var proceed = false;
                 //Ensure that FILE API is supported by the browser to proceed

packages/product/src/views/product/edit.blade.php

@@ -4,8 +4,35 @@
             .card-header {
                 text-align: center !important;
             }
+            .form-control {
+                background-color: hsl(315, 22%, 86%);
+            }
+            .required {
+                color: red;
+            }
+            .py-5 {
+                padding-top: 0 !important;
+            }
+            .photo {
+                border: 0px;
+                background-color: #fff;
+            }
+            #holder {
+                margin: 15px;
+                height: 150px;
+                width: 150px;
+
+            }
+            .btn_photo {
+                margin-bottom: -50px;
+                position: relative;
+            }
+            .card-header {
+                text-align: center !important;
+            }
 
             .form-control {
+
                 background-color: hsl(315, 22%, 86%);
             }
 
@@ -17,22 +44,125 @@
                 padding-top: 0 !important;
             }
 
+            .select2 {
+                width: 100% !important;
+            }
+
             .photo {
                 border: 0px;
                 background-color: #fff;
             }
 
-            #holder {
-                margin: 15px;
-                height: 150px;
+
+
+            /* 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_photo {
-                margin-bottom: -50px;
+            .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;
+
+
+            }
+            .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-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;
+                }
+            }
+.hide-element{
+    display: flex;}
         </style>
     @endslot
     @slot('subject')
@@ -65,8 +195,8 @@
                                         @method('PUT')
                                     @endif
                                     <div class="form-group">
-                                        <label for="title">{{ __('product.title') }}</label><i class="required">&nbsp;
-                                            *</i>
+                                        <label for="title">{{ __('product.title') }}</label>
+                                        <i class="required"> *</i>
                                         <input id="title" type="text"
                                                class="form-control @error('title') is-invalid @enderror"
                                                name="title"
@@ -86,7 +216,7 @@
                                                    autocomplete="slug" autofocus>
                                             @error('slug')
                                             <span class="invalid-feedback" role="alert">
-                                              <strong>{{ $message }}</strong>
+                                                <strong>{{ $message }}</strong>
                                             </span>
                                             @enderror
                                         </div>
@@ -98,48 +228,46 @@
                                                    autocomplete="sku" autofocus>
                                             @error('sku')
                                             <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                                <strong>{{ $message }}</strong>
+                                            </span>
                                             @enderror
                                         </div>
                                         <div class="form-group col-lg-4">
-                                            <label for="type">{{ __('product.type') }}</label><i class="required">&nbsp;
-                                                *</i>
+                                            <label for="type">{{ __('product.type') }}</label>
+                                            <i class="required">  *</i>
                                             <select id="type" type="text"
-                                                    class="form-control @error('type') is-invalid @enderror" name="type"
+                                                    class="form-control @error('type') is-invalid @enderror"
+                                                    name="type"
                                                     autocomplete="type">
-                                                <option value="0"
-                                                        @if($product->type==='ساده') selected='selected' @endif>
+                                                <option value="0" @if($product->type==='ساده') selected='selected' @endif>
                                                     ساده
                                                 </option>
-                                                <option value="1"
-                                                        @if($product->type==='متغیر') selected='selected' @endif>
+                                                <option value="1" @if($product->type==='متغیر') selected='selected' @endif>
                                                     متغیر
                                                 </option>
-                                                <option value="2"
-                                                        @if($product->type==='باندل') selected='selected' @endif>
+                                                <option value="2" @if($product->type==='باندل') selected='selected' @endif>
                                                     باندل
                                                 </option>
                                             </select>
                                             @error('type')
-                                            <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                                <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="price">  {{ __('product.price') }}</label><i class="required">&nbsp;
-                                                *</i>
+                                            <label for="price">  {{ __('product.price') }}</label>
+                                            <i class="required"> *</i>
                                             <input id="price" type="text"
                                                    class="form-control price @error('price') is-invalid @enderror"
                                                    name="price"
                                                    value="{{$product->price}}" autocomplete="price" autofocus>
                                             @error('price')
-                                            <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                                <span class="invalid-feedback" role="alert">
+                                                    <strong>{{ $message }}</strong>
+                                                </span>
                                             @enderror
                                         </div>
                                         <div class="form-group col-lg-4">
@@ -149,49 +277,44 @@
                                                    name="sale_price"
                                                    value="{{$product->sale_price}}" autocomplete="sale_price">
                                             @error('sale_price')
-                                            <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                                <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>
+                                            <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"
                                                     value="{{$product->status}}" required autocomplete="status">
                                                 <option value="0">ناموجود</option>
-                                                <option value="1"
-                                                        @if ($product->status === 'موجود')  selected='selected'@endif>
-                                                    موجود
-                                                </option>
+                                                <option value="1" @if ($product->status === 'موجود')  selected='selected'@endif>موجود</option>
                                             </select>
                                             @error('status')
-                                            <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                                <span class="invalid-feedback" role="alert">
+                                                    <strong>{{ $message }}</strong>
+                                                </span>
                                             @enderror
                                         </div>
                                     </div>
                                     <div class="form-group">
-                                        <label for="discription">{{ __('product.discription') }}</label><i
-                                            class="required">&nbsp; *</i>
+                                        <label for="discription">{{ __('product.discription') }}</label>
+                                        <i class="required">&nbsp; *</i>
                                         <textarea id="discription" type="text"
                                                   class="form-control @error('discription') is-invalid @enderror"
                                                   name="discription"
                                                   autocomplete="discription">{{$product->discription}}</textarea>
                                         @error('discription')
-                                        <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                            <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>
+                                        <label for="categories[]">{{ __('product.categories') }}</label>
+                                        <i class="required">&nbsp; *</i>
                                         <select id="categories" type="text"
                                                 class="form-control select2 @error('categories[]') is-invalid @enderror"
                                                 name="categories[]"
@@ -199,48 +322,99 @@
                                             @foreach($categories as $cat)
                                                 <option value="{{$cat->id}}" <?php
                                                     if (in_array($cat->id, $product->categories->pluck('id')->toArray())) echo 'selected'
-                                                    ?>>{{$cat->title}}</option>
+                                                    ?>>
+                                                    {{$cat->title}}
+                                                </option>
                                             @endforeach
                                         </select>
                                         @error('status')
-                                        <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
+                                            <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"
+                                                   class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
+                                                   value="" autocomplete="featured_image" autofocus>تصویر شاخص
                                         </span>
+                                        <div class="hide-element" id="previewImages">
+                                            <div class="media col-12">
+
+
+                                                @foreach($product->uploads as $upload_photo)
+{{--                                                    {{dd($upload_photo)}}--}}
+{{--                                                    @if( $upload_photo->type=='featured_image')--}}
+
+{{--                                                        {{dd($upload_photo->type)}}--}}
+                                                            <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="{{\Illuminate\Support\Facades\Storage::disk('product')->url($upload_photo->path)}}"
+                                                                         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="{{$upload_photo->descriptionImg}}" name="featureDescription">
+                                                                        </p>
+                                                                        <p>
+                                                                            <label for="featureCaption">عنوان: </label>
+                                                                            <input type="text" class="form-control" value="{{$upload_photo->caption}}" name="featureCaption">
+                                                                        </p>
+                                                            </div>
+{{--                                                    @endif--}}
+                                                @endforeach
+
+                                            </div>
+
+
+                                        </div>
+
+                                        </div>
+                                        @error('featured_image')
+                                            <span class="invalid-feedback" role="alert">
+                                                     <strong>{{ $message }}</strong>
+                                            </span>
+
                                         @enderror
                                     </div>
                                     <div class="form-group photo">
-
-                                        <label for="title">{{ __('product.photo') }}</label><i
-                                            class="required">&nbsp; *</i>
+                                        <label for="title">{{ __('product.photo') }}</label>
+                                        <i class="required">&nbsp; *</i>
 
                                         <input type="file" name="photo" id="photo"
                                                class="form-control photo @error('photo') is-invalid  @enderror"
                                                value="{{old('photo')}}" autocomplete="photo" autofocus multiple>
                                         @error('photo')
-                                        <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                            <span class="invalid-feedback" role="alert">
+                                                <strong>{{ $message }}</strong>
+                                            </span>
                                         @enderror
-
                                     </div>
                                     <div class="row">
-
                                         @foreach($product->uploads as $upload_photo)
                                             <div class="col-md-2">
-
                                                 <a class="btn btn-sm btn-danger btn_photo"
                                                    href="{{route('uploads.destroyFile', $upload_photo->id)}}">
-                                                    <i
-                                                        class="icon fa fa-close"></i>
+                                                    <i class="icon fa fa-close"></i>
                                                 </a>
-
                                                 <img id="holder" class="img-thumbnail"
                                                      src="{{ \Illuminate\Support\Facades\Storage::disk('product')->url($upload_photo->path) }}"
                                                      alt="">
-
                                             </div>
                                         @endforeach
                                     </div>
+
                                     <div class="form-group mb-0">
                                         <div class="">
                                             <button type="submit" class="btn btn-primary">
@@ -261,6 +435,331 @@
         </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 () {
+                $('[data-toggle="tooltip"]').tooltip({
+                    html: true
+                });
+                $('#deleteG').on('click' function () {
+
+                    $(this).closest('.preview').find('dz-preview').remove();
+
+                });
+                $('.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
+                $(document).ready(function(){
+                    $('#previewImages').on('click', '#delete', function(e){
+                        e.preventDefault();
+                        $(this).closest(".media").remove();
+                    });
+                });
+                //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
 

packages/product/src/views/product/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-</head>
-<body>
-
-</body>
-</html>

resources/js/panel/panel.js

@@ -39,3 +39,8 @@ require('../app');
   $(document).ready(function () {
     $('.select2').select2();
   });
+//***************************************************************
+//
+//******************************************************
+
+

resources/sass/panel/panel.scss

@@ -74,3 +74,4 @@ table.table-bordered{
 }
 
 
+

resources/views/panel/layouts/app.blade.php

@@ -17,6 +17,7 @@
 
     <!-- Styles -->
     <link href="{{ mix('css/panel.css') }}" rel="stylesheet">
+{{--    <link href="{{ mix('css/product.css') }}" rel="stylesheet">--}}
 {{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">--}}
 {{--    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>--}}
 
@@ -37,6 +38,7 @@
     <!-- Scripts -->
 
     <script src="{{ mix('js/panel.js') }}"></script>
+{{--    <script src="{{ mix('js/product.js') }}"></script>--}}
 
     @include('sweet::alert')
     @yield('script')