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

@endsection
@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 class="col-4">
                    <div class="invoicetop">
                        <div class="invoicecontent">Statement</div>

                    </div>
                </div>
            </div>

        </div>
        <br>
        <div class="row">
            <div class="col-8">

                <div>
                    <b>Supplier Details: </b>
                </div>
                <div>
                    Supplier Name <strong style="margin-left:15px">: {{ $supplierdetails->supplier_name }}</strong>
                </div>
                <div>
                    Phone <strong style="margin-left:15px">: {{ $supplierdetails->supplier_tell }}</strong>
                </div>
                <div>
                    Email <strong style="margin-left:20px">:{{ $supplierdetails->email }}</strong>
                </div>
                <div>
                    Address <strong style="margin-left:5px">: {{ $supplierdetails->address }}</strong>
                </div>
            </div>
            <div class="col-4">


            </div>

        </div>
        <br>
        <div class="">
            <table class="table table-sm table-bordered">

                <tbody>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th> Amount</th>
                    </tr>
                    <tr>
                        <td>{{ $paymentList->created_at}}</td>
                        <td> Cash</td>
                        <td><i class="mdi mdi-currency-bdt"></i> <strong>{{ $paymentList->total_amount   }} </strong></td>
                    </tr>
                    <tr>
                    <td>{{ $paymentList->date}}</td>
                        <td> <strong>paid</strong></td>
                        <td> <i class="mdi mdi-currency-bdt"></i> <strong>{{ $paymentList->paid   }} </strong></td>
                    </tr>
                    <tr>
                        <td colspan="1"></td>
                        <td> <strong>Due</strong></td>
                        <td> <i class="mdi mdi-currency-bdt"></i> <strong>{{ $paymentList->due   }} </strong></td>
                    </tr>

                </tbody>

            </table>
        </div>
        <div class="row" style="margin-left:0px">
            <table class="table table-sm table-bordered">
                <tbody>
                    <tr>
                       
                        <th class="text-center">Item - Description</th>
                        <th class="text-center">Entry Date</th>
                        <th class="text-center">Quantity</th>
                        <th class="text-center">Price</th>
                        <th class="text-center">Total</th>

                    </tr>
                                        @foreach($products as $item)

                                        <tr>
                        <td style="width: 50%;">{{ $item->name ?? 'No' }}.
                            <strong>Bar code: </strong> {{   $item->m_barcode ?? 'No'}} .
                            <strong>Weight</strong>  {{ $item->product->productweight??' ' }}  ,   
                            <strong>Description: </strong> {{ $item->description  ?? 'No'}}

                        </td>
                        <td class="text-center">{{ ($item->created_at)->format('Y-m-d')  ?? 'No'}} </td>
                        <td class="text-center">{{ $item->quantity  ?? 'No'}} </td>
                        <td class="text-center"><i class="mdi mdi-currency-bdt"></i> {{ $item->cost  ?? '0'}}</td>
                        <td class="text-center"><i class="mdi mdi-currency-bdt"></i> {{ $item->cost * $item->quantity ?? '0'}}</td>
                    </tr>

                    @endforeach

                    <tr>
                        <td colspan="2"></td>
                        <td> <strong>Total</strong></td>
                        <td><i class="mdi mdi-currency-bdt"></i> {{ $supplierTotalAmount }} </td>
                    </tr>

                </tbody>
            </table>
        </div>
          
   
        <br>
        <p style="text-align: center;    font-size: 13px;">This POS Software Developed By: Ruby Pos</p>
        <br>
    </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>