@extends('layouts.app')

@section('content')
<div x-data="{
        selectedCurrency: '{{ isset($invoice) ? $invoice->currency : 'TRL' }}',
        selectedType: '{{ isset($type) ? $type : (isset($invoice) ? $invoice->type : 'sales_invoice') }}',
        fillDefaultAddress() {
            // Default Turkish cities array
            const cities = ['İSTANBUL', 'ANKARA', 'İZMİR', 'BURSA'];
            // Randomly select a city from the array
            const randomCity = cities[Math.floor(Math.random() * cities.length)];

            // Fill address fields (excluding title/unvan)
            document.getElementById('line_1').value = 'ÖRNEK ADRES';
            document.getElementById('line_2').value = '';
            document.getElementById('district').value = 'YILDIRIM';
            document.getElementById('city').value = randomCity;
            document.getElementById('country').value = 'TÜRKİYE';
            document.getElementById('zip').value = '16000';
            document.getElementById('tax_office').value = 'ÖRNEK VERGI DAİRESİ';
            document.getElementById('vat_number').value = '11111111111';
        },
        deleteAddress() {
            // Clear all address fields except title (unvan)
            document.getElementById('line_1').value = '';
            document.getElementById('line_2').value = '';
            document.getElementById('district').value = '';
            document.getElementById('city').value = '';
            document.getElementById('country').value = '';
            document.getElementById('zip').value = '';
            document.getElementById('tax_office').value = '';
            document.getElementById('vat_number').value = '';
            document.getElementById('email').value = '';
            document.getElementById('phone').value = '';
        }
    }">
    <main>
        <form action="{{ isset($invoice) ? route('invoices.update') : route('invoices.store') }}" method="POST"
            enctype="multipart/form-data" novalidate>
            @csrf
            @if (isset($invoice))
            @method('PUT')
            <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">
            @endif
            <!-- INVOICE HEADER -->
            <div
                class="px-4 py-6 -mx-4 bg-white shadow-sm sm:px-16 sm:py-8 ring-1 ring-stone-900/5 sm:mx-0 lg:col-span-2 lg:row-span-2 lg:row-end-2">
                <dl class="flex flex-col grid-cols-3 gap-8 mt-6 text-sm leading-6 lg:flex-row">
                    <!-- ADRES BİLGİLERİ -->
                    <div class="flex-none w-full px-4 uppercase lg:w-1/3 sm:pr-4">
                        <dt class="text-lg font-semibold text-stone-900">FATURA ADRESİ</dt>
                        <dd>
                            <div class="w-full mt-2" x-data="companyCombobox()" x-init="init();
                                $watch('search', () => filterCompanies())">
                                <div class="relative mb-1">
                                    <input required id="combobox" type="text" placeholder="CARİ SEÇİNİZ"
                                        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-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 placeholder:text-stone-400/70"
                                        role="combobox" aria-controls="options" aria-expanded="false" x-model="search"
                                        value="{{ old('title', $company ? $company->name : (isset($invoice) ? $invoice->company->name : '')) }}">
                                    <input type="hidden" name="company_id" x-model="selectedCompanyId"
                                        value="{{ old('company_id', $company ? $company->id : (isset($invoice) ? $invoice->company_id : '')) }}">
                                    <input type="hidden" name="company_name" :value="search">
                                    <!-- Clear button (X) -->
                                    <button type="button"
                                        class="absolute inset-y-0 flex items-center pr-1 text-stone-400 right-8 hover:text-stone-500 focus:outline-none"
                                        @click="clearSelection()" x-show="search.length > 0">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path fill-rule="evenodd"
                                                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                    <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-stone-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 class="grid pl-2 mt-2">
                                    <a href="{{ route('companies.create') }}"
                                        class="text-xs underline text-stone-500 hover:text-stone-700">YENİ CARİ
                                        HESAP</a>
                                    <span class="text-xs normal-case text-stone-400/70">Cari hesap yok ise önce bir
                                        hesap oluşturun</span>
                                </div>

                            </div>
                            <div class="flex flex-wrap items-center gap-1 mt-2 font-medium text-stone-900">
                                <input required type="text" name="title" id="title"
                                    value="{{ old('title', isset($customer_address) ? $customer_address->title : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->title ?? '' : '')) }}"
                                    placeholder="UNVAN*"
                                    class="uppercase block w-full py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                <input required type="text" name="line_1" id="line_1"
                                    value="{{ old('line_1', isset($customer_address) ? $customer_address->line_1 : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->line_1 ?? '' : '')) }}"
                                    placeholder="ADRES SATIRI 1*"
                                    class="uppercase block w-full py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                <input type="text" name="line_2" id="line_2"
                                    value="{{ old('line_2', isset($customer_address) ? $customer_address->line_2 : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->line_2 ?? '' : '')) }}"
                                    placeholder="ADRES SATIRI 2"
                                    class="uppercase block w-full py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-200 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                <div class="flex flex-wrap gap-1">
                                    <input required type="text" name="district" id="district"
                                        value="{{ old('district', isset($customer_address) ? $customer_address->district : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->district ?? '' : '')) }}"
                                        placeholder="İLÇE*"
                                        class="uppercase block w-[48%] sm:w-1/4 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                    <input required type="text" name="city" id="city"
                                        value="{{ old('city', isset($customer_address) ? $customer_address->city : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->city ?? '' : '')) }}"
                                        placeholder="ŞEHİR*"
                                        class="uppercase block w-[48%] sm:w-1/4 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                    <input required type="text" name="country" id="country"
                                        value="{{ old('country', isset($customer_address) ? $customer_address->country : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->country ?? '' : '')) }}"
                                        placeholder="ÜLKE*"
                                        class="uppercase block w-[48%] sm:w-1/4 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                    <input required type="text" name="zip" id="zip"
                                        value="{{ old('zip', isset($customer_address) ? $customer_address->zip : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->zip ?? '' : '')) }}"
                                        placeholder="POSTA KODU*"
                                        class="uppercase block w-[48%] sm:w-1/4 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                </div>
                                <div class="flex w-full gap-1">
                                    <input required type="text" name="tax_office" id="tax_office"
                                        value="{{ old('tax_office', isset($customer_address) ? $customer_address->tax_office : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->tax_office ?? '' : '')) }}"
                                        placeholder="VERGİ DAİRESİ*"
                                        class="uppercase block w-1/2 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                    <input required type="text" name="vat_number" id="vat_number"
                                        value="{{ old('vat_number', isset($customer_address) ? $customer_address->vat_number : (isset($invoice) ? $invoice->company->addresses()->where('type', 'billing')->first()->vat_number ?? '' : '')) }}"
                                        placeholder="VERGİ NO*"
                                        class="uppercase block w-1/2 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-400 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                </div>
                                <div class="flex w-full gap-1">
                                    <input type="text" name="email" id="email"
                                        value="{{ old('email', isset($customer_address) ? $customer_address->email : (isset($invoice) && $invoice->company ? $invoice->company->addresses->where('type', 'billing')->first()?->email ?? '' : '')) }}"
                                        placeholder="E-POSTA"
                                        class="block w-1/2 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-200 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                    <input type="text" name="phone" id="phone"
                                        value="{{ old('phone', isset($customer_address) ? $customer_address->phone : (isset($invoice) && $invoice->company ? $invoice->company->addresses->where('type', 'billing')->first()?->phone ?? '' : '')) }}"
                                        placeholder="TELEFON"
                                        class="block w-1/2 py-0.5 px-1.5 border-0 rounded-md shadow-sm text-stone-700 ring-1 ring-inset ring-stone-200 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 bg-stone-50 placeholder:text-stone-400/70">
                                </div>
                                <div class="flex flex-wrap pl-2 gap-x-4">
                                    <a href="#" @click.prevent="fillDefaultAddress"
                                        class="mt-1.5 text-xs underline text-stone-500 hover:text-stone-700">RASTGELE
                                        ADRES EKLE</a>
                                    <a href="#" @click.prevent="deleteAddress"
                                        class="mt-1.5 text-xs underline text-stone-500 hover:text-stone-700">ADRESİ
                                        TEMİZLE</a>
                                </div>
                                <span class="pl-2 text-xs normal-case text-stone-400/70">Henüz fatura bilgisi mevcut
                                    değil
                                    ise
                                    rastgele bir adres oluşturun</span>

                                <div class="hidden gap-1">
                                    {{-- ADRESİ GÜNCELLE BUTONU --}}
                                    <button type="submit" name="update_address"
                                        class="inline-flex items-center px-3 py-1.5 text-sm font-semibold text-stone-900 bg-white border border-stone-300 rounded-md shadow-sm hover:bg-stone-50 focus:ring-2 focus:ring-offset-2 focus:ring-teal-600">
                                        Güncelle
                                    </button>
                                </div>
                            </div>
                        </dd>
                    </div>
                    <!-- FATURA BİLGİLERİ -->
                    <div class="flex-1 px-4 text-left lg:text-right">
                        <dt class="text-lg font-semibold text-stone-900">FATURA BİLGİLERİ</dt>
                        <dd class="grid gap-1 mt-2 text-left text-stone-500 justify-items-start lg:justify-items-end">
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for="date"
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">FATURA
                                    TARİHİ</label>
                                <input type="date" id="date" name="date"
                                    value="{{ old('date', isset($invoice) ? $invoice->date : (isset($today) ? $today : date('Y-m-d'))) }}"
                                    class="max-w-full min-w-64 block rounded-md border-0 py-0.5 px-3 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for="date"
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">SON ÖDEME
                                    TARİHİ</label>
                                <input type="date" id="due_date" name="due_date"
                                    value="{{ old('due_date', isset($invoice) ? $invoice->due_date : (isset($today) ? date('Y-m-d', strtotime($today . ' +10 days')) : date('Y-m-d'))) }}"
                                    class="max-w-full min-w-64 block rounded-md border-0 py-0.5 px-3 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for="number"
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">FATURA
                                    NO:</label>
                                <input type="text" id="number" name="number" placeholder="AAA000000000023"
                                    value="{{ old('number', isset($invoice) ? $invoice->number : (isset($number) ? $number : '')) }}"
                                    class="max-w-full min-w-64 block rounded-md border-0 py-0.5 px-3 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for=""
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">ÖZELLEŞTİRME
                                    NO:</label>
                                <span class="max-w-full pl-3 min-w-64">TR1.2</span>
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for=""
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">SENARYO:</label>
                                <span class="max-w-full pl-3 min-w-64">TEMELFATURA</span>
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for="type"
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">FATURA
                                    TİPİ:</label>
                                <select id="type" name="type" required
                                    x-init="selectedType = '{{ old('type', isset($invoice) ? $invoice->type : (isset($type) ? $type : 'sales_invoice')) }}'"
                                    class="max-w-full min-w-64 block rounded-md border-0 py-0.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                    <option value="sales_invoice" :selected="selectedType == 'sales_invoice'" {{
                                        old('type', isset($invoice) ? $invoice->type : (isset($type) ? $type :
                                        'sales_invoice')) == 'sales_invoice'
                                        ? 'selected'
                                        : '' }}>
                                        SATIS</option>
                                    <option value="purchase_invoice" :selected="selectedType == 'purchase_invoice'" {{
                                        old('type', isset($invoice) ? $invoice->type : (isset($type) ? $type :
                                        'sales_invoice')) ==
                                        'purchase_invoice'
                                        ? 'selected'
                                        : '' }}>
                                        ALIS</option>
                                    <option value="withholding_invoice"
                                        :selected="selectedType == 'withholding_invoice'" {{ old('type', isset($invoice)
                                        ? $invoice->type : (isset($type) ? $type : 'sales_invoice')) ==
                                        'withholding_invoice'
                                        ? 'selected'
                                        : '' }}>
                                        TEVKIFAT</option>
                                    <option value="ext_invoice" :selected="selectedType == 'ext_invoice'" {{ old('type',
                                        isset($invoice) ? $invoice->type : (isset($type) ? $type : 'sales_invoice')) ==
                                        'ext_invoice'
                                        ? 'selected'
                                        : '' }}>
                                        IADE</option>
                                </select>
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for="currency"
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">PARA
                                    BİRİMİ:</label>
                                <select id="currency" name="currency" x-model="selectedCurrency"
                                    class="max-w-full min-w-64 block rounded-md border-0 py-0.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                    <option value="TRL" {{ old('currency', isset($invoice) ? $invoice->currency : 'TRL')
                                        == 'TRL' ? 'selected' : '' }}>
                                        TRL</option>
                                    <option value="USD" {{ old('currency', isset($invoice) ? $invoice->currency : 'TRL')
                                        == 'USD' ? 'selected' : '' }}>
                                        USD</option>
                                    <option value="EUR" {{ old('currency', isset($invoice) ? $invoice->currency : 'TRL')
                                        == 'EUR' ? 'selected' : '' }}>
                                        EUR</option>
                                    <option value="GBP" {{ old('currency', isset($invoice) ? $invoice->currency : 'TRL')
                                        == 'GBP' ? 'selected' : '' }}>
                                        GBP</option>
                                </select>
                            </div>
                            <div class="flex flex-wrap items-center font-medium text-stone-900 gap-x-3">
                                <label for=""
                                    class="block text-xs font-medium leading-6 sm:text-sm text-stone-500">FATURA
                                    ALT
                                    TİPİ:</label>
                                <span class="max-w-full pl-3 min-w-64">-</span>
                            </div>
                        </dd>
                    </div>
                </dl>
            </div>
            <!-- FATURA SATIRLARI -->
            <div id="invoice"
                class="px-3 py-6 mx-2 my-6 bg-white shadow-sm sm:px-6 sm:py-10 sm:mx-8 ring-1 ring-stone-900/5 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2"
                x-data="{
                        exchangeRate: {{ old('ex_rate', isset($invoice) ? $invoice->ex_rate : 1) }},
                        rounding: {{ old('rounding', isset($invoice) ? $invoice->rounding : 0) }},
                        rows: [
                            @if (isset($lines) && $lines) @foreach ($lines as $line)
                                    {
                                        product_name: '{{ $line->product_name ?? ($line->product->name ?? '') }}',
                                        product_id: {{ $line->product_id ?? 'null' }},
                                        quantity: {{ $line->quantity }},
                                        unit_price: {{ $line->unit_price }},
                                        discount_rate: {{ $line->discount_rate ?? 0 }},
                                        discount_amount: {{ $line->discount_amount ?? 0 }},
                                        tax_rate: {{ $line->tax_rate }},
                                        withholding_ratio: {{ $line->withholding_ratio ?? 0 }},
                                        unit: '{{ $line->unit ?? 'C62' }}',
                                        subtotal: {{ $line->quantity * $line->unit_price - $line->discount_amount }},
                                        tax_amount: ({{ $line->quantity * $line->unit_price - $line->discount_amount }}) * {{ $line->tax_rate }} / 100,
                                        total_price: ({{ $line->quantity * $line->unit_price - $line->discount_amount }}) + (({{ $line->quantity * $line->unit_price - $line->discount_amount }}) * {{ $line->tax_rate }} / 100),
                                        is_new: false,
                                        bulk_count: 1,
                                        bulk_unit_size: 1,
                                        bulk_total_size: {{ $line->quantity }},
                                        bulk_unit_price: {{ $line->unit_price }},
                                        bulk_total_price: {{ $line->unit_price }},
                                        showBulkCalc: false,
                                        showDiscount: false
                                    }
                                    @if (!$loop->last), @endif
                            @endforeach
                            @elseif (isset($offer) && $offer->lines) @foreach ($offer->lines as $line)
                                    {
                                        product_name: '{{ $line->product_name ?? ($line->product->name ?? '') }}',
                                        product_id: {{ $line->product_id ?? 'null' }},
                                        quantity: {{ $line->quantity }},
                                        unit_price: {{ $line->unit_price }},
                                        discount_rate: {{ $line->discount_rate ?? 0 }},
                                        discount_amount: {{ $line->discount_amount ?? 0 }},
                                        tax_rate: {{ $line->tax_rate }},
                                        withholding_ratio: {{ $line->withholding_ratio ?? 0 }},
                                        unit: 'C62',
                                        subtotal: {{ $line->quantity * $line->unit_price - $line->discount_amount }},
                                        tax_amount: ({{ $line->quantity * $line->unit_price - $line->discount_amount }}) * {{ $line->tax_rate }} / 100,
                                        total_price: ({{ $line->quantity * $line->unit_price - $line->discount_amount }}) + (({{ $line->quantity * $line->unit_price - $line->discount_amount }}) * {{ $line->tax_rate }} / 100),
                                        is_new: false,
                                        bulk_count: 1,
                                        bulk_unit_size: 1,
                                        bulk_total_size: {{ $line->quantity }},
                                        bulk_unit_price: {{ $line->unit_price }},
                                        bulk_total_price: {{ $line->unit_price }},
                                        showBulkCalc: false,
                                        showDiscount: false
                                    }
                                    @if (!$loop->last), @endif
                            @endforeach
                            @else {
                                product_name: '',
                                product_id: '',
                                quantity: 1,
                                unit_price: 100,
                                discount_rate: 0,
                                discount_amount: 0,
                                tax_rate: 20,
                                withholding_ratio: 0,
                                unit: 'C62',
                                is_new: false,
                                bulk_count: 1,
                                bulk_unit_size: 1,
                                bulk_total_size: 1,
                                bulk_unit_price: 100,
                                bulk_total_price: 100,
                                showBulkCalc: false,
                                showDiscount: false
                            }
                            @endif
                        ],
                        // Odaklanan sayısal alanın anahtarı ve ham metni: tr-TR biçimlendirmesi
                        // yazma sırasında alanı yeniden yazıp kullanıcı girdisini (ve imleci) bozmasın
                        focusedFieldKey: null,
                        focusedRawText: '',
                        totalForAllRows: 0,
                        showProducts: false,
                        currentIndex: null,
                        addRow() {
                            this.rows.push({
                                product_name: '',
                                product_id: '',
                                quantity: 1,
                                unit_price: 100,
                                discount_rate: 0,
                                discount_amount: 0,
                                tax_rate: 20,
                                withholding_ratio: 0,
                                unit: 'C62',
                                is_new: false,
                                bulk_count: 1,
                                bulk_unit_size: 1,
                                bulk_total_size: 1,
                                bulk_unit_price: 0,
                                bulk_total_price: 0,
                                showBulkCalc: false,
                                showDiscount: false
                            });
                        },
                        removeRow(index) {
                            this.rows.splice(index, 1);
                        },
                        // Tüm tutar hesapları 4 ondalıkta yuvarlanır (invoice_lines decimal(12,4))
                        calculateSubtotal(row) {
                            return Math.round(((row.quantity * row.unit_price) - row.discount_amount) * 10000) / 10000;
                        },
                        calculateTaxAmount(row) {
                            return Math.round((this.calculateSubtotal(row) * row.tax_rate / 100) * 10000) / 10000;
                        },
                        discountAmount(row) {
                            return Math.round(((row.discount_rate / 100) * (row.quantity * row.unit_price)) * 10000) / 10000;
                        },
                        calculateTotal(row) {
                            return Math.round((this.calculateSubtotal(row) + this.calculateTaxAmount(row)) * 10000) / 10000;
                        },
                        calculateWithholdingTotal(row) {
                            return Math.round(((this.calculateTaxAmount(row) / 100) * row.withholding_ratio) * 10000) / 10000;
                        },
                        updateDiscountRate(row) {
                            row.discount_rate = Math.round(((row.discount_amount / (row.quantity * row.unit_price)) * 100) * 10000) / 10000;
                        },
                        updateDiscountAmount(row) {
                            row.discount_amount = Math.round(((row.discount_rate / 100) * (row.quantity * row.unit_price)) * 10000) / 10000;
                        },

                        // tr-TR biçimindeki metni sayıya çevirir (2.260,3000 -> 2260.3).
                        // Ekranda binlik ayracı nokta, ondalık ayracı virgül olduğundan
                        // yalnızca ilk virgülü noktaya çeviren parseFloat 2.260,30 değerini 2.26'ya bozuyordu.
                        // Not: bu yorumlar x-data attribute'u içinde olduğundan çift tırnak içeremez.
                        parseTrNumber(value) {
                            if (value === null || value === undefined) return 0;
                            if (typeof value === 'number') return Number.isFinite(value) ? value : 0;

                            let text = String(value).trim().replace(/[\s\u00A0\u202F%]/g, '');
                            if (text === '') return 0;

                            const lastComma = text.lastIndexOf(',');
                            const lastDot = text.lastIndexOf('.');

                            if (lastComma > -1 && lastDot > -1) {
                                // Son geçen ayrac ondalık, diğeri binlik ayracıdır
                                text = lastComma > lastDot
                                    ? text.replace(/\./g, '').replace(',', '.')
                                    : text.replace(/,/g, '');
                            } else if (lastComma > -1) {
                                // Yalnızca virgül varsa ondalık ayraçtır
                                text = text.replace(',', '.');
                            } else if (lastDot > -1 && text.indexOf('.') !== lastDot) {
                                // Birden fazla nokta binlik ayracıdır
                                text = text.replace(/\./g, '');
                            }

                            const number = parseFloat(text);
                            return Number.isFinite(number) ? number : 0;
                        },

                        // Sayıyı tr-TR biçiminde 4 ondalıklı metne çevirir (2260.3 -> 2.260,3000)
                        // Not: çift tırnak kullanma; x-data attribute'unu erken kapatır ve JS'i sayfaya basar.
                        formatTrNumber(value, fractionDigits = 4) {
                            return this.parseTrNumber(value).toLocaleString('tr-TR', {
                                minimumFractionDigits: fractionDigits,
                                maximumFractionDigits: fractionDigits
                            });
                        },

                        // Odaklanınca ham (biçimlendirilmemiş) sayıyı göster; yazarken alan yeniden
                        // yazılmaz, çıkışta (blur) ham metin sayıya çevrilip satıra yazılır
                        beginRawEdit(key, value) {
                            this.focusedFieldKey = key;
                            this.focusedRawText = String(this.parseTrNumber(value));
                        },
                        endRawEdit(key) {
                            if (this.focusedFieldKey !== key) return;
                            this.focusedFieldKey = null;
                            this.focusedRawText = '';
                        },

                        generalSubtotal() {
                            return this.rows.reduce((acc, row) => acc + this.calculateSubtotal(row), 0);
                        },
                        generalDiscountTotal() {
                            return this.rows.reduce((acc, row) => acc + this.discountAmount(row), 0);
                        },
                        generalVatTotal() {
                            return this.rows.reduce((acc, row) => acc + this.calculateTaxAmount(row), 0);
                        },
                        generalWithholdingTotal() {
                            return this.rows.reduce((acc, row) => acc + this.calculateWithholdingTotal(row), 0);
                        },
                        generalTotal() {
                            return this.rows.reduce((acc, row) => acc + this.calculateTotal(row), 0);
                        },
                        trlSubtotal() {
                            return this.generalSubtotal() * this.exchangeRate;
                        },
                        trlDiscountTotal() {
                            return this.generalDiscountTotal() * this.exchangeRate;
                        },
                        trlVatTotal() {
                            return this.generalVatTotal() * this.exchangeRate;
                        },
                        trlWithholdingTotal() {
                            return this.generalWithholdingTotal() * this.exchangeRate;
                        },
                        trlTotal() {
                            return this.generalTotal() * this.exchangeRate;
                        },

                        isRowsEmpty() {
                            return this.rows.length === 0;
                        },

                        updateBulkCalc(index) {
                            const bulkCount = parseFloat(this.rows[index].bulk_count) || 1;
                            const bulkUnitSize = parseFloat(this.rows[index].bulk_unit_size) || 1;
                            const bulkUnitPrice = parseFloat(this.rows[index].bulk_unit_price) || 0;

                            this.rows[index].bulk_total_size = bulkCount * bulkUnitSize;
                            this.rows[index].bulk_total_price = bulkUnitPrice / bulkUnitSize;
                        },

                        applyBulkCalc(index) {
                            if (this.rows[index].bulk_total_size) {
                                this.rows[index].quantity = this.rows[index].bulk_total_size;
                            }
                            if (this.rows[index].bulk_total_price) {
                                this.rows[index].unit_price = this.rows[index].bulk_total_price;
                            }

                            this.calculateSubtotal(this.rows[index]);
                            this.updateDiscountAmount(this.rows[index]);
                        },

                        aiLoading: false,
                        aiError: '',
                        csrfToken: '{{ csrf_token() }}',
                        invoiceImages: window.initialInvoiceImages || [],
                        selectedImage: null,

                        preprocessImage(file) {
                            return new Promise((resolve, reject) => {
                                const url = URL.createObjectURL(file);
                                const img = new Image();
                                img.onload = () => {
                                    // Fatura OCR'ı için 1600px yeterlidir; daha küçüğü
                                    // AI token maliyetini ve işlem süresini düşürür
                                    const MAX = 1600;
                                    let width = img.width;
                                    let height = img.height;
                                    if (width > MAX || height > MAX) {
                                        const ratio = Math.min(MAX / width, MAX / height);
                                        width = Math.round(width * ratio);
                                        height = Math.round(height * ratio);
                                    }
                                    const canvas = document.createElement('canvas');
                                    canvas.width = width;
                                    canvas.height = height;
                                    canvas.getContext('2d').drawImage(img, 0, 0, width, height);
                                    URL.revokeObjectURL(url);
                                    canvas.toBlob((b) => b ? resolve(b) : reject(new Error('blob')), 'image/jpeg', 0.80);
                                };
                                img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('load')); };
                                img.src = url;
                            });
                        },

                        async extractLinesFromImage(event) {
                            const file = event.target.files[0];
                            if (!file || this.aiLoading) return;

                            this.aiLoading = true;
                            this.aiError = '';

                            try {
                                // Mobil formatları (HEIC vb.) JPEG'e çevir ve makul boyuta indir
                                const blob = await this.preprocessImage(file).catch(() => file);

                                const formData = new FormData();
                                formData.append('invoice_image', blob, 'invoice.jpg');
                                formData.append('invoice_id', '{{ $invoice->id ?? '' }}');

                                const response = await fetch('{{ route('invoices.extract-lines') }}', {
                                    method: 'POST',
                                    headers: {
                                        'X-CSRF-TOKEN': this.csrfToken,
                                        'Accept': 'application/json',
                                    },
                                    body: formData,
                                });

                                let data = {};
                                try { data = await response.json(); } catch (e) { data = {}; }

                                if (!response.ok) {
                                    let msg = data.message || '';
                                    if (!msg && data.errors) {
                                        const first = Object.values(data.errors)[0];
                                        msg = Array.isArray(first) ? (first[0] || '') : (first || '');
                                    }
                                    this.aiError = msg || ('Görsel işlenemedi (HTTP ' + response.status + ').');
                                    return;
                                }

                                const newRows = data.lines.map(line => {
                                    const quantity = parseFloat(line.quantity) || 1;
                                    const unit_price = parseFloat(line.unit_price) || 0;
                                    const discount_rate = parseFloat(line.discount_rate) || 0;
                                    // %0 geçerli bir değerdir; falsy kontrolüyle 20'ye ezilmesin
                                    const taxParsed = parseFloat(line.tax_rate);
                                    const tax_rate = Number.isFinite(taxParsed) ? Math.round(taxParsed * 100) / 100 : 20;

                                    return {
                                        product_name: line.product_name,
                                        product_id: '',
                                        quantity: quantity,
                                        unit_price: unit_price,
                                        discount_rate: discount_rate,
                                        discount_amount: (discount_rate / 100) * (quantity * unit_price),
                                        tax_rate: tax_rate,
                                        withholding_ratio: 0,
                                        unit: line.unit || 'C62',
                                        is_new: false,
                                        bulk_count: 1,
                                        bulk_unit_size: 1,
                                        bulk_total_size: quantity,
                                        bulk_unit_price: unit_price,
                                        bulk_total_price: unit_price,
                                        showBulkCalc: false,
                                        showDiscount: false
                                    };
                                });

                                // Form boşsa (varsayılan boş satır varsa) üzerine yaz, değilse sonuna ekle
                                const isDefaultEmptyRow = this.rows.length === 1 && !this.rows[0].product_name;
                                this.rows = isDefaultEmptyRow ? newRows : this.rows.concat(newRows);

                                // Kaydedilen görseli thumb listesine ekle
                                if (data.image) {
                                    this.invoiceImages.unshift(data.image);
                                }
                            } catch (error) {
                                this.aiError = 'Görsel işlenirken bir hata oluştu.';
                            } finally {
                                this.aiLoading = false;
                                event.target.value = '';
                            }
                        }

                    }" x-init="generalSubtotal();
                    generalDiscountTotal();
                    generalVatTotal();
                    generalWithholdingTotal();
                    generalTotal();
                    trlSubtotal();
                    trlDiscountTotal();
                    trlVatTotal();
                    trlWithholdingTotal();
                    trlTotal()">

                {{-- SATIRLAR --}}
                <p class="mb-2 text-xs text-stone-400 lg:hidden">← Satırları sağa/sola kaydırın →</p>
                {{-- relative z-20: satır dropdown'ları (ürün listesi vb.) diğer tüm bölümlerin üstünde kalsın --}}
                <div class="relative z-20 px-3 -mx-3 overflow-x-auto sm:-mx-6 sm:px-6">
                    <div class="min-w-[1280px] lg:min-w-0 pt-2">
                        <template x-for="(row, index) in rows" :key="index">
                            <div class="pb-4 mb-5 border-b border-stone-200">
                                {{-- 1. SATIR --}}
                                <div class="flex gap-2">
                                    {{-- ÜRÜNLER --}}
                                    <div x-data="productCombobox(rows, index)" x-init="init()"
                                        class="relative flex-auto col-span-3 col-start-1">
                                        <label :for="'product_name_' + index"
                                            class="absolute inline-block px-1 text-xs font-medium text-stone-400 -top-2 left-2 bg-gradient-to-b from-white to-stone-50">Ürün/Hizmet</label>
                                        <input required :id="'product_name_' + index"
                                            :name="'rows[' + index + '][product_name]'" type="text"
                                            placeholder="Ürün veya hizmet seçin/oluşturun"
                                            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-stone-300 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6 placeholder:text-stone-400/70"
                                            role="combobox" aria-controls="options" aria-expanded="false"
                                            x-model="row.product_name" @change="handleProductChange($event, rowIndex)"
                                            @click="showProducts = true; currentIndex = rowIndex"
                                            @input="searchTerm = $event.target.value; filterProducts(rowIndex); handleProductChange($event, rowIndex)">
                                        <input type="hidden" :name="'rows[' + index + '][product_id]'"
                                            :value="row.product_id">
                                        <button type="button" id="clear-button"
                                            class="absolute inset-y-0 flex items-center pr-1 text-stone-400 right-8 hover:text-stone-500 focus:outline-none"
                                            @click="clearSelectedProduct(rowIndex)"
                                            x-show="row.product_name && row.product_name.length > 0">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"
                                                fill="currentColor">
                                                <path fill-rule="evenodd"
                                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                                    clip-rule="evenodd" />
                                            </svg>
                                        </button>
                                        <button @click="showProducts = !showProducts; currentIndex = rowIndex"
                                            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-stone-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 === rowIndex"
                                            @click.away="showProducts = false"
                                            class="absolute z-30 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[rowIndex]"
                                                :key="productIndex">
                                                <li @click="rows[rowIndex].product_name = product.name; rows[rowIndex].product_id = product.id; rows[rowIndex].is_new = false; 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>
                                        <span x-show="row.is_new"
                                            class="absolute inline-flex items-center px-2 py-1 text-xs font-medium text-stone-700 rounded-md top-1.5 right-16 bg-stone-200 inset-ring inset-ring-stone-300">Yeni
                                            Ürün</span>
                                    </div>
                                    {{-- QUANTITY --}}
                                    <div class="flex-none w-40">
                                        <div class="flex gap-1">
                                            <div class="relative">
                                                <label :for="'quantity_' + index"
                                                    class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Miktar</label>
                                                <div class="flex">
                                                    <input
                                                        :value="focusedFieldKey === 'quantity_' + index ? focusedRawText : formatTrNumber(row.quantity, 4)"
                                                        @focus="beginRawEdit('quantity_' + index, row.quantity); $nextTick(() => $event.target.select())"
                                                        @blur="row.quantity = parseTrNumber(focusedRawText); updateDiscountAmount(row); endRawEdit('quantity_' + index)"
                                                        @input="focusedRawText = $event.target.value; row.quantity = parseTrNumber($event.target.value); updateDiscountAmount(row)"
                                                        @click="$event.target.select()" type="text" inputmode="decimal"
                                                        :id="'quantity_' + index"
                                                        class="block w-full rounded-md border-0 py-1.5 pl-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                        placeholder="0,0000">
                                                    {{-- Görünen alan tr-TR biçimlidir; sunucuya ham sayısal değer
                                                    gönderilir --}}
                                                    <input type="hidden" :name="'rows[' + index + '][quantity]'"
                                                        :value="row.quantity">
                                                </div>
                                            </div>
                                            <button type="button" @click="row.showBulkCalc = !row.showBulkCalc"
                                                class="mt-1 text-xs underline transition-all text-stone-300 hover:text-stone-500 focus:outline-none">
                                                <span class="material-symbols-rounded">
                                                    functions
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                    {{-- UNIT --}}
                                    <div class="relative flex-none w-24">
                                        <label :for="'unit_' + index"
                                            class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Birim</label>
                                        <select :id="'unit_' + index" :name="'rows[' + index + '][unit]'"
                                            x-model="row.unit"
                                            class="block w-full bg-stone-50 rounded-md border-0 py-1.5 pl-3 pr-3 text-stone-700 shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-teal-600 sm:text-sm sm:leading-6">
                                            @foreach ($units ?? [] as $unit)
                                            <option value="{{ $unit->shortname }}" {{ $unit->shortname == 'C62' ?
                                                'selected' : '' }}>
                                                {{ $unit->name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    {{-- UNIT PRICE --}}
                                    <div class="flex-none w-32">
                                        <div class="relative">
                                            <label :for="'unit_price_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 right-2">Birim
                                                Fiyat</label>
                                            <input
                                                :value="focusedFieldKey === 'unit_price_' + index ? focusedRawText : formatTrNumber(row.unit_price, 4)"
                                                @focus="beginRawEdit('unit_price_' + index, row.unit_price); $nextTick(() => $event.target.select())"
                                                @blur="row.unit_price = parseTrNumber(focusedRawText); updateDiscountAmount(row); endRawEdit('unit_price_' + index)"
                                                @input="focusedRawText = $event.target.value; row.unit_price = parseTrNumber($event.target.value); updateDiscountAmount(row)"
                                                :id="'unit_price_' + index" type="text" inputmode="decimal"
                                                class="block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                            {{-- Görünen alan tr-TR biçimlidir; sunucuya ham sayısal değer gönderilir
                                            --}}
                                            <input type="hidden" :name="'rows[' + index + '][unit_price]'"
                                                :value="row.unit_price">
                                        </div>
                                    </div>
                                    {{-- SUBTOTAL --}}
                                    <div class="flex-none w-48">
                                        <div class="flex gap-1">
                                            <div class="relative">
                                                <label :for="'subtotal_' + index"
                                                    class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 right-2">Ara
                                                    Toplam</label>
                                                <input
                                                    x-model="calculateSubtotal(row).toLocaleString('tr-TR', {minimumFractionDigits: 4, maximumFractionDigits: 4})"
                                                    disabled type="text" :name="'rows[' + index + '][subtotal]'"
                                                    :id="'subtotal_' + index"
                                                    class="price-mask block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-100 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                            </div>
                                            <button type="button" @click="row.showDiscount = !row.showDiscount"
                                                class="mt-1 text-xs underline transition-all text-stone-300 hover:text-stone-500 focus:outline-none">
                                                <span class="material-symbols-rounded">
                                                    percent
                                                </span>
                                            </button>
                                        </div>
                                    </div>
                                    {{-- TAX RATE --}}
                                    <div class="flex-none w-20">
                                        <div class="relative">
                                            <label :for="'tax_rate_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">V.Oranı</label>
                                            <div
                                                class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                <span class="text-stone-500 sm:text-sm">%</span>
                                            </div>
                                            <input
                                                :value="focusedFieldKey === 'tax_rate_' + index ? focusedRawText : formatTrNumber(row.tax_rate, 4)"
                                                @focus="beginRawEdit('tax_rate_' + index, row.tax_rate); $nextTick(() => $event.target.select())"
                                                @blur="row.tax_rate = parseTrNumber(focusedRawText); endRawEdit('tax_rate_' + index)"
                                                @input="focusedRawText = $event.target.value; row.tax_rate = parseTrNumber($event.target.value)"
                                                @click="$event.target.select()" :id="'tax_rate_' + index" type="text"
                                                inputmode="decimal"
                                                class="block w-full pl-6 rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                            {{-- Görünen alan tr-TR biçimlidir; sunucuya ham sayısal değer gönderilir
                                            --}}
                                            <input type="hidden" :name="'rows[' + index + '][tax_rate]'"
                                                :value="row.tax_rate">
                                        </div>
                                    </div>
                                    {{-- TAX AMOUNT --}}
                                    <div class="flex-none w-32">
                                        <div class="relative">
                                            <label :for="'tax_amount_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 right-2">Vergi
                                                Tutarı</label>
                                            <input
                                                x-model="calculateTaxAmount(row).toLocaleString('tr-TR', {minimumFractionDigits: 4, maximumFractionDigits: 4})"
                                                :name="'rows[' + index + '][tax_amount]'" :id="'tax_amount_' + index"
                                                disabled type="text"
                                                class="price-mask block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-100 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>
                                    {{-- TOTAL PRICE --}}
                                    <div class="flex-none w-48">
                                        <div class="relative">
                                            <label :for="'total_price_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 right-2">Toplam</label>
                                            <input
                                                x-model="calculateTotal(row).toLocaleString('tr-TR', {minimumFractionDigits: 4, maximumFractionDigits: 4})"
                                                :name="'rows[' + index + '][total_price]'" :id="'total_price_' + index"
                                                disabled type="text"
                                                class="price-mask block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-100 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>
                                    {{-- REMOVE BUTTON --}}
                                    <div class="self-end flex-none">
                                        <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>

                                {{-- 2. SATIR - Toplu Hesaplama --}}
                                <div x-show="row.showBulkCalc"
                                    class="flex items-center gap-2 p-3 my-3 border rounded-md bg-stone-50 border-stone-200">
                                    {{-- FATURA ADEDİ --}}
                                    <p class="mr-2 text-sm text-stone-400">BİRİM ÇEVİRİCİ</p>
                                    <div class="flex-none w-40">
                                        <div class="relative">
                                            <label :for="'bulk_count_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Fatura
                                                Adedi</label>
                                            <input type="number" @click="$event.target.select()"
                                                @input="updateBulkCalc(index)" :id="'bulk_count_' + index"
                                                x-model="rows[index].bulk_count"
                                                class="block w-full rounded-md border-0 py-1.5 pl-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>

                                    {{-- BİRİM FİYAT --}}
                                    <div class="flex-none w-40">
                                        <div class="relative">
                                            <label :for="'bulk_unit_price_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Birim
                                                Fiyat</label>
                                            <input
                                                :value="focusedFieldKey === 'bulk_unit_price_' + index ? focusedRawText : formatTrNumber(rows[index].bulk_unit_price, 4)"
                                                @focus="beginRawEdit('bulk_unit_price_' + index, rows[index].bulk_unit_price); $nextTick(() => $event.target.select())"
                                                @blur="rows[index].bulk_unit_price = parseTrNumber(focusedRawText); updateBulkCalc(index); endRawEdit('bulk_unit_price_' + index)"
                                                @input="focusedRawText = $event.target.value; rows[index].bulk_unit_price = parseTrNumber($event.target.value); updateBulkCalc(index)"
                                                :id="'bulk_unit_price_' + index" type="text" inputmode="decimal"
                                                class="block w-full rounded-md border-0 py-1.5 pl-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                        </div>
                                    </div>

                                    {{-- BİRİM MİKTARI --}}
                                    <div class="flex-none w-40">
                                        <div class="relative">
                                            <label :for="'bulk_unit_size_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Birim
                                                Miktarı</label>
                                            <input
                                                :value="focusedFieldKey === 'bulk_unit_size_' + index ? focusedRawText : formatTrNumber(rows[index].bulk_unit_size, 4)"
                                                @focus="beginRawEdit('bulk_unit_size_' + index, rows[index].bulk_unit_size); $nextTick(() => $event.target.select())"
                                                @blur="rows[index].bulk_unit_size = parseTrNumber(focusedRawText); updateBulkCalc(index); endRawEdit('bulk_unit_size_' + index)"
                                                @input="focusedRawText = $event.target.value; rows[index].bulk_unit_size = parseTrNumber($event.target.value); updateBulkCalc(index)"
                                                @click="$event.target.select()" :id="'bulk_unit_size_' + index"
                                                type="text" inputmode="decimal"
                                                class="block w-full rounded-md border-0 py-1.5 pl-3 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                        </div>
                                    </div>

                                    {{-- TOPLAM MİKTAR --}}
                                    <div class="flex-none w-40">
                                        <div class="relative">
                                            <label :for="'bulk_total_size_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Toplam
                                                Miktar</label>
                                            <input disabled type="text" :id="'bulk_total_size_' + index"
                                                :value="formatTrNumber(rows[index].bulk_total_size, 4)" readonly
                                                class="price-mask block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-100 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>

                                    {{-- HESAPLANAN B.FİYAT --}}
                                    <div class="flex-none w-40">
                                        <div class="relative">
                                            <label :for="'bulk_total_price_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Hesaplanan
                                                B.Fiyat</label>
                                            <input disabled type="text" :id="'bulk_total_price_' + index"
                                                :value="formatTrNumber(rows[index].bulk_total_price, 4)" readonly
                                                class="price-mask block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-100 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                        </div>
                                    </div>

                                    {{-- UYGULA BUTONU --}}
                                    <div class="flex-none">
                                        <button type="button" @click="applyBulkCalc(index)"
                                            class="px-3 py-1.5 bg-stone-300 text-white font-semibold rounded-md hover:bg-stone-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 text-sm transition-all">
                                            <span class="align-middle material-symbols-rounded">
                                                check
                                            </span>
                                        </button>
                                    </div>
                                </div>

                                {{-- 3. SATIR - İndirim ve Tevkifat --}}
                                <div x-show="row.showDiscount" class="flex gap-2 my-3">
                                    {{-- DISCOUNT RATE --}}
                                    <div class="flex-none w-20">
                                        <div class="relative">
                                            <label :for="'discount_rate_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">İn.Oranı</label>
                                            <div
                                                class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                                <span class="text-stone-500 sm:text-sm">%</span>
                                            </div>
                                            <input
                                                :value="focusedFieldKey === 'discount_rate_' + index ? focusedRawText : formatTrNumber(row.discount_rate, 4)"
                                                @focus="beginRawEdit('discount_rate_' + index, row.discount_rate); $nextTick(() => $event.target.select())"
                                                @blur="row.discount_rate = parseTrNumber(focusedRawText); updateDiscountAmount(row); endRawEdit('discount_rate_' + index)"
                                                @input="focusedRawText = $event.target.value; row.discount_rate = parseTrNumber($event.target.value); updateDiscountAmount(row)"
                                                @click="$event.target.select()" :id="'discount_rate_' + index"
                                                type="text" inputmode="decimal"
                                                class="block w-full pl-6 rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                            {{-- Görünen alan tr-TR biçimlidir; sunucuya ham sayısal değer gönderilir
                                            --}}
                                            <input type="hidden" :name="'rows[' + index + '][discount_rate]'"
                                                :value="row.discount_rate">
                                        </div>
                                    </div>
                                    {{-- DISCOUNT AMOUNT --}}
                                    <div class="flex-none w-32">
                                        <div class="relative">
                                            <label :for="'discount_amount_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 right-2">İnd.
                                                Tutarı</label>
                                            {{-- price-mask bu alanda kullanılmamalı: biçimli metin değeri bozar --}}
                                            <input
                                                :value="focusedFieldKey === 'discount_amount_' + index ? focusedRawText : formatTrNumber(row.discount_amount, 4)"
                                                @focus="beginRawEdit('discount_amount_' + index, row.discount_amount); $nextTick(() => $event.target.select())"
                                                @blur="row.discount_amount = parseTrNumber(focusedRawText); updateDiscountRate(row); endRawEdit('discount_amount_' + index)"
                                                @input="focusedRawText = $event.target.value; row.discount_amount = parseTrNumber($event.target.value); updateDiscountRate(row)"
                                                @click="$event.target.select()" :id="'discount_amount_' + index"
                                                type="text" inputmode="decimal"
                                                class="block w-full text-right rounded-md border-0 py-1.5 text-stone-900 shadow-sm ring-1 ring-inset ring-stone-300 placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-emerald-600 sm:text-sm sm:leading-6"
                                                placeholder="0,0000">
                                            {{-- Görünen alan tr-TR biçimlidir; sunucuya ham sayısal değer gönderilir
                                            --}}
                                            <input type="hidden" :name="'rows[' + index + '][discount_amount]'"
                                                :value="row.discount_amount">
                                        </div>
                                    </div>
                                    {{-- WITHHOLDING TYPE --}}
                                    <div class="flex-none w-48">
                                        <div class="relative">
                                            <label :for="'withholding_type_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">Tevfikat</label>
                                            <select id="withholding_type" name="withholding_type"
                                                class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                                <option selected>YOK</option>
                                                @foreach ($withholding_types ?? [] as $type)
                                                <option value="{{ $type['code'] }}">{{ $type['name'] }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    {{-- WITHHOLDING RATIO --}}
                                    <div class="flex-none w-20">
                                        <div class="relative">
                                            <label :for="'withholding_ratio_' + index"
                                                class="absolute inline-block px-1 text-xs font-medium bg-white text-stone-400 -top-2 left-2">T.Oranı</label>
                                            <select id="withholding_ratio" name="withholding_ratio"
                                                x-model="row.withholding_ratio"
                                                :name="'rows[' + index + '][withholding_ratio]'"
                                                :id="'withholding_ratio_' + index"
                                                class="block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600 sm:text-sm sm:leading-6">
                                                <option value="0" selected>%0</option>
                                                <option value="10">%10</option>
                                                <option value="20">%20</option>
                                                <option value="30">%30</option>
                                                <option value="40">%40</option>
                                                <option value="50">%50</option>
                                                <option value="60">%60</option>
                                                <option value="70">%70</option>
                                                <option value="80">%80</option>
                                                <option value="90">%90</option>
                                                <option value="100">%100</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- SATIR EKLE --}}
                <div class="flex flex-col items-center gap-2 pb-4">
                    <div class="flex items-center justify-center gap-2">
                        <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>
                        {{-- AI İLE DOLDUR --}}
                        <input type="file" accept="image/jpeg,image/jpg,image/png,image/webp" class="hidden"
                            x-ref="aiFile" @change="extractLinesFromImage($event)">
                        <button type="button" @click="$refs.aiFile.click()" :disabled="aiLoading"
                            class="flex items-center gap-2 px-3 py-2 tracking-tight transition-all border shadow-sm cursor-pointer text-violet-400 hover:text-violet-600 rounded-2xl bg-violet-50 border-violet-300 hover:bg-violet-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600 disabled:opacity-50 disabled:pointer-events-none"
                            title="Fatura görseli ile satırları AI ile doldur">
                            <svg x-show="!aiLoading" class="w-5 h-5" fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
                                <path
                                    d="M22.462 11.035l2.88 7.097c1.204 2.968 3.558 5.322 6.526 6.526l7.097 2.88c1.312.533 1.312 2.391 0 2.923l-7.097 2.88c-2.968 1.204-5.322 3.558-6.526 6.526l-2.88 7.097c-.533 1.312-2.391 1.312-2.923 0l-2.88-7.097c-1.204-2.968-3.558-5.322-6.526-6.526l-7.097-2.88c-1.312-.533-1.312-2.391 0-2.923l7.097-2.88c2.968-1.204 5.322-3.558 6.526-6.526l2.88-7.097C20.071 9.723 21.929 9.723 22.462 11.035zM39.945 2.701l.842 2.428c.664 1.915 2.169 3.42 4.084 4.084l2.428.842c.896.311.896 1.578 0 1.889l-2.428.842c-1.915.664-3.42 2.169-4.084 4.084l-.842 2.428c-.311.896-1.578.896-1.889 0l-.842-2.428c-.664-1.915-2.169-3.42-4.084-4.084l-2.428-.842c-.896-.311-.896-1.578 0-1.889l2.428-.842c1.915-.664 3.42-2.169 4.084-4.084l.842-2.428C38.366 1.805 39.634 1.805 39.945 2.701z">
                                </path>
                            </svg>
                            <svg x-show="aiLoading" class="w-5 h-5 animate-spin" fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
                                <path
                                    d="M272 112C272 85.5 293.5 64 320 64C346.5 64 368 85.5 368 112C368 138.5 346.5 160 320 160C293.5 160 272 138.5 272 112zM272 528C272 501.5 293.5 480 320 480C346.5 480 368 501.5 368 528C368 554.5 346.5 576 320 576C293.5 576 272 554.5 272 528zM112 272C138.5 272 160 293.5 160 320C160 346.5 138.5 368 112 368C85.5 368 64 346.5 64 320C64 293.5 85.5 272 112 272zM480 320C480 293.5 501.5 272 528 272C554.5 272 576 293.5 576 320C576 346.5 554.5 368 528 368C501.5 368 480 346.5 480 320zM139 433.1C157.8 414.3 188.1 414.3 206.9 433.1C225.7 451.9 225.7 482.2 206.9 501C188.1 519.8 157.8 519.8 139 501C120.2 482.2 120.2 451.9 139 433.1zM139 139C157.8 120.2 188.1 120.2 206.9 139C225.7 157.8 225.7 188.1 206.9 206.9C188.1 225.7 157.8 225.7 139 206.9C120.2 188.1 120.2 157.8 139 139zM501 433.1C519.8 451.9 519.8 482.2 501 501C482.2 519.8 451.9 519.8 433.1 501C414.3 482.2 414.3 451.9 433.1 433.1C451.9 414.3 482.2 414.3 501 433.1z" />
                            </svg>
                            <span class="text-xs">Görsel ile fatura satırı ekleyin</span>
                        </button>
                    </div>
                    <p x-show="aiError" x-text="aiError" class="text-xs text-rose-500"></p>
                </div>

                {{-- ALT TOPLAMLAR --}}
                <div class="">
                    <div class="grid pr-2 tracking-tight sm:pr-10 justify-items-end">

                        <div x-show="selectedCurrency !== 'TRL'" class="mb-3">
                            <div class="flex items-center justify-end gap-x-2">
                                <span>Döviz Kuru:</span>
                                <input type="text" id="exchange_rate" name="ex_rate" x-model="exchangeRate"
                                    @click="$event.target.select()" @input="trlTotal() = generalTotal() * exchangeRate"
                                    class="w-32 text-end rounded-md border-0 py-0.5 px-3 text-stone-900 ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-emerald-600">
                                <span>TRL</span>
                            </div>
                        </div>

                        <div>
                            <span>Ara Toplam:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="generalSubtotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mt-2 mr-2 text-stone-500" x-text="selectedCurrency">USD /</span>
                            <span
                                x-text="trlSubtotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>
                        <div>
                            <span>İndirim:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="generalDiscountTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mt-2 mr-2 text-stone-500" x-text="selectedCurrency">USD /</span>
                            <span
                                x-text="trlDiscountTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>
                        <div>
                            <span>Vergi:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="generalVatTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mt-2 mr-2 text-stone-500" x-text="selectedCurrency">USD /</span>
                            <span
                                x-text="trlVatTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>
                        <div x-show="generalWithholdingTotal() > 0">
                            <span>Tevfikat:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="generalWithholdingTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mt-2 mr-2 text-stone-500" x-text="selectedCurrency">USD /</span>
                            <span
                                x-text="trlWithholdingTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>
                        <div>
                            <span>Yuvarlama:</span>
                            <input type="number" step="0.01" name="rounding" x-model.number="rounding"
                                class="w-24 px-2 py-1 ml-2 text-sm text-right border rounded-md shadow-sm ring-1 ring-inset ring-stone-300 focus:ring-2 focus:ring-inset focus:ring-emerald-600">
                        </div>
                        <div x-show="generalWithholdingTotal() > 0">
                            <span>Vergiler Dahil Toplam:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="generalTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mt-2 mr-2 text-stone-500" x-text="selectedCurrency">USD /</span>
                            <span
                                x-text="trlTotal().toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="mx-2 mt-2 text-xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>
                        <div class="flex items-center justify-end mt-3 gap-x-2">
                            <span>Fatura Tutarı:</span>
                            <span x-show="selectedCurrency !== 'TRL'"
                                x-text="(generalTotal() - generalWithholdingTotal() + rounding).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="ml-2 text-stone-500"></span><span x-show="selectedCurrency !== 'TRL'"
                                class="mr-2 text-stone-500" x-text="selectedCurrency"></span>
                            <span
                                x-text="(trlTotal() - trlWithholdingTotal() + rounding).toLocaleString('tr-TR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })"
                                class="ml-2 text-2xl font-bold text-stone-800"></span><span>TRL</span>
                        </div>

                        <div class="sr-only">
                            <span>TL Ara Toplam<input name="total_sub" x-model="trlSubtotal()"></span>
                            <span>TL İndirim Toplam<input name="total_discount" x-model="trlDiscountTotal()"></span>
                            <span>TL Vergi Toplam<input name="total_vat" x-model="trlVatTotal()"></span>
                            <span>TL Tevfikat Toplam<input name="total_withholding"
                                    x-model="trlWithholdingTotal()"></span>
                            <span>TL Yuvarlama<input name="rounding" x-model="rounding"></span>
                            <span>TL Genel Toplam<input name="total_amount"
                                    x-model="trlTotal() - trlWithholdingTotal() + rounding"></span>

                            <span>EX Ara Toplam<input name="ex_sub" x-model="generalSubtotal()"></span>
                            <span>EX İndirim Toplam<input name="ex_discount" x-model="generalDiscountTotal()"></span>
                            <span>EX Vergi Toplam<input name="ex_vat" x-model="generalVatTotal()"></span>
                            <span>EX Tevfikat Toplam<input name="ex_withholding"
                                    x-model="generalWithholdingTotal()"></span>
                            <span>EX Genel Toplam<input name="ex_amount"
                                    x-model="generalTotal() - generalWithholdingTotal() + rounding"></span>
                        </div>

                    </div>
                </div>

                {{-- YÜKLENEN FATURA GÖRSELLERİ (THUMB) --}}
                <div x-show="invoiceImages.length > 0" class="pt-4 mt-6 border-t border-stone-200">
                    <p class="mb-2 text-xs font-medium uppercase text-stone-400">Yüklenen Fatura Görselleri</p>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="image in invoiceImages" :key="image.id">
                            <button type="button" @click="selectedImage = image"
                                class="transition rounded-md hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-600"
                                title="Görseli büyüt">
                                <img :src="image.url" :alt="image.name"
                                    class="object-cover w-16 h-16 rounded-md shadow-sm ring-1 ring-stone-200">
                            </button>
                        </template>
                    </div>
                </div>

                {{-- GÖRSEL ÖNİZLEME MODALI --}}
                <div x-show="selectedImage" @keydown.escape.window="selectedImage = null"
                    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-stone-900/70"
                    @click.self="selectedImage = null" style="display: none;">
                    <div class="relative max-w-full">
                        <button type="button" @click="selectedImage = null"
                            class="absolute z-10 p-1 bg-white rounded-full shadow -top-3 -right-3 hover:bg-stone-100"
                            title="Kapat">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-stone-600" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path fill-rule="evenodd"
                                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                    clip-rule="evenodd" />
                            </svg>
                        </button>
                        <img :src="selectedImage ? selectedImage.url : ''"
                            :alt="selectedImage ? selectedImage.name : ''"
                            class="max-h-[85vh] max-w-full rounded-lg shadow-xl">
                    </div>
                </div>
            </div>
            <!-- DİĞER BİLGİLER -->
            <input type="hidden" name="category_id" value="income">
            <!-- FOOTER -->
            <div id="footer"
                class="flex flex-wrap justify-end gap-3 p-4 mx-2 my-6 bg-white shadow-sm sm:p-6 sm:mx-8 ring-1 ring-stone-900/5 sm:rounded-lg lg:col-span-2 lg:row-span-2 lg:row-end-2">
                @if (isset($invoice))
                <x-a-button-black href="{{ route('invoices.show', $invoice->id) }}" click="" type="button" ring="rose">
                    {{ __('VAZGEÇ') }}
                </x-a-button-black>
                @else
                @include('modals.cancel', [
                'title' => 'YAPTIĞINIZ DEĞİŞİKLİKLER KAYBOLACAK!',
                'subtitle' => 'İPTAL ETMEK İSTEDİĞİNİZDEN EMİN MİSİNİZ?',
                'route' => isset($company)
                ? route('companies.show', $company->slug)
                : route('dashboard'),
                'button' => 'VAZGEÇ',
                'cancel' => 'HAYIR, GERİ DÖN',
                'confirm' => 'EVET, İPTAL ET',
                ])
                @endif

                @if (isset($invoice))
                <x-button-black click="" type="submit" ring="emerald">
                    {{ __('FATURAYI GÜNCELLE') }}
                </x-button-black>
                @else
                @include('modals.confirm', [
                'title' => 'FATURA OLUŞTURULACAK',
                'subtitle' => 'DEVAM ETMEK İSTİYOR MUSUNUZ?',
                'route' => route('invoices.store'),
                'button' => 'OLUŞTUR',
                'cancel' => 'HAYIR, GERİ DÖN',
                'confirm' => 'EVET, OLUŞTUR',
                ])
                @endif
            </div>
        </form>
    </main>
</div>
@endsection

@section('scripts')
<script>
    window.initialInvoiceImages = @json($invoice_images ?? []);
        var inputs = document.querySelectorAll('.price-mask');
        inputs.forEach(input => {
            input.addEventListener('input', function(e) {
                var value = parseFloat(this.value.replace(/,/g, '.')) || 0;
                this.value = value.toLocaleString('tr-TR', {
                    minimumFractionDigits: 4,
                    maximumFractionDigits: 4
                });
            });
        });

        //ÜRÜN COMBOBOX
        function productCombobox(rows, rowIndex) {
            return {
                searchTerm: '',
                products: @json($products_all ?? []),
                filteredProducts: [],
                rows: rows,
                rowIndex: rowIndex,
                showProducts: false,
                currentIndex: null,
                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;
                    if (!selectedValue || selectedValue.trim() === '') {
                        this.rows[index].is_new = false;
                        return;
                    }

                    const normalizedSelectedValue = this.normalizeString(selectedValue);
                    const productExists = this.products.some(product => this.normalizeString(product.name) ===
                        normalizedSelectedValue);

                    if (!productExists) {
                        this.rows[index].product_name = selectedValue;
                        this.rows[index].is_new = true;
                    } else {
                        this.rows[index].product_name = selectedValue;
                        this.rows[index].is_new = false;
                    }
                },
                clearSelectedProduct(index) {
                    this.rows[index].product_name = '';
                    this.rows[index].product_id = '';
                    this.rows[index].is_new = false;
                    this.searchTerm = '';
                    this.showProducts = false;
                }
            }
        }
</script>
<script>
    //İŞLETME COMBOBOX
        function companyCombobox() {
            return {
                search: '{{ old('title', $company ? $company->name : (isset($invoice) ? $invoice->company->name : '')) }}',
                isOpen: false,
                companies: @json($companies_all ?? []),
                filteredCompanies: [],
                selectedCompanyId: '{{ old('company_id', $company ? $company->id : (isset($invoice) ? $invoice->company_id : '')) }}',
                init() {
                    // Initialize filteredCompanies based on initial search value
                    if (this.search && this.search.trim() !== '') {
                        // Apply initial filtering if there's a pre-filled search value
                        const turkishCharMap = {
                            'i': 'iı',
                            'ı': 'iı',
                            's': 'sş',
                            'ş': 'sş',
                            'g': 'gğ',
                            'ğ': 'gğ',
                            'u': 'uü',
                            'ü': 'uü',
                            'c': 'cç',
                            'ç': 'cç',
                            'o': 'oö',
                            'ö': 'oö'
                        };

                        const normalizeString = (str) => {
                            if (!str) return '';
                            return str.toLowerCase().normalize('NFD').replace(/[\u0000-\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 normalizedCompanyName.includes(searchLower);
                        });
                    } else {
                        this.filteredCompanies = this.companies;
                    }

                    // If a company is pre-selected, populate address fields
                    if (this.selectedCompanyId) {
                        fetch(`/api/companies/${this.selectedCompanyId}/address`)
                            .then(response => response.json())
                            .then(data => {
                                document.getElementById('title').value = data.title || '';
                                document.getElementById('line_1').value = data.line_1 || '';
                                document.getElementById('line_2').value = data.line_2 || '';
                                document.getElementById('district').value = data.district || '';
                                document.getElementById('city').value = data.city || '';
                                document.getElementById('country').value = data.country || '';
                                document.getElementById('zip').value = data.zip || '';
                                document.getElementById('tax_office').value = data.tax_office || '';
                                document.getElementById('vat_number').value = data.vat_number || '';
                                document.getElementById('email').value = data.email || '';
                                document.getElementById('phone').value = data.phone || '';
                            });
                    }
                },
                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) => {
                        if (!str) return '';
                        return str.toLowerCase().normalize('NFD').replace(/[\u0000-\u036f]/g, '').split('').map(
                            char => {
                                return turkishCharMap[char] || char;
                            }).join('');
                    };

                    const searchLower = normalizeString(this.search);
                    if (searchLower.trim() === '') {
                        this.filteredCompanies = this.companies;
                    } else {
                        this.filteredCompanies = this.companies.filter(company => {
                            const normalizedCompanyName = normalizeString(company.name);
                            return normalizedCompanyName.includes(searchLower);
                        });
                    }
                    this.isOpen = true;
                },
                selectCompany(company) {
                    this.search = company.name;
                    this.selectedCompanyId = company.id;
                    this.selectedCompanyName = company.name;
                    // Use setTimeout to ensure the dropdown closes after the click event
                    setTimeout(() => {
                        this.isOpen = false;
                    }, 0);

                    // Fetch and populate address fields
                    fetch(`/api/companies/${company.id}/address`)
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('title').value = data.title || '';
                            document.getElementById('line_1').value = data.line_1 || '';
                            document.getElementById('line_2').value = data.line_2 || '';
                            document.getElementById('district').value = data.district || '';
                            document.getElementById('city').value = data.city || '';
                            document.getElementById('country').value = data.country || '';
                            document.getElementById('zip').value = data.zip || '';
                            document.getElementById('tax_office').value = data.tax_office || '';
                            document.getElementById('vat_number').value = data.vat_number || '';
                            document.getElementById('email').value = data.email || '';
                            document.getElementById('phone').value = data.phone || '';
                        });
                },
                clearSelection() {
                    this.search = '';
                    this.selectedCompanyId = null;
                    this.filteredCompanies = this.companies;

                    document.getElementById('title').value = '';
                    document.getElementById('line_1').value = '';
                    document.getElementById('line_2').value = '';
                    document.getElementById('district').value = '';
                    document.getElementById('city').value = '';
                    document.getElementById('country').value = '';
                    document.getElementById('zip').value = '';
                    document.getElementById('tax_office').value = '';
                    document.getElementById('vat_number').value = '';
                    document.getElementById('email').value = '';
                    document.getElementById('phone').value = '';

                }
            }
        }
</script>
@endsection