<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Yetfix Limited</title>


</head>

<body>
    <div class="wrapper">
        <!-- Main content -->
        <section class="invoice">
            <!-- title row -->



            <div>
                <h3 class="page-header shopname">

                    {{ $company_info->name ?? '' }} <br>
                    {{ $company_info->address ?? '' }}

                </h3>
                <h4 style="text-align: right">Office Copy</h4>
            </div>

            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <div>
                <div>
                    <table>
                        <tr>
                            <th style="width:50%">Customer Info</th>
                            <td style="text-align: right; font-weight:bold">Invoice No:
                                {{ date('Y') }}{{ $total_due->id ?? '' }}</td>
                        </tr>
                    </table>
                </div>
            </div>



            <div>

                <address>
                    Name : {{ $cid->userid }}<br>
                    Mobile : {{ $customer_info->contact_no ?? '' }}<br>
                    Address: {{ $customer_info->flat_no ?? '' }},
                    {{ $customer_info->building_name ?? '' }},<br>
                    {{ $customer_info->road_no ?? '' }},
                    {{ $customer_info->road_name ?? '' }},
                    {{ $customer_info->block_sector ?? '' }},
                    {{ $customer_info->area ?? '' }}</p>
                </address>
            </div>
            <div>
                <table>
                    <tr>
                        <td style="text-align: right; font-weight:bold">Billing Date:
                            {{ $total_due->due_date ?? '' }}
                        </td>
                    </tr>
                </table>

            </div>
            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">


            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th style="text-align: right; width:300px;">Month</th>
                        <th style="text-align: right; width:300px">Amount</th>
                    </tr>

                </thead>


                <tbody>


                    <tr>
                        <td style="text-align: left"> Monthly Bill</td>
                        <td style="text-align: right">{{ date('F') }}</td>
                        <td style="text-align: right"> {{ $total_due->bill_amount ?? '' }} </td>

                    </tr>
                    <tr>
                        <td style="text-align: left"> Prevoius Due</td>
                        <td style="text-align: right">-</td>
                        <td style="text-align: right">
                            @if ($total_due->due_amount > 0)
                                {{ abs($total_due->bill_amount - $total_due->due_amount) }}
                            @else
                                {{ 0 }}
                            @endif
                        </td>

                    </tr>

                </tbody>
            </table>



            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">

            <table>
                <tr>
                    <th style="text-align: right;width:70%">Total Due: {{ $total_due->due_amount ?? '' }}</th>

                </tr>

            </table>
            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <div>
                <h4 class="footerInfo2" style="text-align: center">
                    {{ 'System Developed By YetFix Limited.' }}
                </h4>
            </div>




        </section>

    </div>

    <hr class="new2">


    <div class="wrapper">
        <!-- Main content -->
        <section class="invoice">
            <!-- title row -->


            <div>
                <h3 class="page-header shopname">

                    {{ $company_info->name ?? '' }} <br>
                    {{ $company_info->address ?? '' }}

                </h3>
                <h4 style="text-align: right">Customer Copy</h4>
            </div>

            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <div>
                <div>
                    <table>
                        <tr>
                            <th style="width:50%">Customer Info</th>
                            <td style="text-align: right; font-weight:bold">Invoice No:
                                {{ date('Y') }}{{ $total_due->id ?? '' }}</td>
                        </tr>
                    </table>
                </div>
            </div>



            <div>

                <address>
                    Name : {{ $cid->userid }}<br>
                    Mobile : {{ $customer_info->contact_no ?? '' }}<br>
                    Address: {{ $customer_info->flat_no ?? '' }},
                    {{ $customer_info->building_name ?? '' }},<br>
                    {{ $customer_info->road_no ?? '' }},
                    {{ $customer_info->road_name ?? '' }},
                    {{ $customer_info->block_sector ?? '' }},
                    {{ $customer_info->area ?? '' }}</p>
                </address>
            </div>
            <div>
                <table>
                    <tr>
                        <td style="text-align: right; font-weight:bold">Billing Date:
                            {{ $total_due->due_date ?? '' }}
                        </td>
                    </tr>
                </table>

            </div>
            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">


            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th style="text-align: right; width:300px;">Month</th>
                        <th style="text-align: right; width:300px">Amount</th>
                    </tr>

                </thead>


                <tbody>


                    <tr>
                        <td style="text-align: left"> Monthly Bill</td>
                        <td style="text-align: right">{{ date('F') }}</td>
                        <td style="text-align: right"> {{ $total_due->bill_amount ?? '' }} </td>

                    </tr>
                    <tr>
                        <td style="text-align: left"> Prevoius Due</td>
                        <td style="text-align: right">-</td>
                        <td style="text-align: right">
                            @if ($total_due->due_amount > 0)
                                {{ abs($total_due->bill_amount - $total_due->due_amount) }}
                            @else
                                {{ 0 }}
                            @endif
                        </td>

                    </tr>

                </tbody>
            </table>



            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">

            <table>
                <tr>
                    <th style="text-align: right;width:70%">Total Due: {{ $total_due->due_amount ?? '' }}</th>

                </tr>

            </table>
            <hr size="2" color="black" style="width:100%;text-align:left;margin-left:0">
            <div>
                <h4 class="footerInfo2" style="text-align: center">
                    {{ 'System Developed By YetFix Limited.' }}
                </h4>
            </div>




        </section>

    </div>

    <style>
        * {
            box-sizing: border-box;
        }

        /* Create three equal columns that floats next to each other */
        /* .column {
            float: right;
            width: 50%;
            padding: 10px;
            height: 25px;

        }

        */

        /* 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>


</body>

</html>
