<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;
    }

    .sendInvoice {
        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;
    }

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

    .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;
    }

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

    .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;
    }

    /* Create three equal columns that floats next to each other */
    /* .column {
            float: right;
            width: 50%;
            padding: 10px;
            height: 25px;
            /* Should be removed. Only for demonstration */
    /* } */

    /* Clear floats after the columns */
    .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>
    .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;
        margin-right: 2px;
    }

    @media print {

        html,
        body {}

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

        button {
            visibility: hidden;
        }

        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;
        }
    }
</style>

<div class="invoicewrapper">
    <!-- Main content -->
    <section class="invoice" style="position: relative">
        <button class="btn btn-danger btn-sm invoiceClose">X</button>
        <button data-id="{{ $customer_info->client_id }}" class="btn btn-danger btn-sm sendInvoice"><i
                class="fa fa-envelope"></i> Send</button>

        <button type="button" onclick="window.print()" class="btn btn-danger btn-sm printInvoice">Print
            <i class="fa fa-print"></i>
        </button>
        <table>
            <tr>
                <td>
                    <div style="margin-top:100px;">
                        <address>
                            Name : {{ $customer_info->clients_name }}<br>
                            Mobile : {{ $customer_info->contact_no ?? '' }}<br>
                            Username: <strong>{{ $cid->userid }}</strong><br>
                            CID: <strong>{{ $cid->id }}</strong> Password: <strong>{{ $cid->password }}</strong>
                            {{-- Address:
                            @if ($customer_info->flat_no)
                                {{ $customer_info->flat_no }},
                            @endif
                            @if ($customer_info->building_name)
                                {{ $customer_info->building_name }},<br>
                            @endif
                            @if ($customer_info->road_no)
                                {{ $customer_info->road_no }},<br>
                            @endif
                            @if ($customer_info->block_sector)
                                {{ $customer_info->block_sector }},<br>
                            @endif
                            @if ($customer_info->area)
                                {{ $customer_info->area }}
                            @endif --}}
                        </address>
                    </div>
                </td>
                <td class="tright">
                    <h3 class="page-header shopname" style="text-align:right;">
                        @if ($company_info->img_url)
                            <img src="{{ asset('storage/company/' . $company_info->img_url) }}" alt="logo"
                                width="200"><br>
                        @endif
                        {{ $company_info->name ?? '' }}
                    </h3>
                    <div class="address" style="text-align:right">{!! $company_info->address ?? '' !!}</div>
                    <h4 class="tright">Billing Date: {{ $bill->due_date ?? '' }}</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: {{ $bill->created_at->format('Ymd') }}-{{ $bill->id ?? '' }}</h2>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Description</th>
                    <th class="tright">Amount</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Monthly Bill</td>
                    <td>{{ $bill->package_name }}({{ $bill->package_rate }})</td>
                    <td class="tright">{{ $bill->bill_amount }}</td>
                </tr>
                <tr style="border-top:1px solid #999">
                    <td colspan="3"></td>
                </tr>
                <tr>
                    <td colspan="2" class="tright">Sub Total</td>
                    <td class="tright">{{ $bill->bill_amount }}</td>
                </tr>
                <tr>
                    <td colspan="2" class="tright">Previous Due</td>
                    <td style="text-align:right">
                        {{ number_format($previous_due, 2) }}
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td class="tright btop2">
                        Total Amount
                    </td>
                    <td class="tright btop2">
                        {{ number_format($bill->bill_amount + $previous_due, 2) }}
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td class="tright">Total Paid</td>
                    <td class="tright">{{ number_format($total_paid + $total_discount, 2) }}</td>
                </tr>

                @if ($balance_due < 0)
                    <tr>
                        <td></td>
                        <td class="tright btop2 bold">Advanced Balance</td>
                        <td class="tright btop2 bold">{{ abs($balance_due) }}</td>
                    </tr>
                @else
                    <tr>
                        <td></td>
                        <td class="tright btop2 bold">Balance Due</td>
                        <td class="tright btop2 bold">{{ $balance_due }}</td>
                    </tr>
                @endif

            </tbody>
        </table>

        <table class="paymnettable mt15">
            <tr>
                <th>Date</th>
                <th>Payment Method</th>
                <th>Description</th>
                <th class="tright">Amount</th>
            </tr>
            @foreach ($payments as $payment)
                <tr>
                    <td>{{ $payment->created_at->format('d-m-Y') }}</td>
                    <td>{{ $payment->payment_method ? $payment->payment_method : 'Cash' }}</td>
                    <td>{{ $payment->description }}</td>
                    <td class="tright">{{ $payment->paid_amount + $payment->discount_amount }}</td>
                </tr>
            @endforeach

            <tr>
                <td colspan="3" class="btop2 tright">Total</td>
                <td class="btop2 tright">{{ number_format($total_paid + $total_discount, 2) }}</td>
            </tr>
        </table>

        @if ($company_info->invoice_terms)
            <div style="margin-top:50px;"><strong>Terms:</strong><br>
                {!! $company_info->invoice_terms !!} </div>
        @endif
        <div>
            <h6 class="footerInfo2" style="text-align: center;margin-top:25px;font-weight:400">
                {{ 'System Developed By YetFix Limited.' }}
            </h6>
        </div>
    </section>

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