@extends('layouts.app')
@section('main-content')
<style type="text/css" media="print">
    body {
        background: rgb(204, 204, 204);
    }

    @page {
        background-color: white !important;
        display: block;
        margin: 0.8rem;
        margin-bottom: 0.5cm;
        box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);

        /* page[size="A4"] {
            width: 21cm;
            height: 29.7cm;
        } */

        page[size="A4"][layout="portrait"] {
            width: 29.7cm;
            height: 21cm;
        }
    }

    header,
    footer {
        display: none !important;
    }

    .main {
        background-color: white !important;
    }

    .no-print {
        display: none;
    }

    #printArea {
        display: contents;
        margin: 0;
        box-shadow: 0;
    }

    .tableCustomer td {
        font-size: 0.66rem;
        padding: 5px 0px 5px 0px;
    }

    .footerSign .no-signature {
        /* height: 100px; */
        font-size: 0.60rem;
        width: 100%;
        /* position: fixed; */
        left: 0;
        bottom: 20px;
        /* border: 1px solid lightslategray; */
        /* padding: 8px 8px 2px 0px; */
        /* text-align: center; */
        display: block !important;
    }

    .footerSign .bankInfo div {
        font-size: 0.76rem;
        line-height: 1.1rem !important;
    }
</style>
<style type="text/css">
    .card {
        padding: 5px 0px 3px 0px;
        box-shadow: none;
    }

    h4 strong {
        font-family: 'Exo', 'sans-serif';
        font-size: 2.3rem;
        color: darkgray;
    }

    h5 strong {
        padding-top: 0px;
    }

    .tableItems td {
        padding: 8px !important;
        font-size: 0.76rem;
    }

    .tableItems th {
        padding: 5px !important;
        font-size: 0.76rem;
        background-color: #E5E5E5;
    }

    th {
        padding: 5px !important;
        border: 1px solid lightgrey !important;
    }

    tbody {
        border-top: 1px solid black !important;
    }

    .payDesc {
        border: none !important;
        background-color: none !important;
    }

    .tableCustomer td {
        font-size: 0.76rem;
        padding: 5px 0px 5px 0px;
    }

    .payment_status span {
        font-size: 0.70rem !important;
    }

    .payment_status strong {
        color: brown;
        font-size: 0.80rem;
        text-transform: uppercase;
    }

    .footerSign span {
        font-size: 0.76rem;
        /* display: none; */
    }


    .footerSign .bankInfo,
    .footerSign .termsAndCondition,
    .footerSign .notes {
        margin-left: 10px;
    }

    .footerSign .bankInfo div,
    .footerSign .termsAndCondition li {
        font-size: 0.76rem;
        line-height: 1.2rem;
        padding: 0;
    }

    .footerSign .no-signature {
        display: none;
    }
</style>
<div class="container-fluid px-0">
    <nav class="page-breadcrumb no-print">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('invoices') }}">All Invoices</a></li>
            <li class="breadcrumb-item">Print Preview</li>
        </ol>
    </nav>
    <div id="printArea">
        <div class="card mx-2 px-4 pt-4">
            <table class="tabel table-bordeless tableHeader mb-0">
                <thead>
                    <tr>
                        <td class="text-center" style="width: 15%;">
                            <img src="{{ asset('assets/upload/images/companies/'.$companies->photo) }}" class="img-rounded" width="130" alt="">
                        </td>
                        <td>
                            <div class="ms-1 d-flex justify-content-start">
                                <div class="ps-4">
                                    <span class="h3 pb-2"><strong>{{ $companies->name }}</strong></span>&nbsp;<small>({{ $companies->ssm }})</small></br>
                                    <span class="h6">{!! nl2br($companies->address) !!}</span></br>
                                    <span class="h6">H/P: {{ $companies->contact }}</span></br>
                                    <!-- <span class="h6">Tax Reg No: {{ $companies->sst }}</span></br> -->
                                    <span class="h6">Email: {{ $companies->email }}</span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="me-2 d-flex justify-content-end">
                                <div>
                                    <h4 class="h4 mb-1 text-start">@if($companies->gst !=null || $companies->sst !=null)<strong>TAX </strong>@endif<strong>INVOICE</strong></h4>
                                    <span id="invoice_no" data-value="{{ $header->invoice_no }}" class="d-none no-print"></span>
                                    @if($companies->gst !=null || $companies->sst != null)
                                        @if($companies->gst != null)
                                        <span class="h6 m-0 pt-1"><strong>GST ID No: {{ $companies->gst }}</strong></span></br>
                                        @else
                                        <span class="h6 m-0 pt-1"><strong>SST ID No: {{ $companies->sst }}</strong></span></br>
                                        @endif
                                    @endif
                                    <span class="h6 m-0 pt-1"><strong>INV#: {{ str_pad($header->invoice_no, 5, '0', STR_PAD_LEFT) }}</strong></span></br>
                                    <span class="h6 m-0 pt-1"><strong>DATE: {{ date('d/m/Y', strtotime($header->invoice_date)) }}</strong></span>
                                </div>
                            </div>
                        </td>
                    </tr>
                </thead>
            </table>
            <hr>
            <table class="table table-borderless tableCustomer mb-2 px-0 mt-0">
                <thead>
                    <tr>
                        <td class="align-middle px-0">
                            <strong>Bill To:</strong></br>
                            @if ( $header->customer->customertype == 'B')
                            <span class="h5"><strong>{{ $header->customer->companyname }}</strong></span></br>
                            <span>{!! nl2br($header->customer->address) !!}</span></br>
                            @endif
                        </td>
                        <td colspan="2" class="align-middle px-0">
                            <div class="d-flex justify-content-end">
                                <div class="text-center ms-0 px-2 py-2 fs-5 rounded-3 payment_status" style="border: 1px solid gray;">
                                    <span class="text-nowrap fs-6">Payment Terms</span></br>
                                    <strong class="text-nowrap ">{{ $header->payment_term }}</strong>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 10px;"></td>
                    </tr>
                    <tr>
                        @if ($header->customer->customertype == 'B')
                        <td class="w-25 px-0">Attn: <span class="text-nowrap">{{ $header->customer->name }}</span></td>
                        <td class="w-25 px-0 text-center">H/P: <span class="text-nowrap">{{ $header->customer->contact }}</span></td>
                        @else
                        <td class="w-25 px-0"><span class="text-nowrap">{{ $header->customer->name }}</span></td>
                        <td class="w-25 px-0 text-center">H/P: <span class="text-nowrap">{{ $header->customer->contact }}</span></td>
                        @endif
                        <td class="w-25 px-0 text-end">REF: <span class="text-nowrap">{{ $header->customer->info }}</span></td>
                    </tr>
                </thead>
            </table>
            <table class="table table-condensed tableItems mb-2 mt-1 me-4">
                <thead class="text-nowrap">
                    <th class="text-center">No</th>
                    <th>Description</th>
                    <th class="text-center">Quantity</th>
                    <th class="text-center">UOM</th>
                    <th class="text-end">Unit Price</th>
                    <th class="text-end">Amount</th>
                </thead>
                <tbody>
                    @foreach ($items as $invoice)
                    <tr>
                        <td class="text-center">{{ $loop->iteration }}</td>
                        <td class="align-middle">{{ $invoice->product->description }}</td>
                        <td class="text-center">{{ $invoice->quantity }}</td>
                        <td class="text-center">{{ $invoice->item_uom->description }}</td>
                        <td class="text-end text-nowrap">{{ number_format($invoice->unit_price, 2) }}</td>
                        <td class="text-end text-nowrap">RM {{ number_format($invoice->total, 2) }}</td>
                    </tr>
                    @endforeach
                    <tr>
                        <td colspan="5" class="text-end payDesc"><strong>SUBTOTAL</strong></td>
                        <td class="text-end text-nowrap"><strong>RM {{ number_format($header->total, 2) }}</strong></td>
                    </tr>
                    @if ($header->labour)
                    <tr>
                        <td class="payDesc"></td>
                        <td colspan="4" class="text-end payDesc"><strong>LABOUR CHARGE</strong></td>
                        <td class="text-end"><strong>RM {{ number_format($header->labour,2) }}</strong></td>
                    </tr>
                    @endif
                    @if ($header->discount)
                    <tr>
                        <td colspan="5" class="text-end payDesc"><strong>DISCOUNT</strong></td>
                        <td class="text-end text-nowrap"><strong>- RM {{ number_format($header->discount, 2) }}</strong></td>
                    </tr>
                    @endif
                    <tr>
                        <td colspan="5" class="text-end payDesc px-0 mx-0"><strong>GRAND TOTAL</strong></td>
                        <td class="text-end text-nowrap"><strong>RM {{ number_format($header->grand_total, 2) }}</strong></td>
                    </tr>
                </tbody>
            </table>
            <div class="row mb-4 mt-0 footerSign">
                @if ($header->customer->customertype == 'B' && $header->payment_term != 'Cash')
                <div class="col-sm-12 col-md-12 mb-3 bankInfo">
                    <div class="col-6">
                        <strong>Please pay to:</strong>
                    </div>
                    <div class="col-6">
                        <span>{{ $companies->bankname }}</span>
                    </div>
                    <div class="col-6">
                        <span>Account No: {{ $companies->accountno }}</span>
                    </div>
                </div>
                @endif
                <div class="col-sm-12 col-md-12 termsAndCondition">
                    <div class="col-6">
                        <strong>Terms and conditions</strong>
                    </div>
                    <ol>
                        <li>Goods sold are not refundable.</li>
                    </ol>
                </div>
                <div class="col-sm-12 col-md-12 mb-4 notes">
                    <div class="col-6">
                        <strong>Notes</strong>
                    </div>
                    <div class="col-12">
                        <span class="h6 text-muted">Thank you for your business.</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 notes">
                    <div class="col-12">
                        <span class="h6 text-muted no-signature">THIS IS A COMPUTER GENERATED. NO SIGNATURE IS REQUIRED.</span>
                    </div>
                </div>
            </div>
            <!-- <div class="col-sm-8 col-md-8 footer">
                <span>
                    Menjual & membaik pulih penyaman udara
                </span>
            </div> -->
            <div class="d-flex mb-4 justify-content-center">
                <span class="btn btn-sm btn-outline-primary print no-print me-3 p-2 rounded-3"><i class="me-2" data-feather="file"></i>Print</span>
            </div>
            <!-- </div> -->
            <!-- </div> -->
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        $id = $("#invoice_no").data('value');
        $invno = $id.toString().padStart(5, '0');
        $(document).attr('title', 'INV' + $invno);

        $(document).on('click', '.print', function() {
            window.print();
        });
    });

    function printPopup(pageURL, pageTitle, winWidth, winHeight) {
        let left = (screen.width - winWidth) / 2;
        let top = (screen.height - winHeight) / 4;
        let newWin = window.open(pageURL, pageTitle, 'width=' + winWidth +
            ', height=' + winHeight + ', top=' + top + ', left=' + left);
    }
</script>
@endsection