@extends('layouts.app')

@section('title', 'New Delivery Note')

@section('content')
<div class="mb-6">
    <h1 class="page-title">New Delivery Note</h1>
    <p class="page-subtitle"><a href="{{ route('sales.delivery-notes.index') }}" class="text-blue-600 hover:underline">Delivery Notes</a> / New</p>
</div>

@if($errors->any())
<div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
    <ul class="list-disc list-inside space-y-1">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form action="{{ route('sales.delivery-notes.store') }}" method="POST">
    @csrf

    <div class="card card-body mb-4">
        <h2 class="text-base font-semibold text-gray-700 mb-4">Delivery Details</h2>
        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">

            <div>
                <label class="form-label">Sales Order <span class="text-red-500">*</span></label>
                <select name="sales_order_id" id="so-select" required onchange="loadSOItems(this)" class="form-select">
                    <option value="">-- Select Confirmed Order --</option>
                    @foreach($salesOrders as $so)
                        <option value="{{ $so->id }}"
                                data-items="{{ json_encode($so->items) }}"
                                {{ (old('sales_order_id', request('sales_order_id'))) == $so->id ? 'selected' : '' }}>
                            {{ $so->order_number ?? 'SO-' . str_pad($so->id, 5, '0', STR_PAD_LEFT) }} - {{ $so->customer->name ?? '' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="form-label">Warehouse <span class="text-red-500">*</span></label>
                <select name="warehouse_id" required class="form-select">
                    <option value="">-- Select Warehouse --</option>
                    @foreach($warehouses as $warehouse)
                        <option value="{{ $warehouse->id }}" {{ old('warehouse_id') == $warehouse->id ? 'selected' : '' }}>
                            {{ $warehouse->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="form-label">Delivery Date <span class="text-red-500">*</span></label>
                <input type="date" name="delivery_date" value="{{ old('delivery_date', date('Y-m-d')) }}" required class="form-input">
            </div>

            <div>
                <label class="form-label">Notes</label>
                <textarea name="notes" rows="2" class="form-textarea">{{ old('notes') }}</textarea>
            </div>

        </div>
    </div>

    <!-- Items from SO -->
    <div class="card card-body mb-4">
        <h2 class="text-base font-semibold text-gray-700 mb-4">Items to Deliver</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-200">
                        <th class="pb-2 text-left font-semibold text-gray-600">Product</th>
                        <th class="pb-2 text-left font-semibold text-gray-600 w-28">SO Qty</th>
                        <th class="pb-2 text-left font-semibold text-gray-600 w-28">Deliver Qty</th>
                    </tr>
                </thead>
                <tbody id="dn-items-body">
                    <tr>
                        <td colspan="3" class="py-4 text-center text-gray-400">Select a Sales Order to load items.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="flex items-center gap-3">
        <button type="submit" class="btn-primary">Create Delivery Note</button>
        <a href="{{ route('sales.delivery-notes.index') }}" class="btn-secondary">Cancel</a>
    </div>
</form>

<script>
function loadSOItems(select) {
    var tbody = document.getElementById('dn-items-body');
    var option = select.options[select.selectedIndex];
    tbody.innerHTML = '';

    if (!option.value) {
        tbody.innerHTML = '<tr><td colspan="3" class="py-4 text-center text-gray-400">Select a Sales Order to load items.</td></tr>';
        return;
    }

    var items = JSON.parse(option.dataset.items || '[]');
    if (!items.length) {
        tbody.innerHTML = '<tr><td colspan="3" class="py-4 text-center text-gray-400">No items on this order.</td></tr>';
        return;
    }

    items.forEach(function(item, idx) {
        var row = document.createElement('tr');
        row.className = 'border-b border-gray-100';
        row.innerHTML = `
            <td class="py-2 pr-2 text-gray-800">${item.item ? item.item.item_name : 'Item #' + item.item_id}
                <input type="hidden" name="items[${idx}][item_id]" value="${item.item_id}">
            </td>
            <td class="py-2 pr-2 text-gray-500">${item.quantity}</td>
            <td class="py-2 pr-2">
                <input type="number" name="items[${idx}][quantity]"
                       value="${item.quantity}" min="0" step="0.01"
                       max="${item.quantity}"
                       class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-blue-400">
            </td>`;
        tbody.appendChild(row);
    });
}
</script>
@endsection