@extends('layouts.app')
@section('title', 'New Stock Transfer')
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('stock-transfers.index') }}">Stock Transfers</a></li>
<li class="breadcrumb-item active">New Transfer</li>
@endsection
@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-arrow-left-right me-2" style="color:#7c3aed;"></i>New Stock Transfer</h1>
</div>

<form method="POST" action="{{ route('stock-transfers.store') }}" id="transferForm">
@csrf
<div class="row g-3">
    <div class="col-12 col-lg-8">

        <div class="card mb-3">
            <div class="card-header fw-600">Transfer Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-5">
                        <label class="form-label fw-semibold">From Warehouse <span class="text-danger">*</span></label>
                        <select name="from_warehouse_id" id="fromWarehouse" class="form-select @error('from_warehouse_id') is-invalid @enderror" required>
                            <option value="">— Select Source —</option>
                            @foreach($warehouses as $wh)
                            <option value="{{ $wh->id }}">{{ $wh->name }} ({{ $wh->code }})</option>
                            @endforeach
                        </select>
                        @error('from_warehouse_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-2 d-flex align-items-end justify-content-center pb-1">
                        <i class="bi bi-arrow-right" style="font-size:1.5rem;color:#7c3aed;"></i>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-semibold">To Warehouse <span class="text-danger">*</span></label>
                        <select name="to_warehouse_id" class="form-select @error('to_warehouse_id') is-invalid @enderror" required>
                            <option value="">— Select Destination —</option>
                            @foreach($warehouses as $wh)
                            <option value="{{ $wh->id }}">{{ $wh->name }} ({{ $wh->code }})</option>
                            @endforeach
                        </select>
                        @error('to_warehouse_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Transfer Date <span class="text-danger">*</span></label>
                        <input type="date" name="transfer_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-8">
                        <label class="form-label fw-semibold">Notes</label>
                        <input type="text" name="notes" class="form-control" placeholder="Optional notes">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center fw-600">
                <span><i class="bi bi-box-seam me-2"></i>Items to Transfer</span>
                <button type="button" class="btn btn-sm btn-success" onclick="addTransferRow()">
                    <i class="bi bi-plus-lg me-1"></i>Add Item
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0" id="transferTable">
                    <thead><tr>
                        <th>Product / Variant</th>
                        <th>Current Stock</th>
                        <th style="width:110px;">Transfer Qty</th>
                        <th style="width:40px;"></th>
                    </tr></thead>
                    <tbody id="transferBody"></tbody>
                </table>
                <div id="transferEmpty" class="py-4 text-center text-muted" style="font-size:.875rem;">
                    <i class="bi bi-arrow-left-right" style="font-size:2rem;display:block;margin-bottom:.5rem;color:#cbd5e1;"></i>
                    Click "Add Item" to add products to transfer.
                </div>
            </div>
        </div>

    </div>

    <div class="col-12 col-lg-4">
        <div class="card">
            <div class="card-body">
                <div class="alert alert-info p-2 mb-3" style="font-size:.8rem;">
                    <i class="bi bi-info-circle me-1"></i>
                    Transfer will first be <strong>dispatched</strong> (stock out from source), then <strong>received</strong> (stock in at destination).
                </div>
                <button type="submit" class="btn btn-primary w-100 mb-2" style="font-weight:700;">
                    <i class="bi bi-check-circle me-1"></i>Create Transfer
                </button>
                <a href="{{ route('stock-transfers.index') }}" class="btn btn-outline-secondary w-100">Cancel</a>
            </div>
        </div>
    </div>
</div>
</form>

@endsection

@push('scripts')
<script>
const VARIANTS = @json($variants->map(fn($v) => [
    'id'      => $v->id,
    'name'    => $v->product->name . ' — ' . $v->variant_name,
    'sku'     => $v->sku,
    'stock'   => $v->current_stock,
]));

let rowIdx = 0;

function addTransferRow() {
    const tbody   = document.getElementById('transferBody');
    const idx     = rowIdx++;
    const opts    = VARIANTS.map(v => `<option value="${v.id}" data-stock="${v.stock}">${v.name} (${v.sku})</option>`).join('');
    const tr      = document.createElement('tr');
    tr.id         = `trow_${idx}`;
    tr.innerHTML  = `
        <td>
            <select name="items[${idx}][product_variant_id]" class="form-select form-select-sm" required
                    onchange="updateStock(this, ${idx})">
                <option value="">— Select Variant —</option>${opts}
            </select>
        </td>
        <td><span id="stock_${idx}" class="badge bg-secondary">—</span></td>
        <td>
            <input type="number" name="items[${idx}][qty_requested]" class="form-control form-control-sm"
                   value="1" min="1" style="width:80px;" required>
        </td>
        <td>
            <button type="button" class="btn btn-sm" style="color:#dc2626;background:none;border:none;"
                    onclick="document.getElementById('trow_${idx}').remove();checkEmpty();">
                <i class="bi bi-x-circle-fill"></i>
            </button>
        </td>`;
    tbody.appendChild(tr);
    checkEmpty();
}

function updateStock(sel, idx) {
    const opt   = sel.options[sel.selectedIndex];
    const stock = opt?.dataset?.stock ?? '—';
    const el    = document.getElementById(`stock_${idx}`);
    if (el) {
        el.textContent = stock;
        el.className   = `badge bg-${parseInt(stock) > 5 ? 'success' : parseInt(stock) > 0 ? 'warning' : 'danger'}`;
    }
}

function checkEmpty() {
    const count = document.querySelectorAll('#transferBody tr').length;
    document.getElementById('transferEmpty').style.display = count ? 'none' : 'block';
}
</script>
@endpush