@extends('layouts.main')

@section('meta')
@include('blocks.meta', ['meta' => 'test'])
@endsection

@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<style>
body{
    background:transparent !important;
}
div{
   background:transparent !important; 
}
    .order-item{
        max-width:100%;
        background:transparent !important;
    }
    .main-img{
     
    }
</style>

                        @foreach ($order['order_details'] as $item)
                                          
                     <button onclick='exportToPng("front-1")'>Download as PNG</button>
                        <button onclick='HideMainImage("front-1")'>Hide Main Image</button>
                            <div class="order-item" id="front-1">
                                <div class="justify-content-center">
                                  
                                    {!! renderDesignPreview($item['front'],$item) !!}>
                                    
                                  
                                  
                                </div>
                         
                            </div>
                            
                            
                            <button onclick='exportToPng("back-1")'>Download as PNG</button>
                            <button onclick='HideMainImage("back-1")'>Hide Main Image</button>
                            <div class="order-item" id="back-1">
                                <div class="justify-content-center">
                               
                                       {!! renderDesignPreview($item['back'],$item) !!}
                                    
                                  
                                  
                                </div>
                         
                            </div>
                            
                           
                      
                        @endforeach
             


           
            
    <script>
  function exportToPng(id) {

    
    html2canvas(document.getElementById(id), {
    backgroundColor: null, // 👈 THIS IS CRITICAL FOR TRANSPARENCY
    useCORS: true,
    scale: 2
}).then(canvas => {
    const link = document.createElement("a");
    link.download = "design-preview.png";
    link.href = canvas.toDataURL("image/png");
    link.click();
});
  }
  
function HideMainImage(id) {
    const element = document.getElementById(id);
    if (!element) return;

    const image = element.querySelector('.main-img'); // or 'main-img' if typo
    if (!image) return;

    if (element.classList.contains('active')) {
        element.classList.remove('active');
        image.style.opacity = '0';
    } else {
        element.classList.add('active');
        image.style.opacity = '1';
    }
}


</script>

        @endsection