@extends('admin.master')

@section('content')
@include('admin.inventory._styles')

@php
    $supplierOptions = $suppliers->map(function ($supplier) {
        return [
            'id' => (int) $supplier->id,
            'name' => $supplier->name,
            'phone' => $supplier->phone,
            'address' => $supplier->address,
            'image' => $supplier->imageUrl(),
        ];
    })->values();

    $startingItems = old('items', $initialItems);
    $selectedSupplierId = (int) old('supplier_id', $purchase->supplier_id ?: 0);
@endphp

<div class="ip-shell">
    @if($errors->any())
        <div class="ip-alert error">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    <form
        id="purchaseForm"
        method="POST"
        action="{{ $editing ? route('admin.purchases.update', $purchase) : route('admin.purchases.store') }}"
    >
        @csrf
        @if($editing)
            @method('PUT')
        @endif

        <input type="hidden" name="discount_amount" value="{{ old('discount_amount', $purchase->discount_amount ?: 0) }}">
        <input type="hidden" name="shipping_amount" value="{{ old('shipping_amount', $purchase->shipping_amount ?: 0) }}">
        <input type="hidden" name="supplier_id" id="supplierIdInput" value="{{ $selectedSupplierId ?: '' }}">

        <div class="ip-head">
            <div class="ip-head-left">
                <a class="ip-btn ip-btn-sm" href="{{ route('admin.purchases.index') }}">← Back</a>

                <div>
                    <h1 class="ip-title">{{ $editing ? 'Edit Purchase' : 'Add Purchase' }}</h1>
                    <p class="ip-subtitle">Record stock incoming from a supplier and keep your inventory in sync.</p>
                </div>
            </div>
        </div>

        <div class="ip-form-layout">
            <main>
                <section class="ip-card ip-section">
                    <div class="ip-section-head">
                        <h2 class="ip-section-title">
                            <span class="ip-step">1</span>
                            Supplier <span class="ip-required">*</span>
                        </h2>

                        <a class="ip-btn ip-btn-sm" href="{{ route('admin.suppliers.create') }}">＋ New Supplier</a>
                    </div>

                    <div class="ip-section-body">
                        <div class="ip-grid-2" style="align-items:start">
                            <div class="ip-field">
                                <div class="ip-selector" id="supplierSelector">
                                    <button class="ip-selector-button" type="button" id="supplierSelectorButton">
                                        <span id="supplierButtonContent">⌕ Search supplier by name or phone...</span>
                                        <span>⌄</span>
                                    </button>

                                    <div class="ip-selector-dropdown" id="supplierDropdown">
                                        <div class="ip-selector-search">
                                            <input id="supplierSearchInput" type="search" placeholder="Type to filter...">
                                        </div>
                                        <div class="ip-selector-list" id="supplierList"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="ip-field">
                                <label class="ip-label" for="purchase_date">Purchase Date</label>
                                <input
                                    class="ip-input"
                                    id="purchase_date"
                                    type="date"
                                    name="purchase_date"
                                    value="{{ old('purchase_date', optional($purchase->purchase_date)->format('Y-m-d') ?: today()->format('Y-m-d')) }}"
                                >
                            </div>
                        </div>
                    </div>
                </section>

                <section class="ip-card ip-section">
                    <div class="ip-section-head">
                        <h2 class="ip-section-title">
                            <span class="ip-step">2</span>
                            Products <span class="ip-required">*</span>
                        </h2>

                        <span class="ip-help" id="lineCounter" style="margin:0">0 items · 0 units</span>
                    </div>

                    <div class="ip-section-body">
                        <div class="ip-selector" id="productSelector">
                            <button class="ip-selector-button" type="button" id="productSelectorButton">
                                <span>⊕ Add product — search by name or SKU...</span>
                                <span style="font-size:10px;border:1px solid #d9dee6;border-radius:4px;padding:2px 7px">/</span>
                            </button>

                            <div class="ip-selector-dropdown" id="productDropdown">
                                <div class="ip-selector-search">
                                    <input id="productSearchInput" type="search" placeholder="Type product name or SKU...">
                                </div>
                                <div class="ip-selector-list" id="productList"></div>
                            </div>
                        </div>

                        <div id="purchaseItemsContainer"></div>

                        <div class="ip-products-empty" id="productsEmptyState">
                            <div class="icon">◇</div>
                            <strong>No products yet</strong>
                            <span>Search and add products above to build this purchase.</span>
                        </div>
                    </div>
                </section>

                <section class="ip-card ip-section">
                    <div class="ip-section-head">
                        <h2 class="ip-section-title">
                            <span class="ip-step">3</span>
                            Note
                        </h2>
                    </div>

                    <div class="ip-section-body">
                        <textarea
                            class="ip-textarea"
                            name="note"
                            placeholder="Internal note about this purchase..."
                        >{{ old('note', $purchase->note) }}</textarea>
                    </div>
                </section>
            </main>

            <aside>
                <section class="ip-card ip-summary">
                    <div class="ip-summary-head">▣ Summary</div>

                    <div class="ip-summary-body">
                        <div class="ip-summary-metrics">
                            <div class="ip-summary-metric">
                                <small>Items</small>
                                <strong id="summaryItems">0</strong>
                            </div>

                            <div class="ip-summary-metric">
                                <small>Total Units</small>
                                <strong id="summaryUnits">0</strong>
                            </div>
                        </div>

                        <div class="ip-grand-total">
                            <span>Grand Total</span>
                            <strong><span id="summaryTotal">0</span> Tk</strong>
                        </div>

                        <div class="ip-info-box">
                            ⓘ Saved as <strong>pending</strong>. Mark received later to update stock.
                        </div>

                        <button class="ip-btn ip-btn-primary" style="width:100%" type="submit">
                            ✓ {{ $editing ? 'Update Purchase' : 'Add Purchase' }}
                        </button>

                        <a class="ip-btn" style="width:100%;margin-top:8px" href="{{ route('admin.purchases.index') }}">Cancel</a>
                    </div>
                </section>

                <div class="ip-tip">
                    <strong>💡 Tip</strong>
                    Use <kbd>Tab</kbd> to move between quantity and price fields while entering line items.
                </div>
            </aside>
        </div>
    </form>
</div>

<script>
(() => {
    const suppliers = {{ \Illuminate\Support\Js::from($supplierOptions) }};
    const startingItems = {{ \Illuminate\Support\Js::from($startingItems) }};
    const selectedSupplierId = Number(@json($selectedSupplierId));
    const catalogUrl = @json(route('admin.purchases.catalog'));

    const supplierIdInput = document.getElementById('supplierIdInput');
    const supplierButton = document.getElementById('supplierSelectorButton');
    const supplierButtonContent = document.getElementById('supplierButtonContent');
    const supplierDropdown = document.getElementById('supplierDropdown');
    const supplierSearch = document.getElementById('supplierSearchInput');
    const supplierList = document.getElementById('supplierList');

    const productButton = document.getElementById('productSelectorButton');
    const productDropdown = document.getElementById('productDropdown');
    const productSearch = document.getElementById('productSearchInput');
    const productList = document.getElementById('productList');
    const itemsContainer = document.getElementById('purchaseItemsContainer');
    const emptyState = document.getElementById('productsEmptyState');

    const lineCounter = document.getElementById('lineCounter');
    const summaryItems = document.getElementById('summaryItems');
    const summaryUnits = document.getElementById('summaryUnits');
    const summaryTotal = document.getElementById('summaryTotal');

    let catalog = [];
    let selectedItems = [];

    const escapeHtml = value => String(value ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#039;');

    const money = value => Number(value || 0).toLocaleString('en-US', {
        minimumFractionDigits: 0,
        maximumFractionDigits: 2,
    });

    const initials = value => String(value || '?').trim().charAt(0).toUpperCase();

    function supplierAvatar(supplier) {
        if (supplier.image) {
            return `<span class="ip-avatar"><img src="${escapeHtml(supplier.image)}" alt=""></span>`;
        }

        return `<span class="ip-avatar">${escapeHtml(initials(supplier.name))}</span>`;
    }

    function renderSupplierSelection(supplier) {
        if (!supplier) {
            supplierIdInput.value = '';
            supplierButton.classList.remove('active');
            supplierButtonContent.innerHTML = '⌕ Search supplier by name or phone...';
            return;
        }

        supplierIdInput.value = supplier.id;
        supplierButton.classList.add('active');
        supplierButtonContent.innerHTML = `
            <span class="ip-selected-supplier">
                ${supplierAvatar(supplier)}
                <span>
                    <strong>${escapeHtml(supplier.name)}</strong>
                    <small>☎ ${escapeHtml(supplier.phone || '')} · ⌖ ${escapeHtml(supplier.address || 'No address')}</small>
                </span>
            </span>
        `;
    }

    function renderSupplierList(term = '') {
        const needle = term.trim().toLowerCase();
        const filtered = suppliers.filter(supplier => {
            const haystack = `${supplier.name} ${supplier.phone} ${supplier.address || ''}`.toLowerCase();
            return haystack.includes(needle);
        });

        supplierList.innerHTML = filtered.length
            ? filtered.map(supplier => `
                <button class="ip-selector-item" type="button" data-supplier-id="${supplier.id}">
                    ${supplierAvatar(supplier)}
                    <span class="ip-selector-main">
                        <strong>${escapeHtml(supplier.name)}</strong>
                        <small>${escapeHtml(supplier.phone || '')} · ${escapeHtml(supplier.address || 'No address')}</small>
                    </span>
                </button>
            `).join('')
            : `<div class="ip-empty" style="min-height:110px"><strong>No suppliers match</strong>${escapeHtml(term)}</div>`;
    }

    supplierButton.addEventListener('click', () => {
        supplierDropdown.classList.toggle('open');
        productDropdown.classList.remove('open');
        if (supplierDropdown.classList.contains('open')) {
            supplierSearch.focus();
        }
    });

    supplierSearch.addEventListener('input', () => renderSupplierList(supplierSearch.value));

    supplierList.addEventListener('click', event => {
        const button = event.target.closest('[data-supplier-id]');
        if (!button) return;

        const supplier = suppliers.find(item => item.id === Number(button.dataset.supplierId));
        renderSupplierSelection(supplier);
        supplierDropdown.classList.remove('open');
    });

    function productImage(item) {
        if (item.image) {
            return `<span class="ip-thumb"><img src="${escapeHtml(item.image)}" alt=""></span>`;
        }

        return `<span class="ip-thumb">◇</span>`;
    }

    function renderProductList(term = '') {
        const needle = term.trim().toLowerCase();
        const selectedKeys = new Set(selectedItems.map(item => item.key));

        const filtered = catalog.filter(item => {
            const haystack = `${item.name} ${item.variant_name || ''} ${item.sku || ''}`.toLowerCase();
            return haystack.includes(needle);
        });

        productList.innerHTML = filtered.length
            ? filtered.map(item => `
                <button class="ip-selector-item" type="button" data-product-key="${escapeHtml(item.key)}" ${selectedKeys.has(item.key) ? 'disabled' : ''}>
                    ${productImage(item)}
                    <span class="ip-selector-main">
                        <strong>${escapeHtml(item.name)}${item.variant_name ? ` — ${escapeHtml(item.variant_name)}` : ''}</strong>
                        <small>${escapeHtml(item.sku || 'No SKU')}</small>
                    </span>
                    <span class="ip-selector-side">
                        ON HAND<br><strong style="font-size:13px;color:#253044">${Number(item.on_hand || 0)}</strong>
                        <span style="display:inline-block;margin-left:9px;color:#16a34a;background:#edfff3;border-radius:5px;padding:5px 8px">＋ Add</span>
                    </span>
                </button>
            `).join('')
            : `<div class="ip-empty" style="min-height:110px"><strong>No products match</strong>${escapeHtml(term)}</div>`;
    }

    productButton.addEventListener('click', () => {
        productDropdown.classList.toggle('open');
        supplierDropdown.classList.remove('open');
        if (productDropdown.classList.contains('open')) {
            productSearch.focus();
        }
    });

    productSearch.addEventListener('input', () => renderProductList(productSearch.value));

    productList.addEventListener('click', event => {
        const button = event.target.closest('[data-product-key]');
        if (!button || button.disabled) return;

        const item = catalog.find(row => row.key === button.dataset.productKey);
        if (!item || selectedItems.some(row => row.key === item.key)) return;

        selectedItems.push({
            ...item,
            quantity: 0,
            unit_cost: Number(item.suggested_cost || 0),
        });

        productDropdown.classList.remove('open');
        productSearch.value = '';
        renderItems();
        renderProductList();
    });

    function renderItems() {
        if (!selectedItems.length) {
            itemsContainer.innerHTML = '';
            emptyState.style.display = 'flex';
            refreshSummary();
            return;
        }

        emptyState.style.display = 'none';

        itemsContainer.innerHTML = `
            <div class="ip-purchase-table">
                <table class="ip-table">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>On Hand</th>
                            <th>Unit Cost (TK)</th>
                            <th>Qty</th>
                            <th style="color:#16a34a">Subtotal</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        ${selectedItems.map((item, index) => `
                            <tr data-item-index="${index}">
                                <td>
                                    <div class="ip-product-cell">
                                        ${productImage(item)}
                                        <div>
                                            <div class="ip-product-name">${escapeHtml(item.name)}${item.variant_name ? ` — ${escapeHtml(item.variant_name)}` : ''}</div>
                                            <div class="ip-product-meta">${escapeHtml(item.sku || 'No SKU')}</div>
                                        </div>
                                    </div>
                                    <input type="hidden" name="items[${index}][product_id]" value="${Number(item.product_id)}">
                                    <input type="hidden" name="items[${index}][variant_id]" value="${item.variant_id ? Number(item.variant_id) : ''}">
                                </td>
                                <td><span class="ip-stock-pill">${Number(item.on_hand || 0)}</span></td>
                                <td>
                                    <input
                                        class="ip-number-input"
                                        type="number"
                                        name="items[${index}][unit_cost]"
                                        min="0"
                                        step="0.01"
                                        value="${Number(item.unit_cost || 0)}"
                                        data-field="unit_cost"
                                        required
                                    >
                                </td>
                                <td>
                                    <input
                                        class="ip-number-input"
                                        type="number"
                                        name="items[${index}][quantity]"
                                        min="1"
                                        step="1"
                                        value="${Number(item.quantity || 0)}"
                                        data-field="quantity"
                                        required
                                    >
                                </td>
                                <td style="color:#16a34a;font-weight:800;white-space:nowrap">
                                    <span data-line-total>${money(Number(item.unit_cost || 0) * Number(item.quantity || 0))}</span> Tk
                                </td>
                                <td>
                                    <button class="ip-icon-btn danger" type="button" data-remove-item="${index}">♲</button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
        `;

        refreshSummary();
    }

    itemsContainer.addEventListener('input', event => {
        const input = event.target.closest('[data-field]');
        if (!input) return;

        const row = input.closest('[data-item-index]');
        const index = Number(row.dataset.itemIndex);
        const field = input.dataset.field;
        selectedItems[index][field] = Math.max(0, Number(input.value || 0));

        const lineTotal = Number(selectedItems[index].unit_cost || 0) * Number(selectedItems[index].quantity || 0);
        row.querySelector('[data-line-total]').textContent = money(lineTotal);
        refreshSummary();
    });

    itemsContainer.addEventListener('click', event => {
        const button = event.target.closest('[data-remove-item]');
        if (!button) return;

        selectedItems.splice(Number(button.dataset.removeItem), 1);
        renderItems();
        renderProductList(productSearch.value);
    });

    function refreshSummary() {
        const units = selectedItems.reduce((sum, item) => sum + Number(item.quantity || 0), 0);
        const total = selectedItems.reduce(
            (sum, item) => sum + (Number(item.quantity || 0) * Number(item.unit_cost || 0)),
            0
        );

        summaryItems.textContent = selectedItems.length;
        summaryUnits.textContent = units;
        summaryTotal.textContent = money(total);
        lineCounter.textContent = `${selectedItems.length} item${selectedItems.length === 1 ? '' : 's'} · ${units} units`;
    }

    document.addEventListener('click', event => {
        if (!event.target.closest('#supplierSelector')) supplierDropdown.classList.remove('open');
        if (!event.target.closest('#productSelector')) productDropdown.classList.remove('open');
    });

    document.addEventListener('keydown', event => {
        if (event.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
            event.preventDefault();
            productDropdown.classList.add('open');
            productSearch.focus();
        }

        if (event.key === 'Escape') {
            supplierDropdown.classList.remove('open');
            productDropdown.classList.remove('open');
        }
    });

    document.getElementById('purchaseForm').addEventListener('submit', event => {
        if (!Number(supplierIdInput.value)) {
            event.preventDefault();
            alert('Please select a supplier.');
            supplierButton.focus();
            return;
        }

        if (!selectedItems.length) {
            event.preventDefault();
            alert('Please add at least one product.');
            productButton.focus();
            return;
        }

        const invalidQuantity = selectedItems.some(item => Number(item.quantity || 0) < 1);
        if (invalidQuantity) {
            event.preventDefault();
            alert('Every product quantity must be at least 1.');
        }
    });

    async function loadCatalog() {
        productList.innerHTML = '<div class="ip-empty" style="min-height:110px">Loading products...</div>';

        const response = await fetch(catalogUrl, {
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });

        if (!response.ok) {
            throw new Error('Product catalog could not be loaded.');
        }

        const data = await response.json();
        catalog = data.items || [];

        selectedItems = (startingItems || []).map(oldItem => {
            const productId = Number(oldItem.product_id || 0);
            const variantId = oldItem.variant_id ? Number(oldItem.variant_id) : null;

            const catalogItem = catalog.find(item =>
                Number(item.product_id) === productId
                && Number(item.variant_id || 0) === Number(variantId || 0)
            );

            if (!catalogItem) return null;

            return {
                ...catalogItem,
                quantity: Number(oldItem.quantity ?? 0),
                unit_cost: Number(oldItem.unit_cost ?? oldItem.suggested_cost ?? catalogItem.suggested_cost ?? 0),
            };
        }).filter(Boolean);

        renderItems();
        renderProductList();
    }

    renderSupplierList();
    renderSupplierSelection(suppliers.find(item => item.id === selectedSupplierId));

    loadCatalog().catch(error => {
        productList.innerHTML = `<div class="ip-alert error" style="margin:10px">${escapeHtml(error.message)}</div>`;
    });
})();
</script>
@endsection