@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="http://127.0.0.1:8000/logo.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>
                        Website: https://skinstorybd.com
                    </div>


                </div>
                <div class="col-4">
                    <div class="invoicetop">
                        <div class="invoicecontent">Invoice</div>

                        <div style="margin-left:11px">
                            <div>
                                Invoice No <strong style="margin-left:43px">: 11773 </strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

                <div>
                    <b>Bill &amp; Delivery To: </b>
                </div>
                <div>
                    Name <strong style="margin-left:15px">: Samia aktar Turfa</strong>
                </div>
                <div>
                    Phone <strong style="margin-left:15px">: 01748424869</strong>
                </div>
                <div>
                    Email <strong style="margin-left:20px">: email947@mail.com </strong>
                </div>
                <div>
                    Address <strong style="margin-left:5px">:Pabna Sadar</strong>
                </div>
            </div>
            <div class="col-4">
                <div style="margin-left:10px">

                    <div>
                        Delivery Date <strong style="margin-left:30px"> : 2022-10-01</strong>
                    </div>
                    <div>
                        Delivery Company <strong> : Sundarban Courier Service</strong>
                    </div>
                    <div>
                        Payment Method <strong style="margin-left:6px"> : Cash On Delivery</strong>
                    </div>

                </div>

            </div>

        </div>
        <br>
        <div class="row">
            <div class="col">
                <b>Special Note: </b>
                <div class="col" style="border:1px solid;border-style:dashed; padding:10px"> </div>
            </div>
        </div>
        <br>
        <div class="row" style="margin-left:0px">
            <table class="table table-striped" style="width: 93%;">
                <tbody>
                    <tr>
                        <th>Brand</th>
                        <th class="text-center">Item - Description</th>
                        <th class="text-center">Quantity</th>
                        <th class="text-center">Price</th>
                        <th class="text-center">Amount</th>

                    </tr>

                    <tr>
                        <td>cosrx </td>


                        <td>
                            <strong>Name</strong> AHA 7 Whitehead Power Liquid , <br>
                            <strong>Barcode</strong> 0820224756215 , <br>
                            <strong>Weight</strong> 100ml , <br>

                        </td>


                        <td class="text-center">1</td>
                        <td class="text-center">

                            1300

                        </td>
                        <td><i class="mdi mdi-currency-bdt"></i><strong>1300 </strong></td>
                    </tr>


                    <tr>
                        <td>cosrx </td>


                        <td>
                            <strong>Name</strong> Cosrx Low Ph Good Morning Gel Cleanser 150ml , <br>
                            <strong>Barcode</strong> 0820221278756 , <br>
                            <strong>Weight</strong> 150ml , <br>
                            150ml
                        </td>


                        <td class="text-center">1</td>
                        <td class="text-center">

                            1100

                        </td>
                        <td><i class="mdi mdi-currency-bdt"></i><strong>1100 </strong></td>
                    </tr>

                </tbody>
            </table>
        </div>


        <br>
        <div class="row">
            <div class="col-8 ">
                <div style="background: #b3ceef75;  padding: 10px;">
                    <div>
                        <b>Bank Details: </b>
                    </div>
                    <div>
                        Bank Name : <strong> Dutch Bangla Bank Ltd.</strong>
                    </div>
                    <div>
                        A/C Name : <strong>IMPORTERS HUB</strong>
                    </div>
                    <div>
                        A/C No : <strong>1171100046703</strong>
                    </div>
                    <div>
                        Bank Branch :<strong>Uttara Branch </strong>
                    </div>
                </div>
                <div style="padding: 10px 3px;"> Amount In Word :<strong> Two Thousand and Three Hundreds Twenty Taka
                        Only</strong></div>


            </div>
            <div class="col-4">

                <div class="row">
                    <div class="col-6">
                        <span> Discount </span>
                    </div>
                    <div class="col-6">
                        <strong>
                            :<i class="mdi mdi-currency-bdt"></i>200(200 TK) </strong>
                    </div>


                </div>
                <div class="row">
                    <div class="col-6">
                        <span> Subtotal </span>
                    </div>
                    <div class="col-6">
                        <strong>
                            :<i class="mdi mdi-currency-bdt"></i><strong>

                                2200

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


                </div>
                <div class="row">

                    <div class="col-6">
                        <span> Delivery Charge </span>
                    </div>
                    <div class="col-6">
                        <strong>
                            :<i class="mdi mdi-currency-bdt"></i><strong>120</strong>
                        </strong>
                    </div>


                </div>

                <div class="row">
                    <div class="col-6">
                        <span> Previous Due</span>
                    </div>
                    <div class="col-6">
                        <strong>
                            :<i class="mdi mdi-currency-bdt"></i><strong> 0</strong>
                        </strong>
                    </div>


                </div>
                <div class="row">
                    <div class="col-6">
                        <span> Current Due </span>
                    </div>
                    <div class="col-6">
                        <strong>
                            :<i class="mdi mdi-currency-bdt"></i> <strong>2320 </strong>
                        </strong>
                    </div>


                </div>
                <div class="amount-box">
                    <div class="row ">
                        <div class="col-6">
                            <span> Total Amount</span>
                        </div>
                        <div class="col-6">
                            <strong>
                                :<i class="mdi mdi-currency-bdt"></i><strong>
                                    2320
                                </strong>
                            </strong>
                        </div>
                    </div>
                    <div class="row ">
                        <div class="col-6">
                            <span> Paid</span>
                        </div>
                        <div class="col-6">
                            <strong> :<i class="mdi mdi-currency-bdt"></i><strong>


                                    0

                                </strong>
                            </strong>
                        </div>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-6">
                        <span> <strong> Total Due</strong></span>
                    </div>
                    <div class="col-6">
                        <strong> :<i class="mdi mdi-currency-bdt"></i><strong>

                                0

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

            </div>
        </div>



        <br> <br>
        <div class="row">
            <div class="col">
                <strong>Received by:</strong>.............................
            </div>
            <div class="col">
                <strong>Issued by:</strong>.............................
            </div>
        </div>
        <br><br>
        <div class="row">
            <div class="col">
                <p>The amount is including all VAT &amp; TAX. </p>
                <h5 style="background: #3498db7a;">Terms &amp; conditons: </h5>
                <ul class="list-unstyled terms_condition">
                    <li>1. Order will not be reduced/changed/cancelled once confired. </li>
                    <li>2. If any product is not available (also BD market), we can cancel/reduce the product.</li>
                    <li>3. Payment &amp; Delivery will be as per aggred terms.</li>
                    <li>4. If there any product related issue, have to confirm within in 2 days of delivery
                        with proper evidence.
                    </li>
                </ul>
            </div>
        </div>
        <br>
        <p style="text-align: center;    font-size: 13px;">This POS Software Developed By: Ruby Pos</p>
        <br>

        <div class="row">
            <div class="col">
                <div class="col text-center" style="border:1px solid;border-style:dashed;padding:8px;"> <b class=""
                        style="font-size: 25px;"> Shipping Mark</b> </div>
            </div>
        </div>
        <div class="row">
            <div class="col-8">

                <div class="delivery">
                    <b> Delivery To: </b>
                </div>
                <div class="deliverycontent">
                    Name : <b> Samia aktar Turfa</b>
                </div>
                <div class="deliverycontent">
                    Phone : <b>01748424869</b>
                </div>
                <div class="deliverycontent">
                    Email : <b> email947@mail.com </b>
                </div>
                <div class="deliverycontent">
                    Address: <b>Pabna Sadar</b>
                </div>
            </div>
            <div class="col">

                <div class="delivery">
                    <b> Delivery From: </b>
                </div>
                <div class="deliverycontent"> Importer Hub </div>
                <div class="deliverycontent">
                    Phone: 01831 88 99 79
                </div>
                <div class="deliverycontent">
                    Address H#25, R#12, Nikunja-12,khilkhet, Dhaka-1229
                </div>


            </div>

        </div>
        <br> <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>