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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Plan Purchased Receipt</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin-top: 20px;
            background: #eee;
        }

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

        .invoice {
            background: #fff;
            padding: 20px
        }

        .invoice-company {
            font-size: 20px
        }

        .invoice-header {
            margin: 0 -20px;
            background: #f0f3f4;
            padding: 20px
        }

        .invoice-date,
        .invoice-from,
        .invoice-to {
            display: table-cell;
            width: 1%
        }

        .invoice-from,
        .invoice-to {
            padding-right: 20px
        }

        .invoice-date .date,
        .invoice-from strong,
        .invoice-to strong {
            font-size: 16px;
            font-weight: 600
        }

        .invoice-date {
            text-align: right;
            padding-left: 20px
        }

        .invoice-price {
            background: #f0f3f4;
            display: table;
            width: 100%
        }

        .invoice-price .invoice-price-left,
        .invoice-price .invoice-price-right {
            display: table-cell;
            padding: 20px;
            font-size: 20px;
            font-weight: 600;
            width: 75%;
            position: relative;
            vertical-align: middle
        }

        .invoice-price .invoice-price-left .sub-price {
            display: table-cell;
            vertical-align: middle;
            padding: 0 20px
        }

        .invoice-price small {
            font-size: 12px;
            font-weight: 400;
            display: block
        }

        .invoice-price .invoice-price-row {
            display: table;
            float: left
        }

        .invoice-price .invoice-price-right {
            width: 25%;
            background: #2d353c;
            color: #fff;
            font-size: 28px;
            text-align: right;
            vertical-align: bottom;
            font-weight: 300
        }

        .invoice-price .invoice-price-right small {
            display: block;
            opacity: .6;
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 12px
        }

        .invoice-footer {
            border-top: 1px solid #ddd;
            padding-top: 10px;
            font-size: 10px
        }

        .invoice-note {
            color: #999;
            margin-top: 80px;
            font-size: 85%
        }

        .invoice>div:not(.invoice-footer) {
            margin-bottom: 20px
        }

        .btn.btn-white,
        .btn.btn-white.disabled,
        .btn.btn-white.disabled:focus,
        .btn.btn-white.disabled:hover,
        .btn.btn-white[disabled],
        .btn.btn-white[disabled]:focus,
        .btn.btn-white[disabled]:hover {
            color: #2d353c;
            background: #fff;
            border-color: #d9dfe3;
        }
    </style>

    <style>
        @media print {

            /* Hide specific elements from the web page that shouldn't be printed */
            header,
            footer,
            nav,
            .no-print {
                display: none !important;
            }

            /* Style the body text for better readability */
            body {
                font-size: 12pt;
                /* You can adjust this size if needed */
                line-height: 1.6;
                color: #000;
            }

            /* Prevent page breaks inside elements that shouldn't be split across pages */
            .no-break {
                page-break-inside: avoid;
            }

            /* Ensure page breaks occur only where necessary */
            .page-break {
                page-break-before: always;
            }

            @page {
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    </style>


</head>

<body style="width: 800px; margin: 0 auto;">

    <div class="container">
        <div class="">
            <div class="invoice">
                <img src="{{ getImage(getFilePath('logoIcon') . '/logo.png') }}" alt="logo" width="250"
                    height="80">
                <!-- begin invoice-company -->
                <div class="invoice-company text-inverse f-w-600">
                    <span class="pull-right hidden-print">

                        <a href="javascript:;" onclick="window.print()" class="btn btn-sm btn-white m-b-10 p-l-5"><i
                                class="fa fa-print t-plus-1 fa-fw fa-lg"></i> Print</a>
                    </span>
                </div>

                <div class="invoice-header">

                    <div class="invoice-to">
                        <address class="m-t-5 m-b-5">
                            <strong class="text-inverse">{{ $user->firstname }} {{ $user->lastname }}</strong><br>
                            {{ $user->address->city }}, {{ $user->address->state }}, {{ $user->address->zip }}<br>
                            {{ $user->address->country }}<br>
                            + {{ $user->mobile }}<br>
                            {{ $user->email }}<br>
                        </address>
                    </div>
                    <div class="invoice-date">
                        <small>Invoice</small>
                        <div class="date text-inverse m-t-5">{{ $transection->created_at->format('d M, Y') }}</div>
                        <div class="invoice-detail">
                            {{ $transection->trx }}<br>
                        </div>
                    </div>
                </div>
                <!-- end invoice-header -->
                <!-- begin invoice-content -->
                <div class="invoice-content">
                    <!-- begin table-responsive -->
                    <div class="table-responsive">
                        <table class="table table-invoice " style="margin-bottom: 20px">
                            <thead>
                                <tr>
                                    <th style="width: 30%; text-align: left;">Name Of Product</th>
                                    <th class="text-center" style="width: 20%">Price</th>
                                    <th class="text-center" style="width: 35%">Discount</th>
                                    <th class="text-center" style="width: 20%">Discounted Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $discount = ($plan->price * $plan->discount) / 100;
                                @endphp
                                <tr>
                                    <td>
                                        <span class="f-w-600">{{ $plan->name }}</span>
                                    </td>
                                    <td class="text-center">INR {{ number_format($plan->price, 2) }}</td>
                                    <td class="text-center"> <span>INR {{ number_format($discount, 2) }}</span> <br>
                                        <span>({{ number_format($plan->discount, 2) }} %)</span></td>
                                    <td class="text-center">INR {{ number_format($plan->discounted_plan_price, 2) }}
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <div class="invoice-price ">
                        <div class="invoice-price-right">
                            <small>TOTAL</small> <span class="f-w-600"> INR {{ $plan->discounted_plan_price }}</span>
                        </div>
                    </div>

                </div>
                <div class="invoice-note">
                    <address class="m-t-5 m-b-5">
                        <strong style="font-size: 18px">Company Address</strong><br>
                        <strong class="text-inverse">{{ $general->site_name }}</strong><br>
                        {{ $general->street_address }}
                        {{ $general->city }}<br>
                        {{ $general->state }}<br>
                        {{ $general->pin_code }}<br>
                        {{ $general->country }}<br>
                        + {{ $general->number }}<br>
                        {{ $general->email }}<br>
                    </address>

                </div>
                <!-- end invoice-note -->
                <!-- begin invoice-footer -->
                <div class="invoice-footer">
                    <p class="text-center m-b-5 f-w-600">
                        THANK YOU FOR YOUR PURCHASE
                    </p>

                </div>
                <!-- end invoice-footer -->
            </div>
        </div>
    </div>

</body>

</html>
