{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/locations/generate.blade.php | v1.0 | 13/07/2026 --}}
{{-- v1.0 — Generador dinámico de ubicaciones WMS. Pasillos/Racks/Niveles libres.     --}}

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

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-th"></i> {{ __('warehouse.generate-locations') }}
        <small>{{ __('warehouse.wms-builder-sub') }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.locations.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: Generator form --}}
    <div class="col-lg-5">
        <div class="panel">
            <div class="panel-hdr">
                <h2><i class="fal fa-cog me-2"></i> {{ __('warehouse.location-generator') }}</h2>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show py-2 small mb-3">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show py-2 small mb-3">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                    @endif

                    <form id="generatorForm" action="{{ route('warehouse.locations.generate') }}" method="POST">
                    @csrf

                    {{-- Warehouse + Zone --}}
                    <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()">
                                <option value="">{{ __('warehouse.select-dash') }}</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}" {{ 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-wh-first-dash') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- Location type --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold small">{{ __('warehouse.location-type') }} <span class="text-danger">*</span></label>
                        <div class="d-flex gap-2">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="location_type" id="typeRack" value="RACK" checked onchange="toggleFields()">
                                <label class="form-check-label small" for="typeRack">
                                    <i class="fal fa-th me-1"></i> RACK
                                    <div class="text-muted" style="font-size:10px;">{{ __('warehouse.rack-type-desc') }}</div>
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="location_type" id="typeBloque" value="BLOQUE" onchange="toggleFields()">
                                <label class="form-check-label small" for="typeBloque">
                                    <i class="fal fa-pallet me-1"></i> BLOQUE
                                    <div class="text-muted" style="font-size:10px;">{{ __('warehouse.bloque-type-desc') }}</div>
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="location_type" id="typePiso" value="PISO" onchange="toggleFields()">
                                <label class="form-check-label small" for="typePiso">
                                    <i class="fal fa-warehouse me-1"></i> PISO
                                    <div class="text-muted" style="font-size:10px;">{{ __('warehouse.piso-type-desc') }}</div>
                                </label>
                            </div>
                        </div>
                    </div>

                    {{-- Aisles --}}
                    <div class="mb-3">
                        <label class="form-label fw-bold small">
                            {{ __('warehouse.aisles') }} <span class="text-danger">*</span>
                            <span class="text-muted fw-normal">{{ __('warehouse.comma-separated') }}</span>
                        </label>
                        <input type="text" name="aisles" id="aislesInput" class="form-control"
                               placeholder="{{ __('warehouse.ph-aisles') }}"
                               value="{{ old('aisles') }}"
                               oninput="updatePreview()" required>
                        <div class="form-text">{{ __('warehouse.aisles-hint') }}</div>
                    </div>

                    {{-- Racks / Blocks --}}
                    <div class="mb-3" id="racksRow">
                        <label class="form-label fw-bold small">
                            <span id="rackLabel">{{ __('warehouse.racks-col') }}</span> <span class="text-danger">*</span>
                            <span class="text-muted fw-normal">{{ __('warehouse.comma-separated') }}</span>
                        </label>
                        <input type="text" name="racks" id="racksInput" class="form-control"
                               placeholder="{{ __('warehouse.ph-racks') }}"
                               value="{{ old('racks') }}"
                               oninput="updatePreview()">
                        <div class="form-text">{{ __('warehouse.leave-empty-na') }}</div>
                    </div>

                    {{-- Levels --}}
                    <div class="mb-3" id="levelsRow">
                        <label class="form-label fw-bold small">
                            {{ __('warehouse.levels-plain') }}
                            <span class="text-muted fw-normal">{{ __('warehouse.comma-separated-opt') }}</span>
                        </label>
                        <input type="text" name="levels" id="levelsInput" class="form-control"
                               placeholder="{{ __('warehouse.ph-levels') }}"
                               value="{{ old('levels') }}"
                               oninput="updatePreview()">
                        <div class="form-text">{{ __('warehouse.leave-empty-piso') }}</div>
                    </div>

                    {{-- Capacity --}}
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.max-capacity') }}</label>
                            <input type="number" name="max_capacity" class="form-control"
                                   placeholder="{{ __('warehouse.ph-eg-100') }}" min="0" step="0.01"
                                   value="{{ old('max_capacity') }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small">{{ __('warehouse.capacity-unit') }}</label>
                            <select name="capacity_unit" class="form-select">
                                <option value="PZA" {{ old('capacity_unit') == 'PZA' ? 'selected' : '' }}>{{ __('warehouse.unit-pza') }}</option>
                                <option value="KG" {{ old('capacity_unit') == 'KG' ? 'selected' : '' }}>{{ __('warehouse.unit-kg') }}</option>
                                <option value="M3" {{ old('capacity_unit') == 'M3' ? 'selected' : '' }}>{{ __('warehouse.unit-m3') }}</option>
                                <option value="PALLET" {{ old('capacity_unit') == 'PALLET' ? 'selected' : '' }}>PALLET</option>
                                <option value="CAJA" {{ old('capacity_unit') == 'CAJA' ? 'selected' : '' }}>{{ __('warehouse.unit-caja') }}</option>
                            </select>
                        </div>
                    </div>

                    {{-- Duplicate handling --}}
                    <div class="mb-4">
                        <label class="form-label fw-bold small">{{ __('warehouse.if-loc-exists') }}</label>
                        <div class="d-flex gap-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="on_duplicate" value="skip" id="dupSkip" checked>
                                <label class="form-check-label small" for="dupSkip">{{ __('warehouse.skip') }}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="on_duplicate" value="update" id="dupUpdate">
                                <label class="form-check-label small" for="dupUpdate">{{ __('warehouse.update-capacity') }}</label>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 fw-bold" id="btnGenerate">
                        <i class="fal fa-magic me-2"></i> {{ __('warehouse.generate-locations') }}
                    </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') }}</h2>
                <div class="panel-toolbar">
                    <span class="badge bg-primary" id="previewCount">0 {{ __('warehouse.locations-lower') }}</span>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content">

                    {{-- Summary --}}
                    <div id="previewSummary" class="mb-3" style="display:none;">
                        <div class="row g-2 text-center mb-3">
                            <div class="col-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.type-caps') }}</div>
                                <div class="fw-bold" id="prevType">—</div>
                            </div>
                            <div class="col-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.aisles-caps') }}</div>
                                <div class="fw-bold text-primary" id="prevAisles">—</div>
                            </div>
                            <div class="col-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.racks-caps') }}</div>
                                <div class="fw-bold text-primary" id="prevRacks">—</div>
                            </div>
                            <div class="col-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.levels-caps') }}</div>
                                <div class="fw-bold text-primary" id="prevLevels">—</div>
                            </div>
                        </div>
                        <div class="alert alert-info py-2 small mb-3" id="prevFormula"></div>
                    </div>

                    {{-- Location grid preview --}}
                    <div id="previewGrid" style="max-height:450px; overflow-y:auto;">
                        <div class="text-center text-muted py-5">
                            <i class="fal fa-th fa-3x mb-3 d-block opacity-25"></i>
                            {{ __('warehouse.fill-form-preview') }}
                        </div>
                    </div>

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

        {{-- Existing locations summary --}}
        <div class="panel mt-3">
            <div class="panel-hdr">
                <h2><i class="fal fa-list me-2"></i> {{ __('warehouse.existing-locations') }}</h2>
                <div class="panel-toolbar">
                    <span class="badge bg-secondary" id="existingCount">{{ $totalLocations }} {{ __('warehouse.total-lower') }}</span>
                </div>
            </div>
            <div class="panel-container show">
                <div class="panel-content p-0">
                    @if($recentLocations->count() > 0)
                    <table class="table table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-3">{{ __('warehouse.code') }}</th>
                                <th>{{ __('warehouse.zone') }}</th>
                                <th>{{ __('warehouse.type-col') }}</th>
                                <th>{{ __('warehouse.capacity') }}</th>
                                <th class="text-center">{{ __('warehouse.active') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentLocations as $loc)
                            <tr>
                                <td class="ps-3 fw-bold">{{ $loc->code }}</td>
                                <td><span class="badge bg-secondary">{{ $loc->zone_code }}</span></td>
                                <td><span class="badge bg-light text-dark border">{{ $loc->location_type ?? 'RACK' }}</span></td>
                                <td class="small text-muted">{{ $loc->max_capacity ? $loc->max_capacity . ' ' . $loc->capacity_unit : '—' }}</td>
                                <td class="text-center">
                                    @if($loc->is_active)
                                        <i class="fal fa-check-circle text-success"></i>
                                    @else
                                        <i class="fal fa-times-circle text-danger"></i>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    @if($totalLocations > 10)
                    <div class="text-center py-2 small text-muted border-top">
                        {{ __('warehouse.showing-locations', ['total' => $totalLocations]) }}
                        <a href="{{ route('warehouse.locations.index') }}">{{ __('warehouse.view-all') }}</a>
                    </div>
                    @endif
                    @else
                    <div class="text-center py-4 text-muted small">
                        <i class="fal fa-th fa-2x mb-2 d-block opacity-25"></i>
                        {{ __('warehouse.no-locations-configured') }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
// ── Zone data ──────────────────────────────────────────────────────────────────
var zonesData = @json($zones);

// ── Load zones by warehouse ───────────────────────────────────────────────────
function loadZones() {
    var whId   = document.getElementById('warehouseSelect').value;
    var select = document.getElementById('zoneSelect');
    select.innerHTML = '<option value="">{{ __('warehouse.select-zone-dash') }}</option>';

    if (!whId) return;

    var filtered = zonesData.filter(z => z.warehouse_id == whId);
    filtered.forEach(function(z) {
        select.innerHTML += '<option value="' + z.id + '">' + z.code + ' — ' + z.name + '</option>';
    });
    updatePreview();
}

// ── Toggle fields by type ─────────────────────────────────────────────────────
function toggleFields() {
    var type = document.querySelector('input[name="location_type"]:checked').value;
    var racksRow  = document.getElementById('racksRow');
    var levelsRow = document.getElementById('levelsRow');
    var rackLabel = document.getElementById('rackLabel');

    if (type === 'PISO') {
        racksRow.style.display  = 'none';
        levelsRow.style.display = 'none';
    } else if (type === 'BLOQUE') {
        racksRow.style.display  = 'block';
        levelsRow.style.display = 'none';
        rackLabel.textContent   = '{{ __('warehouse.blocks') }}';
    } else {
        racksRow.style.display  = 'block';
        levelsRow.style.display = 'block';
        rackLabel.textContent   = '{{ __('warehouse.racks-col') }}';
    }
    updatePreview();
}

// ── Parse comma-separated values ──────────────────────────────────────────────
function parseList(str) {
    if (!str || !str.trim()) return [];
    return str.split(',').map(s => s.trim()).filter(s => s.length > 0);
}

// ── Update preview ────────────────────────────────────────────────────────────
function updatePreview() {
    var type   = document.querySelector('input[name="location_type"]:checked')?.value || 'RACK';
    var aisles = parseList(document.getElementById('aislesInput').value);
    var racks  = parseList(document.getElementById('racksInput').value);
    var levels = parseList(document.getElementById('levelsInput').value);

    var codes  = [];

    if (type === 'PISO') {
        aisles.forEach(a => codes.push(a));
    } else if (type === 'BLOQUE') {
        aisles.forEach(a => {
            racks.forEach(r => codes.push(a + '-' + r));
        });
    } else { // RACK
        aisles.forEach(a => {
            racks.forEach(r => {
                if (levels.length > 0) {
                    levels.forEach(l => codes.push(a + '-' + r + '-' + l));
                } else {
                    codes.push(a + '-' + r);
                }
            });
        });
    }

    // Update count badge
    document.getElementById('previewCount').textContent = codes.length + ' {{ __('warehouse.locations-lower') }}';

    if (codes.length === 0) {
        document.getElementById('previewSummary').style.display = 'none';
        document.getElementById('previewGrid').innerHTML = '<div class="text-center text-muted py-4"><i class="fal fa-th fa-3x mb-2 d-block opacity-25"></i>{{ __('warehouse.fill-form-preview-short') }}</div>';
        return;
    }

    // Summary
    document.getElementById('previewSummary').style.display = 'block';
    document.getElementById('prevType').textContent   = type;
    document.getElementById('prevAisles').textContent = aisles.length || '—';
    document.getElementById('prevRacks').textContent  = racks.length || '—';
    document.getElementById('prevLevels').textContent = levels.length || '—';

    var formula = aisles.length + ' {{ __('warehouse.aisles-lower') }}';
    if (racks.length)  formula += ' × ' + racks.length + ' {{ __('warehouse.racks-lower') }}';
    if (levels.length) formula += ' × ' + levels.length + ' {{ __('warehouse.levels-lower') }}';
    formula += ' = <strong>' + codes.length + ' {{ __('warehouse.locations-lower') }}</strong>';
    document.getElementById('prevFormula').innerHTML = '<i class="fal fa-calculator me-1"></i> ' + formula;

    // Grid
    var html = '<div class="d-flex flex-wrap gap-1">';
    codes.forEach(function(code) {
        html += '<span class="badge bg-light text-dark border" style="font-size:11px;font-family:monospace;">' + code + '</span>';
    });
    html += '</div>';

    if (codes.length > 200) {
        html = '<div class="alert alert-warning py-2 small"><i class="fal fa-exclamation-triangle me-1"></i> {{ __('warehouse.preview-hidden', ['count' => "' + codes.length + '"]) }}</div>';
        html += '<div class="text-muted small">{{ __('warehouse.first-20') }} ';
        html += codes.slice(0, 20).map(c => '<code>' + c + '</code>').join(', ');
        html += '...</div>';
    }

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

// ── Init ──────────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
    @if(old('warehouse_id'))
        loadZones();
        setTimeout(updatePreview, 100);
    @endif
    toggleFields();
});
</script>
@endsection