@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.AnnualMemberSubscriptionPaymentReciept') }}</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.SubscriptionMemberDetails') }} </div>
                                    <div class="ShowDetailHeader">{{ __('lng.Invoiceno') }} .</div>
                                    <div class="ShowDetailCondent">#{{ $Subscription->invoicenumber }}</div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Member') }}</div>
                                    <div class="ShowDetailCondent">{{ $Subscription->member->name ?? '' }}</div>
                                    <div class="ShowDetailHeader">{{ __('lng.HouseNo') }}</div>
                                    <div class="ShowDetailCondent">{{ $Subscription->member->house->registernumber ?? '' }}
                                    </div>
                                    <div class="ShowDetailHeader"> {{ __('lng.HouseName') }}</div>
                                    <div class="ShowDetailCondent">{{ $Subscription->member->house->name ?? '' }}</div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Contact') }}</div>
                                    <div class="ShowDetailCondent">{{ $Subscription->member->contact ?? '' }}</div>
                                    <div class="ShowDetailCondent"></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">
                <a href="{{ route('AnnualMemberSubscriptionPayment.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>

                <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;
            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 'WaqfNumber':
                        DataTags[i].innerHTML = '{{ $Company->waqfno }}';
                    case 'InvoiceNo':
                        DataTags[i].innerHTML = '{{ $Subscription->invoicenumber }}';
                        break;
                    case 'Date':
                        DataTags[i].innerHTML = '{{ $D }}  {{ $M }}  {{ $Y }}';
                        break;
                    case 'Name':
                        DataTags[i].innerHTML = '{{ $Subscription->member->name ?? '' }}';
                        break;
                    case 'Contact':
                        DataTags[i].innerHTML = '{{ $Subscription->member->contact ?? '' }}';
                        break;
                    case 'Amount':
                        DataTags[i].innerHTML = '@currency($Subscription->amount)';
                        break;
                    case 'HouseName':
                        DataTags[i].innerHTML = '{{ $Subscription->member->house->name ?? '' }}';
                        break;
                    case 'HouseNo':
                        DataTags[i].innerHTML = '{{ $Subscription->member->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