@extends("front.dashboard.layouts.app")
@section("style")
<link href="{{ asset('assets/plugins/Drag-And-Drop/dist/imageuploadify.min.css') }}" rel="stylesheet" />
@endsection
@section("wrapper")
<!--start page wrapper -->

   <style type="text/css">
      #canvas {
  height: 600px;
  width: 600px;
  background-color: #ffffff;
  cursor: default;
  border: 1px solid black;
}
   .mfile.d-inline-block {
    position: relative !important;
    top: 20px !important;
}
.mfile.d-inline-block a{ 
   position: absolute;
    top: -10px;
    right: 0;
    background: #f00;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 1px 3px;
}

input.main_img_product {
    position: absolute;
    top: -5px;
}
   </style>

        <!--start page wrapper -->
        <div class="page-wrapper">
            <div class="page-content">
                <!--breadcrumb-->
                <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                    <div class="breadcrumb-title pe-3">Products</div>
                    
                </div>
                <!--end breadcrumb-->
              
                <div class="card">
                  <div class="card-body p-4">
                      <h5 class="card-title">Edit Product</h5>
                      <hr/>
                       <div class="form-body mt-4">
                    <form  action="{{ $route->store }}" onsubmit="inline_form_submit(this);return false;" method="POST" >
                  @csrf      
                        <div class="row">
                  
                     <input type="hidden" name="id" value="{{ $info->id }}">
                           <div class="col-lg-8">
                           <div class="border border-1 p-4 rounded">
                             <div class="mb-3">
                                 <label class="form-label">Name<sup class="text-danger">*</sup></label>
                                 <input type="text" name="title" class="form-control" placeholder="Enter Title" value="{{ $info->name }}">
                              </div>
                              <div class="mb-3">
                                 <label  class="form-label">Description<sup class="text-danger">*</sup></label>
                                 <textarea class="form-control tinymceEditor" name="description" rows="3">{{ $info->description }}</textarea>
                              </div>

                              <div class="mb-3">
                                 <label class="form-label">Products<sup class="text-danger">*</sup></label>
                                 <select class="form-control single-select" name="products[]" id="products" multiple>
                                    <br />
<b>Notice</b>:  Undefined variable: all_products in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>72</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>72</b><br />
                                  </select>
                              </div>

                              <div class="mb-3">
                                 <label class="form-label">Templates<sup class="text-danger">*</sup></label>
                                 <div class="container">
                                  <div class="row">                                  
                                  <br />
<b>Notice</b>:  Undefined variable: templates in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>83</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>83</b><br />
                                  </div>
                                  </div>
                              </div>
                         
                    </div>

                           </div>
                           <div class="col-lg-4">
                            <div class="border border-1 p-4 rounded">
                              <div class="row g-3">
                                  <div class="col-12">
                                      <div class="d-grid">
                                      <div class="mb-3">
                                       <label class="form-label">Status<sup class="text-danger">*</sup></label>
                                       <select class="form-control" name="status" id="status">
                                          <option value="">Select Status</option>
                                          <option value="1" <br />
<b>Notice</b>:  Undefined variable: info in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>121</b><br />
<br />
<b>Notice</b>:  Trying to get property of non-object in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>121</b><br />
>Active</option>
                                          <option value="0" <br />
<b>Notice</b>:  Undefined variable: info in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>122</b><br />
<br />
<b>Notice</b>:  Trying to get property of non-object in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/edit.blade.php</b> on line <b>122</b><br />
selected>Inactive</option>
                                       </select>
                                    </div>
                                 <button type="submit" class="btn btn-primary">Update Product <i class="st_loader spinner-border spinner-border-sm" style="display:none;"></i></button>
                                      </div>
                                  </div>
                              </div> 
                          </div>
                          </div>
                 
                       </div><!--end row-->
                   </form>
                    </div>
                  </div>
              </div>


            </div>
        </div>
        <!--end page wrapper -->
        @endsection

@section("page-js-script")
<script src="https://cdn.tiny.cloud/1/ywqmxeye1bqw640inrzx59t5k336ioq2oad0rc5d4cydjlnt/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ asset('assets/plugins/Drag-And-Drop/dist/imageuploadify.min.js') }}"></script>
<script>
  $(document).ready(function() {
      $(".single-select").select2({
         theme: 'bootstrap4',
      width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
      placeholder: $(this).data('placeholder'),
      allowClear: Boolean($(this).data('allow-clear')),
      });
      
        tinymce.init({
          selector: 'textarea.tinymceEditor',
          height: 300,
          setup: function (editor) {
           editor.on('change', function () {
               editor.save();
           });
          },
          menubar: false,
          plugins: [
             'advlist autolink lists link image charmap print preview anchor',
             'searchreplace visualblocks code fullscreen',
             'insertdatetime media table paste code help wordcount'
          ],
          toolbar: 'undo redo | formatselect | ' +
          'bold italic backcolor | alignleft aligncenter ' +
          'alignright alignjustify | bullist numlist outdent indent | ' +
          'removeformat | help',
          content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          });

      $('#category').trigger('change'); 
  }); 

  function get_subcategory(id){ 
    $.ajax({  
            'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url :"{{ route('dashboard.subcategories.get') }}",  
            method:"POST",  
            data:{'id':id,sub_cat:$('#sub_category').data('selected-subcat')},
            success: function(data){ 
                $('#sub_category').html(data);  
            },
        }); 
    }

   function inline_form_submit(e)
   {
   $(e).find('.st_loader').show();
   $.ajax({  
     url :$(e).attr('action'),  
     method:"POST",  
     dataType:"json",  
     data:$(e).serialize(),
      success: function(data){ 
              if(data.success==1){
                toastr.success(data.message,'Success');
                $(e).find('.st_loader').hide();
                $(e)[0].reset();
                var surl = "{{ route('dashboard.catalogs') }}";
                window.setTimeout(function() { window.location = surl; }, 500);
              }else if(data.success==0){
                toastr.error(data.message,'Error');
                $(e).find('.st_loader').hide();
              }
            },
            error: function(data){ 
              if(typeof data.responseJSON.status !== 'undefined'){
                toastr.error(data.responseJSON.error,'Error');
              }else{
                $.each(data.responseJSON.errors, function( key, value ) {
                    toastr.error(value,'Error');
                });
              }
              $(e).find('.st_loader').hide();
            } 
   }); 
   }
   
function close_modal(){
  $('#modal-default').modal('hide');
}

function product_model(e){
  var img = $(e).val();

  $('#modal-default .modal-content').html('');
 
   $.ajax({
   'headers': {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },   
     url :"{{ route('products.modal') }} ",  
     method:"POST",  
     data:{'img':img},
     success:function(res){  
      $('#modal-lg .modal-content').html(res);
      $('#modal-lg.modal').modal('show');

       var canvas  = $("#canvas"),
       context = canvas.get(0).getContext("2d"),
       $result = $('#result');
       var file_ids = $('#file_ids').val();
       
      if (e.files && e.files[0]) {
      if ( e.files[0].type.match(/^image\//) ) {
        var reader = new FileReader();
        reader.onload = function(evt) {
           var img = new Image();
           img.onload = function() {
             context.canvas.height = img.height;
             context.canvas.width  = img.width;
             context.drawImage(img, 0, 0);
             var cropper = canvas.cropper({
               aspectRatio: 16 / 9
             });
          $('#btnCrop').click(function() {
                // Get a string base 64 data url
                var croppedImageDataURL = canvas.cropper('getCroppedCanvas').toDataURL("image/png"); 
               // $result.append( $('<img>').attr('src', croppedImageDataURL) );
                  //$(form).find('.'+id+'_loader').show();
                  $.ajax({
                    type: "POST",
                    url: "{{ route('products.croppie.Upload.CropImage') }}",
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }, 
                    dataType: "json",
                    //data: new FormData (form[0]), 
                    data: {'image': croppedImageDataURL,'file_ids':file_ids},
                   success: function(res)
                    { 
                    
                     if(res.status == 1){
                        
                          var s = res.file_ids;
                          var match = s.split(',');
                        
                        $('#file_ids').val(res.file_ids);
                        $('#file_id').val(match[0]);
                        $('.images_view').html(res.file_view);
                        $('#modal-lg').modal('hide');

                     }
                    }
                  });
             });
             $('#btnRestore').click(function() {
               canvas.cropper('reset');
               $result.empty();
             });
           };
           img.src = evt.target.result;
        };
        reader.readAsDataURL(e.files[0]);
      }
      else {
        alert("Invalid file type! Please select an image file.");
      }
    }
    else {
      alert('No file(s) selected.');
    }
      
     }  
   });
   }


function image_modal(e) {
      var imgsrc_arr = [];

     $(".images_view .mfile.d-inline-block").each(function(e) { 
        var imgsrc = $(this).find('.img-thumbnail').attr('src');
        
        imgsrc_arr.push(imgsrc);
        
      }); 
     //console.log(imgsrc_arr);
     $('#modal-default .modal-content').html('');
     $.ajax({     
         'headers': {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },   
           url :"{{ route('products.image.modal') }} ",  
           method:"POST",  
           data:{'imgsrc':imgsrc_arr},
              success: function(res){ 
                 $('#modal-lg .modal-content').html(res);
                 $('#modal-lg.modal').modal('show');
                 
              }
              
          }); 
 
}      

function main_img_id(e) {
   var dataId = e.value;
   $('#file_id').val(dataId);
}

</script>
@endsection