@extends('layouts.adminapp')

@section('content')
    <style>
        .maindiv {
            padding: 0 250px;
        }


        @media print {

            .maindiv,
            footer,
            .navbar-nav {
                display: none;
            }

            .printableArea {
                display: block;
            }
        }
    </style>




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


    <div style="" id="maindiv" class="maindiv">
        <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($Expense->date));
                                $M = date('F', strtotime($Expense->date));
                                $D = date('d', strtotime($Expense->date));
                                $get_amount = PBFunc::AmountInWords($Expense->amount);
                            @endphp
                            {{-- @include('PrintHeader.header') --}}
                            <div style="padding-top:10px;font-size:17px;">
                                <div class="ShowReceiptHead">
                                    <h5>{{ __('lng.PaymentVoucherReceipt') }}</h5>
                                </div>
                                <div class="ShowReceiptAmount">
                                    <h2><i class="fas fa-rupee-sign"></i>@currency($Expense->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.PaymentVoucherDetails') }} </div>
                                    <div class="ShowDetailHeader">{{ __('lng.Invoiceno') }} .</div>
                                    <div class="ShowDetailCondent">#{{ $Expense->invoicenumber }}</div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Name') }}</div>
                                    <div class="ShowDetailCondent"> {{ $Expense->name }} </div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Expence') }}</div>
                                    <div class="ShowDetailCondent">{{ $Expense->expenseledger->title }}</div>
                                    <div class="ShowDetailHeader">{{ __('lng.TotalAmountinwords') }} </div>
                                    <div class="ShowDetailCondent">{{ $get_amount }} Only</div>
                                    <div class="ShowDetailHeader"> {{ __('lng.Head') }}</div>
                                    <div class="ShowDetailCondent">{{ $Expense->payledger->title }}</div>
                                    @if ($Expense->narration)
                                        <div class="ShowDetailHeader"> {{ __('lng.Narration') }}</div>
                                    @endif
                                    <div class="ShowDetailHeaderEnd">{{ $Expense->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">
                <a @if ($ProgramID) href="{{ route('Program.show', $ProgramID) }}" 
            @else
            href="{{ route('PaymentVoucher.index', $VoucherType->title) }}" @endif
                    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
        =============================================== --}}





        <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) {
                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';

            }


            ChangeCertificateData();

            function ChangeCertificateData() {
                var DataTags = document.querySelectorAll('[data-value]');
                var GetAmount = '{{ trim(preg_replace('/\s\s+/', ' ', PBFunc::AmountInWords($Expense->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 = '{{ $Expense->invoicenumber }}';
                            break;
                        case 'Date':
                            DataTags[i].innerHTML = '{{ $D }}  {{ $M }}  {{ $Y }}';
                            break;
                        case 'Name':
                            DataTags[i].innerHTML = '{{ $Expense->name }}';
                            break;
                        case 'Amount':
                            DataTags[i].innerHTML = '@currency($Expense->amount)';
                            break;
                        case 'ExpenseLedger':
                            DataTags[i].innerHTML = '{{ $Expense->expenseledger->title ?? '' }}';
                            break;
                        case 'PayLedger':
                            DataTags[i].innerHTML = '{{ $Expense->payledger->title ?? '' }}';
                            break;
                        case 'VoucherNo':
                            DataTags[i].innerHTML = '{{ $Expense->vouchernumber }}';
                            break;
                        case 'AmountWords':
                            DataTags[i].innerHTML = GetAmount;
                            break;
                        case 'Narration':
                            DataTags[i].innerHTML = '{{ $Expense->narration }}';
                            break;
                        case 'CurrentDate':
                            DataTags[i].innerHTML = '{{ date('d-m-Y') }}';
                            break;
                    }
                }

            }
        </script>
    @endsection