{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/racks/create.blade.php | v1.3 | 14/07/2026 --}}
{{-- v1.0 — Alta de rack con preview visual interactivo. Genera bins automaticamente. --}}
{{-- v1.1 — Fix encoding UTF-8, reemplaza arrow function fn() por closure estandar.  --}}
{{-- v1.2 — Preview solo se muestra cuando todos los campos estan llenos.            --}}
{{-- v1.3 — Muestra descripcion y zona como titulo arriba del rack en el preview.    --}}

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

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-th"></i> {{ __('warehouse.new-rack') }}
        <small>{{ __('warehouse.new-rack-sub') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.racks.index') }}" 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-cog me-2"></i> {{ __('warehouse.rack-config') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

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

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

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.warehouse') }} <span class="text-danger">*</span></label>
                            <select name="warehouse_id" id="warehouseSelect" class="form-select" required onchange="loadZones(); updatePreview()">
                                <option value="">{{ __('warehouse.select-opt') }}</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}"
                                    data-use-aisle="{{ $wh->use_aisle_in_code ? '1' : '0' }}"
                                    {{ old('warehouse_id') == $wh->id ? 'selected' : '' }}>
                                    {{ $wh->code }} -- {{ $wh->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.zone') }} <span class="text-danger">*</span></label>
                            <select name="zone_id" id="zoneSelect" class="form-select" required onchange="updatePreview()">
                                <option value="">{{ __('warehouse.select-warehouse-first') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.rack-code') }} <span class="text-danger">*</span></label>
                            <input type="text" name="code" id="rackCode" class="form-control text-uppercase fw-bold"
                                   placeholder="R1" maxlength="20"
                                   value="{{ old('code') }}"
                                   oninput="this.value=this.value.toUpperCase(); updatePreview()" required>
                            <div class="form-text">{{ __('warehouse.eg-rack-codes') }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">
                                {{ __('warehouse.aisle-ref') }}
                                <span class="text-muted fw-normal">{{ __('warehouse.optional') }}</span>
                            </label>
                            <input type="text" name="aisle_ref" id="aisleRef" class="form-control text-uppercase"
                                   placeholder="P1" maxlength="20"
                                   value="{{ old('aisle_ref') }}"
                                   oninput="this.value=this.value.toUpperCase(); updatePreview()">
                            <div class="form-text">{{ __('warehouse.aisle-only-if-uses') }}</div>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small">{{ __('warehouse.description') }}</label>
                            <input type="text" name="description" id="rackDescription" class="form-control"
                                   placeholder="{{ __('warehouse.ph-optional') }}" value="{{ old('description') }}"
                                   oninput="updatePreview()">
                        </div>
                    </div>

                    <hr class="my-3">

                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">
                                {{ __('warehouse.positions-x-label') }} <span class="text-danger">*</span>
                                <span class="text-muted fw-normal">{{ __('warehouse.horizontal-suffix') }}</span>
                            </label>
                            <div class="input-group">
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="changeVal('positions_x',-1)">-</button>
                                <input type="number" name="positions_x" id="positions_x"
                                       class="form-control text-center fw-bold"
                                       value="{{ old('positions_x', '') }}" min="1" max="50"
                                       placeholder="--"
                                       oninput="updatePreview()" required>
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="changeVal('positions_x',1)">+</button>
                            </div>
                            <div class="form-text">{{ __('warehouse.pallets-side-by-side') }}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">
                                {{ __('warehouse.levels-y-label') }} <span class="text-danger">*</span>
                                <span class="text-muted fw-normal">{{ __('warehouse.vertical-suffix') }}</span>
                            </label>
                            <div class="input-group">
                                <button type="button" class="btn btn-outline-secondary btn-sm" 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', '') }}" min="1" max="20"
                                       placeholder="--"
                                       oninput="updatePreview()" required>
                                <button type="button" class="btn btn-outline-secondary btn-sm" onclick="changeVal('levels_y',1)">+</button>
                            </div>
                            <div class="form-text">{{ __('warehouse.levels-high-note') }}</div>
                        </div>
                    </div>

                    <div class="alert alert-info py-2 small mb-3" id="totalBinsAlert" style="display:none;">
                        <i class="fal fa-info-circle me-1"></i>
                        <strong id="totalBinsCount">0</strong> {{ __('warehouse.bins-generated-auto') }}
                    </div>

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

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

    {{-- RIGHT: Preview visual del rack --}}
    <div class="col-lg-7">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-eye me-2"></i> {{ __('warehouse.rack-preview') }}</h2>
                <div class="panel-toolbar">
                    <span class="badge bg-secondary" id="previewTitle">{{ __('warehouse.pending-config') }}</span>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">
                    <div id="rackPreview">
                        <div class="text-center text-muted py-5">
                            <i class="fal fa-th fa-3x mb-3 d-block opacity-25"></i>
                            <p class="mb-1">{{ __('warehouse.preview-hint1') }}</p>
                            <p class="small">{{ __('warehouse.preview-hint2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
var zonesData = {!! json_encode($zones->map(function($z) {
    return ['id' => $z->id, 'code' => $z->code, 'name' => $z->name, 'warehouse_id' => $z->warehouse_id];
})) !!};

function loadZones() {
    var whId   = document.getElementById('warehouseSelect').value;
    var select = document.getElementById('zoneSelect');
    select.innerHTML = '<option value="">{{ __('warehouse.select-zone-opt') }}</option>';
    zonesData.filter(function(z) { return z.warehouse_id == whId; }).forEach(function(z) {
        select.innerHTML += '<option value="' + z.id + '">' + z.code + ' -- ' + z.name + '</option>';
    });
}

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

function showEmpty() {
    document.getElementById('rackPreview').innerHTML =
        '<div class="text-center text-muted py-5">' +
        '<i class="fal fa-th fa-3x mb-3 d-block opacity-25"></i>' +
        '<p class="mb-1">{{ __('warehouse.preview-hint1') }}</p>' +
        '<p class="small">{{ __('warehouse.preview-hint2') }}</p>' +
        '</div>';
    document.getElementById('previewTitle').textContent = '{{ __('warehouse.pending-config') }}';
    document.getElementById('previewTitle').className = 'badge bg-secondary';
    document.getElementById('totalBinsAlert').style.display = 'none';
}

function updatePreview() {
    var code     = document.getElementById('rackCode').value.trim();
    var posX     = parseInt(document.getElementById('positions_x').value);
    var levY     = parseInt(document.getElementById('levels_y').value);
    var whSel    = document.getElementById('warehouseSelect');
    var zSel     = document.getElementById('zoneSelect');
    var aisleRef = document.getElementById('aisleRef').value.trim();
    var desc     = document.getElementById('rackDescription').value.trim();

    // Validar campos requeridos
    if (!code || !posX || !levY || whSel.selectedIndex <= 0 || zSel.selectedIndex <= 0) {
        showEmpty();
        return;
    }

    var useAisle = whSel.options[whSel.selectedIndex].dataset.useAisle === '1';
    var total    = posX * levY;
    var zoneCode = zSel.options[zSel.selectedIndex].text.split(' -- ')[0];
    var zoneName = zSel.options[zSel.selectedIndex].text.split(' -- ')[1] || '';

    // Zone colors
    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';

    // Actualizar badge
    document.getElementById('previewTitle').textContent = code + ' - ' + posX + 'x' + levY + ' (' + total + ' bins)';
    document.getElementById('previewTitle').className = 'badge bg-primary';
    document.getElementById('totalBinsCount').textContent = total;
    document.getElementById('totalBinsAlert').style.display = 'block';

    var html = '';

    // ── Titulo del rack arriba del preview ──
    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 + ';">' + code + '</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 += '<i class="fal fa-map-marker-alt me-1"></i>' + 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;">';
    html += '<table style="border-collapse:collapse;width:100%;">';

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

    // Filas de niveles — de arriba hacia abajo
    for (var l = levY; l >= 1; l--) {
        html += '<tr>';
        html += '<td style="padding:4px 8px;font-size:11px;font-weight:600;color:#6c757d;text-align:right;white-space:nowrap;">N' + l + '</td>';
        for (var p2 = 1; p2 <= posX; p2++) {
            var pos     = String(p2).padStart(2,'0');
            var lvl     = 'N' + l;
            var binCode = (useAisle && aisleRef)
                ? aisleRef + '-' + code + '-' + lvl + '-' + pos
                : code + '-' + lvl + '-' + pos;

            html += '<td style="padding:3px;">';
            html += '<div style="background:' + bgColor + ';border:1px solid ' + bdColor + ';border-radius:4px;padding:6px 4px;text-align:center;min-width:75px;">';
            html += '<div style="font-size:10px;font-family:monospace;color:' + txtColor + ';font-weight:600;line-height:1.3;">' + binCode + '</div>';
            html += '<div style="font-size:9px;color:#28a745;margin-top:2px;font-weight:500;">{{ __('warehouse.free') }}</div>';
            html += '</div>';
            html += '</td>';
        }
        html += '</tr>';
    }

    // Piso
    html += '<tr><td colspan="' + (posX+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">' + posX + '</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">' + levY + '</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', function() {
    @if(old('warehouse_id')) loadZones(); @endif
    updatePreview();
});
</script>
@endsection