Files
project/resources/views/incoming/edit.blade.php

395 lines
23 KiB
PHP

<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('incoming.Edit incoming') }}
</h2>
</x-slot>
<div class="py-12" x-data="incomingForm()">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
<!-- Incoming 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">
{{ __('incoming.Incoming data') }}
</h2>
</header>
<form class="mt-6 space-y-6" @submit.prevent="">
<div class="flex flex-row space-x-8 items-start relative">
<div class="w-1/2 grid grid-cols-3 items-center">
<x-input-label for="name" :value="__('invoice.Invoice Number')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.invoice_number"/>
<x-input-label for="name" :value="__('invoice.Invoice Date')"/>
<x-text-input id="name" name="name" type="date"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.issue_date"/>
<x-input-label for="name" :value="__('invoice.Invoice Due date')"/>
<x-text-input id="name" name="name" type="date"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.due_date"/>
<x-input-label for="name" :value="__('invoice.Type code')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.invoice_type_code"/>
<x-input-label for="name" :value="__('common.Currency code')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.currency_code"/>
<x-input-label for="name" :value="__('invoice.Net')"/>
<x-text-input id="name" name="name" type="number" step="0.01"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.net"/>
<x-input-label for="name" :value="__('invoice.Gross')"/>
<x-text-input id="name" name="name" type="number" step="0.01"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.gross"/>
<x-input-label for="name" :value="__('invoice.Tax')"/>
<x-text-input id="name" name="name" type="number" step="0.01"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.tax"/>
</div>
<div class="w-1/2 grid grid-cols-3 items-center">
<x-input-label for="name" :value="__('invoice.Account holder')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.pay_name"/>
<x-input-label for="name" :value="__('configuration.IBAN')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.pay_iban"/>
<x-input-label for="name" :value="__('configuration.BIC')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.pay_bic"/>
<x-input-label for="name" :value="__('common.Paid at')"/>
<x-text-input id="name" name="name" type="date"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="incoming.pay_date"/>
</div>
<x-primary-button x-on:click="submit();" class="absolute right-0 bottom-0">{{ __('form.Save') }}</x-primary-button>
</div>
</form>
</section>
</div>
</div>
<!-- Supplier 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">
{{ __('supplier.Supplier') }}
</h2>
</header>
<form class="mt-6 space-y-6" @submit.prevent="">
<div class="flex flex-row space-x-8 items-start">
<div class="w-1/2 grid grid-cols-3 items-center">
<x-input-label for="name" :value="__('common.Name')"/>
<x-text-input id="name" name="name" type="text"
class="mt-1 col-span-2" :value="old('name')" autofocus
autocomplete="name" x-model="supplier.name"/>
<x-input-label for="registration_name" :value="__('common.Registration name')"/>
<x-text-input id="registration_name" name="registration_name" type="text"
class="mt-1 col-span-2" :value="old('registration_name')" autofocus
autocomplete="registration_name"
x-model="supplier.registration_name"/>
<x-input-label for="email" :value="__('common.Email')"/>
<x-text-input id="email" name="email" type="email"
class="mt-1 col-span-2" :value="old('email')"
autocomplete="email" x-model="supplier.email"/>
<x-input-label for="address" :value="__('common.Address')"/>
<x-text-input id="address" name="address" type="text"
class="mt-1 col-span-2" :value="old('address')"
autocomplete="address"
x-model="supplier.address"/>
<x-input-label for="zip" :value="__('common.Zip Code')"/>
<x-text-input id="zip" name="zip" type="text"
class="mt-1 col-span-2" :value="old('zip')"
autocomplete="zip"
x-model="supplier.zip"/>
<x-input-label for="city" :value="__('common.City')"/>
<x-text-input id="city" name="city" type="text"
class="mt-1 col-span-2" :value="old('city')"
autocomplete="city"
x-model="supplier.city"/>
</div>
<div class="w-1/2 grid grid-cols-3 items-center">
<x-input-label for="country_code" :value="__('common.Country code')"/>
<x-text-input id="country_code" name="country_code" type="text"
class="mt-1 col-span-2" :value="old('country_code')"
autocomplete="country_code"
x-model="supplier.country_code"/>
<x-input-label for="tax_fc" :value="__('common.Tax FC')"/>
<x-text-input id="tax_fc" name="tax_fc" type="text"
class="mt-1 col-span-2" :value="old('tax_fc')"
autocomplete="tax_fc"
x-model="supplier.tax_fc"/>
<x-input-label for="tax_vat" :value="__('common.Tax VAT')"/>
<x-text-input id="tax_vat" name="tax_vat" type="text"
class="mt-1 col-span-2" :value="old('tax_vat')"
autocomplete="tax_vat"
x-model="supplier.tax_vat"/>
<x-input-label for="contact_name" :value="__('common.Contact name')"/>
<x-text-input id="contact_name" name="contact_name" type="text"
class="mt-1 col-span-2" :value="old('contact_name')"
autocomplete="contact_name"
x-model="supplier.contact_name"/>
<x-input-label for="contact_phone" :value="__('common.Contact phone')"/>
<x-text-input id="contact_phone" name="contact_phone" type="text"
class="mt-1 col-span-2" :value="old('contact_phone')"
autocomplete="contact_phone"
x-model="supplier.contact_phone"/>
<x-input-label for="contact_email" :value="__('common.Contact email')"/>
<x-text-input id="contact_email" name="t" type="email"
class="mt-1 col-span-2" :value="old('contact_email')"
autocomplete="contact_email"
x-model="supplier.contact_email"/>
</div>
</div>
</form>
</section>
</div>
</div>
<!-- Incoming items -->
<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 relative">
{{ __('invoice.Invoice items') }}
<x-primary-button x-on:click="addItem();" class="absolute right-0">+</x-primary-button>
</h2>
</header>
<div class="flex flex-row items-end gap-2 w-full">
<x-input-label for="invoice_item.amount" :value="__('invoice.Amount')" class="w-1/12"/>
<x-input-label for="invoice_item.name" :value="__('invoice.Name') . ' / ' . __('invoice.Article number') . ' / ' . __('invoice.Description')" class="w-1/2"/>
<x-input-label for="invoice_item.price" :value="__('invoice.Price')" class="w-1/12"/>
<x-input-label for="invoice_item.discount" :value="__('invoice.Discount')" class="w-1/12"/>
<x-input-label for="invoice_item.tax" :value="__('invoice.Tax')" class="w-1/12"/>
<x-input-label for="invoice_item.tax" :value="__('invoice.Net')" class="w-1/12"/>
<div class="w-1/12 relative h-10"></div>
</div>
<div>
<template x-for="(item, index) in items">
<div>
<div class="flex flex-row items-end gap-2 w-full relative">
<x-text-input id="items[index].amount" name="items[index].amount" type="number"
class="mt-1 block w-1/12"
autofocus
x-model="items[index].amount"/>
<x-text-input id="items[index].name" name="items[index].name" type="text"
class="mt-1 block w-1/2"
autofocus
placeholder="{{ __('invoice.Name') }}"
x-model="items[index].name"/>
<x-text-input id="items[index].price" name="items[index].price" type="number"
class="mt-1 block w-1/12"
autofocus
x-model="items[index].price"/>
<x-text-input id="items[index].discount" name="items[index].discount" type="number"
class="mt-1 block w-1/12"
autofocus
x-model="items[index].discount"/>
<x-text-input id="items[index].tax" name="items[index].tax" type="number"
class="mt-1 block w-1/12"
autofocus
x-model="items[index].tax"/>
<x-text-input id="items[index].total" name="items[index].total" type="number"
class="mt-1 block w-1/12"
autofocus
x-model="items[index].total"/>
<div class="flex flex-row w-1/12 h-10 relative">
<x-danger-button x-on:click="deleteItem(index);" class="absolute right-0">
-
</x-danger-button>
</div>
</div>
<div class="flex flex-row gap-2">
<div class="w-1/12"></div>
<div class="flex flex-col w-1/2 gap-2">
<x-text-input id="items[index].article_number" name="items[index].article_number" type="text"
class="mt-1 block full+"
autofocus
placeholder="{{ __('invoice.Article number') }}"
x-model="items[index].article_number"/>
<textarea placeholder="{{ __('invoice.Description') }}"
name="items[index].description" x-model="items[index].description"
x-text="items[index].description"
class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm mt-1 block w-full"></textarea>
</div>
</div>
</div>
</template>
</div>
</section>
</div>
</div>
<!-- Incoming taxes -->
<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 relative">
{{ __('invoice.Tax items') }}
<x-primary-button x-on:click="addTax();" class="absolute right-0">+</x-primary-button>
</h2>
</header>
<div class="flex flex-row items-end gap-2 w-full">
<x-input-label for="invoice_item.amount" :value="__('invoice.Net')" class="w-1/6"/>
<x-input-label for="invoice_item.name" :value="__('invoice.Tax')" class="w-1/6"/>
<x-input-label for="invoice_item.price" :value="__('configuration.Taxrate')" class="w-1/6"/>
<x-input-label for="invoice_item.tax" :value="__('common.Currency code')" class="w-1/6"/>
<div class="w-1/12 relative h-10"></div>
</div>
<div>
<template x-for="(tax, index) in taxes">
<div class="flex flex-row items-end gap-2 w-full relative">
<x-text-input id="taxes[index].taxable_amount" name="taxes[index].taxable_amount" type="number"
class="mt-1 block w-1/6"
autofocus
x-model="taxes[index].taxable_amount"/>
<x-text-input id="taxes[index].amount" name="taxes[index].amount" type="number"
class="mt-1 block w-1/6"
autofocus
x-model="taxes[index].amount"/>
<x-text-input id="taxes[index].percentage" name="taxes[index].percentage" type="number"
class="mt-1 block w-1/6"
autofocus
x-model="taxes[index].percentage"/>
<x-text-input id="taxes[index].currency" name="taxes[index].currency" type="text"
class="mt-1 block w-1/6"
autofocus
placeholder="{{ __('invoice.Name') }}"
x-model="taxes[index].currency"/>
<div class="flex flex-row w-1/12 h-10 relative">
<x-danger-button x-on:click="deleteTax(index);" class="absolute right-0">
-
</x-danger-button>
</div>
</div>
</template>
</div>
</section>
</div>
</div>
</div>
</div>
</x-app-layout>
<script>
function incomingForm() {
return {
incoming_id: {!! $incoming->id !!},
incoming: {!! $incoming !!},
supplier: {!! $supplier !!},
items: {!! $items !!},
taxes: {!! $taxes !!},
addItem() {
let item = {
incoming_id: this.incoming_id,
name: '',
article_number: '',
description: '',
amount: 0,
discount: 0,
tax: 0,
price: 0,
total: 0
};
this.items.push(item);
},
addTax() {
let tax = {
incoming_id: this.incoming_id,
taxable_amount: 0,
amount: 0,
percentage: 0,
currency: 'EUR'
};
this.taxes.push(tax);
},
deleteItem(index) {
this.items.splice(index, 1);
},
deleteTax(index) {
this.taxes.splice(index, 1);
},
submit() {
axios.put('/incoming/' + this.incoming_id, {incoming: this.incoming, items: this.items, taxes: this.taxes, supplier: this.supplier})
.then(function(response) {
window.location.href = '/incoming';
})
}
}
}
</script>