@extends('layouts.app')

@section('headScripts')
@endsection

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <div class="">
                <div class="sm:flex sm:items-center gap-2">
                    <!-- Arama -->
                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <div
                                    class="bg-gradient-to-b from-stone-600 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                                    STOK KARTLARI</div>
                                <div class="flex-1">
                                    <form method="GET" action="{{ route('stocks.index') }}" class="flex w-full">
                                        <input type="text" name="search" placeholder="arama yapın..."
                                            value="{{ request('search') }}"
                                            class="flex-1 px-3.5 py-2 text-sm border-none" />
                                        <button type="submit"
                                            class="px-4 py-0.5 text-white transition-colors bg-stone-600 hover:bg-stone-700 rounded-r-md">
                                            <span class="text-lg material-symbols-rounded">
                                                search
                                            </span>
                                        </button>
                                    </form>
                                </div>
                            </nav>
                        </div>
                    </header>
                    <!-- Adet Filtresi -->
                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <div class="flex items-center content-center px-2.5 text-sm rounded-s-lg">
                                    <span class="material-symbols-rounded text-stone-400">
                                        ssid_chart
                                    </span>
                                </div>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['filter' => 'all'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ (request()->query('filter') == 'all' || !request()->has('filter')) ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tümü</a>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['filter' => 'negative'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('filter') == 'negative' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Eksi
                                    Stok</a>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['filter' => 'decreasing'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('filter') == 'decreasing' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Azalan
                                    Stok (0-3)</a>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['filter' => 'archived'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 hover:rounded-r-lg transition-all {{ request()->query('filter') == 'archived' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Arşivlenen</a>
                            </nav>
                        </div>
                    </header>
                    <!-- Depo Filtresi -->
                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <div class="flex items-center content-center px-2.5 text-sm rounded-s-lg">
                                    <span class="material-symbols-rounded text-stone-400">
                                        warehouse
                                    </span>
                                </div>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['warehouse' => 'all'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ (request()->query('warehouse') == 'all' || !request()->has('warehouse')) ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tümü</a>
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['warehouse' => 'main'])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('warehouse') == 'main' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Ana Depo</a>

                                @foreach($warehouses as $wh)
                                <a href="{{ route('stocks.index', array_merge(request()->query(), ['warehouse' => $wh->id])) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm rounded-lg hover:bg-stone-100 transition-all {{ request()->query('warehouse') == $wh->id ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    {{ ucwords(strtolower($wh->name)) }}</a>
                                @endforeach
                            </nav>
                        </div>
                    </header>
                    <!-- Eylem Butonları -->
                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <a href="#" onclick="printTable(); return false;" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        print
                                    </span>
                                </a>
                                <a href="{{ route('stocks.index', ['filter' => request()->query('filter', 'all'), 'date' => 'this_week']) }}"
                                    type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        file_export
                                    </span>
                                </a>
                                <a href="#" onclick="openCreateStockModal(); return false;" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                                    <span class="material-symbols-rounded text-stone-400">add</span>
                                </a>
                            </nav>
                        </div>
                    </header>
                </div>

                <div class="flow-root mt-2">
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            <div x-data="{
                                    sortField: 'date',
                                    sortDirection: 'desc',
                                    sortedInvoices: [],
                                    init() {
                                        this.sortedInvoices = [...this.parseInvoices()];
                                        this.sort();
                                    },
                                    parseInvoices() {
                                        return Array.from(document.querySelectorAll('tbody tr')).map((row) => row);
                                    },
                                    toggleSort(field) {
                                        if (this.sortField === field) {
                                            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                                        } else {
                                            this.sortField = field;
                                            this.sortDirection = 'asc';
                                        }
                                        this.sort();
                                    },
                                    sort() {
                                        const tbody = document.querySelector('tbody');
                                        this.sortedInvoices.sort((a, b) => {
                                            let aValue, bValue;
                                            const cellIndex = Array.from(document.querySelectorAll('th')).findIndex(
                                                th => th.getAttribute('data-field') === this.sortField
                                            );

                                            if (cellIndex !== -1) {
                                                aValue = a.children[cellIndex].textContent.trim();
                                                bValue = b.children[cellIndex].textContent.trim();
                                            }

                                            if (this.sortField === 'date') {
                                                const dateA = this.parseDate(aValue);
                                                const dateB = this.parseDate(bValue);
                                                return this.sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                                            }

                                            if (['total_sub', 'total_vat', 'total_amount'].includes(this.sortField)) {
                                                const numA = parseFloat(aValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                const numB = parseFloat(bValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                                return this.sortDirection === 'asc' ? numA - numB : numB - numA;
                                            }

                                            return this.sortDirection === 'asc' ?
                                                aValue.localeCompare(bValue) :
                                                bValue.localeCompare(aValue);
                                        });

                                        // Clear and refill tbody
                                        while (tbody.firstChild) {
                                            tbody.removeChild(tbody.firstChild);
                                        }

                                        this.sortedInvoices.forEach(row => {
                                            tbody.appendChild(row);
                                        });
                                    },
                                    sortIcon(field) {
                                        if (this.sortField !== field) return '↕';
                                        return this.sortDirection === 'asc' ? '↑' : '↓';
                                    },
                                    parseDate(dateString) {
                                        // Parse date from format DD.MM.YYYY
                                        const parts = dateString.split('.');
                                        return new Date(parts[2], parts[1] - 1, parts[0]);
                                    }
                                }">
                                <table class="min-w-full divide-y divide-stone-300">
                                    <thead>
                                        <tr class="p-2 text-sm font-light text-right whitespace-nowrap text-stone-500">
                                            <th scope="col" data-field="company" @click="toggleSort('company')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Stok Kartı <span x-text="sortIcon('company')"></span></th>
                                            <th scope="col" data-field="recipe" class="p-2 text-center">
                                                Bulunduğu Reçete</th>
                                            <th scope="col" data-field="number" @click="toggleSort('number')"
                                                class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                Stok Miktarı <span x-text="sortIcon('number')"></span></th>
                                            <th scope="col" data-field="transaction_count" class="p-2 text-left">
                                                Hareket Sayısı</th>
                                            <th scope="col" data-field="total_sub" @click="toggleSort('trl_sub')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Kategori <span x-text="sortIcon('trl_sub')"></span></th>
                                            <th scope="col" data-field="trl_total" @click="toggleSort('trl_total')"
                                                class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                Son Birim Maliyeti <span x-text="sortIcon('trl_total')"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @if (count($stocks) > 0)
                                        @foreach ($stocks as $item)
                                        <tr class="transition-all cursor-pointer hover:bg-stone-100"
                                            onclick="openStockModal({{ $item->id }}, {{ json_encode($item->name, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) }}, {{ $item->warehouse_quantity ?? $item->getStockQuantityAttribute() }}, {{ json_encode(uom_localized($item->uom), JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT) }}, {{ $item->getLastSupplierPriceAttribute() }})">
                                            <td class="px-2 py-1 text-base font-medium text-stone-900 whitespace-nowrap"
                                                onclick="event.stopPropagation()">
                                                <x-popover route="{{ route('stocks.show', $item->id) }}"
                                                    data="{!! html_entity_decode($item->name) !!}"
                                                    text="Stok kartına git" />
                                            </td>
                                            <td
                                                class="flex items-center justify-center text-sm gap-x-1 {{ $item->recipe_count > 0 ? 'text-stone-600' : 'text-stone-300' }} whitespace-nowrap">
                                                <span class="material-symbols-rounded mt-2.5">
                                                    merge_type
                                                </span>
                                                <span class="font-medium mt-2.5">
                                                    {{ $item->recipe_count }}
                                                </span>
                                            </td>
                                            <td
                                                class="px-2 py-1 text-base font-bold text-right {{ ($item->warehouse_quantity ?? $item->getStockQuantityAttribute()) > 0 ? 'text-stone-600' : 'text-rose-600' }} whitespace-nowrap">
                                                <p class="underline underline-offset-4">{{
                                                    number_format($item->warehouse_quantity ??
                                                    $item->getStockQuantityAttribute(), 2, ',', '.') }}
                                                </p>
                                                <p class="text-xs font-normal text-stone-400">{{
                                                    uom_localized($item->uom) }}</p>
                                            </td>

                                            <td
                                                class="flex items-center px-2 py-1 text-sm gap-x-1 text-stone-700 whitespace-nowrap">
                                                <span class="material-symbols-rounded text-stone-400">
                                                    multiple_stop
                                                </span>
                                                <span class="uppercase text-stone-400">{{
                                                    $item->getTransactionCountAttribute() }}</span>
                                            </td>
                                            <td class="px-2 py-1 text-sm text-stone-500 whitespace-nowrap">
                                                {{ $item->category->name ?? '...' }}
                                            </td>
                                            <td
                                                class="px-2 py-1 text-sm font-bold text-right text-stone-600 whitespace-nowrap">
                                                <p>{{ number_format($item->getLastSupplierPriceAttribute(), 2, ',', '.')
                                                    }} TRL</p>
                                                <p class="text-xs font-normal text-stone-400">
                                                    {{ uom_localized($item->uom) }}</p>
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <x-alert-standard color="stone">
                                            Seçili aralıkta veri bulunmuyor.
                                        </x-alert-standard>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Pagination -->
                <div class="flex items-center justify-between mt-6">
                    <div class="text-sm text-stone-600">
                        {{ $stocks->firstItem() ?? 0 }} - {{ $stocks->lastItem() ?? 0 }} / {{ $stocks->total() }} kayıt
                        gösteriliyor
                        @if(request('search'))
                        <span class="ml-2 text-stone-500">({{ request('search') }} araması için)</span>
                        @endif
                    </div>
                    <div class="flex space-x-2">
                        {{ $stocks->appends(['search' => request('search')])->links() }}
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<!-- Stock Transaction Modal -->
<div id="stockModal" class="fixed inset-0 z-50 items-center justify-center hidden bg-black bg-opacity-50">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900" id="modalStockName">Stok Hareketi</h3>
            <button onclick="closeStockModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="stockTransactionForm" class="space-y-4">
            <!-- Mevcut Miktar (Bilgilendirme) -->
            <div class="p-3 rounded-md bg-stone-100">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-stone-700">Mevcut Miktar:</span>
                    <span class="text-xl font-bold text-stone-900">
                        <span id="currentQuantity">0</span><span id="currentUom"
                            class="pl-1 text-sm font-normal text-stone-500"></span>
                    </span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm font-medium text-stone-700">Son Birim Maliyeti:</span>
                    <span class="text-base font-semibold text-stone-900">
                        <span id="lastUnitPrice">0,00</span><span
                            class="pl-1 text-xs font-normal text-stone-500">TRL</span>
                    </span>
                </div>
            </div>

            <!-- DEPO SEÇİMİ -->
            <div class="mb-4">
                <label for="warehouse" class="block mb-1 text-sm font-medium text-stone-700">
                    Depo Seçimi
                </label>
                <select id="warehouse" name="warehouse_id"
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                    <option value="" selected>ANA DEPO</option>
                    @foreach ($warehouses as $warehouse)
                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Üst İki Input Yan Yana -->
            <div class="grid grid-cols-2 gap-4">
                <!-- Stok Hareketi -->
                <div>
                    <label for="stockMovement" class="block mb-1 text-sm font-medium text-stone-700">
                        Stok Hareketi
                    </label>
                    <input type="text" id="stockMovement" name="stockMovement" value="0" inputmode="decimal"
                        autocomplete="off"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        oninput="updateNewQuantity()" onfocus="this.select()" />
                </div>

                <!-- Yeni Miktar -->
                <div>
                    <label for="newQuantity" class="block mb-1 text-sm font-medium text-stone-700">
                        Yeni Miktar
                    </label>
                    <div class="relative">
                        <input type="text" id="newQuantity" name="newQuantity" inputmode="decimal" autocomplete="off"
                            class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                            oninput="updateMovementFromNewQuantity()" onfocus="this.select()" />
                        <span id="modalUom"
                            class="absolute text-xs transform -translate-y-1/2 right-3 top-1/2 text-stone-400"></span>
                    </div>
                </div>
            </div>

            <!-- Fiyat ve KDV Alanları (Sadece + Hareket İçin) -->
            <div id="priceFields" class="hidden space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="basePrice" class="block mb-1 text-sm font-medium text-stone-700">
                            Birim Maliyeti
                        </label>
                        <input type="text" id="basePrice" name="basePrice" value="0" inputmode="decimal"
                            autocomplete="off"
                            class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                            onfocus="this.select()" />
                    </div>
                    <div>
                        <label for="vatPct" class="block mb-1 text-sm font-medium text-stone-700">
                            KDV (%)
                        </label>
                        <input type="text" id="vatPct" name="vatPct" value="0" inputmode="decimal" autocomplete="off"
                            class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                            onfocus="this.select()" />
                    </div>
                </div>
            </div>

            <!-- Hareket Açıklaması -->
            <div class="grid gap-x-4">
                <div>
                    <label for="notes" class="block mb-1 text-sm font-medium text-stone-700">
                        Hareket Açıklaması
                    </label>
                    <textarea id="notes" name="notes" rows="3"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"
                        onfocus="this.select()"></textarea>
                </div>
                <div class="mt-3">
                    <label for="" class="block mb-1 text-sm font-medium text-stone-700">
                        Hazır açıklama metinleri
                    </label>
                    <div class="flex flex-wrap gap-2 mt-2 tracking-tighter">
                        <button type="button" onclick="setNoteText('Anlık stok sayımı.')"
                            class="px-3 py-1 text-xs transition-colors border rounded-md bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100">
                            Anlık stok sayımı
                        </button>
                        <button type="button" onclick="setNoteText('Ay sonu stok sayımı.')"
                            class="px-3 py-1 text-xs transition-colors border rounded-md bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100">
                            Ay sonu stok sayımı
                        </button>
                        <button type="button" onclick="setNoteText('Hata düzeltme hareketi.')"
                            class="px-3 py-1 text-xs transition-colors border rounded-md bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100">
                            Hata düzeltme hareketi
                        </button>
                        <button type="button" onclick="setNoteText('Ürün tedariği.')"
                            class="px-3 py-1 text-xs transition-colors border rounded-md bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100">
                            Ürün tedariği.
                        </button>
                        <button type="button" onclick="setNoteText('Zayi kaynaklı stok düşümü.')"
                            class="px-3 py-1 text-xs transition-colors border rounded-md bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100">
                            Zayi kaynaklı stok düşümü.
                        </button>
                    </div>
                </div>
            </div>

            <!-- Kaydet Butonu -->
            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeStockModal()"
                    class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                    VAZGEÇ
                </button>
                <button type="submit" id="submitStockBtn" disabled
                    class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md opacity-50 cursor-not-allowed bg-stone-600">
                    HAREKETİ KAYDET
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Create Stock Item Modal -->
<div id="createStockModal" class="fixed inset-0 z-50 items-center justify-center hidden bg-black bg-opacity-50">
    <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
        <!-- Modal Header -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-stone-900">Yeni Stok Kartı</h3>
            <button onclick="closeCreateStockModal()" class="text-stone-400 hover:text-stone-600">
                <span class="text-2xl material-symbols-rounded">close</span>
            </button>
        </div>

        <!-- Modal Body -->
        <form id="createStockForm" class="space-y-4">
            @php
            $categories = \App\Models\Category::where('type','pos_stock')->orderBy('name')->get(['id','name']);
            $uoms = ['piece' => 'Adet', 'kilogram' => 'Kg', 'gram' => 'gr', 'liter' => 'Lt', 'centiliter' => 'cL',
            'milliliter' => 'mL', 'minute' => 'dk'];
            @endphp
            <div>
                <label for="stockName" class="block mb-1 text-sm font-medium text-stone-700">Adı</label>
                <input type="text" id="stockName" name="name" required
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="stockPrice" class="block mb-1 text-sm font-medium text-stone-700">Birim Fiyat</label>
                    <input type="text" id="stockPrice" name="price" inputmode="decimal" required value="0"
                        onfocus="this.select()"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>
                <div>
                    <label for="stockVat" class="block mb-1 text-sm font-medium text-stone-700">KDV (%)</label>
                    <input type="text" id="stockVat" name="vat_pct" inputmode="decimal" required value="0"
                        onfocus="this.select()"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="stockCategory" class="block mb-1 text-sm font-medium text-stone-700">Kategori</label>
                    <select id="stockCategory" name="category_id" required
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                        <option value="" disabled selected>Seçiniz</option>
                        @foreach($categories as $cat)
                        <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="stockUom" class="block mb-1 text-sm font-medium text-stone-700">Birim</label>
                    <select id="stockUom" name="uom" required
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500">
                        <option value="" disabled selected>Seçiniz</option>
                        @foreach($uoms as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label for="stockQuantity" class="block mb-1 text-sm font-medium text-stone-700">Başlangıç
                        Miktarı</label>
                    <input type="text" id="stockQuantity" name="quantity" inputmode="decimal" required value="0"
                        onfocus="this.select()"
                        class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500" />
                </div>
                <div class="flex items-end">
                    <span id="createModalUom" class="ml-2 text-sm text-stone-500"></span>
                </div>
            </div>

            <div>
                <label for="stockNotes" class="block mb-1 text-sm font-medium text-stone-700">Notlar</label>
                <textarea id="stockNotes" name="notes" rows="3"
                    class="w-full px-3 py-2 border rounded-md bg-stone-50 border-stone-300 focus:outline-none focus:ring-2 focus:ring-stone-500"></textarea>
            </div>

            <div class="flex justify-end gap-2">
                <button type="button" onclick="closeCreateStockModal()"
                    class="px-4 py-2 text-sm font-medium transition-colors border rounded-md text-stone-700 border-stone-300 hover:bg-stone-50">
                    VAZGEÇ
                </button>
                <button type="submit" id="submitCreateStockBtn"
                    class="px-4 py-2 text-sm font-medium text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                    OLUŞTUR
                </button>
            </div>
        </form>
    </div>

</div>

@endsection

@section('scripts')
<script>
    // Sayısal değerleri güvenle ayrıştır ("," veya "." ondalık ayracı destekler)
    function parseNumber(val) {
        if (val === null || val === undefined) return 0;
        const str = String(val).trim().replace(/\s+/g, '');
        // Binlik ayırıcı yok varsayımıyla virgülü noktaya çevir
        const normalized = str.replace(',', '.');
        const num = parseFloat(normalized);
        return isNaN(num) ? 0 : num;
    }

    // Geri yazarken iki ondalık ve Türkçe gösterim için virgüllü format
    function formatNumberTR(num) {
        try {
            return (Number(num) || 0).toFixed(2).replace('.', ',');
        } catch (e) {
            return '0,00';
        }
    }

    // İki input arasında sonsuz döngüyü önlemek için bayrak
    let isSyncingInputs = false;
    function printTable() {
            // Create a new window for printing
            let printWindow = window.open('', '_blank');

            // Get the table content
            let table = document.querySelector('table').cloneNode(true);

            // Create HTML for the print window
            let html = `
                <!DOCTYPE html>
                <html>
                <head>
                    <title>STOK KARTLARI</title>
                    <meta charset="utf-8">
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        table { width: 100%; border-collapse: collapse; }
                        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                        th { background-color: #f2f2f2; }
                        .text-right { text-align: right; }
                        .print-header { margin-bottom: 20px; }
                        .print-footer { margin-top: 30px; font-size: 12px; text-align: center; color: #666; }
                        @media print {
                            button { display: none; }
                        }
                    </style>
                </head>
                <body>
                    <div class="print-header">
                        <h1>STOK KARTLARI</h1>
                        <p>Yazdırma Tarihi: ${new Date().toLocaleDateString('tr-TR')}</p>
                    </div>

                    <button onclick="window.print(); return false;" style="padding: 8px 16px; margin-bottom: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Yazdır</button>

                    <div id="table-container"></div>

                    <div class="print-footer">
                        <p>Bu rapor Apper {{ $tool_name }} ile {{ date('d.m.Y') }} tarihinde oluşturulmuştur.</p>
                    </div>
                </body>
                </html>
                `;

            // Write to the new window
            printWindow.document.write(html);

            // Insert the table into the container
            printWindow.document.getElementById('table-container').appendChild(table);

            // Make all columns visible and properly formatted for print
            let rows = printWindow.document.querySelectorAll('table tr');
            rows.forEach(row => {
                let cells = row.querySelectorAll('th, td');
                cells.forEach(cell => {
                    if (cell.classList.contains('text-right')) {
                        cell.style.textAlign = 'right';
                    }
                });
            });

            // Finish loading the document
            printWindow.document.close();
        }

        // Modal işlemleri için değişkenler
        let currentStockId = null;
        let currentStockQuantity = 0;
        let currentStockUom = '';
        let currentLastPrice = 0;

    function openStockModal(stockId, stockName, currentQuantity, uom, lastPrice = 0) {
            // Prevent event bubbling from table row click
            event.stopPropagation();

            // Modal verilerini ayarla
            currentStockId = stockId;
            currentStockQuantity = parseFloat(currentQuantity);
            currentStockUom = uom;
            currentLastPrice = parseFloat(lastPrice);

            // Modal içeriğini doldur
            document.getElementById('modalStockName').textContent = stockName;
            document.getElementById('stockMovement').value = '0';
            document.getElementById('notes').value = 'Anlık stok sayımı.';
            document.getElementById('modalUom').textContent = uom;

            // Mevcut miktarı göster
            document.getElementById('currentQuantity').textContent = formatNumberTR(currentQuantity);
            document.getElementById('currentUom').textContent = uom;

            // Son birim maliyetini göster
            document.getElementById('lastUnitPrice').textContent = formatNumberTR(lastPrice);

            // Fiyat alanına son birim maliyetini otomatik doldur
            document.getElementById('basePrice').value = formatNumberTR(lastPrice);

            // Yeni miktarı güncelle
            updateNewQuantity();

            // Modal'ı göster
            const modal = document.getElementById('stockModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeStockModal() {
            const modal = document.getElementById('stockModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');

            // Form'u temizle
            document.getElementById('stockTransactionForm').reset();
        }

        function setNoteText(text) {
            document.getElementById('notes').value = text;
            document.getElementById('notes').focus();
        }

        // Create Stock Modal handlers
        function openCreateStockModal() {
            const modal = document.getElementById('createStockModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }
        function closeCreateStockModal() {
            const modal = document.getElementById('createStockModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
            document.getElementById('createStockForm').reset();
        }

        // Show selected uom label near quantity
        document.addEventListener('change', function(e){
            if (e.target && e.target.id === 'stockUom') {
                const label = e.target.options[e.target.selectedIndex]?.text || '';
                document.getElementById('createModalUom').textContent = label;
            }
        });

        function updateNewQuantity() {
            if (isSyncingInputs) return;
            isSyncingInputs = true;

            const movement = parseNumber(document.getElementById('stockMovement').value);
            const newQuantity = currentStockQuantity + movement;

            document.getElementById('newQuantity').value = formatNumberTR(newQuantity);

            // Fiyat alanlarını göster/gizle
            togglePriceFields(movement);

            updateSubmitButtonState(movement);
            isSyncingInputs = false;
        }

        function updateMovementFromNewQuantity() {
            if (isSyncingInputs) return;
            isSyncingInputs = true;

            const newQty = parseNumber(document.getElementById('newQuantity').value);
            const movement = newQty - currentStockQuantity;

            document.getElementById('stockMovement').value = formatNumberTR(movement);

            // Fiyat alanlarını göster/gizle
            togglePriceFields(movement);

            updateSubmitButtonState(movement);
            isSyncingInputs = false;
        }

        function togglePriceFields(movement) {
            const priceFields = document.getElementById('priceFields');
            if (movement > 0) {
                priceFields.classList.remove('hidden');
            } else {
                priceFields.classList.add('hidden');
            }
        }

        function updateSubmitButtonState(movementVal) {
            const movement = typeof movementVal === 'number' ? movementVal : parseNumber(document.getElementById('stockMovement').value);
            const submitBtn = document.getElementById('submitStockBtn');
            if (!movement || movement === 0) {
                submitBtn.disabled = true;
                submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
                submitBtn.classList.remove('hover:bg-stone-700');
            } else {
                submitBtn.disabled = false;
                submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                submitBtn.classList.add('hover:bg-stone-700');
            }
        }

        // Form submit işlemi
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('stockTransactionForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const movement = parseNumber(document.getElementById('stockMovement').value);
                const notes = document.getElementById('notes').value;
                const newQuantity = currentStockQuantity + movement;

                // Değer 0 ise işlem yapma
                if (movement === 0) {
                    return;
                }

                // Submit butonunu devre dışı bırak
                const submitBtn = document.getElementById('submitStockBtn');
                submitBtn.disabled = true;
                submitBtn.textContent = 'KAYDEDİLİYOR...';

                // Payload oluştur
                const warehouseId = document.getElementById('warehouse').value;
                const payload = {
                    stock_item_id: currentStockId,
                    warehouse_id: warehouseId ? parseInt(warehouseId) : null,
                    change: movement,
                    new_quantity: newQuantity,
                    notes: notes
                };

                // Eğer hareket pozitifse fiyat bilgilerini ekle
                if (movement > 0) {
                    payload.base_price = parseNumber(document.getElementById('basePrice').value);
                    payload.vat_pct = parseNumber(document.getElementById('vatPct').value);
                }

                // AJAX request
                fetch('{{ route("stock-transactions.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Başarılı - sayfayı yenile
                        window.location.reload();
                    } else {
                        alert('Hata: ' + (data.message || 'İşlem başarısız oldu.'));
                        submitBtn.disabled = false;
                        submitBtn.textContent = 'HAREKETİ KAYDET';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Bir hata oluştu. Lütfen tekrar deneyin.');
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'HAREKETİ KAYDET';
                });
            });

            // Modal dışına tıklandığında kapat
            document.getElementById('stockModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeStockModal();
                }
            });

            // Create stock submit
            document.getElementById('createStockForm').addEventListener('submit', function(e){
                e.preventDefault();
                const btn = document.getElementById('submitCreateStockBtn');
                btn.disabled = true;
                btn.textContent = 'KAYDEDİLİYOR...';

                const payload = {
                    name: document.getElementById('stockName').value.trim(),
                    price: parseNumber(document.getElementById('stockPrice').value),
                    category_id: parseInt(document.getElementById('stockCategory').value || '0'),
                    vat_pct: parseNumber(document.getElementById('stockVat').value),
                    uom: document.getElementById('stockUom').value,
                    quantity: parseNumber(document.getElementById('stockQuantity').value),
                    notes: document.getElementById('stockNotes').value.trim(),
                };

                fetch('{{ route("stocks.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(payload)
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        window.location.reload();
                    } else {
                        alert('Hata: ' + (data.message || 'Kayıt başarısız.'));
                        btn.disabled = false;
                        btn.textContent = 'OLUŞTUR';
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Bir hata oluştu.');
                    btn.disabled = false;
                    btn.textContent = 'OLUŞTUR';
                });
            });
        });

</script>
@endsection