@extends('layouts.app')

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

@php
    $type = old('adjustment_type', 'add');
    $reasons = [
        'add' => ['new_stock' => 'New stock', 'customer_return' => 'Customer return', 'count_correction' => 'Count correction'],
        'subtract' => ['damaged' => 'Damaged', 'expired' => 'Expired', 'count_correction' => 'Count correction'],
    ];
    $showPrices = old('new_selling_price') || old('new_purchase_price');
@endphp

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3 gap-2">
        <div>
            <h4 class="fw-bold mb-0">New stock adjustment</h4>
            <p class="text-muted small mb-0">Every adjustment is logged and cannot be undone.</p>
        </div>
        <a href="{{ route('stock-adjustments.index') }}" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i> Back</a>
    </div>

    <div class="adj-card">
        <form method="POST" action="{{ route('stock-adjustments.store') }}" id="adjustForm" novalidate>
            @csrf
            @error('error')<div class="alert alert-danger py-2 small">{{ $message }}</div>@enderror

            <!-- Product -->
            <div class="mb-3">
                <label class="form-label fw-semibold" for="productSearch">Product</label>
                <div class="position-relative">
                    <input type="text" class="form-control" id="productSearch" autocomplete="off" aria-describedby="productInfo">
                    <div class="adj-dropdown" id="productDropdown" role="listbox"></div>
                </div>
                <input type="hidden" id="selectedProductId" name="product_id" value="{{ old('product_id') }}">
                <div class="small mt-1" id="productInfo"></div>
                <div class="text-danger small" id="productError" style="display: none;">Choose a product from the list.</div>
                @error('product_id')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>

            <!-- Stock in / out -->
            <div class="adj-type mb-3" role="radiogroup" aria-label="Adjustment">
                <input type="radio" class="btn-check" name="adjustment_type" id="typeAdd" value="add" @checked($type === 'add')>
                <label class="btn btn-outline-success" for="typeAdd"><i class="bi bi-box-arrow-in-down me-1"></i> Stock in</label>
                <input type="radio" class="btn-check" name="adjustment_type" id="typeSubtract" value="subtract" @checked($type === 'subtract')>
                <label class="btn btn-outline-danger" for="typeSubtract"><i class="bi bi-box-arrow-up me-1"></i> Stock out</label>
            </div>

            <div class="row g-3 mb-3">
                <div class="col-sm-6">
                    <label class="form-label fw-semibold" for="quantity">Quantity</label>
                    <input type="number" class="form-control" name="quantity" id="quantity" step="1" min="0" value="{{ old('quantity') }}">
                    @error('quantity')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
                <div class="col-sm-6">
                    <label class="form-label fw-semibold" for="reason">Reason</label>
                    <select class="form-select" name="reason" id="reason" required>
                        @foreach($reasons as $for => $list)
                            @foreach($list as $value => $label)
                                <option value="{{ $value }}" data-for="{{ $for }}" @selected(old('reason') === $value && $type === $for)>{{ $label }}</option>
                            @endforeach
                        @endforeach
                    </select>
                    @error('reason')<div class="text-danger small">{{ $message }}</div>@enderror
                </div>
            </div>

            <!-- Stock in: the same batch as before, or a new one -->
            <div class="adj-batch mb-3" id="batchInFields">
                <label class="form-label fw-semibold" for="batchChoice">Batch</label>
                <select class="form-select" name="batch_choice" id="batchChoice"></select>
                @error('batch_choice')<div class="text-danger small">{{ $message }}</div>@enderror
                <div class="small text-muted mt-1" id="sameBatchInfo"></div>

                <div class="row g-3 mt-0" id="newBatchFields">
                    <div class="col-sm-6">
                        <label class="form-label small fw-semibold" for="batchNo">Batch number</label>
                        <input type="text" class="form-control text-uppercase" name="batch_no" id="batchNo" maxlength="50" autocomplete="off" value="{{ old('batch_no') }}">
                        @error('batch_no')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-sm-6">
                        <label class="form-label small fw-semibold" for="expiryDate">Expiry date</label>
                        <input type="date" class="form-control" name="new_expiry_date" id="expiryDate" min="{{ now()->addDay()->toDateString() }}" value="{{ old('new_expiry_date') }}">
                        @error('new_expiry_date')<div class="text-danger small">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <!-- Stock out: which batch it comes from -->
            <div class="adj-batch mb-3" id="batchOutFields">
                <label class="form-label fw-semibold" for="batchSelect">Take from batch</label>
                <select class="form-select" name="product_batch_id" id="batchSelect"></select>
                @error('product_batch_id')<div class="text-danger small">{{ $message }}</div>@enderror
            </div>

            <!-- Prices: only when needed -->
            <a class="small text-decoration-none" data-bs-toggle="collapse" href="#priceFields" role="button" aria-expanded="{{ $showPrices ? 'true' : 'false' }}" aria-controls="priceFields">
                <i class="bi bi-tag me-1"></i> Change prices too
            </a>
            <div class="collapse {{ $showPrices ? 'show' : '' }}" id="priceFields">
                <div class="row g-3 mt-0">
                    <div class="col-sm-6">
                        <label class="form-label small fw-semibold" for="sellingPrice">New 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">
                        <label class="form-label small fw-semibold" for="purchasePrice">New purchase 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="form-text">Leave the quantity empty to change prices only.</div>
            </div>

            <div class="d-flex justify-content-end gap-2 mt-4">
                <a href="{{ route('stock-adjustments.index') }}" class="btn btn-outline-secondary">Cancel</a>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i> Save adjustment</button>
            </div>
        </form>
    </div>
</div>

<style>
    .adj-card { max-width: 720px; background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .08); padding: 1.4rem; }
    .adj-dropdown { display: none; position: absolute; z-index: 1000; left: 0; right: 0; margin-top: 4px; max-height: 240px; overflow-y: auto;
        background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
    .adj-option { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
    .adj-option:hover, .adj-option:focus { background: #f8fafc; outline: none; }
    .adj-type { display: flex; gap: .5rem; }
    .adj-type .btn { flex: 1; font-weight: 600; }
    .adj-batch { padding: .9rem 1rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; }
</style>
@endsection

@section('scripts')
<script>
const products = {!! json_encode($products) !!};
const preselectedProductId = {!! json_encode(old('product_id', $selectedProductId ?? null)) !!};
const oldChoice = {!! json_encode(old('batch_choice')) !!};
const oldBatchId = {!! json_encode(old('product_batch_id')) !!};

document.addEventListener('DOMContentLoaded', function () {
    const search = document.getElementById('productSearch');
    const dropdown = document.getElementById('productDropdown');
    const productId = document.getElementById('selectedProductId');
    const productError = document.getElementById('productError');
    const info = document.getElementById('productInfo');
    const choice = document.getElementById('batchChoice');
    const batchSelect = document.getElementById('batchSelect');
    const reason = document.getElementById('reason');
    let current = null;

    const num = v => Number(v).toLocaleString('en-US', { maximumFractionDigits: 2 });
    const date = ymd => ymd ? new Date(String(ymd).substring(0, 10) + 'T00:00:00').toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' }) : 'no expiry date';
    const type = () => document.querySelector('input[name="adjustment_type"]:checked').value;
    const option = (value, text, selected) => {
        const o = document.createElement('option');
        o.value = value; o.textContent = text; o.selected = !!selected;
        return o;
    };

    // Product search
    function list(items) {
        dropdown.innerHTML = '';
        if (!items.length) {
            dropdown.innerHTML = '<div class="p-3 text-muted small">No products found</div>';
            return;
        }
        items.slice(0, 100).forEach(p => {
            const row = document.createElement('div');
            row.className = 'adj-option';
            row.tabIndex = 0;
            row.innerHTML = '<div class="fw-semibold"></div><div class="small text-muted"></div>';
            row.firstChild.textContent = p.name;
            row.lastChild.textContent = (p.sku || '') + ' · ' + num(p.current_stock) + ' in stock';
            row.addEventListener('click', () => select(p));
            row.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); select(p); } });
            dropdown.appendChild(row);
        });
    }
    function filter() {
        const q = search.value.trim().toLowerCase();
        list(q ? products.filter(p => p.name.toLowerCase().includes(q) || (p.sku || '').toLowerCase().includes(q)) : products);
        dropdown.style.display = 'block';
    }
    function select(p) {
        current = p;
        search.value = p.name;
        productId.value = p.id;
        dropdown.style.display = 'none';
        productError.style.display = 'none';
        const inStock = (p.batches || []).filter(b => parseFloat(b.quantity) > 0);
        info.textContent = num(p.current_stock) + ' in stock' + (inStock.length > 1 ? ' in ' + inStock.length + ' batches' : '');
        renderBatches();
    }
    search.addEventListener('focus', filter);
    search.addEventListener('input', () => { productId.value = ''; current = null; info.textContent = ''; renderBatches(); filter(); });
    document.addEventListener('click', e => { if (!search.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display = 'none'; });

    // Batches: stock in offers the product's batches that are not expired, plus "New batch"
    function renderBatches() {
        const batches = current ? (current.batches || []) : [];
        const usable = batches.filter(b => !b.expired);
        choice.innerHTML = '';
        if (usable.length) choice.appendChild(option('', 'Choose the batch…', !oldChoice));
        usable.forEach(b => choice.appendChild(option(b.id,
            (b.batch_no || 'No batch number') + ' · expires ' + date(b.expiry_date) + ' · ' + num(b.quantity) + ' in stock',
            String(oldChoice) === String(b.id))));
        choice.appendChild(option('new', '+ New batch (type its number and expiry)', !usable.length || oldChoice === 'new'));

        // Stock out: batches with stock, expired first
        const out = batches.filter(b => parseFloat(b.quantity) > 0).sort((a, b) => (b.expired ? 1 : 0) - (a.expired ? 1 : 0));
        batchSelect.innerHTML = '';
        if (!current) batchSelect.appendChild(option('', 'Choose a product first'));
        else if (!out.length) batchSelect.appendChild(option('', 'No batches in stock'));
        out.forEach(b => batchSelect.appendChild(option(b.id,
            (b.batch_no || 'No batch number') + ' · ' + num(b.quantity) + ' in stock · ' + (b.expired ? 'EXPIRED ' : 'expires ') + date(b.expiry_date),
            String(oldBatchId) === String(b.id))));
        showBatchFields();
    }
    function showBatchFields() {
        const isNew = choice.value === 'new';
        choice.required = type() === 'add';
        document.getElementById('newBatchFields').style.display = isNew ? '' : 'none';
        document.getElementById('batchNo').required = isNew && type() === 'add';
        document.getElementById('expiryDate').required = isNew && type() === 'add';
        const same = current && !isNew ? (current.batches || []).find(b => String(b.id) === choice.value) : null;
        document.getElementById('sameBatchInfo').textContent = same ? 'Added to the same batch: expiry ' + date(same.expiry_date) + '.' : '';
    }
    choice.addEventListener('change', () => { choice.classList.remove('is-invalid'); showBatchFields(); });

    // Stock in / out: its own batch field and reasons
    function toggleType() {
        const t = type();
        document.getElementById('batchInFields').style.display = t === 'add' ? '' : 'none';
        document.getElementById('batchOutFields').style.display = t === 'subtract' ? '' : 'none';
        let firstVisible = null;
        Array.from(reason.options).forEach(o => {
            o.hidden = o.disabled = o.dataset.for !== t;
            if (!o.hidden && !firstVisible) firstVisible = o;
        });
        if (reason.selectedOptions[0] && reason.selectedOptions[0].hidden && firstVisible) firstVisible.selected = true;
        showBatchFields();
    }
    document.querySelectorAll('input[name="adjustment_type"]').forEach(r => r.addEventListener('change', toggleType));

    // Stock in with a quantity needs its batch: say so before sending
    document.getElementById('adjustForm').addEventListener('submit', function (e) {
        if (!productId.value) {
            e.preventDefault();
            productError.style.display = 'block';
            search.focus();
            return;
        }
        const qty = document.getElementById('quantity').value;
        if (type() === 'add' && qty !== '' && Number(qty) > 0 && choice.value === '') {
            e.preventDefault();
            choice.classList.add('is-invalid');
            choice.focus();
            return;
        }
        if (type() === 'add' && qty !== '' && Number(qty) > 0 && choice.value === 'new') {
            const no = document.getElementById('batchNo'), exp = document.getElementById('expiryDate');
            const missing = !no.value.trim() ? no : (!exp.value ? exp : null);
            if (missing) {
                e.preventDefault();
                missing.classList.add('is-invalid');
                missing.focus();
            }
        }
    });
    ['batchNo', 'expiryDate'].forEach(id => document.getElementById(id).addEventListener('input', e => e.target.classList.remove('is-invalid')));

    const pre = preselectedProductId ? products.find(p => String(p.id) === String(preselectedProductId)) : null;
    if (pre) select(pre); else renderBatches();
    toggleType();
});
</script>
@endsection