@extends('layouts.app')
@section('main-content')
<style type="text/css" media="print">
    body {
        -webkit-filter: grayscale(100%);
        background: rgb(204, 204, 204);
        font-size: 13px;
    }

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

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

    header,
    footer {
        display: none !important;
    }

    .logo {
        display: block !important;
    }

    .brand {
        display: block !important;
    }

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

    .no-print {
        display: none;
    }

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

    .card {
        /* display: contents; */
        padding: 10px 0px !important;
    }

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

    .footerSign .no-signature {
        font-size: 0.60rem;
        width: 100%;
        left: 0;
        bottom: 20px;
        display: block !important;
    }

    .footerSign .bankInfo div {
        font-size: 0.76rem;
        line-height: 1.1rem !important;
    }

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

    .bankFooter {
        align-items: center;
        display: block !important;
        border: 1px solid #bbb9b9;
        position: absolute;
        margin-left: 0;
        padding-left: 0;
        padding: 0.5rem;
        margin-bottom: 1rem;
        width: 96%;
        bottom: 0;
    }

    #labordesc {
        background-color: #fff;
        position: relative;
        resize: none;
        border: none;
        height: 7rem;
        font-size: 0.7rem !important;
    }

    #bankFooterContent {
        /* position: relative; */
        text-align: center;
        font-size: 0.80rem !important;
        font-weight: 800;
        font-family: 'Arial';
    }

    div .payment_status {
        display: block !important;
    }
</style>

<style type="text/css">
    .companyLogo {
        width: 9rem;
        margin-right: 0;
        position: relative;
    }

    .brand {
        display: none;
    }

    .logo {
        display: none;
    }

    .img-thumbnail {
        background: none;
        border: none;
    }

    .h3 {
        font-weight: 900 !important;
        font-size: 2.3rem;
        font-family: 'Exo';
        text-align: left;
    }

    .card {
        box-shadow: none;
    }

    h4 {
        font-family: 'Exo', 'sans-serif';
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: darkgray;
    }

    h5 strong {
        padding-top: 0px;
    }

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

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

    .tableAmount tbody {
        border: #fff !important;
    }

    .tableAmount td {
        text-align: end;
        padding: 0 !important;
    }

    .tableAmount strong {
        padding: 0;
    }

    #parentAmount {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        /* padding-right: 0.43rem !important; */
        /* border: none !important; */
    }

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

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

    td.payDesc {
        padding: 0.2rem !important;
        padding-top: 0.12rem !important;
        padding-right: 1.7rem !important;
        border-top: none !important;
        background-color: none !important;
    }

    td.amount {
        padding: 0.3rem !important;
        padding-right: 0.40rem !important;
        border: none !important;
        background-color: none !important;
    }

    td.gtotal {
        padding: 0.5rem !important;
        padding-right: 0.43rem !important;
        border-top: 1px solid grey;
        border-bottom: 2px solid gray !important;
        margin: 0;
    }

    .gtotal strong {
        font-size: 0.85rem;
    }

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

    .bankFooter {
        display: none;
    }

    div.payment_status {
        display: none;
    }

    div.payment_status {
        padding: 0.44rem 1rem !important;
    }


    .payment_status strong {
        color: brown;
        font-size: 0.8rem;
        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 !important;
        line-height: 1.2rem;
        padding: 0;
    }

    .footerSign .no-signature {
        display: none;
    }

    strong {
        font-size: 0.76rem !important;
    }

    #labordesc {
        background-color: #fff;
        position: relative;
        resize: none;
        border: none;
        padding: 0.3rem;
        padding-left: 1rem;
        height: 7rem;
        font-size: 0.8rem;
    }

    #labor-borders {
        padding: 0 !important;
        padding-top: 0.5rem !important;
        padding-left: 0.5rem !important;
        /* position: relative; */
        /* bottom: 0; */
        border: 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-5 pt-3">
            <table class="tabel table-bordeless tableHeader mb-0">
                <thead>
                    <tr>
                        <td class="text-center ps-1" style="width: 10%;">
                            <img src="{{ asset('assets/upload/images/companies/'.$companies->photo) }}" class="img-rounded companyLogo" width="140" alt="">
                        </td>
                        <td class="text-center px-3">
                            <div class="ms-0 d-flex justify-content-center">
                                <div class="ps-1">
                                    <h3 class="h3 my-0 text-center">{{ $companies->name }}</h3>
                                    <h5 class="my-0 fs-6 text-nowrap">SOLAH AIRCOND SPECIALIST 202303043915 ({{ $companies->ssm }})</h5>
                                    <span class="h6 my-0">{!! nl2br($companies->address) !!}</span></br>
                                    <h5 class="h4 my-0">H/P {{ $companies->contact }}</h5>
                                    <!-- <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 RECEIPT</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
                                    <div class="d-flex flex-column">
                                        <span class="h5 m-0 pt-2 d-flex justify-content-between"><strong class="text-nowrap">NO. :&nbsp;</strong><strong class="text-nowrap">{{ '#'.str_pad($header->invoice_no, 5, '0', STR_PAD_LEFT) }} {{ $header->printstatus >= 1 ? 'R' : '' }} </strong></span>
                                        <span class="h5 m-0 pt-2 d-flex justify-content-between"><strong class="text-nowrap">DATE :&nbsp;</strong><strong class="text-nowrap">{{ date('d/m/Y', strtotime($header->invoice_date)) }}</strong></span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                </thead>
            </table>
            <div class="row mt-1 logo">
                <div class="col-10 offset-1 align-items-center">
                    <img src="{{ asset('assets/img/logos/v_logo.png')}}" width="100%" height="45px" alt="">
                </div>
            </div>
            <div class="row mt-2 brand">
                <div class="col-6 offset-3 align-items-center">
                    <img src="{{ asset('assets/img/brands/v_brand.png') }}" width="100%" alt="">
                </div>
            </div>
            <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="3" 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">Status</span></br> -->
                                    <strong class="text-nowrap ">{{ $header->status == 'A' ? 'PAID' : 'UNPAID' }}</strong>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 10px;"></td>
                    </tr>
                    <tr>
                        @if ($header->customer->customertype == 'B')
                        <td class="px-0">Attn: <span class="text-nowrap">{{ $header->customer->name }}</span></td>
                        <td class="px-0 text-center">H/P: <span class="text-nowrap">{{ $header->customer->contact }}</span></td>
                        @else
                        <td class="px-0"><span class="text-nowrap">{{ $header->customer->name }}</span></td>
                        <td class="px-0 text-center text-nowrap">H/P: <span class="text-nowrap">{{ $header->customer->contact }}</span></td>
                        @endif
                        <td class="px-0 text-end text-nowrap">REF: <span class="text-nowrap">{{ $header->customer->info }}</span><span class="text-nowrap px-1">({{ $header->customer->models }})</span></td>
                        <td class="px-0 text-end">Tech: <span class="text-nowrap">{{ empty($header->foreman) ? 'SOLAH' : strtoupper($header->foreman) }}</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">1</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
                    @if ($header->flushing != null)
                    <tr>
                        <td class="text-center">2</td>
                        <td>Flushing Aircond System</td>
                        <td class="text-center">1</td>
                        <td class="text-center">Lot</td>
                        <td class="text-end">{{ number_format($header->flushing, 2)}}</td>
                        <td class="text-end">RM{{ number_format($header->flushing, 2)}}</td>
                    </tr>
                    @endif
                    @if ($header->var_rate != null)
                    <tr>
                        <td class="text-center">3</td>
                        <td>Refill gas 134a + vaccum C.F Internal Oil Compressor</td>
                        <td class="text-center">1</td>
                        <td class="text-center">Lot</td>
                        <td class="text-end">{{ number_format($header->var_rate, 2)}}</td>
                        <td class="text-end">RM {{ number_format($header->var_rate, 2)}}</td>
                    </tr>
                    @endif
                    <tr>
                        <td colspan="4" class="col-sm-9" id="labor-borders">
                            @if (!empty($header->labor_desc))
                            <label for="labordesc"><strong>Labour Description</strong></label>
                            <textarea name="labor_desc" id="labordesc" rows="4" class="form-control" readonly>{{ $header->labor_desc }}</textarea>
                            @endif
                        </td>
                        <td colspan="2" class="col-sm-3" id="parentAmount">
                            <table class="table table-condensed mt-0 tableAmount">
                                <tr>
                                    <td class="text-right payDesc"><strong>SUBTOTAL</strong></td>
                                    <td class="text-end text-nowrap amount"><strong>RM {{ number_format($header->total + $header->var_rate + $header->flushing, 2) }}</strong></td>
                                </tr>
                                @if($header->labour)
                                <tr>
                                    <td class="text-right payDesc"><strong>LABOUR</strong></td>
                                    <td class="text-end text-nowrap amount"><strong>RM {{ number_format($header->labour, 2) }}</strong></td>
                                </tr>
                                @endif
                                @if ($header->discount)
                                <tr>
                                    <td colspan="" class="text-right payDesc"><strong>DISCOUNT</strong></td>
                                    <td class="text-end text-nowrap amount"><strong>- RM {{ number_format($header->discount, 2) }}</strong></td>
                                </tr>
                                @endif
                                <tr>
                                    <td colspan="" class="text-nowrap text-right payDesc px-0 mx-0"><strong>GRAND TOTAL</strong></td>
                                    <td class="text-right text-nowrap gtotal"><strong>RM {{ number_format($header->grand_total, 2) }}</strong></td>
                                </tr>
                            </table>
                        </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-12">
                        <span class="h6 ">Thanks for your support, please come again.</span>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 notes">
                    <div class="col-12">
                        <span class="h6 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="printer"></i>Print</span>
            </div>
            <!-- </div> -->
            <!-- </div> -->
        </div>
        <div class="bankFooter">
            <div class="text-nowrap" id="bankFooterContent">{{ strtoupper($companies->name) }}: {{ strtoupper($companies->bankname) }} {{ $companies->accountno }}</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();
        });
    });

    window.onafterprint = function() {
        $id = $("#invoice_no").data('value');
        $.ajax({
            url: '/api/invoices/' + $id + '/reprint',
            data: {
                '_token': 'crsf_token'
            },
            method: 'GET',
            success: function(data) {
                //
            }
        });

    }

    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