@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>
                <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="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.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->member->name ?? '' }}
                                        @endif
                                    </div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Phone') }}</div>
                                    <div class="ShowDetailCondent">
                                        @if ($Donation->isGuest)
                                            {{ $Donation->phone }}@else{{ $Donation->member->contact ?? '' }}
                                        @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 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="fas fa-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="fas fa-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="fas fa-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="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>

    

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

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


        <script>
            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();
                // location.reload();

                document.body.innerHTML = originalContents;
                document.getElementById('printableArea').style.display = 'none';

            }
        </script>








        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
        <script>
            ScreenShort();

            function ScreenShort() {
                // document.getElementById("InsertScreenshort").innerHTML='';
                html2canvas(document.querySelector("#sheare_div")).then(canvas => {
                    var image = canvas.toDataURL("image/png");
                    // var pHtml = "<img src="+image+"  width='480' height='500' id='Receiptimage'/>";
                    // $("#InsertScreenshort").append(pHtml);

                    var downloadImage = document.getElementById('downloadImage');
                    downloadImage.setAttribute('href', image);

                    // var WhatsappShare=document.getElementById('WhatsappShare');
                    // WhatsappShare.setAttribute('href', 'whatsapp://send?text='+image);
                    // WhatsappShare.setAttribute('href', 'whatsapp://send?text='+encodeURIComponent(''));
                });
            }


            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 }}';
                        case 'AreaWard':
                            DataTags[i].innerHTML = '{{ $Donation->member->house->area ?? $Donation->area_ward }}';
                            break;
                        case 'RelativeName':
                            DataTags[i].innerHTML =
                                '{{ $Donation->member->relation_type ?? '' }} {{ $Donation->member->relation ?? $Donation->relative_name }}';
                            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>

    @endsection