@extends('layouts.portal')

@php($isEdit = $transfer->exists)

@section('title', $isEdit ? __('Edit transfer') : __('New transfer'))

@push('styles')
    @include('accounting.journal._styles')
    <style>
        .transfer-lines td { vertical-align: middle; }
        .transfer-lines .form-control, .transfer-lines .form-select { min-width: 110px; }
    </style>
@endpush

@section('content')
<div class="portal-page">
    @include('partials.portal-header')

    <main class="module-main">
        <div class="container-fluid py-4">
            <header class="mb-3">
                <h1 class="h3 mb-0">{{ $isEdit ? __('Edit transfer') : __('New transfer') }} @if($isEdit)<small class="text-muted">{{ $transfer->transfer_number }}</small>@endif</h1>
                <p class="text-muted mb-0">{{ __('This moves stock between warehouses, not between shelves in the same warehouse.') }}</p>
            </header>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ $isEdit ? route('stock.transfers.update', $transfer) : route('stock.transfers.store') }}" class="card shadow-sm" id="transfer-form">
                @csrf
                @if($isEdit)
                    @method('PUT')
                @endif
                <div class="card-body row g-3">
                    <div class="col-12 col-md-6">
                        <label for="from_warehouse_id" class="form-label">{{ __('From warehouse') }}</label>
                        <select id="from_warehouse_id" name="from_warehouse_id" class="form-select @error('from_warehouse_id') is-invalid @enderror" required>
                            <option value="">—</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" @selected((int) old('from_warehouse_id', $transfer->from_warehouse_id) === $warehouse->id)>{{ $warehouse->code }} — {{ $warehouse->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-6">
                        <label for="to_warehouse_id" class="form-label">{{ __('To warehouse') }}</label>
                        <select id="to_warehouse_id" name="to_warehouse_id" class="form-select @error('to_warehouse_id') is-invalid @enderror" required>
                            <option value="">—</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}" @selected((int) old('to_warehouse_id', $transfer->to_warehouse_id) === $warehouse->id)>{{ $warehouse->code }} — {{ $warehouse->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12">
                        <label for="notes" class="form-label">{{ __('Notes') }}</label>
                        <textarea id="notes" name="notes" class="form-control @error('notes') is-invalid @enderror" rows="2" maxlength="2000">{{ old('notes', $transfer->notes) }}</textarea>
                    </div>
                    <div class="col-12">
                        <div class="alert alert-info mb-0">{{ __('Lot-tracked items keep their lot number during transfer. Serial-tracked items need serial-level transfer support and are not available here yet.') }}</div>
                    </div>
                    <div class="col-12">
                        <div class="je-grid-wrap">
                            <table class="je-table transfer-lines">
                                <thead>
                                    <tr>
                                        <th class="row-number">#</th>
                                        <th style="min-width: 280px">{{ __('Item') }}</th>
                                        <th style="min-width: 220px">{{ __('Lot') }}</th>
                                        <th style="width: 180px">{{ __('Quantity') }}</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="transfer-lines-body"></tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-transfer-line">+ {{ __('Add item') }}</button>
                    </div>
                </div>
                <div class="card-footer d-flex gap-2">
                    <button type="submit" class="btn btn-primary">{{ __('Save transfer request') }}</button>
                    <a href="{{ $isEdit ? route('stock.transfers.show', $transfer) : route('stock.transfers.index') }}" class="btn btn-outline-secondary">{{ __('Cancel') }}</a>
                </div>
            </form>
        </div>

        <template id="transfer-line-template">
            <tr class="transfer-line">
                <td class="row-number"></td>
                <td>
                    <select name="lines[__i__][item_id]" class="form-select" data-field="item_id" required>
                        <option value="">—</option>
                        @foreach($items as $item)
                            <option value="{{ $item->id }}" data-tracking="{{ $item->tracking }}">{{ $item->sku }} — {{ $item->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <select name="lines[__i__][lot_id]" class="form-select" data-field="lot_id" disabled>
                        <option value="">— {{ __('No lot') }}</option>
                        @foreach($lots as $lot)
                            <option value="{{ $lot->id }}" data-item="{{ $lot->item_id }}">{{ $lot->lot_number }}@if($lot->expires_on) · {{ __('Expires') }} {{ $lot->expires_on }}@endif</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="number" name="lines[__i__][quantity_requested]" class="form-control text-end" data-field="quantity_requested" min="0.0001" step="0.0001" required></td>
                <td><button type="button" class="btn btn-sm btn-outline-danger" data-remove>{{ __('Remove') }}</button></td>
            </tr>
        </template>

        <script>
            (function () {
                const body = document.getElementById('transfer-lines-body');
                const template = document.getElementById('transfer-line-template');
                const initialLines = @json($initialLines);
                let nextIndex = 0;

                function syncLine(row) {
                    const item = row.querySelector('[data-field="item_id"]');
                    const lot = row.querySelector('[data-field="lot_id"]');
                    const selectedItem = item.options[item.selectedIndex];
                    const needsLot = selectedItem && selectedItem.dataset.tracking === 'lot';
                    lot.disabled = !needsLot;
                    lot.required = Boolean(needsLot);

                    Array.from(lot.options).forEach((option) => {
                        if (option.value) {
                            option.hidden = !selectedItem || option.dataset.item !== item.value;
                        }
                    });

                    if (!needsLot || (lot.value && lot.options[lot.selectedIndex].dataset.item !== item.value)) {
                        lot.value = '';
                    }
                }

                function addLine(values) {
                    body.insertAdjacentHTML('beforeend', template.innerHTML.replaceAll('__i__', nextIndex++));
                    const row = body.lastElementChild;

                    Object.entries(values || {}).forEach(([name, value]) => {
                        const input = row.querySelector('[data-field="' + name + '"]');
                        if (input && value !== null && value !== undefined) {
                            input.value = value;
                        }
                    });

                    syncLine(row);
                    row.querySelector('.row-number').textContent = body.children.length;
                }

                body.addEventListener('change', (event) => {
                    if (event.target.matches('[data-field="item_id"]')) {
                        syncLine(event.target.closest('.transfer-line'));
                    }
                });

                body.addEventListener('click', (event) => {
                    const remove = event.target.closest('[data-remove]');
                    if (remove) {
                        remove.closest('.transfer-line').remove();
                        Array.from(body.querySelectorAll('.row-number')).forEach((cell, index) => { cell.textContent = index + 1; });
                    }
                });

                document.getElementById('add-transfer-line').addEventListener('click', () => addLine({}));
                (initialLines.length ? initialLines : [{}]).forEach(addLine);
            })();
        </script>
    </main>
</div>
@endsection