@extends('admin.layout.master')
@section('title', 'Invoice Print View')
@section('custom_style')
    <style>
        .invoice-content,
        .invoice-content p,
        .invoice-content h1,
        .invoice-content h2,
        .invoice-content h3,
        .invoice-content h4,
        .invoice-content h5,
        .invoice-content h6 {
            font-family: "Cutive", serif !important;
        }

        .invoice-content {
            max-width: 80mm;
            margin: 0 auto;
        }

        .invoice-content .logo {
            height: 200px;
            width: 200px;
            margin: 0 auto;
        }

        .invoice-content .logo img {
            height: 100%;
            width: 100%;
            object-fit: contain;
        }

        .basic-info {
            display: flex;
            justify-content: space-between;
        }

        .basic-info p {
            font-size: 12px !important;
            display: flex;
            align-items: center;
        }

        .basic-info p span {
            display: inline-block;
            width: 70px;
        }

        .dev-info {
            font-size: 12px;
            text-align: center;
        }

        #sales_footer {
            margin-top: 20px;
        }

        #sales_footer .footer {
            display: flex !important;
            flex-direction: column;
            align-items: center;
        }

        #sales_footer .footer .social-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        thead,
        tbody,
        tfoot,
        td,
        th,
        tr {
            font-size: 12px;
        }

        td,
        th {
            padding: 5px 0;
        }
    </style>
@endsection
@section('content')
    <div id="" class="sina-card card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title m-0">Invoice Print View</h4>
        </div>
        <div class="card-body">
            <div class="invoice-content">
                <div class="logo">
                    <img src="{{ asset('assets/images/mall24-logo.png') }}" alt="">
                </div>
                <div class="d-flex flex-column align-items-center">
                    <P class="">TERIBAZAR, CHITTAGONG.</P>
                    <P class="">PHONE : 031 638890, 01919 638890-1</P>
                    <P class="">VAT REG NO # 003598713-0503</P>
                </div>
                <h4 class="text-center my-3">**RETAIL INVOICE**</h4>
<div class="basic-info">
    <div class="d-flex flex-column align-items-start">
        <P class=""><span>Invoice No</span> : #FBG68JUL</P>
        <P class=""><span>Cus. Name</span> : Mr. Jhon Doe</P>
        <P class=""><span>Mobile no</span> : +880 123456789</P>
    </div>
    <div class="d-flex flex-column align-items-start">
        <P class=""><span>Date</span> : 01-02-2099</P>
        <P class=""><span>Time</span> : 12:00 PM</P>
        <P class=""><span>Point</span> : 10</P>
        {{-- <P class=""><span>amount</span> : 300</P> --}}
    </div>
</div>

                {{-- <table class="w-100 my-2">
                    <thead style="border-bottom: 1px dashed; border-top: 1px dashed;">
                        <tr>
                            <th class="text-center">CODE</th>
                            <th class="text-center">QNTY</th>
                            <th class="text-end">RATE</th>
                            <th class="text-end">AMOUNT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="">GARARA INDIAN B3780</td>
                            <td class="text-center">1</td>
                            <td class="text-end">5500</td>
                            <td class="text-end">5500</td>
                        </tr>
                        <tr>
                            <td class="">BOYS SHIRT B4850</td>
                            <td class="text-center">1</td>
                            <td class="text-end">1600</td>
                            <td class="text-end">1600</td>
                        </tr>
                        <tr>
                            <td class="">SHADOW E1350</td>
                            <td class="text-center">1</td>
                            <td class="text-end">350</td>
                            <td class="text-end">350</td>
                        </tr>
                        <tr>
                            <td class="">SOAP E2540</td>
                            <td class="text-center">1</td>
                            <td class="text-end">150</td>
                            <td class="text-end">150</td>
                        </tr>
                    </tbody>
                    <tfoot style="border-top: 1px dashed;">
                        <tr>
                            <td class="">TOTAL</td>
                            <td class="text-center">4</td>
                            <td class="text-end"></td>
                            <td class="text-end">7680</td>
                        </tr>
                        <tr>
                            <td class="">DISCOUNT</td>
                            <td class="text-center"></td>
                            <td class="text-end"></td>
                            <td class="text-end"><span class="me-2">-</span> 280</td>
                        </tr>
                        <tr>
                            <td class="">VAT</td>
                            <td class="text-center"></td>
                            <td class="text-end"></td>
                            <td class="text-end">0</td>
                        </tr>
                        <tr>
                            <td class="">NET AMOUNT</td>
                            <td class="text-center"></td>
                            <td class="text-end"></td>
                            <td class="text-end">7400</td>
                        </tr>
                    </tfoot>
                </table> --}}

                <table class="w-100 mt-3">
                    <thead style="">
                        <tr>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="">GARARA INDIAN B3780</td>
                            <td class="text-center">1 x 5500</td>
                            <td class="text-end">5500</td>
                        </tr>
                        <tr>
                            <td class="">BOYS SHIRT B4850</td>
                            <td class="text-center">1 x 1600</td>
                            <td class="text-end">1600</td>
                        </tr>
                        <tr>
                            <td class="">SHADOW E1350</td>
                            <td class="text-center">1 x 350</td>
                            <td class="text-end">350</td>
                        </tr>
                        <tr>
                            <td class="">SOAP E2540</td>
                            <td class="text-center">1 x 150</td>
                            <td class="text-end">150</td>
                        </tr>
                    </tbody>
                    <tfoot style="border-top: 1px dashed;">
                        <tr>
                            <td class="py-1 fw-bold" colspan="2">Total</td>
                            <td class="py-1 fw-bold text-end">7680</td>
                        </tr>
                        <tr>
                            <td class="py-1 fw-bold" colspan="2">Discount</td>
                            <td class="py-1 fw-bold text-end"><span class="me-1">-</span> 280</td>
                        </tr>
                        <tr>
                            <td class="py-1 fw-bold" colspan="2">VAT</td>
                            <td class="py-1 fw-bold text-end">0</td>
                        </tr>
                        <tr>
                            <td class="py-1 fw-bold" colspan="2">Net Amount</td>
                            <td class="py-1 fw-bold text-end">7400</td>
                        </tr>
                    </tfoot>
                </table>
                <p class="text-end mb-3">Served by: <span class="fw-bold">Raza</span></p>
                <div class="">
                    <p class="text-center">THANK YOU FOR SHOPPING</p>
                    <p class="text-center">EXCHANGE WITHIN <b>7</b> DAYS WITH BILL</p>
                    <div class="d-flex align-items-baseline justify-content-center gap-2">
                        <img src="{{ asset('assets/images/icons/facebook.png') }}" alt="" height="20"
                            width="20">
                        <span class="fs-5">The MALL24</span>
                    </div>
                    <p class="dev-info">Developed By : Cursor Limited</p>
                </div>
            </div>
        </div>
    </div>
@endsection

{{-- Customer name & mobile number
Inv no, date, amount, point --}}