bnmbertsurhetertertertertertertertpdf'tdfg

hjkhghopjkertteerterterterertertrtoirh bnmbertsurhetertertertertertertertpdf'tdfg

<!DOCTYPE html>
<html lang="en"> 
<head>
    <?php include 'include/links.php';?>
</head>
<style>
       
        ul li {
            margin-left:15px;
        }
    </style>
  <body>     
    
    <div class="tap-top"><i data-feather="chevrons-up"></i></div>
    
    
    <div class="page-wrapper compact-wrapper" id="pageWrapper">
      
      <?php include 'include/topnav.php';?>
      
      
      <div class="page-body-wrapper">
        
        <?php include 'include/sidenav.php';?>
        
        <div class="page-body">
          <div class="container-fluid">        
            <div class="page-title">
              <div class="row">
                <div class="col-12 col-sm-6">
                  <h3>Add Products</h3>
                </div>
              </div>
            </div>
          </div>
          
          <div class="container-fluid default-dash">
            <div class="row"> 
              <div class="col-xl-12 dash-xl-100">
                <div class="card ">
                  <div class="card-body">
                    <?php
                        $id = $_GET['id'];
                        $sql1 = "select * from products where id = '$id'";
                        $query1 = mysqli_query($conn, $sql1);
                        $row1 = mysqli_fetch_array($query1);
                        $thumbnail_image = explode(',', $row1['thumbnail_image']);
                        $img_count = count($thumbnail_image);  
                        
                        $detail_image = explode(',', $row1['detail_image']);
                        $img_count2 = count($detail_image); 
                        
                    ?>  
                      
                    <div class="theme-form mega-form" >
                      <div class="row">
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Category Name</label>
                                <select class="form-control" id="category" onchange="getsubcategory()">
                                    <option>--- Select category ---</option>
                                    <?php
                                        $sql = "select * from category";
                                        $query = mysqli_query($conn, $sql);
                                        while($row = mysqli_fetch_array($query)){
                                    ?>
                                        <option value="<?=$row['id']?>" <?php echo ($row1['catagory'] == $row['id']) ? "selected": ""; ?>><?= $row['category'];?></option>
                                    <?php
                                        }
                                    ?>
                                </select>
                              </div>
                            </div>
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Sub Category</label>
                                <select class="form-control" id="bname">
                                    <option>--- Select category ---</option>
                                    <?php
                                        $sql = "select * from Brands where category = '".$row1['catagory']."'";
                                        $query = mysqli_query($conn, $sql);
                                        while($row = mysqli_fetch_array($query)){
                                    ?>
                                        <option value="<?=$row['id']?>" <?php echo ($row1['bname'] == $row['id']) ? "selected": ""; ?>><?= $row['Brands'];?></option>
                                    <?php
                                        }
                                    ?>
                                </select>
                              </div>
                            </div>
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Product Name</label>
                                <input class="form-control" type="text" value="<?= $row1['pname'];?>" id="pname">
                                <input class="form-control" type="hidden" value="<?= $id;?>" id="id">
                              </div>
                            </div>
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Discount price</label>
                                <input class="form-control" type="text" value="<?= $row1['discountprice'];?>" id="discountprice">
                              </div>
                            </div>
                            
                            
                            
                            
                            
                            
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Original Price</label>
                                <input class="form-control" type="text" value="<?= $row1['price'];?>"  id="price">
                              </div>
                            </div>
                            
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Available Quantity</label>
                                <input class="form-control" type="text" value="<?= $row1['quantity'];?>" id="quantity">
                              </div>
                            </div>
                            <div class="col-4">
                              <div class="mb-3">
                                <label class="col-form-label">Thumbnail Image</label>
                                <input class="form-control" type="file" id="banner" accept="image/*" onchange="previewImage(event)"> 
                                <input class="form-control" type="hidden" value="<?= $row1['thumbnail_image']; ?>" id="bannerold">
                                <div class="row">
                                    <?php if($id != "") { ?>
                                    <div class="col">
                                        <img src="images/<?= $row1['thumbnail_image']; ?>" alt="zo-th-1" height="100" id="currentImagePreview"/>
                                    </div>
                                    <?php } ?>
                                    <div class="col">
                                        <img id="imagePreview" alt="Image Preview" style="display:none;" height="100"/>
                                    </div>
                                </div>
                            </div>
                            </div>
                          <div class="col-4">
                                 <div class="mb-3">
                                    <label class="col-form-label">OUR PHOTO GALLERY</label>
                                    <input class="form-control" type="file" id="formFile2" name="galleryImages[]" multiple accept="image/*" onchange="previewMultipleImages(event)">
                                    
                                    
                                    <div class="row" id="sortableGallery">
                                        <?php 
                                        if($id != "") {
                                            for ($i = 0; $i < $img_count2; $i++) {
                                        ?>
                                        <div class="col">
                                            <img src="images/<?php echo trim($detail_image[$i]); ?>"  alt="zo-th-1" height="100"/>
                                        </div>
                                        <?php 
                                            }
                                        } 
                                        ?>
                                    </div>
                                </div>
                          </div>
                      </div>
                      
                        <div class="col-12">
                          <div class="mb-3">
                            <label class="col-form-label">Youtube Video Url</label>
                            <input class="form-control" type="text" value="<?= $row1['video'];?>" id="video">
                          </div>
                        </div>
                      
                      
                      
                      <div class="mb-3">
                        <label class="col-form-label">Top Description</label>
                        <div rows="4" style="height:400px;" id="editor1"><?= html_entity_decode($row1['description']);?></div>
                      </div>
                      <div class="mb-3">
                        <label class="col-form-label">Description</label>
                        <div rows="4"style="height:400px;" id="editor2"><?= html_entity_decode($row1['note']);?></div>
                      </div>
                      <div class="mb-3">
                        <label class="col-form-label">Specification</label>
                        <div rows="4"style="height:400px;" id="editor3"><?= html_entity_decode($row1['additional']);?></div>
                      </div>
                      <style>
                          .button {
                              position: relative;
                              padding: 8px 16px;
                              background: #009579;
                              border: none;
                              outline: none;
                              border-radius: 2px;
                              cursor: pointer;
                            }
                            
                            .button:active {
                              background: #007a63;
                            }
                            
                            .button__text {
                              font: bold 20px "Quicksand", san-serif;
                              color: #ffffff;
                              transition: all 0.2s;
                            }
                            
                            .button--loading .button__text {
                              visibility: hidden;
                              opacity: 0;
                            }
                            
                            .button--loading::after {
                              content: "";
                              position: absolute;
                              width: 16px;
                              height: 16px;
                              top: 0;
                              left: 0;
                              right: 0;
                              bottom: 0;
                              margin: auto;
                              border: 4px solid transparent;
                              border-top-color: #ffffff;
                              border-radius: 50%;
                              animation: button-loading-spinner 1s ease infinite;
                            }
                            
                            @keyframes button-loading-spinner {
                              from {
                                transform: rotate(0turn);
                              }
                            
                              to {
                                transform: rotate(1turn);
                              }
                            }
                      </style>
                      <div class="card-footer">
                        <?php
                            if($id == ""){
                        ?>  
                            <button type="button" class="button" id="Submit" onclick="this.classList.toggle('button--loading')">
                                <span class="button__text">Submit</span>
                            </button>
                            
                        <?php
                            }else{
                        ?>  
                            <button type="button" class="button" id="update" onclick="this.classList.toggle('button--loading')">
                                <span class="button__text">Update</span>
                            </button>
                            
                        <?php
                            }
                        ?>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
        <?php include 'include/scripts.php';?>
        
        
        
        
        <script>
        let editor1;
            let editor2;
            let editor3;
       
        </script>

// function initializeEditor(editorId) {
                //     return CKEDITOR.ClassicEditor.create(document.getElementById(editorId), {
                //          toolbar: {
                //             items: [
                //                 'exportPDF','exportWord', '|',
                //                 'findAndReplace', 'selectAll', '|',
                //                 'heading', '|',
                //                 'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
                //                 'bulletedList', 'numberedList', 'todoList', '|',
                //                 'outdent', 'indent', '|',
                //                 'undo', 'redo',
                //                 '-',
                //                 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
                //                 'alignment', '|',
                //                 'link', 'uploadImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
                //                 'specialCharacters', 'horizontalLine', 'pageBreak', '|',
                //                 'textPartLanguage', '|',
                //                 'sourceEditing'
                //             ],
                //             shouldNotGroupWhenFull: true
                //         },
                //         // Changing the language of the interface requires loading the language file using the <script> tag.
                //         // language: 'es',
                //         list: {
                //             properties: {
                //                 styles: true,
                //                 startIndex: true,
                //                 reversed: true
                //             }
                //         },
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
                //         heading: {
                //             options: [
                //                 { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                //                 { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                //                 { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                //                 { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                //                 { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                //                 { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                //                 { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
                //             ]
                //         },
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html#using-the-editor-configuration
                //         placeholder: 'Welcome to CKEditor 5!',
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-family-feature
                //         fontFamily: {
                //             options: [
                //                 'default',
                //                 'Arial, Helvetica, sans-serif',
                //                 'Courier New, Courier, monospace',
                //                 'Georgia, serif',
                //                 'Lucida Sans Unicode, Lucida Grande, sans-serif',
                //                 'Tahoma, Geneva, sans-serif',
                //                 'Times New Roman, Times, serif',
                //                 'Trebuchet MS, Helvetica, sans-serif',
                //                 'Verdana, Geneva, sans-serif'
                //             ],
                //             supportAllValues: true
                //         },
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/font.html#configuring-the-font-size-feature
                //         fontSize: {
                //             options: [ 10, 12, 14, 'default', 18, 20, 22 ],
                //             supportAllValues: true
                //         },
                //         // Be careful with the setting below. It instructs CKEditor to accept ALL HTML markup.
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/general-html-support.html#enabling-all-html-features
                //         htmlSupport: {
                //             allow: [
                //                 {
                //                     name: /.*/,
                //                     attributes: true,
                //                     classes: true,
                //                     styles: true
                //                 }
                //             ]
                //         },
                //         // Be careful with enabling previews
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html#content-previews
                //         htmlEmbed: {
                //             showPreviews: true
                //         },
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/link.html#custom-link-attributes-decorators
                //         link: {
                //             decorators: {
                //                 addTargetToExternalLinks: true,
                //                 defaultProtocol: 'https://',
                //                 toggleDownloadable: {
                //                     mode: 'manual',
                //                     label: 'Downloadable',
                //                     attributes: {
                //                         download: 'file'
                //                     }
                //                 }
                //             }
                //         },
                //         // https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html#configuration
                //         mention: {
                //             feeds: [
                //                 {
                //                     marker: '@',
                //                     feed: [
                //                         '@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
                //                         '@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
                //                         '@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
                //                         '@sugar', '@sweet', '@topping', '@wafer'
                //                     ],
                //                     minimumCharacters: 1
                //                 }
                //             ]
                //         },
                //         // The "superbuild" contains more premium features that require additional configuration, disable them below.
                //         // Do not turn them on unless you read the documentation and know how to configure them and setup the editor.
                //         removePlugins: [
                //             // These two are commercial, but you can try them out without registering to a trial.
                //             // 'ExportPdf',
                //             // 'ExportWord',
                //             'AIAssistant',
                //             'CKBox',
                //             'CKFinder',
                //             'EasyImage',
                //             // This sample uses the Base64UploadAdapter to handle image uploads as it requires no configuration.
                //             // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/base64-upload-adapter.html
                //             // Storing images as Base64 is usually a very bad idea.
                //             // Replace it on production website with other solutions:
                //             // https://ckeditor.com/docs/ckeditor5/latest/features/images/image-upload/image-upload.html
                //             // 'Base64UploadAdapter',
                //             'MultiLevelList',
                //             'RealTimeCollaborativeComments',
                //             'RealTimeCollaborativeTrackChanges',
                //             'RealTimeCollaborativeRevisionHistory',
                //             'PresenceList',
                //             'Comments',
                //             'TrackChanges',
                //             'TrackChangesData',
                //             'RevisionHistory',
                //             'Pagination',
                //             'WProofreader',
                //             // Careful, with the Mathtype plugin CKEditor will not load when loading this sample
                //             // from a local file system (file://) - load this site via HTTP server if you enable MathType.
                //             'MathType',
                //             // The following features are part of the Productivity Pack and require additional license.
                //             'SlashCommand',
                //             'Template',
                //             'DocumentOutline',
                //             'FormatPainter',
                //             'TableOfContents',
                //             'PasteFromOfficeEnhanced',
                //             'CaseChange'
                //         ]
                //     }).then(editor => {
                //         editors[editorId] = editor;
                //     }).catch(error => {
                //         console.error(error);
                //     });
                // }
        
                // Promise.all([
                //     initializeEditor('editor1'),
                //     initializeEditor('editor2'),
                //     initializeEditor('editor3')
                // ]).then(() => {
                //     // Add the submit handler after all editors are initialized
                //     $("#Submit").click(function() {
                //         var category = $("#category").val();
                //         var pname = $("#pname").val();
                //         var bname = $("#bname").val();
                //         var price = $("#price").val();
                //         var discountprice = $("#discountprice").val();
                //         var percentage = $("#percentage").val();
                //         var quantity = $("#quantity").val();
                //         const editordata1 = editors['editor1'].getData();
                //         const editordata2 = editors['editor2'].getData();
                //         const editordata3 = editors['editor3'].getData();
                //         var banner = $("#banner")[0].files[0];
                //         var totalformFile2 = document.getElementById('formFile2').files.length;
        
                //         var fd = new FormData();
                //         fd.append("category", category);
                //         fd.append("pname", pname);
                //         fd.append("bname", bname);
                //         fd.append("price", price);
                //         fd.append("discountprice", discountprice);
                //         fd.append("percentage", percentage);
                //         fd.append("quantity", quantity);
                //         fd.append("editordata1", editordata1);
                //         fd.append("editordata2", editordata2);
                //         fd.append("editordata3", editordata3);
                //         fd.append("banner", banner);
                //         for (var index = 0; index < totalformFile2; index++) {
                //             fd.append("formFile2[]", document.getElementById('formFile2').files[index]);
                //         }
        
                //         $.ajax({
                //             url: "ajax/product-insert.php",
                //             type: "POST",
                //             data: fd,
                //             dataType: 'json',
                //             contentType: false,
                //             processData: false,
                //             success: function(resp) {
                //                 if (resp == 1) {
                //                     alert('Good Job!');
                //                     location.reload();
                //                 } else {
                //                     alert('Something went wrong!');
                //                 }
                //             }
                //         });
                //     });
                // });
                
                
    			$("#Submit").click(function(){
    			    var category = $("#category").val();
    			    var pname = $("#pname").val();
    			    var bname = $("#bname").val();
    			    var price = $("#price").val();
    			    var discountprice = $("#discountprice").val();
    			    var percentage = $("#percentage").val();
    			    var quantity = $("#quantity").val();
    			    var video = $("#video").val();
    			    const editordata1 = editor1.getData();
    			    const editordata2 = editor2.getData();
    			    const editordata3 = editor3.getData();
    			    var banner = $("#banner")[0].files[0];
    			    var totalformFile2 = document.getElementById('formFile2').files.length;    			    
    			    
    			    var files = document.getElementById('formFile2').files;
                    var sortedImages = [];
                
                    // Collect sorted images based on the order in the DOM
                    var sortedDivs = document.getElementById('sortableGallery').children;
                    for (let i = 0; i < sortedDivs.length; i++) {
                        var index = sortedDivs[i].getAttribute('data-index');
                        sortedImages.push(files[index]);
                    }
    			    
    			    
    			    var fd = new FormData();
    				fd.append("category", category);
    				fd.append("pname", pname);
    				fd.append("bname", bname);
    				fd.append("price", price);
    				fd.append("discountprice", discountprice);
    				fd.append("percentage", percentage);
    				fd.append("quantity", quantity);
    				fd.append("video", video);
    				fd.append("editordata1", editordata1);
    				fd.append("editordata2", editordata2);
    				fd.append("editordata3", editordata3);
    				fd.append("banner", banner);
                    // for (var index = 0; index < totalformFile2; index++) {
                    //     fd.append("formFile2[]", document.getElementById('formFile2').files[index]);
                    // }
                    
                    for (let i = 0; i < sortedImages.length; i++) {
                        fd.append('formFile2[]', sortedImages[i]);
                    }
                    
                    // console.log(fd);
                    // return false;
                    
					$.ajax({
						url:"ajax/product-insert.php",
						type:"POST",
						data:fd,
						dataType: 'json',
                        contentType: false,
                        processData: false,
						success:function(resp){
							if(resp == 1){
							    alert('Good Job !');
							    location.reload();
							}else{
							    alert('something Went Wrong!');
							}
						}
					})
    			});	
            			
    			$("#update").click(function(){
    			    var id = '<?= $id;?>';
    			    var category = $("#category").val();
    			    var pname = $("#pname").val();
    			    var bname = $("#bname").val();
    			    var price = $("#price").val();
    			    var discountprice = $("#discountprice").val();
    			    var percentage = $("#percentage").val();
    			    var quantity = $("#quantity").val();
    			    var video = $("#video").val();
    			    const editordata1 = editor1.getData();
    			    const editordata2 = editor2.getData();
    			    const editordata3 = editor3.getData();
    			    var banner = $("#banner")[0].files[0];
    			    var bannerold = $("#bannerold").val();
    			    var totalformFile2 = document.getElementById('formFile2').files.length;   
    			    
    			    var files = document.getElementById('formFile2').files;
                    var sortedImages = [];
                
                    // Collect sorted images based on the order in the DOM
                    var sortedDivs = document.getElementById('sortableGallery').children;
                    for (let i = 0; i < sortedDivs.length; i++) {
                        var index = sortedDivs[i].getAttribute('data-index');
                        sortedImages.push(files[index]);
                    } 
    			    
    			    var testfile = 'test';
    			    
    			    
    			    var fd = new FormData();
    				fd.append("id", id);	
    				fd.append("category", category);
    				fd.append("pname", pname);
    				fd.append("bname", bname);
    				fd.append("price", price);
    				fd.append("discountprice", discountprice);
    				fd.append("percentage", percentage);
    				fd.append("quantity", quantity);
    				fd.append("video", video);
    				fd.append("editordata1", editordata1);
    				fd.append("editordata2", editordata2);
    				fd.append("editordata3", editordata3);
    				fd.append("banner", banner);
    				fd.append("bannerold", bannerold);
    				
                    if(totalformFile2 != 0){
    			        for (let i = 0; i < sortedImages.length; i++) {
                            fd.append('formFile2[]', sortedImages[i]);
                        }
    			    }else{
    			        fd.append("testfile", testfile);
    			    }
                    
                    
//                     for (let [key, value] of fd.entries()) {
//     console.log(key, value);
// }
//                     return false;
					$.ajax({
						url:"ajax/product-update.php",
						type:"POST",
						data:fd,
						dataType: 'json',
                        contentType: false,
                        processData: false,
						success:function(resp){
							if(resp == 1){
							    alert('Good Job !');
							    window.location.href="products.php";
							}else{
							    alert('something Went Wrong!');
							}
						}
					})
    			});
    		});
                </script>
                
                <script>
                    function previewImage(event) {
                        var imagePreview = document.getElementById('imagePreview');
                        var file = event.target.files[0];
                        if (file) {
                            var reader = new FileReader();
                            reader.onload = function() {
                                imagePreview.src = reader.result;
                                imagePreview.style.display = 'block';
                            };
                            reader.readAsDataURL(file);
                        }
                    }
                </script>
                
                <script>
                    function previewMultipleImages(event) {
                        var sortableGallery = document.getElementById('sortableGallery');
                        sortableGallery.innerHTML = ''; // Clear previous previews
                        var files = event.target.files;
                    
                        if (files) {
                            for (let i = 0; i < files.length; i++) {
                                var reader = new FileReader();
                                reader.onload = function(e) {
                                    var colDiv = document.createElement('div');
                                    colDiv.classList.add('col');
                                    colDiv.setAttribute('data-index', i); // Set an index for reordering
                    
                                    var img = document.createElement('img');
                                    img.src = e.target.result;
                                    img.height = 100;
                    
                                    colDiv.appendChild(img);
                                    sortableGallery.appendChild(colDiv);
                                };
                                reader.readAsDataURL(files[i]);
                            }
                        }
                        
                        // Initialize SortableJS
                        new Sortable(sortableGallery, {
                            animation: 150, // Animation speed (ms)
                            ghostClass: 'sortable-ghost', // Class name for the dragged element
                            onEnd: function(evt) {
                                // Optional: Log the new order of items (can be used for validation)
                                console.log('New order:', Array.from(sortableGallery.children).map(el => el.getAttribute('data-index')));
                            }
                        });
                    }
                </script>    
      </div>
    </div>
        
  </body>
</html>