393 lines
22 KiB
PHP
393 lines
22 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.Create 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 disabled
|
|
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 disabled
|
|
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 disabled
|
|
autocomplete="net" 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 disabled
|
|
autocomplete="gross" 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 disabled
|
|
autocomplete="tax" 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>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-4 sm:p-8 bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<p class="text-red-600 font-bold mb-8" x-text="message" x-show="error"></p>
|
|
|
|
<p x-show="success" x-transition
|
|
class="text-sm text-green-600 dark:text-green-400 mb-8">{{ __('form.Saved') }}</p>
|
|
|
|
<x-primary-button @click="submit">{{ __('form.Save') }}</x-primary-button>
|
|
<x-primary-button @click="submitAndContinue">{{ __('form.SaveAndContinue') }}</x-primary-button>
|
|
</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 w-1/2">
|
|
<x-input-label class="w-1/3" for="select_supplier" :value="__('incoming.Select supplier')"/>
|
|
<input list="all_suppliers" id="select_supplier" name="select_supplier" type="text" x-on:change="setSupplier();"
|
|
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"/>
|
|
<datalist id="all_suppliers" x-on:change="alert('hier');">
|
|
<template x-for="supplier in suppliers">
|
|
<option :value="supplier.name"></option>
|
|
</template>
|
|
</datalist>
|
|
</div>
|
|
|
|
<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 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.gross" :value="__('invoice.Gross')" class="w-1/6"/>
|
|
<x-input-label for="invoice_item.amount" :value="__('invoice.Net')" 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"/>
|
|
<x-input-label for="invoice_item.name" :value="__('invoice.Tax')" 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].gross" name="taxes[index].gross" type="number"
|
|
class="mt-1 block w-1/6"
|
|
autofocus x-on:blur="calculateFromGross(index);"
|
|
x-model="taxes[index].gross" />
|
|
|
|
<x-text-input id="taxes[index].taxable_amount" name="taxes[index].taxable_amount" type="number"
|
|
class="mt-1 block w-1/6"
|
|
autofocus x-on:blur="calculateFromNet(index);"
|
|
x-model="taxes[index].taxable_amount" />
|
|
|
|
<x-text-input id="taxes[index].percentage" name="taxes[index].percentage" type="number"
|
|
class="mt-1 block w-1/6"
|
|
autofocus x-on:blur="calculateFromNet(index);"
|
|
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 disabled
|
|
placeholder="{{ __('invoice.Name') }}"
|
|
x-model="taxes[index].currency"/>
|
|
|
|
<x-text-input id="taxes[index].amount" name="taxes[index].amount" type="number"
|
|
class="mt-1 block w-1/6"
|
|
autofocus disabled
|
|
x-model="taxes[index].amount"/>
|
|
|
|
<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: {},
|
|
supplier: {},
|
|
taxes: [],
|
|
suppliers: [],
|
|
|
|
success: false,
|
|
error: false,
|
|
message: '',
|
|
|
|
init() {
|
|
this.getSuppliers();
|
|
this.incoming = this.getInitialIncoming();
|
|
this.addTax();
|
|
},
|
|
|
|
getInitialIncoming() {
|
|
return {
|
|
invoice_number: 'R01',
|
|
issue_date: "{{ \Illuminate\Support\Facades\Date::now()->format('Y-m-d') }}",
|
|
due_date: "{{ \Illuminate\Support\Facades\Date::now()->addDays(14)->format('Y-m-d') }}",
|
|
invoice_type_code: '380',
|
|
currency_code: 'EUR',
|
|
net: 0.0,
|
|
gross: 0.0,
|
|
tax: 0.0
|
|
}
|
|
},
|
|
|
|
addTax() {
|
|
let tax = {
|
|
gross: 0,
|
|
taxable_amount: 0,
|
|
amount: 0,
|
|
percentage: 19,
|
|
currency: this.incoming.currency_code
|
|
};
|
|
this.taxes.push(tax);
|
|
},
|
|
|
|
getSuppliers() {
|
|
let vm = this;
|
|
axios.get('/supplier')
|
|
.then(function(response) {
|
|
vm.suppliers = response.data;
|
|
})
|
|
},
|
|
|
|
setSupplier() {
|
|
let id = document.querySelector('#select_supplier').value;
|
|
let supplier_key = Object.keys(this.suppliers).find(key => (this.suppliers[key].name == id));
|
|
this.supplier = this.suppliers[supplier_key];
|
|
},
|
|
|
|
calculateFromGross(index) {
|
|
this.taxes[index].taxable_amount = (this.taxes[index].gross * 100 / (100 + parseFloat(this.taxes[index].percentage))).toFixed(2);
|
|
this.calculateFromNet(index);
|
|
},
|
|
|
|
calculateFromNet(index) {
|
|
this.taxes[index].amount = (this.taxes[index].taxable_amount * this.taxes[index].percentage / 100).toFixed(2);
|
|
this.taxes[index].gross = (this.taxes[index].taxable_amount * (100 + parseFloat(this.taxes[index].percentage)) / 100).toFixed(2);
|
|
this.incoming.net = 0.0;
|
|
this.incoming.gross = 0.0;
|
|
this.incoming.tax = 0.0;
|
|
this.calculateSum();
|
|
},
|
|
|
|
calculateSum() {
|
|
let vm = this;
|
|
this.taxes.forEach(function(tax) {
|
|
vm.incoming.tax += parseFloat(tax.amount);
|
|
vm.incoming.net += parseFloat(tax.taxable_amount);
|
|
});
|
|
vm.incoming.gross = (vm.incoming.tax * 1 + vm.incoming.net * 1).toFixed(2);
|
|
},
|
|
|
|
deleteTax(index) {
|
|
this.taxes.splice(index, 1);
|
|
this.calculateSum();
|
|
},
|
|
|
|
submit() {
|
|
axios.post('/incoming', {incoming: this.incoming, taxes: this.taxes, supplier: this.supplier})
|
|
.then(function(response) {
|
|
window.location.href = '/incoming';
|
|
})
|
|
},
|
|
|
|
submitAndContinue() {
|
|
let vm = this;
|
|
axios.post('/incoming', {incoming: this.incoming, taxes: this.taxes, supplier: this.supplier})
|
|
.then(function(response) {
|
|
vm.success = true;
|
|
vm.error = false;
|
|
vm.message = '';
|
|
vm.taxes = [];
|
|
vm.supplier = {};
|
|
vm.incoming = vm.getInitialIncoming();
|
|
document.querySelector('#select_supplier').value = '';
|
|
vm.addTax();
|
|
window.setTimeout(function() {
|
|
vm.success = false;
|
|
}, 1000);
|
|
})
|
|
.catch(function(error) {
|
|
vm.error = true;
|
|
vm.message = error.response.data.message;
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|