@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>

<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">Catalog</div>
      </div>
      <!--end breadcrumb-->
      <div class="card">
         <div class="card-body p-4">
            <h5 class="card-title">Add New Catalog</h5>
            <hr/>
            <div class="form-body mt-4">
               <form  action="{{ route('dashboard.catalogs.store') }}" onsubmit="inline_form_submit(this);return false;" method="POST" >
                  @csrf      
                  <div class="row">
                     <input type="hidden" name="id" value="">                           
                     <div class="col-lg-8">
                        <div class="border border-1 p-4 rounded">
                           <div class="mb-3">
                              <label  class="form-label">Title<sup class="text-danger">*</sup></label>
                              <input type="text" class="form-control" name="title" placeholder="Enter product title">
                           </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"></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/add.blade.php</b> on line <b>67</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/add.blade.php</b> on line <b>67</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/add.blade.php</b> on line <b>77</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/payanyfee/public_html/paystaging/resources/views/front/dashboard/catalogs/add.blade.php</b> on line <b>77</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">Active</option>
                                          <option value="0">Inactive</option>
                                       </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Save 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() {
      //$('#image-uploadify').imageuploadify();
   
       $(".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 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('dashboard.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('dashboard.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('dashboard.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