@extends('layouts.app')

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

@section('content')
<form action="{{ route('stock-ins.store') }}" method="POST" id="stockInForm">
    @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 Masuk</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: Pembelian barang baru"
                >{{ 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>

            @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 id="emptyRow">
                            <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-blue-50 border border-blue-200 rounded p-4 flex items-center justify-between gap-4">
                <span class="font-semibold text-blue-900">Total Harga Barang Masuk</span>
                <span id="grandTotal" class="text-2xl font-bold text-blue-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-ins.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 Masuk</h2>
                <p id="modalItemName" class="text-sm text-gray-500 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 Masuk</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 => {
            return 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-blue-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: ${item.stock}</span>
                    </span>
                    <span class="text-sm font-semibold text-blue-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('modalQuantityInput').value = '';

        const modal = document.getElementById('quantityModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        setTimeout(() => document.getElementById('modalQuantityInput').focus(), 100);
    }

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

    function confirmQuantity() {
        const quantity = parseInt(document.getElementById('modalQuantityInput').value);

        if (!selectedItem) {
            return;
        }

        if (!quantity || quantity < 1) {
            alert('Jumlah masuk harus lebih dari 0.');
            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,
                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 id="emptyRow">
                    <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}</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('stockInForm').addEventListener('submit', function (event) {
        if (transactionItems.length === 0) {
            event.preventDefault();
            alert('Tambahkan minimal satu barang ke jendela transaksi.');
        }
    });
</script>
@endsection