@extends('layouts.app')

@section('head')
    <script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
@endsection

@section('content')
    <div class="" x-data="{
                    selectedCurrency: '{{ $offer->currency ?? 'TRL' }}',
                    exchangeRate: '{{ $offer->ex_rate ?? '1.00' }}',
                    updateExchangeRate() {
                        if (this.selectedCurrency === 'TRL') {
                            this.exchangeRate = '1.00';
                        } else if (this.selectedCurrency === 'USD') {
                            this.exchangeRate = {{ $ex_rate['USD'] }};
                        } else if (this.selectedCurrency === 'EUR') {
                            this.exchangeRate = {{ $ex_rate['EUR'] }};
                        } else if (this.selectedCurrency === 'GBP') {
                            this.exchangeRate = {{ $ex_rate['GBP'] }};
                        }
                    }
                }">
        <main>
            <form action="{{ route('offers.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input hidden="" name="is_new_offer" value="no">
                <input hidden="" name="group_id" value="{{ $offer->group_id }}">
                <!-- HEADER -->
                <div class="-mx-4 px-16 py-8 bg-white shadow-sm ring-1 ring-gray-900/5 sm:mx-0 lg:col-span-2 lg:row-span-2 lg:row-end-2">
                    <div class="grid grid-cols-2 mx-auto text-sm leading-6">
                        <div class="grid grid-cols-3 sm:pr-4 uppercase">
                            <div class="col-span-2 text-lg font-semibold text-gray-900">İŞLETME</div>
                            <div class="col-span-2 mt-2">
                                <div class="relative">
                                    <input id="company_id" type="text" value="{{ $company->name }}" disabled
                                           class="bg-stone-100 w-full rounded-md border-0 py-1.5 pl-3 pr-12 text-gray-400 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase"
                                           aria-controls="options" aria-expanded="false">
                                    <input hidden name="company_id" value="{{ $company->id }}">
                                </div>
                            </div>
                            <div class="col-span-2 mt-2">
                                <label for="person" class="block pb-1 text-sm font-medium leading-6 text-gray-900">YETKİLİ</label>
                                <div class="flex rounded-md shadow-sm">
                                    <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm">SAYIN</span>
                                    <input type="text" name="person" id="person" value="{{ $offer->person ?? '' }}"
                                           class="block bg-stone-50 w-full min-w-0 flex-1 rounded-none rounded-r-md border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase">
                                </div>
                            </div>
                            <div class="col-span-3 mt-2">
                                <label for="title" class="block pb-1 text-sm font-medium leading-6 text-stone-700">TEKLİF BAŞLIĞI</label>
                                <div class="flex rounded-md shadow-sm">
                                    <input type="text" name="title" id="title"
                                           class="block bg-stone-50 w-full min-w-0 flex-1 rounded-md border-0 py-1.5 text-stone-700 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase"
                                           placeholder="ARAÇ KİRALAMA TEKLİFİ" value="{{ $offer->title ?? '' }}">
                                </div>
                            </div>
                            <div class="col-span-1 mt-2">
                                <label for="phone" class="block text-sm font-medium leading-6 text-stone-700">İLETİŞİM</label>
                                <div class="flex rounded-md shadow-sm">
                                    <input type="text" name="phone" id="phone"
                                           class="block bg-stone-50 w-full min-w-0 flex-1 rounded-md border-0 py-1.5 text-stone-700 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase"
                                           placeholder="0555 111 2233" value="{{ $offer->phone ?? '' }}">
                                </div>
                            </div>
                            <div class="col-span-2 mt-2 pl-2">
                                <label for="address" class="block text-sm font-medium leading-6 text-stone-700">ADRES</label>
                                <div class="flex rounded-md shadow-sm">
                                    <input type="text" name="address" id="address"
                                           class="block bg-stone-50 w-full min-w-0 flex-1 rounded-md border-0 py-1.5 text-stone-700 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6 uppercase"
                                           placeholder="ADRES BİLGİLERİ" value="{{ $offer->address ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <div class="flex-1 text-right">
                            <dt class="text-lg font-semibold text-gray-900">TEKLİF BİLGİLERİ</dt>
                            <dd class="grid gap-1 justify-items-end text-left mt-2 text-gray-500">
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="date" class="block text-sm font-medium leading-6 text-gray-500">TARİHİ:</label>
                                    <input type="date" id="date" name="date"
                                           value="{{ $offer->date }}"
                                           class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="due_date" class="block text-sm font-medium leading-6 text-gray-500">SON GEÇERLİLİK TARİHİ:</label>
                                    <input type="date" id="due_date" name="due_date"
                                           value="{{ $offer->due_date }}"
                                           class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                                <div class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="currency" class="block text-sm font-medium leading-6 text-gray-500">PARA BİRİMİ:</label>
                                    <select id="currency" name="currency" x-model="selectedCurrency" @change="updateExchangeRate()"
                                            class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                        <option value="TRL">TRL</option>
                                        <option value="USD">USD</option>
                                        <option value="EUR">EUR</option>
                                        <option value="GBP">GBP</option>
                                    </select>
                                </div>
                                <div x-show="selectedCurrency != 'TRL' " class="flex flex-wrap items-center gap-x-3 font-medium text-gray-900">
                                    <label for="ex_rate"
                                           class="block text-sm font-medium leading-6 text-gray-500">DÖVİZ KURU:</label>
                                    <input type="text" id="ex_rate" name="ex_rate" x-model="exchangeRate" @click="$event.target.select()"
                                           placeholder="1" value="1"
                                           class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </dd>
                        </div>
                    </div>
                </div>
                <!-- ROWS -->
                <div id="invoice"
                     class="mx-auto m-4 px-6 max-w-full pt-10 pb-6 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: {{ json_encode($offer_lines) }},
                            totalForAllRows: 0,
                            showProducts: false,
                            currentIndex: null,
                            addRow() {
                                this.rows.push({ product_name: '', product_id: '', quantity: 1, unit: 'pcs', unit_price: 100, discount_rate: 0, discount_amount: 0, tax_rate: 0, tax_amount: 0 });
                            },
                            removeRow(index) {
                                if (this.rows[index]) {
                                    this.rows.splice(index, 1);
                                }
                            },
                            isRowsEmpty() {
                                return this.rows.length === 0;
                            },

                            discountAmount(row) {
                                return (row.discount_rate / 100) * (row.quantity * row.unit_price);
                            },
                            updateDiscountRate(row) {
                                row.discount_rate = (row.discount_amount / (row.quantity * row.unit_price)) * 100;
                            },
                            updateDiscountAmount(row) {
                                row.discount_amount = (row.discount_rate / 100) * (row.quantity * row.unit_price);
                            },
                            updateTaxRate(row) {
                                row.tax_amount = (row.tax_rate / 100) * (row.quantity * row.unit_price);
                            },
                            updateTaxAmount(row) {
                                row.tax_rate = (row.tax_amount / (row.quantity * row.unit_price)) * 100;
                            },


                            calculateBasePrice(row) {
                                return (row.quantity * row.unit_price);
                            },
                            calculateDiscount(row) {
                                return (row.quantity * row.unit_price) * (row.discount_rate / 100);
                            },
                            calculateTaxAmount(row) {
                                return this.calculateSubtotal(row) * row.tax_rate / 100;
                            },
                            calculateTotal(row) {
                                return this.calculateSubtotal(row) + this.calculateTaxAmount(row);
                            },
                            calculateSubtotal(row) {
                                return (row.quantity * row.unit_price) - (row.quantity * row.unit_price) * (row.discount_rate / 100);
                            },

                            exSubTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateBasePrice(row), 0);
                            },
                            exDiscountTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateDiscount(row), 0);
                            },
                            exTaxTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateTaxAmount(row), 0);
                            },
                            exTotal() {
                                return this.rows.reduce((acc, row) => acc + this.calculateTotal(row), 0);
                            },

                            trlDiscountTotal() {
                                return this.exDiscountTotal() * this.exchangeRate;
                            },
                            trlSubTotal() {
                                return this.exSubTotal() * this.exchangeRate;
                            },
                            trlTaxTotal() {
                                return this.exTaxTotal() * this.exchangeRate;
                            },
                            trlTotal() {
                                return this.exTotal() * this.exchangeRate;
                            }
                       }"
                     x-init="trlSubtotal(); exTotal(); trlTotal()">

                    <template x-for="(row, index) in rows" :key="index">
                        <div class="grid grid-cols-12 gap-2 mb-4">
                            {{--ÜRÜN & ADET--}}
                            <div x-data="productCombobox(rows, currentIndex)" class="relative col-start-1 col-span-3">
                                <label :for="'product_name_' + index"
                                       class="absolute -top-2 left-2 inline-block bg-gradient-to-b from-white to-stone-50 px-1 text-xs font-medium text-gray-400">Ürün/Hizmet</label>
                                <input :id="'product_name_' + index" :name="'rows[' + index + '][product_name]'" type="text"
                                       class="w-full bg-stone-50 rounded-md border-0 py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
                                       role="combobox" aria-controls="options" aria-expanded="false"
                                       x-model="row.product_name" @change="handleProductChange($event, index)"
                                       @click="showProducts = true; currentIndex = index" @input="searchTerm = $event.target.value; filterProducts(index)">
                                <input hidden :name="'rows[' + index + '][product_id]'" :value="row.product_id">

                                <button @click="showProducts = !showProducts; currentIndex = index" type="button"
                                        class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
                                    <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
                                         aria-hidden="true">
                                        <path fill-rule="evenodd"
                                              d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                                              clip-rule="evenodd"/>
                                    </svg>
                                </button>

                                {{--ÜRÜNLER--}}
                                <ul x-show="showProducts && currentIndex === index" @click.away="showProducts = false"
                                    class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                    id="options" role="listbox">
                                    <template x-for="(product, productIndex) in filteredProducts[index]" :key="productIndex">
                                        <li @click="rows[currentIndex].product_name = product.name; rows[currentIndex].product_id = product.id; showProducts = false"
                                            class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 transition-all hover:bg-stone-50"
                                            role="option" tabindex="-1">
                                            <span class="block truncate" x-text="product.name"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                            <div class="col-start-4 col-span-1">
                                <div class="relative">
                                    <label :for="'quantity_' + index"
                                           class="absolute -top-2 left-2 inline-block bg-gradient-to-b from-white to-stone-50 px-1 text-xs font-medium text-gray-400">Miktar</label>
                                    <input x-model="row.quantity"
                                           @click="$event.target.select()"
                                           @input="updateDiscountAmount(row); updateDiscountRate(row)"
                                           type="number" :name="'rows[' + index + '][quantity]'"
                                           :id="'quantity_' + index"
                                           class="bg-stone-50 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-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                            {{--BİRİM & FİYAT--}}
                            <div class="col-start-5 col-span-1 relative">
                                <label :for="'unit_' + index"
                                       class="absolute -top-2 left-2 inline-block bg-gradient-to-b from-white to-stone-50 px-1 text-xs font-medium text-gray-400">Birim</label>
                                <select :id="'unit_' + index" :name="'rows[' + index + '][unit]'"
                                        class="bg-stone-50 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-sky-600 sm:text-sm sm:leading-6">
                                    <option value="pcs" selected>Adet</option>
                                    <option value="kg">Kilogram</option>
                                    <option value="lt">Litre</option>
                                    <option value="pack">Koli</option>
                                    <option value="hour">Saat</option>
                                    <option value="day">Gün</option>
                                    <option value="week">Hafta</option>
                                    <option value="month">Ay</option>
                                    <option value="year">Yıl</option>
                                </select>
                            </div>
                            <div class="col-start-6 col-span-1">
                                <div class="relative">
                                    <label :for="'unit_price_' + index"
                                           class="absolute -top-2 right-2 inline-block bg-gradient-to-b from-white to-stone-50 px-1 text-xs font-medium text-gray-400">Birim
                                        Fiyat</label>
                                    <input x-model="row.unit_price"
                                           @click="$event.target.select()"
                                           @input="updateDiscountAmount(row); updateDiscountRate(row)"
                                           type="text" :name="'rows[' + index + '][unit_price]'"
                                           :id="'unit_price_' + index"
                                           class="price-mask bg-stone-50 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-sky-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" x-text="selectedCurrency">TRL</span>
                                    </div>
                                </div>
                            </div>
                            {{--İNDİRİM--}}
                            <div class="col-start-7 col-span-1">
                                <div class="relative">
                                    <label :for="'discount_rate_' + index"
                                           class="absolute -top-2 left-2 inline-block bg-gradient-to-b from-white to-stone-50 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.discount_rate"
                                           @input="updateDiscountAmount(row)"
                                           @click="$event.target.select()"
                                           type="number" :name="'rows[' + index + '][discount_rate]'"
                                           :id="'discount_rate_' + index"
                                           class="bg-stone-50 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-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                            <div class="col-start-8 col-span-1">
                                <div class="relative">
                                    <label :for="'discount_amount_' + index"
                                           class="absolute -top-2 right-2 inline-block bg-gradient-to-b from-white to-stone-50 px-1 text-xs font-medium text-gray-400">İnd. Tutarı</label>
                                    <input
                                        x-model.number="row.discount_amount"
                                        @input="updateDiscountRate(row)"
                                        @click="$event.target.select()"
                                        type="text" :name="'rows[' + index + '][discount_amount]'"
                                        :id="'discount_amount_' + index"
                                        class="price-mask bg-stone-50 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-sky-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" x-text="selectedCurrency">TRL</span>
                                    </div>
                                </div>
                            </div>
                            {{--ARA TOPLAM--}}
                            <div class="col-start-9 col-span-1">
                                <div class="relative">
                                    <label :for="'subtotal_' + index"
                                           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.number="calculateSubtotal(row)"
                                        readonly type="text" :name="'rows[' + index + '][subtotal]'"
                                        :id="'subtotal_' + index"
                                        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 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" x-text="selectedCurrency">TRL</span>
                                    </div>
                                </div>
                            </div>
                            {{--VERGİ--}}
                            <div class="col-start-10 col-span-1">
                                <div class="relative">
                                    <label :for="'tax_rate_' + index"
                                           class="absolute -top-2 left-2 inline-block bg-gradient-to-b from-white to-stone-50 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.tax_rate"
                                           @input="calculateTotal(row)"
                                           @click="$event.target.select()"
                                           type="number" :name="'rows[' + index + '][tax_rate]'"
                                           :id="'tax_rate_' + index"
                                           class="bg-stone-50 block w-full pl-6 rounded-md border-0 py-1.5 text-stone-700 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
                                </div>
                            </div>
                            <div class="col-start-11 col-span-1">
                                <div class="relative">
                                    <label :for="'tax_amount_' + index"
                                           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.number="calculateTaxAmount(row)"
                                           @input="updateTaxRate(row)"
                                           readonly type="text" :name="'rows[' + index + '][tax_amount]'"
                                           :id="'tax_amount_' + index"
                                           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 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" x-text="selectedCurrency">TRL</span>
                                    </div>
                                </div>
                            </div>
                            {{--TOPLAM FİYAT--}}
                            <div class="col-start-12 col-span-1">
                                <div class="relative">
                                    <label :for="'total_price_' + index"
                                           class="absolute -top-2 right-2 inline-block bg-white px-1 text-xs font-medium text-gray-400">Toplam
                                        Fiyat</label>
                                    <input x-model="calculateTotal(row)"
                                           readonly type="text" :name="'rows[' + index + '][total_price]'"
                                           :id="'total_price_' + index"
                                           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 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" x-text="selectedCurrency">TRL</span>
                                    </div>
                                </div>
                            </div>
                            {{--SİLME--}}
                            <div class="col-start-13 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>

                    {{--SATIR EKLE--}}
                    <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>

                    {{--ALT TOPLAMLAR--}}
                    <div x-show="trlSubTotal() !== 0">
                        <div class="grid justify-items-end tracking-tighter pr-10">

                            <div class="flex gap-x-2 mt-3 justify-end items-center">
                                <div>
                                    <span>Ara Toplam:</span>
                                </div>
                                <div class="w-48">
                                    <div class="text-end">
                                        <span x-text="trlSubTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-800 text-xl font-bold"></span>
                                        <span>TRL</span>
                                    </div>
                                    <div class="text-end">
                                        <span x-show="selectedCurrency !== 'TRL'"
                                              x-text="exSubTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-500"></span>
                                        <span x-show="selectedCurrency !== 'TRL'" class="text-gray-500 text-xs" x-text="selectedCurrency"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex gap-x-2 justify-end items-center">
                                <div>
                                    <span>İndirimler:</span>
                                </div>
                                <div class="w-48">
                                    <div class="text-end">
                                        <span x-text="trlDiscountTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-800 text-xl font-bold"></span>
                                        <span>TRL</span>
                                    </div>
                                    <div class="text-end">
                                        <span x-show="selectedCurrency !== 'TRL'"
                                              x-text="exDiscountTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-500"></span>
                                        <span x-show="selectedCurrency !== 'TRL'" class="text-gray-500 text-xs" x-text="selectedCurrency"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex gap-x-2 justify-end items-center">
                                <div>
                                    <span>Vergiler:</span>
                                </div>
                                <div class="w-48">
                                    <div class="text-end">
                                        <span x-text="trlTaxTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-800 text-xl font-bold"></span>
                                        <span>TRL</span>
                                    </div>
                                    <div class="text-end">
                                        <span x-show="selectedCurrency !== 'TRL'"
                                              x-text="exTaxTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-500"></span>
                                        <span x-show="selectedCurrency !== 'TRL'" class="text-gray-500 text-xs" x-text="selectedCurrency"></span>
                                    </div>
                                </div>
                            </div>
                            <div class="flex gap-x-2 justify-end items-center">
                                <div class="flex-none text-end">
                                    <div>Teklif Tutarı:</div>
                                </div>
                                <div class="w-48">
                                    <div class="text-end">
                                        <span x-text="trlTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-800 text-2xl font-bold"></span>
                                        <span>TRL</span>
                                    </div>
                                    <div class="text-end">
                                        <span x-show="selectedCurrency !== 'TRL'"
                                              x-text="exTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                              class="ml-2 text-gray-500"></span>
                                        <span x-show="selectedCurrency !== 'TRL'" class="text-gray-500 text-xs" x-text="selectedCurrency"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="sr-only">
                                <span>TL Ara Toplam<input name="trl_sub" x-model="trlSubTotal()"></span>
                                <span>TL İndirim Toplam<input name="trl_discount" x-model="trlDiscountTotal()"></span>
                                <span>TL Vergiler Toplam<input name="trl_tax" x-model="trlTaxTotal()"></span>
                                <span>TL Genel Toplam<input name="trl_total" x-model="trlTotal()"></span>

                                <span>EX Ara Toplam<input name="ex_sub" x-model="exSubTotal()"></span>
                                <span>EX İndirim Toplam<input name="ex_discount" x-model="exDiscountTotal()"></span>
                                <span>EX Vergiler Toplam<input name="ex_tax" x-model="exTaxTotal()"></span>
                                <span>EX Genel Toplam<input name="ex_total" x-model="exTotal()"></span>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- FOOTER -->
                <div id="footer"
                     class="mx-auto flex mt-4 p-6 max-w-7xl pt-6 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                    <div class="w-full">
                        <label for="note" class="block text-lg font-semibold text-gray-900">ALT BİLGİLER</label>
                        <div class="mt-2">
                            <textarea name="note" id="note">
                                {!! $offer->note !!}
                            </textarea>
                        </div>
                    </div>
                </div>
                <!-- BUTTONS -->
                <div id="footer"
                     class="mx-auto flex gap-3 justify-end mt-4 p-6 max-w-7xl pt-6 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">
                    @include('modals.cancel', [
                        'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                        'subtitle' => 'DEVAM ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                        'route' => route('dashboard'),
                        'button' => 'VAZGEÇ',
                        'cancel' => 'VAZGEÇ',
                        'confirm' => 'EVET, DEVAM ET'
                        ])
                    @include('modals.confirm', [
                        'title' => 'GÜNCEL TEKLİF OLUŞTURULACAK',
                        'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                        'route' => '#',
                        'button' => 'GÜNCELLE',
                        'cancel' => 'VAZGEÇ',
                        'confirm' => 'EVET, GÜNCELLE'
                        ])
                </div>
            </form>
        </main>
    </div>
@endsection

@section('scripts')
    <script>
        //FİYAT MASKE
        var inputs = document.querySelectorAll('.price-mask');
        inputs.forEach(input => {
            input.addEventListener('input', function (e) {
                var value = this.value.replace(/,/g, '.');
                value = parseFloat(value);
                this.value = value.toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 4});
            });
        });

        //İŞLETME COMBOBOX
        function companyCombobox() {
            return {
                search: '',
                isOpen: false,
                companies: @json($companies_all),
                filteredCompanies: [],
                selectedCompanyId: null,
                init() {
                    this.filteredCompanies = this.companies;
                },
                toggleDropdown() {
                    this.isOpen = !this.isOpen;
                },
                filterCompanies() {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    const normalizeString = (str) => {
                        return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(char => {
                            return turkishCharMap[char] || char;
                        }).join('');
                    };

                    const searchLower = normalizeString(this.search);
                    this.filteredCompanies = this.companies.filter(company => {
                        const normalizedCompanyName = normalizeString(company.name);
                        return searchLower.split('').every(char => normalizedCompanyName.includes(char));
                    });
                    this.isOpen = true;
                },
                selectCompany(company) {
                    this.search = company.name;
                    this.selectedCompanyId = company.id;
                    this.isOpen = false;
                }
            }
        }

        //ÜRÜN COMBOBOX
        function productCombobox(rows, currentIndex) {
            return {
                searchTerm: '',
                products: @json($product_and_services_all),
                filteredProducts: [],
                rows: rows,
                showProducts: false,
                currentIndex: currentIndex,
                init() {
                    this.filteredProducts = this.rows.map(() => this.products);
                },
                normalizeString(str) {
                    const turkishCharMap = {
                        'i': 'iı',
                        'ı': 'iı',
                        's': 'sş',
                        'ş': 'sş',
                        'g': 'gğ',
                        'ğ': 'gğ',
                        'u': 'uü',
                        'ü': 'uü',
                        'c': 'cç',
                        'ç': 'cç',
                        'o': 'oö',
                        'ö': 'oö'
                    };

                    return str.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').split('').map(char => {
                        return turkishCharMap[char] || char;
                    }).join('');
                },
                filterProducts(index) {
                    const searchLower = this.normalizeString(this.searchTerm);
                    this.filteredProducts[index] = this.products.filter(product => {
                        const normalizedProductName = this.normalizeString(product.name);
                        return searchLower.split('').every(char => normalizedProductName.includes(char));
                    });
                },
                handleProductChange(event, index) {
                    const selectedValue = event.target.value;
                    const normalizedSelectedValue = this.normalizeString(selectedValue);
                    const productExists = this.products.some(product => this.normalizeString(product.name) === normalizedSelectedValue);

                    if (!productExists) {
                        this.rows[index].product_name = `${selectedValue} (yeni ürün)`;
                    } else {
                        this.rows[index].product_name = selectedValue;
                    }
                }
            }
        }

        //TINYMCE
        tinymce.init({
            selector: 'textarea',
            plugins: 'autoresize',
            toolbar: 'undo redo | bold italic underline strikethrough | align | removeformat',
            menubar: false,
            statusbar: false,
            //arka plan rengi
            content_style: 'body { background-color: rgb(250 250 249); }',
        });
    </script>
@endsection

@section('outerScripts')
    <script>

    </script>
@endsection