@extends('layouts.app')

@section('title', 'Tambah Stok Keluar')

@section('content')
<form action="{{ route('stock-outs.store') }}" method="POST" id="stockOutForm">
    @csrf

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div class="bg-white rounded shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Input Barang Keluar</h2>

            <div class="mb-4">
                <label class="block mb-2 font-medium">Cari Barang</label>
                <input type="text" id="itemSearch" oninput="searchItems()" class="w-full border rounded px-3 py-2" placeholder="Ketik nama atau kode barang" autocomplete="off">
            </div>

            <div class="border rounded overflow-hidden">
                <div id="searchResult" class="divide-y">
                    <div class="px-3 py-4 text-center text-gray-500">Ketik nama barang untuk mencari.</div>
                </div>
            </div>

            <div class="mt-6">
                <label class="block mb-2 font-medium">Tanggal</label>
                <input type="date" name="date" value="{{ old('date', date('Y-m-d')) }}" class="w-full border rounded px-3 py-2" required>
                @error('date')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mt-4">
                <label class="block mb-2 font-medium">Catatan</label>
                <textarea name="note" class="w-full border rounded px-3 py-2" rows="4" placeholder="Contoh: Digunakan untuk operasional kantor">{{ old('note') }}</textarea>
                @error('note')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="bg-white rounded shadow p-6">
            <h2 class="text-lg font-semibold mb-4">Jendela Transaksi</h2>

            @if (session('error'))
                <div class="mb-4 rounded bg-red-100 border border-red-300 text-red-700 px-4 py-3">{{ session('error') }}</div>
            @endif

            @error('items')
                <p class="text-red-600 text-sm mb-3">{{ $message }}</p>
            @enderror

            <div class="border rounded overflow-hidden overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-3 py-2 text-left">Barang</th>
                            <th class="px-3 py-2 text-left">Jumlah</th>
                            <th class="px-3 py-2 text-left">Harga</th>
                            <th class="px-3 py-2 text-left">Subtotal</th>
                            <th class="px-3 py-2 text-left">Aksi</th>
                        </tr>
                    </thead>
                    <tbody id="transactionList">
                        <tr><td colspan="5" class="px-3 py-4 text-center text-gray-500">Belum ada barang yang ditambahkan.</td></tr>
                    </tbody>
                </table>
            </div>

            <div class="mt-4 bg-red-50 border border-red-200 rounded p-4 flex items-center justify-between gap-4">
                <span class="font-semibold text-red-900">Total Harga Barang Keluar</span>
                <span id="grandTotal" class="text-2xl font-bold text-red-700 whitespace-nowrap">Rp 0</span>
            </div>

            <div id="hiddenInputs"></div>

            <div class="mt-6 flex gap-2">
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Simpan Transaksi</button>
                <a href="{{ route('stock-outs.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Kembali</a>
            </div>
        </div>
    </div>
</form>

<div id="quantityModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white rounded shadow-lg w-full max-w-md p-6">
        <div class="flex items-start justify-between mb-4">
            <div>
                <h2 class="text-xl font-semibold">Jumlah Barang Keluar</h2>
                <p id="modalItemName" class="text-sm text-gray-500 mt-1"></p>
                <p id="modalItemStock" class="text-sm text-red-600 mt-1"></p>
            </div>
            <button type="button" onclick="closeQuantityModal()" class="text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>
        </div>

        <div class="mb-4">
            <label class="block mb-2 font-medium">Jumlah Keluar</label>
            <input type="number" id="modalQuantityInput" class="w-full border rounded px-3 py-2" min="1" placeholder="Masukkan jumlah">
        </div>

        <div class="flex justify-end gap-2">
            <button type="button" onclick="closeQuantityModal()" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Batal</button>
            <button type="button" onclick="confirmQuantity()" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Masukkan</button>
        </div>
    </div>
</div>

<div id="availableItems" class="hidden">
    @foreach ($items as $item)
        <div data-item-id="{{ $item->id }}" data-code="{{ $item->code }}" data-name="{{ $item->name }}" data-stock="{{ $item->stock }}" data-price="{{ $item->price }}"></div>
    @endforeach
</div>

<script>
    const availableItems = Array.from(document.querySelectorAll('#availableItems div')).map(function (item) {
        return { item_id: parseInt(item.dataset.itemId), code: item.dataset.code, name: item.dataset.name, stock: parseInt(item.dataset.stock), price: parseFloat(item.dataset.price) };
    });

    let transactionItems = [];
    let selectedItem = null;

    function formatRupiah(value) { return 'Rp ' + Number(value).toLocaleString('id-ID'); }

    function searchItems() {
        const keyword = document.getElementById('itemSearch').value.toLowerCase().trim();
        const searchResult = document.getElementById('searchResult');
        searchResult.innerHTML = '';

        if (keyword.length === 0) {
            searchResult.innerHTML = '<div class="px-3 py-4 text-center text-gray-500">Ketik nama barang untuk mencari.</div>';
            return;
        }

        const filteredItems = availableItems.filter(item => item.name.toLowerCase().includes(keyword) || item.code.toLowerCase().includes(keyword));

        if (filteredItems.length === 0) {
            searchResult.innerHTML = '<div class="px-3 py-4 text-center text-gray-500">Barang tidak ditemukan.</div>';
            return;
        }

        filteredItems.forEach(item => {
            searchResult.innerHTML += `
                <button type="button" onclick="openQuantityModal(${item.item_id})" class="w-full text-left px-3 py-3 hover:bg-red-50 flex items-center justify-between gap-4">
                    <span><span class="block font-semibold">${item.name}</span><span class="block text-sm text-gray-500">${item.code} | Stok tersedia: ${item.stock}</span></span>
                    <span class="text-sm font-semibold text-red-700 whitespace-nowrap">${formatRupiah(item.price)}</span>
                </button>`;
        });
    }

    function openQuantityModal(itemId) {
        selectedItem = availableItems.find(item => item.item_id === itemId);
        if (!selectedItem) return;
        document.getElementById('modalItemName').innerText = `${selectedItem.code} - ${selectedItem.name}`;
        document.getElementById('modalItemStock').innerText = `Stok tersedia: ${selectedItem.stock}`;
        document.getElementById('modalQuantityInput').value = '';
        document.getElementById('modalQuantityInput').max = selectedItem.stock;
        document.getElementById('quantityModal').classList.remove('hidden');
        document.getElementById('quantityModal').classList.add('flex');
        setTimeout(() => document.getElementById('modalQuantityInput').focus(), 100);
    }

    function closeQuantityModal() {
        document.getElementById('quantityModal').classList.add('hidden');
        document.getElementById('quantityModal').classList.remove('flex');
        selectedItem = null;
    }

    function getSelectedItemQuantityInTransaction() {
        const existingItem = transactionItems.find(item => item.item_id === selectedItem.item_id);
        return existingItem ? existingItem.quantity : 0;
    }

    function confirmQuantity() {
        const quantity = parseInt(document.getElementById('modalQuantityInput').value);
        if (!selectedItem) return;
        if (!quantity || quantity < 1) { alert('Jumlah keluar harus lebih dari 0.'); return; }
        if (getSelectedItemQuantityInTransaction() + quantity > selectedItem.stock) { alert('Jumlah keluar melebihi stok yang tersedia.'); return; }

        const existingItem = transactionItems.find(item => item.item_id === selectedItem.item_id);
        if (existingItem) {
            existingItem.quantity += quantity;
        } else {
            transactionItems.push({ item_id: selectedItem.item_id, code: selectedItem.code, name: selectedItem.name, stock: selectedItem.stock, price: parseFloat(selectedItem.price), quantity: quantity });
        }

        document.getElementById('itemSearch').value = '';
        document.getElementById('searchResult').innerHTML = '<div class="px-3 py-4 text-center text-gray-500">Ketik nama barang untuk mencari.</div>';
        closeQuantityModal();
        renderTransactionItems();
    }

    function removeTransactionItem(index) {
        transactionItems.splice(index, 1);
        renderTransactionItems();
    }

    function renderTransactionItems() {
        const transactionList = document.getElementById('transactionList');
        const hiddenInputs = document.getElementById('hiddenInputs');
        const grandTotalElement = document.getElementById('grandTotal');
        transactionList.innerHTML = '';
        hiddenInputs.innerHTML = '';
        grandTotalElement.innerText = 'Rp 0';

        if (transactionItems.length === 0) {
            transactionList.innerHTML = '<tr><td colspan="5" class="px-3 py-4 text-center text-gray-500">Belum ada barang yang ditambahkan.</td></tr>';
            return;
        }

        let grandTotal = 0;
        transactionItems.forEach((item, index) => {
            const subtotal = item.price * item.quantity;
            grandTotal += subtotal;
            transactionList.innerHTML += `
                <tr class="border-t">
                    <td class="px-3 py-2"><div class="font-semibold">${item.name}</div><div class="text-sm text-gray-500">${item.code} | Sisa awal: ${item.stock}</div></td>
                    <td class="px-3 py-2 font-semibold">${item.quantity}</td>
                    <td class="px-3 py-2">${formatRupiah(item.price)}</td>
                    <td class="px-3 py-2 font-semibold">${formatRupiah(subtotal)}</td>
                    <td class="px-3 py-2"><button type="button" onclick="removeTransactionItem(${index})" class="bg-red-600 text-white px-3 py-1 rounded hover:bg-red-700">Hapus</button></td>
                </tr>`;
            hiddenInputs.innerHTML += `<input type="hidden" name="items[${index}][item_id]" value="${item.item_id}"><input type="hidden" name="items[${index}][quantity]" value="${item.quantity}">`;
        });
        grandTotalElement.innerText = formatRupiah(grandTotal);
    }

    document.getElementById('modalQuantityInput').addEventListener('keydown', function (event) {
        if (event.key === 'Enter') { event.preventDefault(); confirmQuantity(); }
    });

    document.getElementById('stockOutForm').addEventListener('submit', function (event) {
        if (transactionItems.length === 0) { event.preventDefault(); alert('Tambahkan minimal satu barang ke jendela transaksi.'); }
    });
</script>
@endsection