@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: 'TRL',
                    exchangeRate: '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
            <!--HEADER-->
            <div
                class="px-16 py-8 -mx-4 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 uppercase sm:pr-4">
                        <div class="col-span-2 pb-4 text-4xl font-extrabold text-stone-700">TEKLİF</div>
                        @if($company == null)
                        <div class="col-span-2 mt-2" x-data="companyCombobox()" x-init="init()">
                            <label for="person"
                                class="block text-sm font-medium leading-6 text-stone-700">İŞLETME</label>
                            <div class="relative">
                                <input id="combobox" type="text"
                                    class="bg-stone-50 w-full rounded-md border-0 py-1.5 pl-3 pr-12 text-stone-700 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="search"
                                    @input="filterCompanies">
                                <input type="hidden" name="company_id" x-model="selectedCompanyId">
                                <input type="hidden" name="company_name" :value="search">
                                <button type="button"
                                    class="absolute inset-y-0 right-0 flex items-center px-2 rounded-r-md focus:outline-none"
                                    @click="toggleDropdown">
                                    <svg class="w-5 h-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>
                                <ul class="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                                    id="options" role="listbox" x-show="isOpen" @click.away="isOpen = false">
                                    <template x-for="(company, index) in filteredCompanies" :key="index">
                                        <li class="relative py-2 pl-3 cursor-default select-none pr-9 text-stone-700"
                                            role="option" tabindex="-1" @click="selectCompany(company)">
                                            <span class="block truncate" x-text="company.name"></span>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                        </div>
                        @else
                        <div class="col-span-2 mt-2">
                            <label for="person"
                                class="block text-sm font-medium leading-6 text-stone-700">İŞLETME</label>
                            <div class="flex mt-2 rounded-md shadow-sm">
                                <input type="text" name="company" id="company" readonly
                                    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"
                                    value="{{ $company->name }}">
                                <input type="hidden" name="company_id" value="{{ $company->id }}">
                            </div>
                        </div>
                        @endif
                        <div class="col-span-2 mt-2">
                            <label for="person"
                                class="block text-sm font-medium leading-6 text-stone-700">YETKİLİ</label>
                            <div class="flex rounded-md shadow-sm">
                                <span
                                    class="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-md sm:text-sm">SAYIN</span>
                                <input type="text" name="person" id="person"
                                    class="block bg-stone-50 w-full min-w-0 flex-1 rounded-none rounded-r-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="ALİ KAYA" value="{{ $opportunity->contact ?? '' }}">
                            </div>
                        </div>
                        <div class="col-span-3 mt-2">
                            <label for="title" class="block 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="">
                            </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">
                            </div>
                        </div>
                        <div class="col-span-2 pl-2 mt-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İ">
                            </div>
                        </div>
                        @if($opportunity != null)
                        <div class="col-span-3 mt-2">
                            <label for="content" class="block text-sm font-medium leading-6 text-stone-700">FIRSAT
                                NOTU</label>
                            <div class="">
                                <label id="content"
                                    class="block w-full px-4 py-3 text-base tracking-tighter normal-case border-0 rounded-md shadow-sm bg-stone-50 text-stone-700 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
                                    {{ $opportunity->content }}
                                </label>
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="text-right">
                        <dt class="text-lg font-semibold text-stone-700">TEKLİF BİLGİLERİ</dt>
                        <dd class="grid gap-1 mt-2 text-left text-gray-500 justify-items-end">
                            <div class="flex flex-wrap items-center font-medium gap-x-3 text-stone-700">
                                <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="{{ $today }}"
                                    class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 px-3 text-stone-700 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 font-medium gap-x-3 text-stone-700">
                                <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="{{ \Carbon\Carbon::now()->addDays(15)->format('Y-m-d') }}"
                                    class="bg-stone-50 min-w-64 block rounded-md border-0 py-0.5 px-3 text-stone-700 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 font-medium gap-x-3 text-stone-700">
                                <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-stone-700 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-sky-600 sm:text-sm sm:leading-6">
                                    <option value="TRL" selected>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 font-medium gap-x-3 text-stone-700">
                                <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-stone-700 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="max-w-full px-6 pt-10 pb-6 m-4 mx-auto 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: [
{{--                                    { product_name: '', product_id: '', quantity: 1, unit_price: 0.00 }--}}
                                ],
                            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);
                            },
                            calculateSubtotal(row) {
                                return (row.quantity * row.unit_price) - row.discount_amount;
                            },
                            calculateTaxAmount(row) {
                                return this.calculateSubtotal(row) * row.tax_rate / 100;
                            },
                            calculateTotal(row) {
                                return this.calculateSubtotal(row) + this.calculateTaxAmount(row);
                            },

                            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-11 gap-2 mb-4">
                        {{--ÜRÜN & ADET--}}
                        <div x-data="productCombobox(rows, currentIndex)" x-init="init()"
                            class="relative col-span-3 col-start-1">
                            <label :for="'product_name_' + index"
                                class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">Ü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-stone-700 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 type="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 px-2 rounded-r-md focus:outline-none">
                                <svg class="w-5 h-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>

                            <ul x-show="showProducts && currentIndex === index" @click.away="showProducts = false"
                                class="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 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 py-2 pl-3 transition-all cursor-default select-none pr-9 text-stone-700 hover:bg-stone-50"
                                        role="option" tabindex="-1">
                                        <span class="block truncate" x-text="product.name"></span>
                                    </li>
                                </template>
                            </ul>
                        </div>
                        <div class="col-span-1 col-start-4">
                            <div class="relative">
                                <label :for="'quantity_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">Miktar</label>
                                <input x-model="row.quantity" @click="$event.target.select()" type="number"
                                    :name="'rows[' + index + '][quantity]'" :id="'quantity_' + index"
                                    class="bg-stone-50 block w-full 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>
                        {{--BİRİM & FİYAT--}}
                        <div class="relative col-span-1 col-start-5">
                            <label :for="'unit_' + index"
                                class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">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-stone-700 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-span-1 col-start-6">
                            <div class="relative">
                                <label :for="'unit_price_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 right-2 bg-gradient-to-b from-white to-stone-50">Birim
                                    Fiyat</label>
                                <input x-model="row.unit_price" @click="$event.target.select()" 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-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"
                                    placeholder="0">
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm" x-text="selectedCurrency">TRL</span>
                                </div>
                            </div>
                        </div>
                        {{--İNDİRİM--}}
                        <div class="col-span-1 col-start-7">
                            <div class="relative">
                                <label :for="'discount_rate_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">İnd.
                                    Oranı</label>
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm">%</span>
                                </div>
                                <input x-model="row.discount_rate" @input="updateDiscountAmount(row)"
                                    @click="$event.target.select()" type="text"
                                    :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-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-span-1 col-start-8">
                            <div class="relative">
                                <label :for="'discount_amount_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 right-2 bg-gradient-to-b from-white to-stone-50">İ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-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"
                                    placeholder="0">
                                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm" x-text="selectedCurrency">TRL</span>
                                </div>
                            </div>
                        </div>
                        {{--ARA TOPLAM--}}
                        <div class="col-span-1 col-start-9">
                            <div class="relative">
                                <label :for="'subtotal_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 bg-white -top-2 right-2">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="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm" x-text="selectedCurrency">TRL</span>
                                </div>
                            </div>
                        </div>
                        {{--VERGİ--}}
                        <div class="col-span-1 col-start-10">
                            <div class="relative">
                                <label :for="'tax_rate_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">Vergi
                                    Oranı</label>
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <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-span-1 col-start-11">
                            <div class="relative">
                                <label :for="'tax_amount_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 bg-white -top-2 right-2">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="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm" x-text="selectedCurrency">TRL</span>
                                </div>
                            </div>
                        </div>
                        {{--TOPLAM FİYAT--}}
                        <div class="col-span-1 col-start-12">
                            <div class="relative">
                                <label :for="'total_price_' + index"
                                    class="absolute inline-block px-1 text-xs font-medium text-gray-400 bg-white -top-2 right-2">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="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                                    <span class="text-gray-500 sm:text-sm" x-text="selectedCurrency">TRL</span>
                                </div>
                            </div>
                        </div>
                        {{--SİLME--}}
                        <div class="col-span-1 col-start-13">
                            <button @click="removeRow(index)" type="button"
                                class="p-1 mt-1 text-white transition-all rotate-45 rounded-full shadow-sm bg-rose-200 hover:bg-rose-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-600">
                                <svg class="w-5 h-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="p-1 text-white transition-all rounded-full shadow-sm bg-stone-300 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 pr-10 tracking-tighter justify-items-end">

                        <div class="flex items-center justify-end mt-3 gap-x-2">
                            <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-xl font-bold text-gray-800"></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-xs text-gray-500"
                                        x-text="selectedCurrency"></span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-end gap-x-2">
                            <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-xl font-bold text-gray-800"></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-xs text-gray-500"
                                        x-text="selectedCurrency"></span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-end gap-x-2">
                            <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-xl font-bold text-gray-800"></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-xs text-gray-500"
                                        x-text="selectedCurrency"></span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center justify-end gap-x-2">
                            <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-2xl font-bold text-gray-800"></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-xs text-gray-500"
                                        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="flex p-6 pt-6 mx-auto mt-4 bg-white shadow-sm max-w-7xl ring-1 ring-gray-900/5 sm:rounded-lg">
                <div class="w-full">
                    <label for="note" class="block text-lg font-semibold text-stone-700">ALT BİLGİLER</label>
                    <div class="mt-2">
                        <div class="grid mb-3 gap-y-2">
                            <!-- Select Menüsü -->
                            <select id="noteSelector"
                                class="block w-full bg-stone-50 border-0 py-1.5 px-2 text-stone-700 rounded-md 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">
                                <option value="">Hazır not seçin</option>
                                @foreach ($subnotes as $index => $note)
                                <option value="{{ $index }}">{{ $note->title }}</option>
                                @endforeach
                            </select>
                            <!-- Textarea (TinyMCE Editörü) -->
                            <textarea name="note" id="note">
                                Fiyatlara vergiler dahil değildir.<br>
                                Teklif düzenleme tarihinden itibaren 15 gün süreyle geçerlidir.
                            </textarea>
                        </div>
                    </div>
                </div>
            </div>
            {{--BUTTONS--}}
            <div id="footer"
                class="flex justify-end gap-3 p-6 pt-6 mx-auto mt-4 bg-white shadow-sm max-w-7xl 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' => 'TEKLİF OLUŞTURULACAK',
                'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                'route' => '#',
                'button' => 'OLUŞTUR',
                'cancel' => 'VAZGEÇ',
                'confirm' => 'EVET, OLUŞTUR'
                ])
            </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.selectedCompanyName = company.name;
                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); }',
    });

    //SUBNOTE
    document.addEventListener('DOMContentLoaded', () => {
        // JSON verisini PHP'den al
        const notes = @json($subnotes);

        // Select menüsünü ve textarea'yı seç
        const noteSelector = document.getElementById('noteSelector');
        const noteTextarea = document.getElementById('note');

        // Select menüsünde değişiklik olduğunda çalışacak fonksiyon
        noteSelector.addEventListener('change', () => {
            // Seçilen notun indeksi
            const selectedIndex = noteSelector.value;

            // Seçilen notun içeriğini al
            const selectedContent = selectedIndex !== '' ? notes[selectedIndex]?.content || '' : '';

            // Textarea içeriğini güncelle
            noteTextarea.value = selectedContent;

            // TinyMCE içeriğini güncelle
            if (tinymce && tinymce.get('note')) {
                tinymce.get('note').setContent(selectedContent);
            }
        });
    });
</script>
@endsection

@section('outerScripts')
<script>
</script>
@endsection