<div>
    <style>
        p {
            margin: 0;
        }

        .btop2 {
            border-top: 2px solid #000;
        }

        .btop1 {
            border-top: 1px solid #000;
        }

        .tright {
            text-align: right;
        }

        .mt15 {
            margin-top: 15px;
        }

        .bold {
            font-weight: bolder;
        }

        .address span,
        .address p,
        .address div,
        .address li,
        .address u,
        .address b {
            font-weight: normal !important;
        }

        .printInvoice {
            background: green;
            border: 1px solid #000;
            box-shadow: 0 0 1px 1px #ddd;
            padding: 5px 15px;
            color: #fff;
            border-radius: 2px;
            cursor: pointer;
            float: right;
        }

        .invoice {
            width: 750px;
            height: 1000px;
            padding: 25px;
            margin: 0 auto;
            /* background: #fff; */
            font-family: 'Roboto', sans-serif;
            position: relative;
            /* border: 1px solid #ddd; */
            margin-bottom: 100px;
            margin-top: 100px;
        }

        .paymnettable {
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #ddd;
            padding: 2px;
        }

        .paymnettable tr,
        .paymnettable td,
        .paymnettable th {
            border: 1px solid #ddd;
            padding: 5px;
        }

        .paymnettable th {
            background: #ddd;
        }

        .paid {
            font-size: 50px;
            position: absolute;
            opacity: .5;
            font-weight: bold;
            /* transform: rotate(-45deg); */
            top: 20%;
            left: 50%;
            width: 200px;
            margin-left: -100px;
            color: green;
            border-bottom: 1px solid green;
            text-align: center;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        th {
            text-align: left;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        .shopname {
            text-align: center;
        }

        .footerInfo {
            text-align: center;
        }

        .footerInfo2 {
            text-align: left;
        }

        hr.new2 {
            border-top: 1px dashed red;
        }
    </style>


    <style>
        /* @page {
            size: 80 mm;
        } */
        @media print {

            html,
            body {
                /* width: 100%; */
                /* height: 100px; */
            }

            thead th {
                font-size: 75px !important;
                border: 5px solid #ddd;
            }

            button {
                visibility: hidden;
            }

            table {
                /* width: ; */
            }


            table,
            tr,
            thead th,
            td {

                padding: 5px !important;
                border: none;
                border-collapse: collapse;

            }

            .center {
                text-align: center;
                vertical-align: middle;
            }

            .bigfont {
                font-size: 150px;
            }

            .midiumfont {
                font-size: 50px;
            }

            .smallfont {
                font-size: 40px;
            }

            .verysmallfont {
                font-size: 30px;
            }

            .bold {
                font-weight: bold;
            }

            hr {
                display: block;
                height: 5px;
                background: transparent;
                width: 100%;
                border: none;
                border-top: solid 1px #aaa;
            }

            /* design change using bg image*/
            .invoicewrapper {
                width: 210mm;
                /* A4 width */
                height: 297mm;
                /* A4 height */
                margin: auto;
                /* padding: 2px; */
                box-sizing: border-box;
            }

            .invoice {
                background-image: url('{{ asset('invoice/invoicePad.jpg') }}') !important;
                background-size: cover !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                -webkit-print-color-adjust: exact;
                width: 100vw;
                height: 100vh !important;
                margin: 0;
                /* padding: 20px; */
                box-sizing: border-box;
            }

            .billInvoiceClose,
            .printInvoice {
                display: none !important;
            }

            @page {
                size: A4;
                margin: 0;
            }

            body {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
        }
    </style>



    <section class="invoice" style=" " onload="window.print()" onfocus="window.close()">
        <div class="invoicewrapper">
            <button class="btn btn-danger btn-sm billInvoiceClose">X</button>

            <button type="button" onclick="window.print()" class="btn btn-danger btn-sm printInvoice">Print
                <i class="fa fa-print"></i>
            </button>

            <table style="margin-top: 15%;">
                <tr>
                    <td>
                        <div style="margin-top:100px;">
                            <address>
                                {{ $company_info->name }}<br>
                                Mobile: <strong>{{ $company_info->mobile }}</strong><br>
                                Address: {{ $company_info->address }}<br>
                            </address>
                        </div>
                    </td>
                    <td class="tright">
                        <h3 class="page-header shopname" style="text-align:right;">
                            {{-- <img src="{{ asset('billingFix.jpeg') }}" alt="logo" width="200"><br> --}}
                        </h3>
                        {{-- <div class="address" style="text-align:right">2/H/1 Golden street,
                            Ring road, Shyamoli, Dhaka-1207</div> --}}
                        <h4 class="tright">Date: {{ $date->format('d-m-Y') }}</h4>
                    </td>
                </tr>
            </table>

            <div></div>

            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <div>
                <div>
                    <table>
                        <tr>
                            <td colspan="2">
                                <h2>Invoice No: {{ $inv_id }}</h2>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <table>
                <thead>
                    <tr>
                        <td>Invoice Type</td>
                        <td>Expire Date</td>
                        <td class="tright">Amount</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $type }}</td>
                        <td>{{ $exp_date->format('d-m-Y') }}</td>
                        <td class="tright">{{ $amount }}</td>
                    </tr>
                    <tr style="border-top:1px solid #999">
                        <td colspan="3"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="tright">
                            Total Bill
                        </td>
                        <td class="tright">
                            {{ number_format($amount, 2) }}
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="tright">Total Paid</td>
                        <td class="tright">{{ number_format($amount, 2) }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="tright btop2 bold">Due</td>
                        <td class="tright btop2 bold">{{ number_format($amount - $amount, 2) }}</td>
                    </tr>
                </tbody>
            </table>

            <table class="paymnettable mt15">
                <tr>
                    <th>Payment Date</th>
                    <th>Payment Method</th>
                    <th>Transaction Id</th>
                    <th class="tright">Amount</th>
                </tr>
                <tr>
                    <td>{{ $date->format('d-m-Y') }}</td>
                    <td>{{ 'Bkash' }}</td>
                    <td>{{ $txnID }}</td>
                    <td class="tright">{{ $amount }}</td>
                </tr>
                <tr>
                    <td colspan="3" class="btop2 tright">Total</td>
                    <td class="btop2 tright">{{ number_format($amount, 2) }}</td>
                </tr>
            </table>

            <div>
                <h6 class="footerInfo2" style="text-align: center;margin-top:25px;font-weight:400">
                    {{-- {{ 'System Developed By YetFix Limited.' }} --}}
                </h6>
            </div>
        </div>
    </section>


    <script type="text/javascript">
        window.onload = function() {
            window.print();
        }
        window.onfocus = function() {
            window.close();
        }
    </script>
</div>
