{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/transfers/create.blade.php | v1.0 | 17/07/2026 --}}
{{-- v1.0 — Crear Transfer Order entre almacenes. --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.new-transfer-order')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-exchange-alt"></i> {{ __('warehouse.new-transfer-order') }}
        <small>{{ __('warehouse.move-stock-between-wh') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.transfers.index') }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
    <i class="fal fa-exclamation-circle me-2"></i>{{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('warehouse.transfers.store') }}" method="POST">
@csrf

<div class="row g-3">
    <div class="col-xl-8">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-box me-2"></i> {{ __('warehouse.select-lot-to-transfer') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    {{-- Selector de lote --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold small">{{ __('warehouse.lot') }} <span class="text-danger">*</span></label>
                        <select name="lot_id" id="lotSelect" class="form-select" required onchange="onLotChange()">
                            <option value="">{{ __('warehouse.select-lot') }}</option>
                            @foreach($lots as $lot)
                            <option value="{{ $lot->id }}"
                                    data-warehouse="{{ $lot->warehouse?->code }}"
                                    data-warehouse-id="{{ $lot->warehouse_id }}"
                                    data-zone="{{ $lot->zone?->code }}"
                                    data-bin="{{ $lot->location?->bin_id }}"
                                    data-bin-code="{{ $lot->location?->code }}"
                                    data-product="{{ $lot->product?->product_name }}"
                                    data-qty="{{ $lot->quantity_available }}"
                                    data-cost="{{ $lot->unit_cost }}"
                                    data-entry="{{ $lot->entry_date }}">
                                {{ $lot->lot_number }} — {{ $lot->product?->product_name }} — {{ $lot->quantity_available }} {{ __('warehouse.units-abbr') }} — {{ $lot->warehouse?->code }}/{{ $lot->zone?->code }} — {{ $lot->location?->bin_id }}
                            </option>
                            @endforeach
                        </select>
                    </div>

                    {{-- Info del lote seleccionado --}}
                    <div id="lotInfo" style="display:none;" class="mb-3">
                        <div style="background:#E6F1FB;border-radius:8px;padding:12px;border:1px solid #185FA5;">
                            <div class="row g-2">
                                <div class="col-md-3">
                                    <div style="font-size:10px;color:#185FA5;font-weight:600;">{{ __('warehouse.from-caps') }}</div>
                                    <div class="fw-bold" id="infoWarehouse"></div>
                                    <div class="small text-muted" id="infoZone"></div>
                                </div>
                                <div class="col-md-3">
                                    <div style="font-size:10px;color:#185FA5;font-weight:600;">{{ __('warehouse.bin-caps') }}</div>
                                    <div class="fw-bold font-monospace" id="infoBin"></div>
                                    <div class="small text-muted" id="infoBinCode"></div>
                                </div>
                                <div class="col-md-3">
                                    <div style="font-size:10px;color:#185FA5;font-weight:600;">{{ __('warehouse.available-caps') }}</div>
                                    <div class="fw-bold text-success" id="infoQty"></div>
                                </div>
                                <div class="col-md-3">
                                    <div style="font-size:10px;color:#185FA5;font-weight:600;">{{ __('warehouse.unit-cost-caps') }}</div>
                                    <div class="fw-bold" id="infoCost"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Cantidad --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.qty-to-transfer') }} <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" name="quantity_requested" id="qtyInput"
                                       class="form-control fw-bold" step="0.0001" min="0.0001"
                                       placeholder="0" oninput="updateTotal()">
                                <button type="button" class="btn btn-outline-secondary" onclick="setFullPallet()">
                                    {{ __('warehouse.full-lot') }}
                                </button>
                            </div>
                            <div class="form-text" id="qtyValidation"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.transfer-value') }}</label>
                            <input type="text" id="transferValue" class="form-control bg-light fw-bold" readonly placeholder="$0.00">
                            <div class="form-text text-muted">{{ __('warehouse.cost-no-change-transfer') }}</div>
                        </div>
                    </div>

                    {{-- Almacen destino --}}
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.dest-warehouse') }} <span class="text-danger">*</span></label>
                            <select name="to_warehouse_id" id="toWarehouse" class="form-select" required>
                                <option value="">{{ __('warehouse.select-destination') }}</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}">{{ $wh->code }} — {{ $wh->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.notes') }}</label>
                            <input type="text" name="notes" class="form-control" placeholder="{{ __('warehouse.ph-reason-transfer') }}">
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-4">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-info-circle me-2"></i> {{ __('warehouse.transfer-flow') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="d-flex flex-column gap-2" style="font-size:12px;">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-secondary" style="min-width:24px;">1</span>
                            <span>{{ __('warehouse.flow-1') }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-info" style="min-width:24px;">2</span>
                            <span>{{ __('warehouse.flow-2') }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-warning text-dark" style="min-width:24px;">3</span>
                            <span>{{ __('warehouse.flow-3') }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-primary" style="min-width:24px;">4</span>
                            <span>{{ __('warehouse.flow-4') }}</span>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-success" style="min-width:24px;">5</span>
                            <span>{{ __('warehouse.flow-5') }}</span>
                        </div>
                    </div>
                    <hr>
                    <div class="alert alert-info py-2 small mb-0">
                        <i class="fal fa-info-circle me-1"></i>
                        {{ __('warehouse.transfer-no-financial') }}
                    </div>
                </div>
            </div>
        </div>

        <div class="panel mt-3">
            <div class="panel-container show">
                <div class="panel-content">
                    <button type="submit" class="btn btn-primary w-100 fw-bold">
                        <i class="fal fa-exchange-alt me-1"></i> {{ __('warehouse.create-transfer-order') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

</form>

@endsection

@section('scripts')
<script>
function onLotChange() {
    var sel = document.getElementById('lotSelect');
    var opt = sel.options[sel.selectedIndex];
    if (!opt.value) { document.getElementById('lotInfo').style.display = 'none'; return; }

    document.getElementById('infoWarehouse').textContent = opt.dataset.warehouse || '--';
    document.getElementById('infoZone').textContent      = opt.dataset.zone || '--';
    document.getElementById('infoBin').textContent       = opt.dataset.bin || '--';
    document.getElementById('infoBinCode').textContent   = opt.dataset.binCode || '--';
    document.getElementById('infoQty').textContent       = parseFloat(opt.dataset.qty).toLocaleString('es-MX', {minimumFractionDigits:2}) + ' {{ __('warehouse.units-lower') }}';
    document.getElementById('infoCost').textContent      = '$' + parseFloat(opt.dataset.cost).toLocaleString('es-MX', {minimumFractionDigits:2});
    document.getElementById('lotInfo').style.display     = 'block';

    // Filtrar almacenes destino — quitar el almacen origen
    var fromWhId = opt.dataset.warehouseId;
    Array.from(document.getElementById('toWarehouse').options).forEach(function(o) {
        o.disabled = o.value == fromWhId;
    });

    updateTotal();
}

function setFullPallet() {
    var sel = document.getElementById('lotSelect');
    var opt = sel.options[sel.selectedIndex];
    if (!opt.value) return;
    document.getElementById('qtyInput').value = opt.dataset.qty;
    updateTotal();
}

function updateTotal() {
    var sel  = document.getElementById('lotSelect');
    var opt  = sel.options[sel.selectedIndex];
    var qty  = parseFloat(document.getElementById('qtyInput').value) || 0;
    var cost = parseFloat(opt.dataset.cost) || 0;
    var avail= parseFloat(opt.dataset.qty) || 0;
    var val  = document.getElementById('transferValue');
    var valid= document.getElementById('qtyValidation');

    val.value = '$' + (qty * cost).toLocaleString('es-MX', {minimumFractionDigits:2});

    if (qty > avail) {
        valid.textContent = '{{ __('warehouse.qty-exceeds', ['avail' => "' + avail + '"]) }}';
        valid.className   = 'form-text text-danger';
    } else if (qty > 0) {
        valid.textContent = '{{ __('warehouse.qty-ok-of', ['qty' => "' + qty + '", 'avail' => "' + avail + '"]) }}';
        valid.className   = 'form-text text-success';
    } else {
        valid.textContent = '';
    }
}
</script>
@endsection