@extends('layouts.app')

@section('title', 'New Stock Adjustment')

@section('content')
@php
    $mode = old('mode', 'in');
    $tomorrow = now()->addDay()->format('Y-m-d');
@endphp
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="fw-bold mb-0">Stock Adjustment</h4>
        <a href="{{ route('stock-adjustments.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Adjustments
        </a>
    </div>

    @if($errors->has('error'))
        <div class="alert alert-danger py-2">{{ $errors->first('error') }}</div>
    @endif

    <form method="POST" action="{{ route('stock-adjustments.store') }}" id="adjustmentForm" novalidate>
        @csrf
        <input type="hidden" name="adjustment_type" id="adjustmentType" value="{{ $mode === 'out' ? 'subtract' : 'add' }}">

        <div class="row g-3">
            <!-- Form -->
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">

                        <!-- Product -->
                        <label class="form-label fw-semibold" for="productSearch">Product</label>
                        <div class="position-relative mb-1">
                            <i class="bi bi-search position-absolute text-muted" style="left: 12px; top: 50%; transform: translateY(-50%);"></i>
                            <input type="text" class="form-control ps-5" id="productSearch" placeholder="Search name or SKU" autocomplete="off">
                            <div class="list-group position-absolute w-100 shadow-sm mt-1" id="productDropdown"
                                 style="max-height: 260px; overflow-y: auto; display: none; z-index: 1000;"></div>
                            <input type="hidden" id="selectedProductId" name="product_id" value="{{ old('product_id') }}">
                        </div>
                        <div class="invalid-feedback" id="productError">Select a product</div>
                        @error('product_id')<div class="text-danger small">{{ $message }}</div>@enderror

                        <!-- Mode -->
                        <div class="btn-group w-100 my-4" role="group" aria-label="Adjustment type">
                            <input type="radio" class="btn-check" name="mode" id="modeIn" value="in" @checked($mode === 'in')>
                            <label class="btn btn-outline-success" for="modeIn"><i class="bi bi-box-arrow-in-down me-1"></i> Stock In</label>
                            <input type="radio" class="btn-check" name="mode" id="modeOut" value="out" @checked($mode === 'out')>
                            <label class="btn btn-outline-danger" for="modeOut"><i class="bi bi-box-arrow-up me-1"></i> Stock Out</label>
                            <input type="radio" class="btn-check" name="mode" id="modeUpdate" value="update" @checked($mode === 'update')>
                            <label class="btn btn-outline-primary" for="modeUpdate"><i class="bi bi-pencil me-1"></i> Update</label>
                        </div>

                        <div class="row g-3">
                            <div class="col-sm-6" data-modes="in out">
                                <label class="form-label fw-semibold" for="quantity">Quantity</label>
                                <input type="number" class="form-control" name="quantity" id="quantity" step="1" min="1" value="{{ old('quantity') }}">
                                @error('quantity')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-sm-6" data-modes="in out">
                                <label class="form-label fw-semibold" for="reason">Reason</label>
                                <select class="form-select" name="reason" id="reason">
                                    <option value="new_stock" data-mode="in" @selected(old('reason') === 'new_stock')>New stock</option>
                                    <option value="customer_return" data-mode="in" @selected(old('reason') === 'customer_return')>Customer return</option>
                                    <option value="expired" data-mode="out" @selected(old('reason') === 'expired')>Expired</option>
                                    <option value="damaged" data-mode="out" @selected(old('reason') === 'damaged')>Damaged</option>
                                </select>
                                <input type="hidden" name="reason" value="update" id="updateReason" disabled>
                                @error('reason')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold" for="batchSelect">Batch</label>
                                <select class="form-select" name="batch_id" id="batchSelect"></select>
                                @error('batch_id')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-sm-6" id="batchNoGroup">
                                <label class="form-label fw-semibold" for="batchNo">Batch no.</label>
                                <input type="text" class="form-control @error('batch_no') is-invalid @enderror" name="batch_no" id="batchNo" maxlength="100" required value="{{ old('batch_no') }}">
                                @error('batch_no')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-sm-6" id="expiryGroup">
                                <label class="form-label fw-semibold" for="expiryDate" id="expiryLabel">Expiry date</label>
                                <input type="date" class="form-control" name="new_expiry_date" id="expiryDate" min="{{ $tomorrow }}" value="{{ old('new_expiry_date') }}">
                                @error('new_expiry_date')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-12" data-modes="in">
                                <a href="#" class="small text-decoration-none" id="togglePrices"><i class="bi bi-tag me-1"></i>Change prices</a>
                            </div>

                            <div class="col-sm-6 price-field">
                                <label class="form-label fw-semibold" for="sellingPrice">Selling price</label>
                                <input type="number" class="form-control" name="new_selling_price" id="sellingPrice" step="1" min="0" value="{{ old('new_selling_price') }}">
                                @error('new_selling_price')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 price-field">
                                <label class="form-label fw-semibold" for="purchasePrice">Cost price</label>
                                <input type="number" class="form-control" name="new_purchase_price" id="purchasePrice" step="1" min="0" value="{{ old('new_purchase_price') }}">
                                @error('new_purchase_price')<div class="text-danger small">{{ $message }}</div>@enderror
                            </div>
                        </div>

                        <div class="text-danger small mt-3" id="formError" style="display: none;"></div>

                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <a href="{{ route('stock-adjustments.index') }}" class="btn btn-light border">Cancel</a>
                            <button type="submit" class="btn btn-primary px-4" id="submitBtn">Save</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Selected product -->
            <div class="col-lg-5">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4" id="productPanel">
                        <div class="text-center text-muted py-5" id="panelEmpty">
                            <i class="bi bi-box-seam fs-1 opacity-25 d-block mb-2"></i>
                            Select a product to see its stock and batches
                        </div>
                        <div id="panelContent" style="display: none;">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h6 class="fw-bold mb-0" id="panelName"></h6>
                                    <small class="text-muted" id="panelSku"></small>
                                </div>
                                <div class="text-end">
                                    <div class="h4 fw-bold mb-0" id="panelStock"></div>
                                    <small class="text-muted">in stock</small>
                                </div>
                            </div>
                            <div class="small text-muted mb-3" id="panelPrices"></div>
                            <table class="table table-sm align-middle small mb-0">
                                <thead class="text-muted">
                                    <tr><th>Batch</th><th>Expiry</th><th class="text-end">Qty</th><th></th></tr>
                                </thead>
                                <tbody id="panelBatches"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const products = @json($products);
    const preselectedId = @json(old('product_id', $selectedProductId ?? null));
    const oldBatchId = @json(old('batch_id'));
    const today = @json(now()->format('Y-m-d'));
    const soon = @json(now()->addDays(\App\Models\ProductBatch::EXPIRING_SOON_DAYS)->format('Y-m-d'));
    const showPricesInitially = @json((bool) (old('new_selling_price') || old('new_purchase_price')));

    const $ = id => document.getElementById(id);
    const form = $('adjustmentForm');
    const search = $('productSearch');
    const dropdown = $('productDropdown');
    const productId = $('selectedProductId');
    const batchSelect = $('batchSelect');
    const reason = $('reason');
    let current = null;
    let showPrices = showPricesInitially;

    const esc = s => String(s ?? '').replace(/[&<>"']/g, c => ({'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'}[c]));
    const money = v => 'MWK ' + Number(v || 0).toLocaleString();
    const fmtDate = d => d ? new Date(d + 'T00:00:00').toLocaleDateString(undefined, {day: '2-digit', month: 'short', year: 'numeric'}) : 'No expiry';
    const mode = () => form.querySelector('input[name="mode"]:checked').value;

    function status(batch) {
        if (!batch.expiry) return ['secondary', 'No expiry'];
        if (batch.expiry < today) return ['danger', 'Expired'];
        if (batch.expiry <= soon) return ['warning', 'Expiring'];
        return ['success', 'Good'];
    }

    // ---- Product search ----
    function renderDropdown(term) {
        const t = term.trim().toLowerCase();
        const list = products.filter(p => !t || p.name.toLowerCase().includes(t) || String(p.sku || '').toLowerCase().includes(t)).slice(0, 50);
        dropdown.innerHTML = list.length
            ? list.map(p => `<button type="button" class="list-group-item list-group-item-action py-2" data-id="${p.id}">
                    <div class="d-flex justify-content-between"><span class="fw-semibold">${esc(p.name)}</span><span class="text-muted small">${p.stock} in stock</span></div>
                    <div class="text-muted small">${esc(p.sku)}</div></button>`).join('')
            : '<div class="list-group-item text-muted small">No products found</div>';
        dropdown.style.display = 'block';
    }

    function selectProduct(product) {
        current = product;
        productId.value = product.id;
        search.value = product.name;
        search.classList.remove('is-invalid');
        dropdown.style.display = 'none';
        renderPanel();
        renderBatches();
    }

    search.addEventListener('focus', () => renderDropdown(search.value === current?.name ? '' : search.value));
    search.addEventListener('input', () => { productId.value = ''; current = null; renderPanel(); renderBatches(); renderDropdown(search.value); });
    dropdown.addEventListener('click', e => {
        const item = e.target.closest('[data-id]');
        if (item) selectProduct(products.find(p => p.id == item.dataset.id));
    });
    document.addEventListener('click', e => {
        if (!search.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display = 'none';
    });

    // ---- Side panel ----
    function renderPanel() {
        $('panelEmpty').style.display = current ? 'none' : '';
        $('panelContent').style.display = current ? '' : 'none';
        if (!current) return;
        $('panelName').textContent = current.name;
        $('panelSku').textContent = current.sku || '';
        $('panelStock').textContent = current.stock;
        $('panelPrices').textContent = 'Selling ' + money(current.selling_price) + ' · Cost ' + money(current.purchase_price);
        $('panelBatches').innerHTML = current.batches.length
            ? current.batches.map(b => {
                const [cls, text] = status(b);
                return `<tr><td class="fw-semibold">${esc(b.no)}</td><td>${fmtDate(b.expiry)}</td><td class="text-end">${b.qty}</td>
                        <td class="text-end"><span class="badge bg-${cls}">${text}</span></td></tr>`;
            }).join('')
            : '<tr><td colspan="4" class="text-muted text-center py-3">No stock</td></tr>';
    }

    // ---- Batch choices and visible fields depend on the mode ----
    function renderBatches() {
        const m = mode();
        const keep = batchSelect.value || oldBatchId || '';
        const first = {in: 'New batch', out: 'Earliest expiry first', update: 'Select batch'}[m];
        batchSelect.innerHTML = `<option value="">${first}</option>` + (current?.batches || []).map(b =>
            `<option value="${b.id}">${m === 'in' ? 'Add to ' : ''}${esc(b.no)} · ${fmtDate(b.expiry)} · ${b.qty} left${status(b)[1] === 'Expired' ? ' · expired' : ''}</option>`
        ).join('');
        if ([...batchSelect.options].some(o => o.value == keep)) batchSelect.value = keep;
        updateFields();
    }

    function updateFields() {
        const m = mode();
        const newBatch = batchSelect.value === '';

        document.querySelectorAll('[data-modes]').forEach(el => {
            const on = el.dataset.modes.split(' ').includes(m);
            el.style.display = on ? '' : 'none';
            el.querySelectorAll('input, select').forEach(i => i.disabled = !on);
        });
        // Reasons for this mode only; Update sends its own reason
        [...reason.options].forEach(o => o.hidden = o.disabled = o.dataset.mode !== m);
        if (reason.selectedOptions[0]?.disabled) reason.value = [...reason.options].find(o => !o.disabled)?.value || '';
        $('updateReason').disabled = m !== 'update';

        toggle('batchNoGroup', m === 'in' && newBatch);
        toggle('expiryGroup', (m === 'in' && newBatch) || m === 'update');
        $('expiryLabel').textContent = m === 'update' ? 'New expiry date' : 'Expiry date';
        document.querySelectorAll('.price-field').forEach(el => toggleEl(el, m === 'update' || (m === 'in' && showPrices)));
        $('togglePrices').innerHTML = showPrices ? '<i class="bi bi-x me-1"></i>Keep current prices' : '<i class="bi bi-tag me-1"></i>Change prices';

        $('adjustmentType').value = m === 'out' ? 'subtract' : 'add';
        const chosen = current?.batches.find(b => b.id == batchSelect.value);
        $('quantity').max = m === 'out' ? (chosen ? chosen.qty : (current?.stock ?? '')) : '';
        $('submitBtn').textContent = {in: 'Add stock', out: 'Remove stock', update: 'Save changes'}[m];
        $('submitBtn').className = 'btn px-4 ' + {in: 'btn-success', out: 'btn-danger', update: 'btn-primary'}[m];
    }

    function toggle(id, on) { toggleEl($(id), on); }
    function toggleEl(el, on) {
        el.style.display = on ? '' : 'none';
        el.querySelectorAll('input, select').forEach(i => i.disabled = !on);
    }

    form.querySelectorAll('input[name="mode"]').forEach(r => r.addEventListener('change', renderBatches));
    batchSelect.addEventListener('change', updateFields);
    $('batchNo').addEventListener('input', () => $('batchNo').classList.remove('is-invalid'));
    $('togglePrices').addEventListener('click', e => { e.preventDefault(); showPrices = !showPrices; updateFields(); });

    // ---- Submit checks ----
    form.addEventListener('submit', e => {
        const m = mode();
        const error = $('formError');
        let message = '';
        if (!productId.value) {
            search.classList.add('is-invalid');
            message = 'Select a product.';
        } else if (m !== 'update' && !(parseFloat($('quantity').value) > 0)) {
            message = 'Enter a quantity.';
        } else if (m === 'in' && !batchSelect.value && !$('batchNo').value.trim()) {
            $('batchNo').classList.add('is-invalid');
            $('batchNo').focus();
            message = 'Enter the batch number, or choose an existing batch to add to.';
        } else if (m === 'out' && $('quantity').max !== '' && parseFloat($('quantity').value) > parseFloat($('quantity').max)) {
            message = 'Only ' + $('quantity').max + ' available' + (batchSelect.value ? ' in this batch.' : '.');
        } else if (m === 'update' && !$('expiryDate').value && !$('sellingPrice').value && !$('purchasePrice').value) {
            message = 'Enter a new expiry date or price.';
        } else if (m === 'update' && $('expiryDate').value && !batchSelect.value && current.batches.length !== 1) {
            message = 'Select the batch whose expiry date you are changing.';
        } else if (!$('expiryDate').disabled && $('expiryDate').value && $('expiryDate').value <= today) {
            message = 'The expiry date must be after today.';
        }
        error.textContent = message;
        error.style.display = message ? '' : 'none';
        if (message) e.preventDefault();
    });

    // ---- Start ----
    const pre = products.find(p => p.id == preselectedId);
    if (pre) selectProduct(pre); else renderBatches();
    renderPanel();
});
</script>
@endsection