Build the stuff for payments.

resources/views/payment/edit.blade.php

@@ -0,0 +1,95 @@
+<x-app-layout>
+    <x-slot name="header">
+        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            {{ __('invoice.Create new payment') }}
+        </h2>
+    </x-slot>
+
+    <div class="py-12" x-data="paymentForm()">
+        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
+
+            <!-- Payment data -->
+            <div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
+                <div class="max-w">
+                    <section>
+                        <header>
+                            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                                {{ __('invoice.Payment for invoice') }}
+                                <span x-text="payment.invoice.number"></span>
+                            </h2>
+                            <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+                                {{ __("invoice.Enter your payment data") }}
+                            </p>
+                        </header>
+
+                        <form class="mt-6 space-y-6" @submit.prevent="">
+                            <p class="text-red-600 font-bold" x-text="message" x-show="error"></p>
+
+                            <div>
+                                <x-input-label :value="__('invoice.Payment status?')"/>
+                                <div class="flex flex-row">
+                                    <x-input-label class="w-1/4" for="status_full" :value="__('invoice.Payment state full')"/>
+                                    <x-text-input id="status_full" name="status" type="radio" class="mt-1"
+                                                  value="full" required autofocus autocomplete="name"
+                                                  x-model="payment.status"/>
+                                </div>
+                                <div class="flex flex-row">
+                                    <x-input-label class="w-1/4" for="status_partial" :value="__('invoice.Payment state partial')"/>
+                                    <x-text-input id="status_partial" name="status" type="radio" class="mt-1"
+                                                  value="partial" required autofocus autocomplete="name"
+                                                  x-model="payment.status"/>
+                                </div>
+                            </div>
+
+                            <div class="flex flex-row items-center">
+                                <x-input-label class="w-1/4" for="payment_date" :value="__('invoice.Payment date')"/>
+                                <x-text-input id="payment_date" name="payment_date" type="date" class="mt-1"
+                                              :value="old('payment_date')" required
+                                              x-model="payment.payment_date"/>
+                            </div>
+
+                            <div class="flex flex-row items-center">
+                                <x-input-label class="w-1/4" for="paid_amount" :value="__('invoice.Payment amount')"/>
+                                <x-text-input id="paid_amount" name="paid_amount" type="number" class="mt-1" step="0.01"
+                                              :value="old('paid_amount')" required
+                                              x-bind:disabled="payment.status == 'full'"
+                                              x-model="payment.paid_amount"/>
+                            </div>
+
+                            <div class="flex items-center gap-4">
+                                <x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
+                            </div>
+
+                        </form>
+                    </section>
+
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+
+</x-app-layout>
+
+<script>
+    function paymentForm() {
+        return {
+            payment: {!! $payment !!},
+            error: false,
+            message: '',
+
+            submit() {
+                let vm = this;
+
+                axios.put('/payment/' + this.payment.id, this.payment)
+                    .then(function(response) {
+                        window.location.href = '/payment/';
+                    }).catch(function (error) {
+                        vm.error = true;
+                        vm.message = error.response.data.message;
+                })
+            }
+        }
+    }
+</script>