<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Payments</title>

    <style>
        .invoice-box {
            max-width: 800px;
            margin: auto;
            padding: 30px;
            border: 1px solid #eee;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            font-size: 12px;
            line-height: 24px;
            font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
            color: #555;
        }

        .invoice-box table {
            width: 100%;
            line-height: inherit;
            text-align: left;
        }

        .invoice-box table td {
            padding: 5px;
            vertical-align: top;
        }

        .invoice-box table tr td:nth-child(2) {
            text-align: left;
        }

        .invoice-box table tr.top table td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.top table td.title {
            font-size: 45px;
            line-height: 45px;
            color: #333;
        }

        .invoice-box table tr.information table td {
            padding-bottom: 40px;
        }

        .invoice-box table tr.heading td {
            background: #eee;
            border-bottom: 1px solid #ddd;
            font-weight: bold;
        }

        .invoice-box table tr.details td {
            padding-bottom: 20px;
        }

        .invoice-box table tr.item td {
            border-bottom: 1px solid #eee;
        }

        .invoice-box table tr.item.last td {
            border-bottom: none;
        }

        .invoice-box table tr.total td:nth-child(2) {
            border-top: 2px solid #eee;
            font-weight: bold;
        }

        @media only screen and (max-width: 600px) {
            .invoice-box table tr.top table td {
                width: 100%;
                display: block;
                text-align: center;
            }

            .invoice-box table tr.information table td {
                width: 100%;
                display: block;
                text-align: center;
            }
        }

        /** RTL **/
        .invoice-box.rtl {
            direction: rtl;
            font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
        }

        .invoice-box.rtl table {
            text-align: left;
        }

        .invoice-box.rtl table tr td:nth-child(2) {
            text-align: left;
        }
    </style>

<script type="text/javascript">
		function exportTableToExcel(tableID, filename = '') {
			var downloadLink;
			var dataType = 'application/vnd.ms-excel';
			var tableSelect = document.getElementById(tableID);
			var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
			// Specify file name
			filename = filename ? filename + '.xls' : 'excel_data.xls';

			// Create download link element
			downloadLink = document.createElement("a");

			document.body.appendChild(downloadLink);

			if (navigator.msSaveOrOpenBlob) {
				var blob = new Blob(['\ufeff', tableHTML], {
					type: dataType
				});
				navigator.msSaveOrOpenBlob(blob, filename);
			} else {
				// Create a link to the file
				downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

				// Setting the file name
				downloadLink.download = filename;

				//triggering the function
				downloadLink.click();
			}
		}
	</script>
</head>

<body>
    <div class="invoice-box">
        <table cellpadding="0"  id="covers-report" cellspacing="0">
            <tr class="top">
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="title">
                                <img src="{{asset('admin/assets/img/icons/spot-illustrations/falcon.png')}}" style="width: 100%; max-width: 90px" />
                            </td>

                            <td>

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

            <tr class="information">
                <td colspan="2">
                    <table>
                        <tr>
                            <td>
                                MBBS<br />
                                P.O Box 477 Mbabane, Swaziland<br />
                                Email: info@mbbs.co.sz <br>
                                Contact Number: +268 2404 2888 / +268 2404 3011 <br>
                                Address: Siteshi Road Industrial Site
                            </td>

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

            <tr class="heading">
                <td>Payments list</td>
                <td><button onclick="exportTableToExcel('covers-report', 'covers_report')">Export to Excel</button></td>
            </tr>
            <tr class="details">
                <td>
                    <strong>Total payment collected: </strong> E {{$paymenttotal}} <br>
                    <strong>Period:</strong> {{$start}} to {{$end}}
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr class="heading">
                            <th>Payment ID</th>
                            <th>Member ID</th>
                            <th>Date</th>                          
                            <th>Amount</th>
                            <th>Payment Method</th>
                            <th>Received at</th>
                        </tr> @foreach ($payments as $payment)
                        <tr>
                            <td>{{$payment->id}}</td>
                            <td>{{$payment->member->national_id}}</td>
                            <td>{{$payment->payment_date}}</td>                          
                            <td>{{$payment->amount_paid}}</td>
                            <td>{{$payment->mode->name}}</td>
                            <td>{{$payment->created_at}}</td>
                        </tr>
                        @endforeach
                    </table>
            </tr>
        </table>
        <center>
            <p>Report generated by: {{$user->name}} {{$user->surname}}</p>
            <h3>Thank you!</h3>
        </center>
    </div>
</body>

</html>