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

        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,
        .address a {
            font-weight: normal !important;
        }

        .wrapper {
            width: 750px;
            height: 1000px;
            padding: 25px;
            margin: 0 auto;
            background: #fff;
            font-family: 'Roboto', sans-serif;
            position: relative;
        }

        .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>
</head>

<body>
    <div class="wrapper">
        <!-- Main content -->
        <section class="invoice" style="position: relative">

            @if ($balance_due > 0)
                <div class="notpaid"
                    style="font-size: 50px;
                position: absolute;
                opacity: .5;
                font-weight: bold;
                /* transform: rotate(-45deg); */
                top: 20%;
                left: 50%;
                width: 300px;
                margin-left: -100px;
                color: red;
                border-bottom: 1px solid red;
                text-align: center;">
                    Not Paid</div>
            @else
                <div class="paid"
                    style="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;">
                    Paid</div>
            @endif
            <table>
                <tr>
                    <td>
                        <div style="margin-top:100px;">
                            <address>
                                Name : {{ $customer_info->clients_name }}<br>
                                Mobile : {{ $customer_info->contact_no ?? '' }}<br>
                                Username: <strong>{{ $client->userid }}</strong> <br>
                                Password: <strong>{{ $client->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="100"><br>
                            @endif

                            {{ $company_info->name ?? '' }}

                        </h3>
                        <div class="address" style="text-align:right;font-weight:normal!important;">{!! $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, 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 }}</td>
                    </tr>
                @endforeach

                <tr>
                    <td colspan="3" class="btop2 tright">Total</td>
                    <td class="btop2 tright">{{ number_format($total_paid, 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>






</body>

</html>
