@extends('admin.admin_dashboard')
@section('admin')

<div class="container mt-4">
<<<<<<< HEAD
    <h4>Package Stock</h4>

    {{-- Show error message --}}
    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    {{-- Show success message --}}
=======
    <h4>Package Beverage Stock</h4>

    @if(session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif
>>>>>>> origin/main
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

<<<<<<< HEAD
    <form action="{{ route('stock.transfers.package') }}" method="POST">
        @csrf

        <div class="mb-3">
            <label for="source_type" class="form-label">Source Type</label>
            <select name="source_type" id="source_type" class="form-select" required>
                <option value="">-- Select Source --</option>
                <option value="roasting">Roasting</option>
                <option value="grinding">Grinding</option>
            </select>
        </div>

        <div class="mb-3">
            <label for="available_quantity" class="form-label">Available Quantity</label>
            <input type="number" step="0.01" id="available_quantity" 
                   name="available_quantity" class="form-control" readonly>
        </div>

        <div class="mb-3">
            <label for="packaged_quantity" class="form-label">Packaged Quantity</label>
            <input type="number" step="0.01" name="packaged_quantity" 
                   id="packaged_quantity" class="form-control" required>
        </div>

        <div class="mb-3">
            <label for="packaging_date" class="form-label">Packaging Date</label>
            <input type="date" name="packaging_date" id="packaging_date" 
                   class="form-control" required>
        </div>

        <button type="submit" class="btn btn-primary">Package</button>
    </form>
</div>

=======
    <form action="{{ route('stock.transfers.package') }}" method="POST" id="packaging-form">
        @csrf

        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Source Type</label>
                <select name="source_type" id="source_type" class="form-select" required>
                    <option value="">-- Select Source --</option>
                    <option value="roasting" @selected(old('source_type') === 'roasting')>Roasting</option>
                    <option value="grinding" @selected(old('source_type') === 'grinding')>Grinding</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Source Batch</label>
                <select name="source_id" id="source_id" class="form-select" required>
                    <option value="">-- Select Batch --</option>
                </select>
            </div>

            <div class="col-md-4">
                <label class="form-label">Packaging Date</label>
                <input type="date" name="packaging_date" value="{{ old('packaging_date', now()->toDateString()) }}" class="form-control" required>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>Packaging Lines</strong>
                <button type="button" class="btn btn-sm btn-outline-primary" id="add-line">Add Product</button>
            </div>
            <div class="card-body" id="lines-wrap">
                <div class="row g-2 align-items-end packaging-line">
                    <div class="col-md-6">
                        <label class="form-label">Product</label>
                        <select name="items[0][product_id]" class="form-select product-select" required>
                            <option value="">-- Select Product --</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Quantity (units)</label>
                        <input type="number" min="1" step="1" name="items[0][quantity]" class="form-control" required>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-outline-danger w-100 remove-line" disabled>Remove</button>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary mt-4">Complete Packaging</button>
    </form>
</div>

@php
    $roastingOptions = $roastings->map(fn ($r) => [
        'id' => $r->id,
        'label' => 'Roast #' . $r->id . ' — ' . number_format($r->roasted_quantity, 2) . ' kg',
        'qty' => (float) $r->roasted_quantity,
    ]);
    $grindingOptions = $grindings->map(fn ($g) => [
        'id' => $g->id,
        'label' => 'Grind #' . $g->id . ' — ' . number_format($g->ground_quantity, 2) . ' kg',
        'qty' => (float) $g->ground_quantity,
    ]);
    $productOptions = $products->map(fn ($p) => [
        'id' => $p->id,
        'name' => $p->name,
        'source_type' => $p->source_type,
        'size' => $p->package_size . $p->unit,
        'price' => (float) $p->selling_price,
    ]);
@endphp

<script>
document.addEventListener('DOMContentLoaded', function () {
    const sourceType = document.getElementById('source_type');
    const sourceId = document.getElementById('source_id');
    const linesWrap = document.getElementById('lines-wrap');
    const roastingOptions = @json($roastingOptions);
    const grindingOptions = @json($grindingOptions);
    const productOptions = @json($productOptions);
    let lineIndex = 1;

    function productSelectHtml(name, sourceTypeValue) {
        const options = productOptions
            .filter(p => !sourceTypeValue || p.source_type === sourceTypeValue)
            .map(p => `<option value="${p.id}">${p.name} (${p.size}) — UGX ${p.price.toLocaleString()}</option>`)
            .join('');

        return `<select name="${name}" class="form-select product-select" required>
            <option value="">-- Select Product --</option>${options}
        </select>`;
    }

    function refreshSources() {
        const type = sourceType.value;
        const list = type === 'roasting' ? roastingOptions : type === 'grinding' ? grindingOptions : [];
        sourceId.innerHTML = '<option value="">-- Select Batch --</option>' +
            list.map(item => `<option value="${item.id}">${item.label}</option>`).join('');

        document.querySelectorAll('.packaging-line').forEach((line, idx) => {
            const select = line.querySelector('.product-select');
            if (!select) return;
            const current = select.value;
            const replacement = document.createElement('div');
            replacement.innerHTML = productSelectHtml(`items[${idx}][product_id]`, type);
            select.replaceWith(replacement.firstElementChild);
        });
    }

    sourceType.addEventListener('change', refreshSources);
    refreshSources();

    document.getElementById('add-line').addEventListener('click', function () {
        const row = document.createElement('div');
        row.className = 'row g-2 align-items-end packaging-line mt-2';
        row.innerHTML = `
            <div class="col-md-6">
                <label class="form-label">Product</label>
                ${productSelectHtml(`items[${lineIndex}][product_id]`, sourceType.value)}
            </div>
            <div class="col-md-4">
                <label class="form-label">Quantity (units)</label>
                <input type="number" min="1" step="1" name="items[${lineIndex}][quantity]" class="form-control" required>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-outline-danger w-100 remove-line">Remove</button>
            </div>`;
        linesWrap.appendChild(row);
        lineIndex++;
        bindRemoveButtons();
    });

    function bindRemoveButtons() {
        document.querySelectorAll('.remove-line').forEach(btn => {
            btn.onclick = function () {
                const lines = document.querySelectorAll('.packaging-line');
                if (lines.length <= 1) return;
                btn.closest('.packaging-line').remove();
            };
            btn.disabled = document.querySelectorAll('.packaging-line').length <= 1;
        });
    }

    bindRemoveButtons();
});
</script>

>>>>>>> origin/main
@endsection