@extends('layouts.app', ['title' => 'Neue Bestellung'])
@section('content')
<div class="container-fluid py-4" style="max-width:800px;">

    <div class="mb-4">
        <h4 class="fw-bold mb-0"><i class="bi bi-cart3 me-2"></i>Neue Bestellung</h4>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-4">
            <form method="POST" action="{{ route('wms.orders.store') }}" id="orderForm">
                @csrf

                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Lieferant</label>
                        <select name="fk_supplier_id" class="form-select">
                            <option value="">— keiner —</option>
                            @foreach($suppliers as $s)
                                <option value="{{ $s->id }}" {{ old('fk_supplier_id') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Ziel-Lager <span class="text-danger">*</span></label>
                        <select name="fk_warehouse_id" class="form-select" required>
                            <option value="">— wählen —</option>
                            @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}" {{ old('fk_warehouse_id') == $wh->id ? 'selected' : '' }}>{{ $wh->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Bestelldatum</label>
                        <input type="date" name="order_date" class="form-control" value="{{ old('order_date', date('Y-m-d')) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Erwartet am</label>
                        <input type="date" name="expected_date" class="form-control" value="{{ old('expected_date') }}">
                    </div>
                </div>

                <hr>
                <div class="d-flex align-items-center justify-content-between mb-3">
                    <h6 class="fw-semibold mb-0">Bestellpositionen</h6>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addLine()">
                        <i class="bi bi-plus-lg me-1"></i>Position hinzufügen
                    </button>
                </div>

                <div id="orderLines">
                    <div class="row g-2 mb-2 order-line">
                        <div class="col-8">
                            <select name="items[0][fk_item_id]" class="form-select form-select-sm" required>
                                <option value="">— Artikel wählen —</option>
                                @foreach($items as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }} @if($item->unit)({{ $item->unit->name }})@endif</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-3">
                            <input type="number" name="items[0][quantity_ordered]" class="form-control form-control-sm"
                                   placeholder="Menge" step="0.001" min="0.001" required>
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeLine(this)">
                                <i class="bi bi-trash3"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mb-4 mt-3">
                    <label class="form-label fw-semibold">Notiz</label>
                    <textarea name="note" class="form-control" rows="2">{{ old('note') }}</textarea>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Bestellung anlegen</button>
                    <a href="{{ route('wms.orders.index') }}" class="btn btn-outline-secondary">Abbrechen</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let lineIndex = 1;
const itemOptions = `@foreach($items as $item)<option value="{{ $item->id }}">{{ addslashes($item->name) }}@if($item->unit) ({{ $item->unit->name }})@endif</option>@endforeach`;

function addLine() {
    const div = document.createElement('div');
    div.className = 'row g-2 mb-2 order-line';
    div.innerHTML = `
        <div class="col-8">
            <select name="items[${lineIndex}][fk_item_id]" class="form-select form-select-sm" required>
                <option value="">— Artikel wählen —</option>${itemOptions}
            </select>
        </div>
        <div class="col-3">
            <input type="number" name="items[${lineIndex}][quantity_ordered]" class="form-control form-control-sm"
                   placeholder="Menge" step="0.001" min="0.001" required>
        </div>
        <div class="col-1">
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeLine(this)">
                <i class="bi bi-trash3"></i>
            </button>
        </div>`;
    document.getElementById('orderLines').appendChild(div);
    lineIndex++;
}

function removeLine(btn) {
    const lines = document.querySelectorAll('.order-line');
    if (lines.length > 1) btn.closest('.order-line').remove();
}
</script>
@endsection