@extends('layouts.adminapp')

@section('content')

<style>

    .maindiv
    {
        padding :0 250px;
    }
        
        
        @media print {
            .maindiv , footer , .navbar-nav{
                display: none;
            }
            .printableArea{
                display: block;
            }
        }
    </style>
    
    <div style="" id="maindiv" class="maindiv">

        
        {{-- ===============================================
                    START SHOW AREA
        =============================================== --}}

        <div class="card mb-4" style="text-align: center;" id="sheare_div">
           
            <div  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;
                    }
                </style>
                <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> 
                <div style="padding:5px;" >
           
                    <!-------------------  HEAD  -------------------------------------->
                    
                    <div style=" padding: 10px; width: 100%; float: left;">
                        <div  >
                        @php 
                        $Y =  date("Y",strtotime($Subscription->date)); 
                        $M =  date("F",strtotime($Subscription->date)); 
                        $D =  date("d",strtotime($Subscription->date)); 
                        $get_amount= PBFunc::AmountInWords($Subscription->amount);
                        @endphp
        
                        {{-- @include('PrintHeader.header') --}}
                        <div style="padding-top:10px;font-size:17px;">
                            <div class="ShowReceiptHead" ><h5>{{__('lng.AnnualHouseSubscriptionReciept')}}</h5></div>
                            <div class="ShowReceiptAmount" ><h2><i class="fas fa-rupee-sign"></i>@currency($Subscription->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="ShowReceiptdetailHeader">{{__('lng.SubscriptionHouseDetails')}} </div>
                                <div class="ShowDetailHeader">{{__('lng.Invoiceno')}} .</div>
                                <div class="ShowDetailCondent">#{{$Subscription->invoicenumber}}</div>
                                <div class="ShowDetailHeader">{{__('lng.HouseNo')}}</div>
                                <div class="ShowDetailCondent">{{$Subscription->house->registernumber ?? ''}}</div>
                                <div class="ShowDetailHeader"> {{__('lng.Author')}}</div>
                                <div class="ShowDetailCondent">
                                    @foreach($Subscription->house->members as $Member)
                                    @if($Member->member_relation_id == App\Extra\General\DBFixedValues::AUTHORITY)
                                        {{$Member->name}} 
                                        @php 
                                        $AuthorName = $Member->name;
                                        $AuthorContact =$Member->contact;
                                        @endphp
                                    @endif
                                    @endforeach   
                                </div>
                                <div class="ShowDetailHeader"> {{__('lng.HouseName')}}</div>
                                <div class="ShowDetailCondent">
                                    @foreach($Subscription->house->members as $Member)
                                    @if($Member->member_relation_id == App\Extra\General\DBFixedValues::AUTHORITY)
                                        {{$Subscription->house->name}} 
                                    @endif
                                    @endforeach   
                                </div>
                                <div class="ShowDetailHeader"> {{__('lng.Contact')}}</div>
                                <div class="ShowDetailCondent">
                                    @foreach($Subscription->house->members as $Member)
                                    @if($Member->member_relation_id == App\Extra\General\DBFixedValues::AUTHORITY)
                                        {{$Member->contact}} 
                                    @endif
                                    @endforeach   
                                </div>
                                <div class="ShowDetailHeader">{{__('lng.TotalAmountinwords')}} </div>
                                <div class="ShowDetailHeaderEnd">{{$get_amount}} Only</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 class="btn-part py-5"> 
                @if (!$CheckMember)
                <a href="{{route('AnnualHouseSubscriptionPayment.index')}}" class="btn btn-success btn-icon-split">
                    <span class="icon text-white-50">
                        <i class="fas fa-check"></i>
                    </span>
                    <span class="text">{{__('lng.Done')}}</span>
                </a>
                @else
                    <form method="GET" action="{{route('QuickView')}}">
                        @csrf
                        <input type="hidden" name="select_keyword" id="SelectKeyword" value="H">
                        <input type="hidden" name="member_id" id="MemberId" value="{{$Subscription->house->registernumber}}">
                        <button class="btn btn-success btn-icon-split" type="submit">
                            <span class="icon text-white-50">
                                <i class="fas fa-check"></i>
                            </span>
                            <span class="text">{{__('lng.Done')}}</span>
                        </button>
                    </form>
                @endif

                <a  class="btn btn-primary btn-icon-split" download id="downloadImage">
                    <span class="icon text-white-50">
                        <i class="fas fa-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="fas fa-print"></i>
                    </span>
                    <span class="text">{{__('lng.Print')}}</span>
                </button>
            </div>
        </div>


           
        <div id="printableArea" style="height: 100%; display:none " >
                
            @php
            echo $ReceiptPrintForm->formate ;
            @endphp
        </div>

        {{-- ===============================================
                    END PRINT AREA
        =============================================== --}}


    </div>

    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script>
          ScreenShort();
      function ScreenShort(){
        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) {
        document.getElementById('printableArea').style.display='block';
                 var printContents = document.getElementById(divName).innerHTML;
                 var originalContents = document.body.innerHTML;
                
                 document.body.innerHTML = printContents;
                
                 window.print();
                
                 document.body.innerHTML = originalContents;
                //  location.reload();
            document.getElementById('printableArea').style.display = 'none';
                 
                }

                
    ChangeCertificateData();
  function ChangeCertificateData(){
    var DataTags=document.querySelectorAll('[data-value]');
    var GetAmount='{{ trim(preg_replace('/\s\s+/', ' ',PBFunc::AmountInWords($Subscription->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='{{$Subscription->invoicenumber}}';
            break;
            case 'Date':
            DataTags[i].innerHTML='{{$D}}  {{$M}}  {{$Y}}';
            break;
            case 'Author':
            DataTags[i].innerHTML='{{$AuthorName}}';
            break;
            case 'Contact':
            DataTags[i].innerHTML='{{$AuthorContact}}';
            break;
            case 'Amount':
            DataTags[i].innerHTML='@currency($Subscription->amount)';
            break;
            case 'HouseName':
            DataTags[i].innerHTML='{{$Subscription->house->name}}';
            break;
            case 'HouseNo':
            DataTags[i].innerHTML='{{$Subscription->house->registernumber}}';
            break;
            case 'VoucherNo':
            DataTags[i].innerHTML='{{$Subscription->vouchernumber}}';
            break;
            case 'AmountWords':
            DataTags[i].innerHTML=GetAmount;
            break;
            case 'Narration':
            DataTags[i].innerHTML='{{$Subscription->narration}}';
            break;
            case 'CurrentDate':
            DataTags[i].innerHTML='{{date('d-m-Y')}}';
            break;
          }
      }
    
  }

    </script>


@endsection