@extends('front.layouts.main')
@section('header_style')

@section('content')
<!-- Content Wrapper. Contains page content -->


<div class="no-print">
    <div class="col-12 text-right">


        <a href="javascript:void" onclick="printDiv('invoice_body')" rel="noopener" class="btn btn-success btn-sm">
            <i class="fas fa-print"></i>
            Print
        </a>
    </div>
</div>


<div class="col" id="invoice_body">

    <div class="page">
        <div class=" ">
            <div class="row">
                <div class="col-8">
                    <img src="{{ asset('importerhub.png')}}" class="img-fluid" style="width: 50%" alt="">
                    <div>
                        <i>All types of Cosmetics Importer,Seller</i>
                    </div>
                    <div>
                        H#25, R#12, Nikunja-12,khilkhet, Dhaka-1229
                    </div>
                    <div>
                        Phone: 01831 88 99 79
                    </div>



                </div>

            </div>


        </div>
        <br>

        <br>

        <br>
        <div class="row" style="margin-left:0px">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Investor Name</th>
                   
                        <th scope="col">Mobile</th>
                        <th scope="col">Paid</th>
                        <th scope="col">Month</th>
                        <th scope="col">Paid Date </th>
                        <th scope="col">Short Note </th>


                    </tr>
                </thead>
                                @foreach($paymentList as $key => $listing)


                                <tbody>
                    <tr>
                        <th scope="row">{{$key + 1}}</th>
                        <td>{{$investorDetails->name}}</td>
                      
                        <td>{{$investorDetails->phone}}</td>
                        <td><i class="mdi mdi-currency-bdt"></i>{{$listing->paid}}</td>
                        <td>{{$month}}</td>
                        <td>{{$listing->date}}</td>
                        <td>{{$listing->note}}</td>

                    </tr>
                                    </tbody>
                @endforeach

                <tr>
                    <td colspan="3">Total</td>
                    <td><i class="mdi mdi-currency-bdt"></i>0</td>
                </tr>


            </table>
        </div>


        <br>
          

        <br>
        <p style="text-align: center;    font-size: 13px;">This POS Software Developed By: Ruby Pos</p>
       
    </div>
</div>
<!-- /.content-wrapper -->


@endsection





<script>
function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;

    document.body.innerHTML = printContents;

    window.print();

    document.body.innerHTML = originalContents;
}
</script>
<style>
.table-bordered td,
.table-bordered th {
    border: 1px solid #0e0f10 !important;
}

.table-bordered {
    border: 1px solid #0e0f10 !important;

}

.terms_condition li {
    font-style: italic;
}

.amount-box {
    border: 1px solid #181414;
    padding: 3px;
    margin-top: 10px;
    font-weight: 600;

}

body {
    margin: 0;
    font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    text-align: left !important;
    background-color: #fff !important;
}

strong {
    font-size: 12px !important;
}

.page {
    width: 27cm;
    min-height: 29.7cm;
    padding: 2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}


@page {
    size: A4;
    margin: 0;
}

@media print {
    .page {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        page-break-after: always;
    }
}

.delivery {
    font-size: 22px;
}

.deliverycontent {
    font-size: 17px;
}

.invoicetop {
    font-family: arial;
    position: relative;
    top: 80px;
}

.invoicecontent {
    font-size: 50px;
    color: #01395496;
    font-family: arial;
    text-transform: uppercase;
    font-weight: 700;
}
</style>