@include('DESIGN')
		<!-- Site wrapper -->
		<div class="wrapper">

			<!-- Navbar -->

			<!-- /.navbar -->
			<!-- Main Sidebar Container -->
			
			<!-- Content Wrapper. Contains page content -->
			<div class="content-wrapper">
				<!-- Content Header (Page header) -->
				<section class="content-header">					
					<div class="container-fluid my-2">
						<div class="row mb-2">
							<div class="col-sm-6">
								<h1>انشاء منتج جديد</h1>
							</div>
							<div class="col-sm-6 text-right">
								<a href="#" class="btn btn-primary">رجوع</a>
							</div>
						</div>
					</div>
					<!-- /.container-fluid -->
				</section>
				<!-- Main content -->
				
                <form @if(Auth()->user()->type == 1)action="{{route('Proudct.ProudctCreatep')}}"
                   @else action="{{route('Proudct.ProudctCreatep1')}}" @endif method="POST" enctype="multipart/form-data">
                    @csrf
                    <section class="content">
                        <!-- Default box -->
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="card mb-3">
                                        <div class="card-body">								
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label for="title">اسم المنتج</label>
                                                        <input type="text" name="name" id="title" class="form-control" placeholder="Title" required>	
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label for="description">وصف المنتج</label>
                                                        <textarea name="discription" id="description" cols="30" required rows="10" class="summernote" placeholder="Description"></textarea>
                                                    </div>
                                                </div>                                            
                                            </div>
                                        </div>	                                                                      
                                    </div>
                                    <style>
                                        html * {
  box-sizing: border-box;
}

p {
  margin: 0;
}

.upload {
  &__box {
    padding: 40px;
  }
  &__inputfile {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  
  &__btn {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    min-width: 116px;
    padding: 5px;
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid;
    background-color: #4045ba;
    border-color: #4045ba;
    border-radius: 10px;
    line-height: 26px;
    font-size: 14px;
    
    &:hover {
      background-color: unset;
      color: #4045ba;
      transition: all .3s ease;
    }
    
    &-box {
      margin-bottom: 10px;
    }
  }
  
  &__img {
    &-wrap {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -10px;
    }
    
    &-box {
      width: 200px;
      padding: 0 10px;
      margin-bottom: 12px;
    }
    
    &-close {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 10px;
        right: 10px;
        text-align: center;
        line-height: 24px;
        z-index: 1;
        cursor: pointer;

        &:after {
          content: '\2716';
          font-size: 14px;
          color: white;
        }
      }
  }
}

.img-bg {
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  padding-bottom: 10%;
}
                                    </style>
                                    <div class="upload__box">
                                        <div class="upload__btn-box">
                                          <label class="upload__btn">
                                            <p>Upload images</p>
                                            <input type="file" multiple=""  name="image[]" data-max_length="20" class="upload__inputfile" required>
                                          </label>
                                        </div>
                                        <div class="upload__img-wrap"></div>
                                      </div>


                                 
                                          
                                      

                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h2 class="h4 mb-3">الاسعار</h2>								
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label for="price">سعر التكلفة</label>
                                                        <input type="text" name="price" id="price" class="form-control" placeholder="Price" required>	
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label for="compare_price">سعر البيع</label>
                                                        <input type="text" name="sell_price" id="price_sell" class="form-control" placeholder="price_sell" required>
                                                            
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="compare_price">سعر قبل التخفيض</label>
                                                        <input type="text" name="price_after_discount" id="price_before_discount" class="form-control" placeholder="price_before_discount" required>
                                                            
                                                    </div>
                                                </div>                                            
                                            </div>
                                        </div>	                                                                      
                                    </div>
                                    <div class="card mb-3">
                                        <div class="card-body">
                                            <h2 class="h4 mb-3">تفاصيل </h2>								
                                            <div class="row">
                                              @if( Auth::user()->type == 1)
                                              <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="sku">رقم هاتف التاجر</label>
                                                    <input type="text" name="phone" id="phone" class="form-control" placeholder="phone" required>	
                                                </div>
                                            </div>
                                            @else
                                            <input type="hidden" name="phone" id="phone" class="form-control" placeholder="phone" value="{{Auth::user()->phone}}">	
                                              @endif
                                              
                                                <div class="col-md-12">
                                                   
                                                    <div class="mb-3">
                                                        <label for="qty">الكمية</label>
                                                        <input type="number" min="0" name="quntaty" id="qty" class="form-control" placeholder="Qty" required>	
                                                    </div>
                                                </div>                                         
                                            </div>
                                        </div>	                                                                      
                                    </div>
                                </div>
                                
                                                                 
                                </div>
                            </div>
                            
                            <div class="pb-5 pt-3">
                                <button class="btn btn-primary" type="submit">Create</button>
                                <a href="#" class="btn btn-outline-dark ml-3">Cancel</a>
                            </div>
                        </div>
                        <!-- /.card -->
                    </section>
                </form>
				<!-- /.content -->
			</div>
			<!-- /.content-wrapper -->
			
		</div>
		<!-- ./wrapper -->
		<!-- jQuery -->
	
        <script>
            Dropzone.autoDiscover = false;    
            addRemoveLinks = true;
            $(function () {
                // Summernote
                $('.summernote').summernote({
                    height: '300px'
                });

            });


            var images= [];
            function image_select(){

                var image = document.getElementById('image').files;

                for(var i =0;i < image.length;i++){

                    images.push({

                        "name":image[i].name,
                        "url":window.URL.createObjectURL(image[i]),
                        "file":image[i],
                    });

                }

                console.log(image);

                show();
            }



            function show(){
                var image ="";
                images.forEach((i) => {
                    image += '<div class ="image_container d-flex justify-content-center"><img src ="'+i.url+'" alt="Image"></div>';
                    document.getElementById('image1').innerHTML = "ffffffffffd";
                });
                console.log("ffffff");
                console.log(image);
            }

            jQuery(document).ready(function () {
  ImgUpload();
});

function ImgUpload() {
  var imgWrap = "";
  var imgArray = [];

  $('.upload__inputfile').each(function () {
    $(this).on('change', function (e) {
      imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
      var maxLength = $(this).attr('data-max_length');

      var files = e.target.files;
      var filesArr = Array.prototype.slice.call(files);
      var iterator = 0;
      filesArr.forEach(function (f, index) {

        if (!f.type.match('image.*')) {
          return;
        }

        if (imgArray.length > maxLength) {
          return false
        } else {
          var len = 0;
          for (var i = 0; i < imgArray.length; i++) {
            if (imgArray[i] !== undefined) {
              len++;
            }
          }
          if (len > maxLength) {
            return false;
          } else {
            imgArray.push(f);

            var reader = new FileReader();
            reader.onload = function (e) {
              var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
              imgWrap.append(html);
              iterator++;
            }
            reader.readAsDataURL(f);
          }
        }
      });
    });
  });

  $('body').on('click', ".upload__img-close", function (e) {
    var file = $(this).parent().data("file");
    for (var i = 0; i < imgArray.length; i++) {
      if (imgArray[i].name === file) {
        imgArray.splice(i, 1);
        break;
      }
    }
    $(this).parent().parent().remove();
  });
}
        </script>