@extends('layouts.adminapp')

@section('content')
@section('head',__('lng.ReceiptVoucher'))
<div class="container-fluid">       
    <main >
<style>

.maindiv
{
    padding :0 250px;
}
    @media screen and (max-width: 600px) {
    .maindiv {
        padding: 0 !important;
    }
    .maindiv {
        padding: 0 !important;
    }
    }
    @media screen and (max-width: 1200px) {
    .maindiv {
        padding: 0 !important;
    }
    .maindiv {
        padding: 0 !important;
    }
    }
</style>
  {{-- ===============================================
                    START SHOW AREA
        =============================================== --}}
 <div style="" id="maindiv" class="maindiv">
        <div class="card mb-4" style="text-align: center;" id="sheare_div">
    
        <div id="printableArea"  style="height: 100%;" >
            <style>
                body
                {
                    font-size:15px;
                    font-family: 'Roboto', sans-serif;
                }
                .table1 {
                  border-collapse: collapse;
                }
    
                .table1, .th1, .td1 {
                  border: 1px solid black;
                }
    
                h1,h2,h3,h4,h5,h6,p {
                    margin: 5;
                }
    
                .result-table {
                    width: 100%;
                    margin-top: 10px;
                }
    
                .result-table th {
                    height: 50px;
                    border-bottom: 1px solid #ddd;
                    border-left: 1px solid #ddd;
                }
    
                 .result-table td {
                    border-bottom: 1px solid #ddd;
                    border-left: 1px solid #ddd;
                    padding: 5px;
                }
    
                .btn-part {
    
                }
    
                .btn-print{
                   padding:18px 30px;
                   border-color:black;
                   background-color:inherit;
                   border-radius:40px;
                   margin-top: 10px;
               }
               .btn-print:hover{
                   padding:18px 30px;
                   color:white;
                   background-color:black;
                   border-radius:40px;
                   cursor: pointer;
               }
               .ShowReceiptHead{
                padding:20px 0 5px 0;
                text-align:center;
                color: #000;    
               }
               .ShowReceiptHead h5{
                   font-weight: 600;
                   font-size: 25px;
               }
               .ShowReceiptAmount{
                padding:5px 0;
                text-align:center;
                color: #000;
               }
               .ShowReceiptAmount h2{
                   font-size: 40px;
               }
               .ShowReceiptAmount i{
                   font-size: 35px;
                   padding-right: 10px;
               }
    
               .ShowReceiptdetailHeader{
                padding :10px 10px ;
                border-bottom:1px solid #808080;
                 text-align:left; color: #000; 
                 font-weight:600 ;
                 font-size:15px
               }
    
               .ShowDetailHeader{
                text-align: left ; 
                padding :10px 0 0 20px ; 
                font-size:15px
               }
    
                .ShowDetailCondent{
                    text-align: left ; 
                    padding :0 20px ; 
                    font-size:15px; 
                    color:#000
                }
                .ShowDetailHeaderEnd{
                    text-align: left ; 
                    padding :0 0 30px 20px ; 
                    font-size:15px; color:#000
                }
                .ShowSignature{
                    font-size:10px; 
                    font-weight:600;
                }
    
               .Completed {
                text-align:center;
                }
    
               .Completed i{
                   padding-right: 5px;
                   color: green;
                }
    
                @media screen and (max-width: 600px) {
                .RentDetails {
                    padding: 0 !important;
                }
                }@media screen and (max-width: 1200px) {
                .RentDetails {
                    padding: 0 !important;
                }
                }
    
    
               @page {
            }
            </style>
            <div style="padding:5px;"  >
    
                <!-------------------  HEAD  -------------------------------------->
    
                <div style=" padding: 10px; width: 100%; float: left;" >
                    <div  >
                    @php
                    $Y =  date("Y",strtotime($Donation->date));
                    $M =  date("F",strtotime($Donation->date));
                    $D =  date("d",strtotime($Donation->date));
                    $get_amount= PBFunc::AmountInWords($Donation->amount);
                    @endphp
    
                    {{-- @include('PrintHeader.header') --}}
                    
                    {{-- @include('PrintHeader.CompanyDetails') --}}
                    <div style="padding-top:10px;font-size:17px;">
                        <div class="ShowReceiptHead" ><h5>{{__('lng.ReceiptVoucherReceipt')}}</h5></div>
                        <div class="ShowReceiptAmount" ><h2><i class="fas fa-rupee-sign"></i>@currency($Donation->amount)</h2></div>
                        <div class="Completed" ><p><i class="mdi mdi-check-circle"></i>{{__('lng.Completed')}} . {{$D}}  {{$M}}  {{$Y}}</p></div>
    
                    </div>
                    <div  class="RentDetails">
                        <div style="border:1px solid #808080 ;margin-top:50px; border-radius: 10px;">
                            <div  class="ShowReceiptdetailHeader" >{{__('lng.ReceiptVoucherDetails')}} </div>
                            <div class="ShowDetailHeader">{{__('lng.Invoiceno')}} .</div>
                            <div class="ShowDetailCondent" >#{{$Donation->invoicenumber}}</div>
                            <div class="ShowDetailHeader"> {{__('lng.Name')}}</div>
                            <div class="ShowDetailCondent"> @if($Donation->isGuest){{$Donation->name}}@else{{$Donation->name ?? ''}}@endif </div>
                            <div class="ShowDetailHeader"> {{__('lng.Phone')}}</div>
                            <div class="ShowDetailCondent"> @if($Donation->isGuest){{$Donation->phone}}@else{{$Donation->phone ?? ''}}@endif </div>
                            <div class="ShowDetailHeader">{{__('lng.TotalAmountinwords')}} </div>
                            <div class="ShowDetailCondent">{{$get_amount}} Only</div>
                            <div class="ShowDetailHeader"> {{__('lng.Ledger')}}</div>
                            <div class="ShowDetailCondent">{{$Donation->Ledger->title}}</div>
                            <div class="ShowDetailHeader"> {{__('lng.Head')}}</div>
                            <div class="ShowDetailCondent" >{{$Donation->payhead->title}}</div>
                            @if ($Donation->narration)
                            <div class="ShowDetailHeader"> {{__('lng.Narration')}}</div>
                            @endif
                            <div class="ShowDetailHeaderEnd" >{{$Donation->narration}}</div>
    
                        </div>
                    </div>
                    @include('PrintHeader.CompanyDetails2')
                 </div>
              </div>
            </div>
        </div>
    </div>

        
        {{-- ===============================================
                    END SHOW AREA
        =============================================== --}}
    


        {{-- ===============================================
                    START PRINT AREA
        =============================================== --}}
    
<div class="card mb-4" style="text-align: center;">

    <div   style="height: 100%; display:none" >
        @php
            echo $ReceiptPrintForm->formate ??'';
        @endphp
        {{-- <style>
            body
            {
                font-size:15px;
                font-family: 'Roboto', sans-serif;
            }
            .table1 {
              border-collapse: collapse;
            }

            .table1, .th1, .td1 {
              border: 1px solid black;
            }

            h1,h2,h3,h4,h5,h6,p {
                margin: 5;
            }

            .result-table {
                width: 100%;
                margin-top: 10px;
            }

            .result-table th {
                height: 50px;
                border-bottom: 1px solid #ddd;
                border-left: 1px solid #ddd;
            }

             .result-table td {
                border-bottom: 1px solid #ddd;
                border-left: 1px solid #ddd;
                padding: 5px;
            }

            .btn-part {

            }

            .btn-print{
               padding:18px 30px;
               border-color:black;
               background-color:inherit;
               border-radius:40px;
               margin-top: 10px;
           }
           .btn-print:hover{
               padding:18px 30px;
               color:white;
               background-color:black;
               border-radius:40px;
               cursor: pointer;
           }
           .ReceiptHead{
            padding:20px 0 5px 0;
            text-align:center;
            color: #000;    
           }
           .ReceiptHead h5{
               font-weight: 600;
               font-size: 35px;
           }
           .ReceiptAmount{
            padding:5px 0;
            text-align:center;
            color: #000;
           }
           .ReceiptAmount h2{
               font-size: 65px;
           }
           .ReceiptAmount i{
               font-size: 40px;
               padding-right: 10px;
           }

           .ReceiptdetailHeader{
            padding :10px 10px ;
            border-bottom:1px solid #808080;
             text-align:left; color: #000; 
             font-weight:600 ;
             font-size:40px
           }

           .DetailHeader{
            text-align: left ; 
            padding :10px 0 0 20px ; 
            font-size:40px
           }

            .DetailCondent{
                text-align: left ; 
                padding :0 40px ; 
                font-size:30px; 
                color:#000
            }
            .DetailHeaderEnd{
                text-align: left ; 
                padding :0 0 30px 40px ; 
                font-size:30px; color:#000
            }
            .Signature{
                font-size:30px; 
                font-weight:600;
            }

           .Completed {
            text-align:center;
            }

           .Completed i{
               padding-right: 5px;
               color: green;
            }

            @media screen and (max-width: 600px) {
            .RentDetails {
                padding: 0 !important;
            }
            }@media screen and (max-width: 1200px) {
            .RentDetails {
                padding: 0 !important;
            }
            }


           @page {
        }
        </style>
        <div style="padding:5px;"  >

            <!-------------------  HEAD  -------------------------------------->

            <div style=" padding: 10px; width: 100%; float: left;" >
                @php
                $Y =  date("Y",strtotime($Donation->date));
                $M =  date("F",strtotime($Donation->date));
                $D =  date("d",strtotime($Donation->date));
                $get_amount= PBFunc::AmountInWords($Donation->amount);
                @endphp

                
                @include('PrintHeader.CompanyDetails')
                <div style="padding-top:10px;font-size:17px;">
                    <div class="ReceiptHead" ><h5>{{__('lng.ReceiptVoucherReceipt')}}</h5></div>
                    <div class="ReceiptAmount" ><h2><i class="fas fa-rupee-sign"></i>@currency($Donation->amount)</h2></div>
                    <div class="Completed" ><p><i class="fas fa-check-circle"></i>{{__('lng.Completed')}} . {{$D}}  {{$M}}  {{$Y}}</p></div>

                </div>
                <div  class="RentDetails">
                    <div style="border:1px solid #808080 ;margin-top:50px; border-radius: 10px;">
                        <div  class="ReceiptdetailHeader" >{{__('lng.ReceiptVoucherDetails')}} </div>
                        <div class="DetailHeader">{{__('lng.Invoiceno')}} .</div>
                        <div class="DetailCondent" >#{{$Donation->invoicenumber}}</div>
                        <div class="DetailHeader"> {{__('lng.Name')}}</div>
                        <div class="DetailCondent"> @if($Donation->isGuest){{$Donation->name}}@else{{$Donation->member->name ?? ''}}@endif </div>
                        <div class="DetailHeader"> {{__('lng.Phone')}}</div>
                        <div class="DetailCondent"> @if($Donation->isGuest){{$Donation->phone}}@else{{$Donation->member->contact ?? ''}}@endif </div>
                        <div class="DetailHeader">{{__('lng.TotalAmountinwords')}} </div>
                        <div class="DetailCondent">{{$get_amount}} Only</div>
                        <div class="DetailHeader"> {{__('lng.Ledger')}}</div>
                        <div class="DetailCondent">{{$Donation->Ledger->title}}</div>
                        <div class="DetailHeader"> {{__('lng.Head')}}</div>
                        <div class="DetailCondent" >{{$Donation->payhead->title}}</div>
                        @if ($Donation->narration)
                        <div class="DetailHeader"> {{__('lng.Narration')}}</div>
                        @endif
                        <div class="DetailHeaderEnd" >{{$Donation->narration}}</div>
                        <div  style="text-align: right ; padding :50px 0; margin-top:30px;  margin-right:20px" ><h5 class="Signature" >Signature </h5></div>

                    </div>
                </div>
           </div>
    </div> --}}
</div>
<div class="btn-part py-5">
    @if ($CheckMember)
    <form method="GET" action="{{route('QuickView')}}">
        @csrf
        <input type="hidden" name="select_keyword" id="SelectKeyword" value="M">
        <input type="hidden" name="member_id" id="MemberId" value="{{$Donation->member->id}}">
        <button class="btn btn-success btn-icon-split" type="submit">
            <span class="icon text-white-50">
                <i class="mdi mdi-check"></i>
            </span>
            <span class="text">{{__('lng.Done')}}</span>
        </button>
    </form>
    @elseif($ProgramID)
    <a href="{{route('Program.show',$ProgramID)}}" class="btn btn-success btn-icon-split">
        <span class="icon text-white-50">
            <i class="mdi mdi-check"></i>
        </span>
        <span class="text">{{__('lng.Done')}}</span>
    </a>
    @else
    <a href="{{route('ReceiptVoucher.index',$VoucherType->title)}}" class="btn btn-success btn-icon-split">
        <span class="icon text-white-50">
            <i class="mdi mdi-check"></i>
        </span>
        <span class="text">{{__('lng.Done')}}</span>
    </a>
    @endif
         <a  class="btn btn-primary btn-icon-split" download id="downloadImage">
                <span class="icon text-white-50">
                    <i class="mdi mdi-download"></i>
                </span>
                <span class="text">{{__('lng.Download')}}</span>
            </a>
    <button onclick="printDiv('printableArea')" class="btn btn-info btn-icon-split">
        <span class="icon text-white-50">
            <i class="mdi mdi-printer"></i>
        </span>
        <span class="text">{{__('lng.Print')}}</span>
    </button>
</div>
</div>
    
        {{-- ===============================================
                    END PRINT AREA
        =============================================== --}}


        <script>
            function printDiv(divName) {
             var printContents = document.getElementById(divName).innerHTML;
             var originalContents = document.body.innerHTML;
    
             document.body.innerHTML = printContents;
    
             window.print();
    
             document.body.innerHTML = originalContents;
    
            }
            </script>








<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
        Download();
  function Download(){
    html2canvas(document.querySelector("#sheare_div")).then(canvas => {
      var image = canvas.toDataURL("image/png");

      var downloadImage=document.getElementById('downloadImage');
      downloadImage.setAttribute('href',image);
  });
  }
  
  function printDiv(divName) {
             var printContents = document.getElementById(divName).innerHTML;
             var originalContents = document.body.innerHTML;
    
             document.body.innerHTML = printContents;
    
             window.print();
    
             document.body.innerHTML = originalContents;
    
            }




    ChangeCertificateData();
  function ChangeCertificateData(){
    var DataTags=document.querySelectorAll('[data-value]');
    var GetAmount='{{ trim(preg_replace('/\s\s+/', ' ',PBFunc::AmountInWords($Donation->amount)))}} Only';
      for(var i=0;i<DataTags.length;i++)
      {
            DataTags[i].removeAttribute("class");
            DataTags[i].style.background='transparent';
            DataTags[i].style.border='none';
    // font-weight: 600;
          switch(DataTags[i].getAttribute('data-value'))
          {
            case 'Logo':
            DataTags[i].innerHTML='<img width="150px" height="100px" src="{{PBFunc::ImageLink(PBCon::STORAGE_LOCATION_IMAGE_CompanyLogo,$Company->logo)}}"/>';
            break;
            case 'CompanyTitle':
            DataTags[i].innerHTML='{{$Company->title}}';
            break;
            case 'CompanyEmail':
            DataTags[i].innerHTML='{{$Company->email}}';
            break;
            case 'CompanyContact':
            DataTags[i].innerHTML='{{$Company->contact}}';
            break;
            case 'CompanyPlace':
            DataTags[i].innerHTML='{{$Company->place}}';
            break;
            case 'CompanyCity':
            DataTags[i].innerHTML='{{$Company->city}}';
            break;
            case 'CompanyDistrict':
            DataTags[i].innerHTML='{{$Company->district}}';
            break;
            case 'CompanyPin':
            DataTags[i].innerHTML='{{$Company->pin}}';
            break;
            case 'CompanyPost':
            DataTags[i].innerHTML='{{$Company->post}}';
            break;
            case 'InvoiceNo':
            DataTags[i].innerHTML='{{$Donation->invoicenumber}}';
            break;
            case 'Date':
            DataTags[i].innerHTML='{{$D}}  {{$M}}  {{$Y}}';
            break;
            case 'Name':
            DataTags[i].innerHTML='{{$Donation->member->name ?? $Donation->name}}';
            break;
            case 'Phone':
            DataTags[i].innerHTML='{{$Donation->member->contact ?? $Donation->phone}}';
            break;
            case 'Address':
            DataTags[i].innerHTML='{{$Donation->member->house->name ?? $Donation->address}}';
            break;
            case 'Amount':
            DataTags[i].innerHTML='@currency($Donation->amount)';
            break;
            case 'Ledger':
            DataTags[i].innerHTML='{{$Donation->ledger->title ?? ''}}';
            break;
            case 'Head':
            DataTags[i].innerHTML='{{$Donation->payhead->title ?? ''}}';
            break;
            case 'VoucherNo':
            DataTags[i].innerHTML='{{$Donation->vouchernumber}}';
            break;
            case 'AmountWords':
            DataTags[i].innerHTML=GetAmount;
            break;
            case 'Narration':
            DataTags[i].innerHTML='{{$Donation->narration}}';
            break;
            case 'CurrentDate':
            DataTags[i].innerHTML='{{date('d-m-Y')}}';
            break;
          }
      }
    
  }

    
  </script>

{{-- function download(){
    var download = document.getElementById("download");
    var image = document.getElementById("canvas").toDataURL("image/png")
                .replace("image/png", "image/octet-stream");
    download.setAttribute("href", image);

}
<a id="download" download="image.png"><button type="button" onClick="download()">Download</button></a> --}}
</main>
               
</div>
@endsection