@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;">
                        @php
                            $Y = date('Y', strtotime($SalaryPay->date));
                            $M = date('F', strtotime($SalaryPay->date));
                            $D = date('d', strtotime($SalaryPay->date));
                            $get_amount = PBFunc::AmountInWords($SalaryPay->amount);
                        @endphp

                        {{-- @include('PrintHeader.header') --}}
                        <div style="padding-top:10px;font-size:17px;">
                            <div class="ShowReceiptHead">
                                <h5>{{ __('lng.SalaryReciept') }}</h5>
                            </div>
                            <div class="ShowReceiptAmount">
                                <h2><i class="fas fa-rupee-sign"></i>@currency($SalaryPay->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.SalaryPaymentDetails') }} </div>
                                <div class="ShowDetailHeader">{{ __('lng.Invoiceno') }} .</div>
                                <div class="ShowDetailCondent">#{{ $SalaryPay->invoicenumber }}</div>
                                <div class="ShowDetailHeader"> {{ __('lng.Name') }}</div>
                                <div class="ShowDetailCondent"> {{ $SalaryPay->employee->name }} </div>
                                <div class="ShowDetailHeader"> {{ __('lng.Phone') }}</div>
                                <div class="ShowDetailCondent"> {{ $SalaryPay->employee->phone }} </div>
                                <div class="ShowDetailHeader"> {{ __('lng.HouseName') }}</div>
                                <div class="ShowDetailCondent"> {{ $SalaryPay->employee->house }} </div>
                                <div class="ShowDetailHeader"> {{ __('lng.Designation') }}</div>
                                <div class="ShowDetailCondent"> {{ $SalaryPay->employee->designation->title }} </div>
                                <div class="ShowDetailHeader"> {{ __('lng.TotalAmountinwords') }}</div>
                                <div class="ShowDetailHeaderEnd">{{ $get_amount }} Only</div>

                            </div>
                        </div>
                        @include('PrintHeader.CompanyDetails2')
                    </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('PaySalary', $SalaryPay->employee_id) }}" 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>
            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($SalaryPay->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 = '{{ $SalaryPay->invoicenumber }}';
                            break;
                        case 'Date':
                            DataTags[i].innerHTML = '{{ $D }}  {{ $M }}  {{ $Y }}';
                            break;
                        case 'Name':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->name ?? '' }}';
                            break;
                        case 'Contact':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->phone ?? $SalaryPay->employee->mobile }}';
                            break;
                        case 'DateOfBirth':
                            DataTags[i].innerHTML = '{{ date('d-m-Y', strtotime($SalaryPay->employee->dob)) }}';
                            break;
                        case 'HouseName':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->house }}';
                            break;
                        case 'Genter':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->gender ?? '' }}';
                            break;
                        case 'Designation':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->designation->title ?? '' }}';
                            break;
                        case 'SalaryPackage':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->salarypackage->title ?? '' }}';
                            break;
                        case 'BloodGroup':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->blood_group ?? '' }}';
                            break;
                        case 'Place':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->place ?? '' }}';
                            break;
                        case 'Pin':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->pin ?? '' }}';
                            break;
                        case 'Post':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->post ?? '' }}';
                            break;
                        case 'City':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->city ?? '' }}';
                            break;
                        case 'District':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->district ?? '' }}';
                            break;
                        case 'State':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->state ?? '' }}';
                            break;
                        case 'Amount':
                            DataTags[i].innerHTML = '@currency($SalaryPay->amount)';
                            break;
                        case 'Education':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->qualification ?? '' }}';
                            break;
                        case 'Email':
                            DataTags[i].innerHTML = '{{ $SalaryPay->employee->email ?? '' }}';
                            break;
                        case 'VoucherNo':
                            DataTags[i].innerHTML = '{{ $SalaryPay->vouchernumber }}';
                            break;
                        case 'AmountWords':
                            DataTags[i].innerHTML = GetAmount;
                            break;
                        case 'Narration':
                            DataTags[i].innerHTML = '{{ $SalaryPay->narration }}';
                            break;
                        case 'CurrentDate':
                            DataTags[i].innerHTML = '{{ date('d-m-Y') }}';
                            break;
                    }
                }

            }
        </script>
    @endsection