@extends('layouts.app')

@section('content')
    <div class="">
        <main>
            <!-- INVOICE HEADER -->
            <div
                class="-mx-4 px-16 py-8 bg-white shadow-sm ring-1 ring-gray-900/5 sm:mx-0 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                <h2 class="text-xl font-semibold leading-6 text-gray-900">Fatura</h2>
                <dl class="mt-6 grid grid-cols-3 text-sm leading-6">
                    <div class="mt-6 border-t border-gray-900/5 pt-6 sm:pr-4">
                        <dt class="font-semibold text-gray-900">Gönderen</dt>
                        <dd class="mt-2 text-gray-500"><span class="font-medium text-gray-900">Acme, Inc.</span><br>7363
                            Cynthia Pass<br>Toronto, ON N3Y 4H8
                        </dd>
                    </div>
                    <div class="mt-6 border-t border-gray-900/5 pt-6 sm:pr-4">
                        <dt class="font-semibold text-gray-900">Alıcı</dt>
                        <dd class="mt-2 text-gray-500"><span class="font-medium text-gray-900">Acme, Inc.</span><br>7363
                            Cynthia Pass<br>Toronto, ON N3Y 4H8
                        </dd>
                    </div>
                    <div class="mt-6 border-t border-gray-900/5 pt-6 text-right">
                        <dt class="font-semibold text-gray-900">From</dt>
                        <p x-text="generalTotal()" class="mt-2 text-gray-800 text-xl"></p>
                    </div>
                </dl>
            </div>
            <!-- ROWS -->
            <div id="invoice"
                class="mx-8 my-6 px-6 py-10 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2"
                x-data="{
                            rows: [
                                    { quantity: 1, unitPrice: 100, taxRate: 20, discountRate: 0, discountAmount: 0 }
                                ],
                            totalForAllRows: 0,
                            addRow() {
                                this.rows.push({ quantity: 1, unitPrice: 0, taxRate: 0, discountRate: 0, discountAmount: 0 });
                            },
                            removeRow(index) {
                                this.rows.splice(index, 1);
                            },
                            calculateSubtotal(row) {
                                return (row.quantity * row.unitPrice) - row.discountAmount;
                            },
                            calculateTaxAmount(row) {
                                return this.calculateSubtotal(row) * row.taxRate / 100;
                            },
                            discountAmount(row) {
                                return (row.discountRate / 100) * (row.quantity * row.unitPrice);
                            },
                            calculateTotal(row) {
                                return this.calculateSubtotal(row) + this.calculateTaxAmount(row);
                            },
                            updateDiscountRate(row) {
                                row.discountRate = (row.discountAmount / (row.quantity * row.unitPrice)) * 100;
                            },
                            updateDiscountAmount(row) {
                                let unitPrice = row.unitPrice;
                                row.discountAmount = (row.discountRate / 100) * (row.quantity * unitPrice);
                            },
                            generalSubtotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateSubtotal(row), 0);
                            },
                            generalDiscountTotal() {
                                return this.rows.reduce((acc, row) => acc + this.discountAmount(row), 0);
                            },
                            generalVatTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateTaxAmount(row), 0);
                            },
                            generalTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateTotal(row), 0);
                            },
                       }"
                x-init="generalSubtotal(); generalDiscountTotal(); generalVatTotal(); generalTotal()"
            >
                <template x-for="(row, index) in rows" :key="index">
                    <div class="grid grid-cols-11 gap-2 mb-4">
                        <div class="relative col-start-1 col-span-2">
                            <label for="product_name"
                                   class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Ürün/Hizmet</label>
                            <select id="product_name" name="product_name"
                                    class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <option>United States</option>
                                <option selected>Canada</option>
                                <option>Mexico</option>
                            </select>
                        </div>
                        <div class="col-start-3 col-span-1">
                            <div class="relative">
                                <label for="quantity"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Miktar</label>
                                <input x-model="row.quantity" @input="calculateSubtotal(row); updateDiscountAmount(row)" @click="$event.target.select()"
                                       type="number" name="quantity" id="quantity"
                                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            </div>
                        </div>
                        <div class="relative col-start-4 col-span-1">
                            <label for="unit"
                                   class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Birim</label>
                            <select id="unit" name="unit"
                                    class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <option selected>Adet</option>
                                <option>Kilogram</option>
                                <option>Litre</option>
                            </select>
                        </div>
                        <div class="col-start-5 col-span-1">
                            <div class="relative">
                                <label for="unit_price"
                                       class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Birim
                                    Fiyat</label>
                                <input
                                    x-model="row.unitPrice" @input="updateDiscountAmount(row)" @click="$event.target.select()"
                                    type="text" name="unit_price" id="unit_price"
                                    class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                    placeholder="0">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <span class="text-gray-500 sm:text-sm">TRL</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-start-6 col-span-1">
                            <div class="relative">
                                <label for="discount_rate"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">İnd.Oranı</label>
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">%</span>
                                </div>
                                <input x-model="row.discountRate" @input="updateDiscountAmount(row)" @click="$event.target.select()"
                                       type="number" name="discount_rate" id="discount_rate"
                                       class="block w-full pl-6 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            </div>
                        </div>
                        <div class="col-start-7 col-span-1">
                            <div class="relative">
                                <label for="discount_amount"
                                       class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">İnd.Tutarı</label>
                                <input x-model="row.discountAmount.toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4})"
                                       @input="updateDiscountRate(row)" @click="$event.target.select()"
                                       type="text" name="discount_amount" id="discount_amount"
                                       class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                                       placeholder="0">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <span class="text-gray-500 sm:text-sm">TRL</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-start-8 col-span-1">
                            <div class="relative">
                                <label for="subtotal"
                                       class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Ara
                                    Toplam</label>
                                <input
                                    x-model="calculateSubtotal(row).toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4})"
                                    disabled type="text" name="subtotal"
                                    id="subtotal"
                                    class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-100 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <span class="text-gray-500 sm:text-sm">TRL</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-start-9 col-span-1">
                            <div class="relative">
                                <label for="tax_rate"
                                       class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Vergi
                                    Oranı</label>
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <span class="text-gray-500 sm:text-sm">%</span>
                                </div>
                                <input x-model="row.taxRate" @input="generalTotal()" @click="$event.target.select()"
                                       type="number" name="tax_rate"
                                       id="tax_rate"
                                       class="block w-full pl-6 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                            </div>
                        </div>
                        <div class="col-start-10 col-span-1">
                            <div class="relative">
                                <label for="tax_amount"
                                       class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Vergi
                                    Tutarı</label>
                                <input
                                    x-model="calculateTaxAmount(row).toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4})"
                                    disabled type="text" name="tax_amount"
                                    id="tax_amount"
                                    class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-100 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <span class="text-gray-500 sm:text-sm">TRL</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-start-11 col-span-1">
                            <div class="relative">
                                <label for="total_price"
                                       class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Toplam</label>
                                <input
                                    x-model="calculateTotal(row).toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4})"
                                    disabled type="text" name="total_price"
                                    id="total_price"
                                    class="price-mask block w-full text-right rounded-md border-0 py-1.5 pr-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-100 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <span class="text-gray-500 sm:text-sm">TRL</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-start-12 col-span-1">
                            <button @click="removeRow(index)" type="button"
                                    class="rounded-full rotate-45 mt-1 bg-rose-200 p-1 text-white shadow-sm hover:bg-rose-400 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600">
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path
                                        d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </template>
                <div class="flex justify-center">
                    <button @click="addRow()" type="button"
                            class="rounded-full bg-stone-300 transition-all p-1 text-white shadow-sm hover:bg-stone-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-stone-600">
                        <svg class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path
                                d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"/>
                        </svg>
                    </button>
                </div>
                <div class="grid grid-cols-4 gap-2 mb-4">
                    <div class="col-start-4 text-right pr-10">
                        <span>Ara Toplam:</span><span x-text="generalSubtotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })" class="mt-2 mx-2 text-gray-800 text-xl font-bold"></span><span>₺</span>
                        <br>
                        <span>İndirim:</span><span x-text="generalDiscountTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })" class="mt-2 mx-2 text-gray-800 text-xl font-bold"></span><span>₺</span>
                        <br>
                        <span>Vergi:</span><span x-text="generalVatTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })" class="mt-2 mx-2 text-gray-800 text-xl font-bold"></span><span>₺</span>
                        <br>
                        <span>Fatura Tutarı:</span><span x-text="generalTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })" class="mt-2 mx-2 text-gray-800 text-2xl font-bold"></span><span>₺</span>
                    </div>
                </div>
            </div>
        </main>
    </div>
@endsection

@section('scripts')
    <script>
        // Tüm .price-mask class'ına sahip input elementlerini seç
        var inputs = document.querySelectorAll('.price-mask');
        // Her bir input elementi için bir event listener ekleyin
        inputs.forEach(input => {
            input.addEventListener('input', function (e) {
                // Kullanıcının girdiği değeri al
                var value = this.value.replace(/,/g, '.');
                // Değeri bir sayıya dönüştür
                value = parseFloat(value);
                // Sayıyı belirli bir formatla görüntüle
                this.value = value.toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 4 });
            });
        });
    </script>
@endsection

@section('outerScripts')
    <script>

    </script>
@endsection