@extends('layouts.app')

@section('title', 'Invoice Preview - Quick OMS')

@section('content')
<div class="welcome">
    <h3>Invoice Preview </h3>
</div>

<div class="invoice_prev">

    <!-- LEFT -->

    <div class="invoice">

        <!-- HEADER -->
        <div class="header_prev">
            <div class="logo_prev"><img src="{{ asset('admin/images/logo-img.png') }}" alt=""></div>
            <div class="address">
                A: 4 Square Glen Eden<br>
                P: +64 123 456 789<br>
                E: rob.worker1@4sq.co.nz<br>
                GST: 987-654-321
            </div>
        </div>

        <!-- BAR + TITLE -->
        <div class="bar-wrap">
            <div class="bar">TEXT INVOICE</div>
            <div class="title">INVOICE</div>
        </div>

        <!-- INFO -->
        <div class="info">

            <div>
                Invoice to
                <strong>Mr. Bevan John</strong>
                Director Company Name<br>
                A: 4 Square Glen Eden<br>
                P: +64 123 456 789<br>
                E: rob.worker1@4sq.co.nz
            </div>

            <div class="info_right">
                <div class="badge">CANCELLED INVOICE</div><br>
                <strong>Invoice No. MV20260035</strong><br>
                Invoice Date : June 20, 2026<br>
                Expiry Date : June 20, 2026
            </div>

        </div>

        <!-- TABLE -->
        <div class="table">
            <table>
                <tr>
                    <th>Item Description</th>
                    <th>UOM</th>
                    <th>Cost</th>
                    <th>Quantity</th>
                    <th>Disc.</th>
                    <th>Tax</th>
                    <th>Amount</th>
                </tr>

                <tr>
                    <td>BALAJI FOODS NZ SEV 150G</td>
                    <td>Pieces</td>
                    <td>2.30</td>
                    <td>10</td>
                    <td>10.00%</td>
                    <td>15.00%</td>
                    <td><b>$20.70</b></td>
                </tr>

                <tr>
                    <td>BALAJI FOODS NZ CORN CHIVDA 150G</td>
                    <td>Pieces</td>
                    <td>2.30</td>
                    <td>10</td>
                    <td>10.00%</td>
                    <td>15.00%</td>
                    <td><b>$20.70</b></td>
                </tr>
            </table>
        </div>

        <!-- TOTAL -->
        <div class="total-wrap">
            <div class="total-box">

                <div class="row"><span>Subtotal:</span><span><b>$20.70</b></span></div>
                <div class="row"><span>Special deal:</span><span><b>(-) $0.00</b></span></div>
                <div class="row"><span>Subtotal:</span><span><b>$20.70</b></span></div>
                <div class="row"><span>Discount:</span><span><b>(-) $6.00</b></span></div>

                <div class="row total"><span>Total</span><span>$62.10</span></div>

                <div class="balance">
                    <span>Remaining Balance:</span>
                    <span class="bigsize">$62.10</span>
                </div>

            </div>
        </div>

        <!-- AMOUNT -->
        <div class="section">
            <strong>Amount (in words):</strong> Sixty-two Point One Zero
        </div>

        <!-- PAYMENT -->
        <div class="section payment">
            <div class="payment-left">
                <strong>Payment to</strong><br>
                Payment Method Name<br>
                info@examplemail.com<br><br>

                Bank : Bank Name<br>
                AC #0123 456 789
            </div>

            <div class="thank">THANK YOU</div>
        </div>

        <!-- NOTE -->
        <div class="note">
            <strong>Note:</strong>
            • Please Pay into our ANZ Bank Account 06-0185-0903256-00 After 30 days 18% interest will be
            applied.<br>
            • Thank you for your business.
        </div>

    </div>

    <!-- RIGHT -->
    <div class="invoice_sidebar">

        <div class="card">

            <div class="title">Invoice Status</div>

            <select class="select">
                <option>Cancelled</option>
                <option>Paid</option>
                <option>Draft</option>
            </select>

            <textarea class="textarea" placeholder="Type here..."></textarea>

            <button class="btn">Update Status</button>

        </div>
        <div class="card">

            <button class="btn green" onclick="openDrawer()">Send Invoice</button>
            <button class="btn green">PDF</button>

            <button class="btn blue">Web View</button>
            <button class="btn blue">Create Credit Note</button>

            <div class="note">Awaiting approval for payment</div>

        </div>

        <div class="card">

            <div class="title">Status History</div>

            <div class="table-head">
                <div>Status</div>
                <div>Date</div>
                <div>Note</div>
            </div>

            <!-- ROW -->
            <div class="row_status">
                <div><span class="badge cancelled">Cancelled</span></div>
                <div>30-04-2026<br>09:59</div>
                <div>Invoice updated</div>
            </div>

            <div class="row_status">
                <div><span class="badge cancelled">Cancelled</span></div>
                <div>30-04-2026<br>09:59</div>
                <div>Draft order cancelled by sales</div>
            </div>

            <div class="row_status">
                <div><span class="badge draft">Draft</span></div>
                <div>30-04-2026<br>09:59</div>
                <div>Invoice updated</div>
            </div>

            <div class="row_status">
                <div><span class="badge draft">Draft</span></div>
                <div>30-04-2026<br>09:59</div>
                <div>Invoice updated (warehouse)</div>
            </div>

            <div class="row_status">
                <div><span class="badge draft">Draft</span></div>
                <div>30-04-2026<br>09:59</div>
                <div>Invoice created by Sales</div>
            </div>

        </div>
    </div>

</div>

<!-- Drawer and Overlay -->
<div class="overlayP" id="overlayP" onclick="closeDrawer()"></div>

<div class="drawer" id="drawer">

    <!-- top_bar -->
    <div class="top_bar">
        <div class="title">Send Invoice</div>
        <div class="close" onclick="closeDrawer()">✕</div>
    </div>

    <!-- BODY -->
    <div class="popup_area">

        <label>From</label>
        <input value="sales@mytrading.co.nz">

        <label>To</label>
        <input value="rob.worker1@4sq.co.nz">

        <label>Subject</label>
        <input value="Invoice INV20260035 from 4 Square Glen Eden">

        <label>Message</label>
        <textarea>
Hi Rob,

Here’s invoice INV20260035 for NZD 62.10.

The amount outstanding of NZD 62.10 is due on 30 July 2026.

View your bill online: https://mytrading.co.nz/
        </textarea>

    </div>

    <!-- FOOTER -->
    <div class="footer">
        <button class="btn primary">Send Invoice</button>
        <button class="btn cancel" onclick="closeDrawer()">Cancel</button>
    </div>

</div>
@endsection

@push('scripts')
<script>
    const drawer = document.getElementById("drawer");
    const overlayP = document.getElementById("overlayP");

    function openDrawer() {
        drawer.classList.add("active");
        overlayP.classList.add("active");
    }
    function closeDrawer() {
        drawer.classList.remove("active");
        overlayP.classList.remove("active");
    }
</script>
@endpush