@extends('adminlayout.admin')

 @section('content')

 <style >
     .cursor{
        cursor: pointer;
     }
     .nk-content-fluid{
        margin-top: 65px;
        position: relative;
     }
     .video-card{
        border-radius: 4px;
        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
     }
 </style>


<div class="content-wrapper">

 <section class="content-header" style="float:right;">
    <a href="{{route('showsocialmedia')}}" class="btn btn-primary  d-none d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Back</span></a>
                                            
     
</section>
<br><br>
<section class="content">     
  
    <div class="row">
        <center>
            <div id="myHtml" style="background-color:#000; color:#fff; ">
                <div style="" >
                    <img  src="{{ asset($data->image) }}"
                        style="" />
                </div>
        
               
            </div>
           <br><br>
            <button id="downloadButton" class="btn btn-primary">Download</button>
           <script>
              
              document.addEventListener("DOMContentLoaded", function() {
              var button = document.getElementById('downloadButton');
              button.addEventListener('click', function() {
                  var imageUrl = '{{ asset($data->image) }}'; // Example dynamic URL generation, replace this with your logic
                  downloadImage(imageUrl);
              });

              function downloadImage(imageUrl) {
                  var xhr = new XMLHttpRequest();
                  xhr.open('GET', imageUrl, true);
                  xhr.responseType = 'blob'; // Set the response type to Blob

                  xhr.onload = function() {
                      if (xhr.status === 200) {
                          var blob = xhr.response;
                          var fileName = getFileNameFromUrl(imageUrl);
                          var link = document.createElement('a');
                          link.href = window.URL.createObjectURL(blob);
                          link.download = fileName;
                          document.body.appendChild(link);
                          link.click();
                          document.body.removeChild(link);
                      }
                  };

                  xhr.send();
              }

              function getFileNameFromUrl(url) {
                  return url.substring(url.lastIndexOf('/') + 1); // Extracts file name from URL
              }
          });


           </script>

           
        <script>
                    
                    html2canvas(document.getElementById("myHtml"),
                    {
                        allowTaint: true,
                        useCORS: true
                    }).then(function (canvas) {
                        var anchorTag = document.createElement("a");
                        document.body.appendChild(anchorTag);
                        document.getElementById("previewImg").appendChild(canvas);
                        var fileName = document.getElementById("namehide").value;
                        anchorTag.download = fileName;
                        anchorTag.href = canvas.toDataURL();
                        anchorTag.target = '_blank';
                        anchorTag.click();
                       // window.location.replace('/admin/show-social-media');
                    });
                
                            
            //        $(document).ready(function () {
            //
            //            $("#btn_convert").on('click', function () {
            //                html2canvas(document.getElementById("myHtml"),
            //                    {
            //                        allowTaint: true,
            //                        useCORS: true
            //                    }).then(function (canvas) {
            //                        var anchorTag = document.createElement("a");
            //                        document.body.appendChild(anchorTag);
            //                        document.getElementById("previewImg").appendChild(canvas);
            //                        anchorTag.download = "filename.jpg";
            //                        anchorTag.href = canvas.toDataURL();
            //                        anchorTag.target = '_blank';
            //                        anchorTag.click();
            //                    });
            //            });
            //
            //        });
            
        </script>  
    </div>  

          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
     
      <!-- /.col -->
  
    
</section>   

</div>

 


@endsection