{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/racks/edit.blade.php | v1.1 | 14/07/2026 --}}
{{-- v1.0 — Editar rack. Solo permite agregar niveles (levels_y no puede bajar).        --}}
{{-- v1.1 — Preview con header de nombre/descripcion igual al create v1.3.              --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.edit') . ' ' . $rack->code])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-edit"></i> {{ __('warehouse.edit') }} {{ $rack->code }}
        @if($rack->description)
        <small class="ms-1">— {{ $rack->description }}</small>
        @endif
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.racks.show', $rack) }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')
<div class="row g-3">

    {{-- LEFT: Formulario --}}
    <div class="col-lg-5">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-edit me-2"></i> {{ __('warehouse.storage-unit-settings') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    <form action="{{ route('warehouse.racks.update', $rack) }}" method="POST">
                    @csrf
                    @method('PUT')

                    {{-- Read-only info --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.warehouse') }}</label>
                            <input type="text" class="form-control bg-light"
                                   value="{{ $rack->warehouse->code }} -- {{ $rack->warehouse->name }}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.zone') }}</label>
                            <input type="text" class="form-control bg-light"
                                   value="{{ $rack->zone->code }} -- {{ $rack->zone->name }}" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.unit-code') }}</label>
                            <input type="text" class="form-control bg-light fw-bold"
                                   value="{{ $rack->code }}" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.positions-x') }}</label>
                            <input type="text" class="form-control bg-light fw-bold text-center"
                                   value="{{ $rack->positions_x }}" readonly>
                            <div class="form-text">{{ __('warehouse.fixed-cannot-change') }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.aisle-ref') }}</label>
                            <input type="text" name="aisle_ref" id="aisleRefInput" class="form-control text-uppercase"
                                   value="{{ old('aisle_ref', $rack->aisle_ref) }}"
                                   oninput="this.value=this.value.toUpperCase(); updatePreview()">
                        </div>
                    </div>

                    <hr>

                    {{-- Editable: levels_y --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold small">
                            {{ __('warehouse.levels-y') }} — {{ __('warehouse.current-colon') }} <strong>{{ $rack->levels_y }}</strong>
                            <span class="text-danger">*</span>
                        </label>
                        <div class="input-group" style="max-width:180px;">
                            <button type="button" class="btn btn-outline-secondary" onclick="changeVal('levels_y',-1)">-</button>
                            <input type="number" name="levels_y" id="levels_y"
                                   class="form-control text-center fw-bold"
                                   value="{{ old('levels_y', $rack->levels_y) }}"
                                   min="{{ $rack->levels_y }}" max="20"
                                   oninput="updatePreview()" required>
                            <button type="button" class="btn btn-outline-secondary" onclick="changeVal('levels_y',1)">+</button>
                        </div>
                        <div class="form-text text-warning mt-1">
                            <i class="fal fa-exclamation-triangle me-1"></i>
                            {{ __('warehouse.levels-increase-note') }}
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold small">{{ __('warehouse.description') }}</label>
                        <input type="text" name="description" id="descInput" class="form-control"
                               value="{{ old('description', $rack->description) }}"
                               oninput="updatePreview()">
                    </div>

                    <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active"
                                   id="isActive" value="1"
                                   {{ $rack->is_active ? 'checked' : '' }}>
                            <label class="form-check-label" for="isActive">{{ __('warehouse.active') }}</label>
                        </div>
                    </div>

                    <div id="newBinsAlert" class="alert alert-success py-2 small mb-3" style="display:none;">
                        <i class="fal fa-plus-circle me-1"></i>
                        <strong id="newBinsCount">0</strong> {{ __('warehouse.new-bins-on-save') }}
                    </div>

                    <button type="submit" class="btn btn-primary w-100 fw-bold">
                        <i class="fal fa-save me-2"></i> {{ __('warehouse.save-changes') }}
                    </button>

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

    {{-- RIGHT: Preview --}}
    <div class="col-lg-7">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-eye me-2"></i> {{ __('warehouse.preview-after-expansion') }}</h2>
                <div class="panel-toolbar">
                    <span class="badge bg-primary" id="previewBadge">{{ $rack->code }} - {{ $rack->positions_x }}x{{ $rack->levels_y }}</span>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="rackPreview"></div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
var currentLevels = {{ $rack->levels_y }};
var positionsX    = {{ $rack->positions_x }};
var rackCode      = '{{ $rack->code }}';
var useAisle      = {{ ($rack->warehouse->use_aisle_in_code ?? false) ? 'true' : 'false' }};
var zoneCode      = '{{ $rack->zone->code }}';
var zoneName      = '{{ $rack->zone->name }}';

var zoneColors  = { 'TR':'#E6F1FB','MP':'#EAF3DE','PT':'#FAEEDA','WIP':'#FBEAF0','SV':'#F1EFE8' };
var zoneBorder  = { 'TR':'#185FA5','MP':'#3B6D11','PT':'#854F0B','WIP':'#993556','SV':'#5F5E5A' };
var zoneText    = { 'TR':'#0C447C','MP':'#27500A','PT':'#633806','WIP':'#72243E','SV':'#444441' };
var bgColor  = zoneColors[zoneCode]  || '#f8f9fa';
var bdColor  = zoneBorder[zoneCode]  || '#dee2e6';
var txtColor = zoneText[zoneCode]    || '#212529';

function changeVal(id, delta) {
    var inp = document.getElementById(id);
    var val = parseInt(inp.value) + delta;
    var min = parseInt(inp.min);
    var max = parseInt(inp.max);
    if (val >= min && val <= max) { inp.value = val; updatePreview(); }
}

function updatePreview() {
    var newLevels = parseInt(document.getElementById('levels_y').value) || currentLevels;
    var newBins   = Math.max(0, newLevels - currentLevels) * positionsX;
    var aisleRef  = document.getElementById('aisleRefInput').value.trim();
    var desc      = document.getElementById('descInput').value.trim();
    var total     = positionsX * newLevels;

    // Badge
    document.getElementById('previewBadge').textContent = rackCode + ' - ' + positionsX + 'x' + newLevels + ' (' + total + ' bins)';

    // Alert nuevos bins
    if (newBins > 0) {
        document.getElementById('newBinsAlert').style.display = 'block';
        document.getElementById('newBinsCount').textContent = newBins;
    } else {
        document.getElementById('newBinsAlert').style.display = 'none';
    }

    var html = '';

    // ── Header del rack ──
    html += '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:10px 14px;background:' + bgColor + ';border:1px solid ' + bdColor + ';border-radius:8px;">';
    html += '<div>';
    html += '<span style="font-size:15px;font-weight:700;color:' + txtColor + ';">' + rackCode + '</span>';
    if (desc) {
        html += ' <span style="font-size:12px;color:#6c757d;font-weight:400;">-- ' + desc + '</span>';
    }
    html += '<div style="font-size:11px;color:' + txtColor + ';opacity:.7;margin-top:2px;">';
    html += zoneCode + ' -- ' + zoneName;
    if (aisleRef) html += ' &nbsp;|&nbsp; {{ __('warehouse.aisle-label') }} ' + aisleRef;
    html += '</div>';
    html += '</div>';
    html += '<div style="text-align:right;">';
    html += '<div style="font-size:10px;color:' + txtColor + ';opacity:.6;font-weight:600;">TOTAL BINS</div>';
    html += '<div style="font-size:22px;font-weight:700;color:' + txtColor + ';line-height:1;">' + total + '</div>';
    html += '</div>';
    html += '</div>';

    // ── Tabla de bins ──
    html += '<div style="overflow-x:auto;"><table style="border-collapse:collapse;width:100%;">';

    // Header posiciones
    html += '<tr><th style="width:60px;padding:4px 8px;font-size:10px;color:#6c757d;text-align:right;font-weight:500;">{{ __('warehouse.level-col') }}</th>';
    for (var p = 1; p <= positionsX; p++) {
        html += '<th style="text-align:center;font-size:10px;color:#6c757d;padding:4px;min-width:80px;font-weight:500;">' + String(p).padStart(2,'0') + '</th>';
    }
    html += '</tr>';

    // Filas de niveles
    for (var l = newLevels; l >= 1; l--) {
        var isNew = l > currentLevels;
        html += '<tr>';
        html += '<td style="padding:4px 8px;font-size:11px;font-weight:600;color:#6c757d;text-align:right;white-space:nowrap;">N' + l;
        if (isNew) html += ' <span style="font-size:9px;background:#dcfce7;color:#15803d;padding:1px 5px;border-radius:3px;font-weight:600;">{{ __('warehouse.new-badge') }}</span>';
        html += '</td>';
        for (var p2 = 1; p2 <= positionsX; p2++) {
            var pos     = String(p2).padStart(2,'0');
            var binCode = (useAisle && aisleRef)
                ? aisleRef + '-' + rackCode + '-N' + l + '-' + pos
                : rackCode + '-N' + l + '-' + pos;
            var cellBg  = isNew ? '#dcfce7' : bgColor;
            var cellBdr = isNew ? '#86efac' : bdColor;
            var cellTxt = isNew ? '#15803d' : txtColor;

            html += '<td style="padding:3px;">';
            html += '<div style="background:' + cellBg + ';border:1px solid ' + cellBdr + ';border-radius:4px;padding:6px 4px;text-align:center;min-width:75px;">';
            html += '<div style="font-size:9px;font-family:monospace;color:' + cellTxt + ';font-weight:600;line-height:1.3;">' + binCode + '</div>';
            html += '<div style="font-size:9px;color:' + (isNew ? '#15803d' : txtColor) + ';opacity:.6;margin-top:2px;">' + (isNew ? '{{ __('warehouse.new-lower') }}' : '{{ __('warehouse.existing') }}') + '</div>';
            html += '</div></td>';
        }
        html += '</tr>';
    }

    // Piso
    html += '<tr><td colspan="' + (positionsX+1) + '" style="padding:6px 8px;">';
    html += '<div style="border-top:3px solid #adb5bd;text-align:center;padding-top:5px;font-size:10px;color:#6c757d;font-weight:600;letter-spacing:1px;">{{ __('warehouse.floor') }}</div>';
    html += '</td></tr>';
    html += '</table></div>';

    // Resumen
    html += '<div class="row g-2 mt-3">';
    html += '<div class="col-4"><div class="text-center p-2" style="background:#f8f9fa;border-radius:8px;">';
    html += '<div style="font-size:10px;color:#6c757d;font-weight:600;">{{ __('warehouse.positions-x-caps') }}</div>';
    html += '<div class="h4 mb-0">' + positionsX + '</div></div></div>';
    html += '<div class="col-4"><div class="text-center p-2" style="background:#f8f9fa;border-radius:8px;">';
    html += '<div style="font-size:10px;color:#6c757d;font-weight:600;">{{ __('warehouse.levels-y-caps') }}</div>';
    html += '<div class="h4 mb-0">' + newLevels + '</div></div></div>';
    html += '<div class="col-4"><div class="text-center p-2" style="background:' + bgColor + ';border-radius:8px;">';
    html += '<div style="font-size:10px;color:' + txtColor + ';font-weight:600;">{{ __('warehouse.total-bins') }}</div>';
    html += '<div class="h4 mb-0" style="color:' + txtColor + ';">' + total + '</div></div></div>';
    html += '</div>';

    document.getElementById('rackPreview').innerHTML = html;
}

document.addEventListener('DOMContentLoaded', updatePreview);
</script>
@endsection