<?php echo View::make('/../include/header'); ?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.10/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.10/dist/js/select2.min.js"></script>


</head>
<script>
    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });
</script>

<section id="main-content">
    <section class="wrapper">
        <div class="row">
            <div class="col-lg-12 main-chart">
                <div class="border-head">
                    <h3>Product Details</h3>
                </div>
                
				<form method="post" enctype="multipart/form-data" id="myform">
				<?php echo e(csrf_field()); ?>

                    <div class="row">
                        <div class="col-lg-6">
                        <select class="js-example-basic-single" id="client_id" name="products" required>
                            <option value="" selected disabled>Product Name</option>
                            <?php $__currentLoopData = $product; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <option value="<?php echo e($data->id); ?>"><?php echo e($data->name); ?></option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?> 
                        </select>

                        </div>
                        <div class="col-lg-3">
                            <!-- <input id = "Picture1" type="file" name="Picture1" accept="image/*" />  -->
                            <input type="file" name="Picture1" id="Picture1" onchange="previewFile()"><br>
                            <img src="" height="100" id="imageset1" alt="Image preview...">
                        </div>
                        <div class="col-lg-3">
                            <input type="file" name="Picture2" id="Picture2" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])"><br>
                            <img id="blah"  alt="Image preview..." height="100" />
                        </div>
                </div><br><br>
                <div class="setid"></div>
                <div id="tinymce-form">
                    <fieldset class="form-group">
                        <!-- <textarea name="editor" class="form-control editedata" id="editor" rows="10" placeholder="Content" v-tinymce-editor="content"></textarea> -->
                        <!-- <textarea name="editor" class="form-control editedata" id="editor" rows="10" placeholder="Content" v-tinymce-editor="content"></textarea> -->
                        <textarea name="summernoteInput" class="summernote" id="editor" ><div class="editordes"></div></textarea>
                    </fieldset>
                </div>


                <br><br>
                <div class="row">
                    <div class="col-lg-4"></div>
                    <div class="col-lg-4"><button type="submit" style="width:200px;" class="btn btn-primary">Submit</button></div>
                    <div class="col-lg-4"></div>                    
                </div>
            </form>
            </div>
        </div>
    </section>
</section>


  <script src="<?php echo e(asset('dash/lib/bootstrap/js/bootstrap.min.js')); ?>"></script>
  <script class="include" type="text/javascript" src="<?php echo e(asset('dash/lib/jquery.dcjqaccordion.2.7.js')); ?>"></script>
  <script src="<?php echo e(asset('dash/lib/jquery.scrollTo.min.js')); ?>"></script>
  <script src="<?php echo e(asset('dash/lib/jquery.nicescroll.js')); ?>" type="text/javascript"></script>
  <script src="<?php echo e(asset('dash/lib/jquery.sparkline.js')); ?>"></script>

<!--sweet alert-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.js"></script>

  <!--common script for all pages-->
  <script src="<?php echo e(asset('dash/lib/common-scripts.js')); ?>"></script>
  <script type="text/javascript" src="<?php echo e(asset('dash/lib/gritter/js/jquery.gritter.js')); ?>"></script>
  <script type="<?php echo e(asset('dash/text/javascript" src="lib/gritter-conf.js')); ?>"></script>
  <!--script for this page-->
  <script src="<?php echo e(asset('dash/lib/sparkline-chart.js')); ?>"></script>
  <script src="<?php echo e(asset('dash/lib/zabuto_calendar.js')); ?>"></script>
  <script src="<?php echo e(asset('dash/lib/bootstrap/js/bootstrap.min.js')); ?>"></script>


 

</body>

</html>

<link  type="text/css" href="<?php echo e(asset('dash/editor/bootstrap.css')); ?>" rel="stylesheet">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>  -->
<script src="<?php echo e(asset('dash/editor/boots.js')); ?>"></script>   
 
<!-- include summernote css/js-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>    




<script>
        $(document).ready(function() {
            $('.summernote').summernote();
        });
</script>


<!-- <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.4/tinymce.min.js'></script> -->
<!-- <script >
$(function() {
	Vue.directive('tinymce-editor',{ 
  	twoWay: true,
    bind: function() {
    	var self = this;
      tinymce.init({
      	selector: '#editor',
        setup: function(editor) {
        	editor.on('init', function() {
 						tinymce.get('editor').setContent(self.value);
          });
          editor.on('keyup', function() {
          	var new_value = tinymce.get('editor').getContent(self.value);
            self.set(new_value)
          });
        }
      });
    },
    update: function(newVal, oldVal) {
    	$(this.el).val(newVal).trigger('keyup');
    }
  })
	new Vue({
  	el: '#tinymce-form',
    data: {
    	// content: 'hello world'
    }
  })
})
</script> -->
<script>
$(document).ready(function(){
	
});

$('select').on('change',function () {
        var id = $(this).val();
        // alert(id);
        $.ajax({
		url: "getdetails/"+id,
		type: "GET",
		headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
		data:[],
		success: function (data) {
            // console.log(data.id);
            $("#imageset1").attr("src", "");
            $("#blah").attr("src", "");
            $('.editordes').html('');
            $('.setid').html('');
            document.getElementById("Picture1").value = "";
            document.getElementById("Picture2").value = "";

            jQuery.each(data, function(value,key){
                // console.log(key[0].id);
                var url = '/uploads/'+key[0].img1;
                var url2 = '/uploads/'+key[0].img2;
                // console.log(url);
                $("#imageset1").attr("src", url);
                $("#blah").attr("src", url2);
                // $("#editor").html(key[0].description);
                $('.editordes').append(key[0].description);      
                $('.setid').append('<input type="hidden" value="'+key[0].id+'" name="desid">');      

            });
            // ('#editor').val(data.description);
			// swal("Done!", "It was successfully!", "success");
		},
		error: function (jqXHR, textStatus, errorThrown) {
			swal("Warning", "Unable to Process your request", "error");
		},
	});
  });
</script>
<script>
$('#myform').on('submit', function(event){
let ele = this;
	event.preventDefault();
	var form_data = $(this).serialize();
	$.ajax({
		url:"/postdescription",
		method:"POST",
        data:  new FormData(this),
        
        cache: false,
        contentType: false,
        processData: false,
		dataType:"json",      
		success: function (result, code, ex) {
            swal("Done!","It was successfully!", "success");
            // $('.editordes').html('');
            location.reload();  

		},
		error: function (jqXHR, textStatus, errorThrown) {
			swal("Warning", "Unable to Process your request", "error");
		},
		
	})
});
</script>




<script>
   function previewFile(){
       var preview = document.querySelector('img'); //selects the query named img
       var file    = document.querySelector('input[type=file]').files[0]; //sames as here
       var reader  = new FileReader();

       reader.onloadend = function () {
           preview.src = reader.result;
       }

       if (file) {
           reader.readAsDataURL(file); //reads the data as a URL
       } else {
           preview.src = "";
       }
  }
  previewFile();  //calls the function named previewFile()
  </script>



 

