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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $company_info->name ?? '' }}</title>
    <style>
        * {
            box-sizing: border-box;
        }

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

        /* Clear floats after the columns */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

</head>

<body>

    <div class="wrapper">
        <!-- Main content -->

        <section class="invoice">
            <!-- title row -->
            @foreach ($list as $r)
                <div>
                    <h4 class="page-header shopname">

                        {{ $company_info->name ?? '' }},
                        {{ $company_info->address ?? '' }}
                    </h4>


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

                <div>

                    <table>

                        <tr>

                            <td>
                                <table>
                                    <tr>
                                        <td style="font-weight:bold;">
                                            
                                            Office Copy
                                        </td>
                                        <td>
                                           Customer
                                        </td>
                                        <td style="text-align: right">
                                            Info
                                        </td>


                                    </tr>

                                    <tr>
                                        <td style="width:70%;">
                                            Invoice No: {{ date('Y') }}{{ $r->invoice_id ?? '' }}<br>
                                            Name : {{ $r->userid }} <br>
                                            Mobile : {{ $r->contact_no ?? '' }}<br>

                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Monthly Bill: {{ $r->billamount ?? '' }} </td>
                                    </tr>
                                    <tr>
                                        <td>Prevoius Due:

                                            @if ($r->due_amount > 0)
                                                {{ abs($r->billamount - $r->due_amount) }}
                                            @else
                                                {{ 0 }}
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>Total Due: {{ $r->due_amount ?? '' }}<br><br>
                                            Signature .......</td>

                                    </tr>
                                </table>
                            </td>

                            <div class="v1"></div>
                            <td>
                                <table>
                                    <tr>
                                        <td style="font-weight:bold;">Customer Info</td>
                                        <td>Invoice No:</td>
                                        <td style="text-align: right; font-weight:bold;">
                                            {{ date('Y') }}{{ $r->invoice_id ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <td style="width:70%;">Name : {{ $r->userid }} <br>
                                            Mobile : {{ $r->contact_no ?? '' }}</td>
                                    </tr>
                                    <tr>

                                        <td style="text-align: right;font-weight:bold;">Billing Date:</td>
                                        <td style="text-align: right;font-weight:bold;"> {{ $r->billdate ?? '' }}
                                        </td>
                                    </tr>
                                    <tr>
                                    <tr>
                                        <td>Description</td>
                                        <td>Month</td>
                                        <td>Amount</td>
                                    </tr>
                                    <tr>
                                        <td>Monthly Bill</td>
                                        <td>{{ date('M') }}</td>
                                        <td>{{ $r->billamount ?? '' }}</td>
                                    </tr>
                                    <tr>
                                        <td>Prevoius Due</td>
                                        <td>-</td>
                                        <td>
                                            @if ($r->due_amount > 0)
                                                {{ abs($r->billamount - $r->due_amount) }}
                                            @else
                                                {{ 0 }}
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>Total Due: </td>
                                        <td>{{ $r->due_amount ?? '' }}</td>
                                    </tr>
                                </table>
                            </td>

                        </tr>

                    </table>





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

                </div>
            @endforeach
        </section>






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

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

            .vl {
                border-left: 6px solid green;
                height: 500px;
                position: absolute;
                left: 50%;
                margin-left: -3px;
                top: 0;
            }
        </style>


</body>

</html>
