Daftar Isi:

@extends('layouts.main')
@section('konten')
    <div id="app">
        <div class="container mx-auto bg-white">
            <h1>@{{ message }}</h1>
        </div>

        <div class="container mx-auto bg-white">
            <div class="overflow-x-auto">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>No Invoice</th>
                            <th>Total Bayar</th>
                            <th>Metode Pembayaran</th>
                            <th>Total Tagihan</th>
                            <th>Diskon</th>
                            <th>Sisa</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="invoice in invoice">
                            <td>@{{ invoice.id }}</td>
                            <td>@{{ invoice.no_invoice }}</td>
                            <td>@{{ invoice.total_bayar }}</td>
                            <td>@{{ invoice.metode_pembayaran }}</td>
                            <td>@{{ invoice.total_tagihan }}</td>
                            <td>@{{ invoice.diskon }}</td>
                            <td>@{{ invoice.sisa }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="module">
        import {
            createApp,
            ref
        } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        createApp({
            data() {
                return {
                    message: 'Arip Budiman',
                    invoice: [{
                            id: 1,
                            no_invoice: 'INV0001',
                            total_bayar: 'Rp. 100.000',
                            metode_pembayaran: 'Transfer Bank',
                            total_tagihan: 'Rp. 100.000',
                            diskon: 'Rp. 0',
                            sisa: 'Rp. 100.000',
                        },
                        {
                            id: 2,
                            no_invoice: 'INV0001',
                            total_bayar: 'Rp. 100.000',
                            metode_pembayaran: 'Transfer Bank',
                            total_tagihan: 'Rp. 100.000',
                            diskon: 'Rp. 0',
                            sisa: 'Rp. 100.000',
                        }
                    ]
                }
            },
            methods: {
                // Define method createUser
                createUser() {
                    // Contoh logika di dalam method
                    alert('User created!');
                    this.message = 'User has been created!';
                }
            }
        }).mount('#app')
    </script>
@endpush