{{-- Sweet Works ERP | app/Modules/Manufacturing/Resources/Views/routings/create.blade.php | v1.3 | 02/09/2026 --}}
{{-- v1.3 — Fix: use $resourcesJson (pre-transformed in controller) to avoid Blade ParseError with fn() inside @json(). --}}
{{-- v1.2 — i18n sweep: replace all hardcoded text with __() calls. --}}
{{-- v1.1 — Corrección: work_center_id → resource_id; $workCenters → $resources. --}}
{{-- v1.0 — Nueva Hoja de Ruta. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="bi bi-diagram-3 me-2 text-primary"></i>{{ __('manufacturing.routings.new') }}</h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('manufacturing.common.erp') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('manufacturing.routings.index') }}">{{ __('manufacturing.routings.title') }}</a></li>
                <li class="breadcrumb-item active">{{ __('manufacturing.common.new') }}</li>
            </ol></nav>
        </div>
    </div>

    <form action="{{ route('manufacturing.routings.store') }}" method="POST" id="routingForm">
        @csrf
        <div class="row g-3">
            {{-- Encabezado --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header"><strong>{{ __('manufacturing.routings.header') }}</strong></div>
                    <div class="card-body">
                        @if($errors->any())
                            <div class="alert alert-danger py-2"><ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
                        @endif
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label">{{ __('manufacturing.work_centers.code') }} <span class="text-danger">*</span></label>
                                <input type="text" name="code" class="form-control uppercase-input @error('code') is-invalid @enderror"
                                       value="{{ old('code') }}" required maxlength="30" placeholder="RTG-001">
                                @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">{{ __('manufacturing.work_centers.name') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control uppercase-input @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" required maxlength="150">
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">{{ __('manufacturing.routings.product') }} <span class="text-danger">*</span></label>
                                <select name="product_id" class="form-select @error('product_id') is-invalid @enderror" required>
                                    <option value="">{{ __('manufacturing.common.select') }}</option>
                                    @foreach($products as $p)
                                        <option value="{{ $p->id }}" @selected(old('product_id') == $p->id)>
                                            {{ $p->product_code }} — {{ $p->product_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('product_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ __('manufacturing.common.description') }}</label>
                                <textarea name="description" class="form-control" rows="2">{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Operaciones --}}
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <strong>{{ __('manufacturing.routings.operations') }}</strong>
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addOperation()">
                            <i class="bi bi-plus-lg me-1"></i>{{ __('manufacturing.routings.op_add') }}
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm mb-0" id="opsTable">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width:70px">{{ __('manufacturing.routings.op_number') }}</th>
                                        <th>{{ __('manufacturing.routings.op_name') }}</th>
                                        <th>{{ __('manufacturing.routings.resource_col') }}</th>
                                        <th style="width:120px">{{ __('manufacturing.routings.cycle_col') }}</th>
                                        <th style="width:110px">{{ __('manufacturing.routings.setup_col') }}</th>
                                        <th style="width:120px">{{ __('manufacturing.routings.wait_col') }}</th>
                                        <th style="width:50px"></th>
                                    </tr>
                                </thead>
                                <tbody id="opsList"></tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card-footer py-2 text-muted small" id="opsEmpty">
                        {{ __('manufacturing.routings.no_ops_create') }}
                    </div>
                </div>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-lg me-1"></i>{{ __('manufacturing.common.save') }}</button>
                <a href="{{ route('manufacturing.routings.index') }}" class="btn btn-secondary ms-2">{{ __('manufacturing.common.cancel') }}</a>
            </div>
        </div>
    </form>
</div>

<script>
const resources = @json($resourcesJson);
const strSelectResource = '{{ __("manufacturing.routings.select_resource") }}';
let opCount = 0;

function buildResourceOptions(selectedId) {
    let opts = '<option value="">' + strSelectResource + '</option>';
    resources.forEach(r => {
        const sel = selectedId == r.id ? ' selected' : '';
        opts += '<option value="' + r.id + '"' + sel + '>[' + r.wc_code + '] ' + r.code + ' - ' + r.name + '</option>';
    });
    return opts;
}

function addOperation(data = {}) {
    const i = opCount++;
    const tbody = document.getElementById('opsList');
    const row = document.createElement('tr');
    row.id = 'op_row_' + i;
    row.innerHTML = `
        <td><input type="number" name="operations[${i}][operation_number]" class="form-control form-control-sm"
             value="${data.operation_number ?? (tbody.children.length + 10)}" min="1" required></td>
        <td><input type="text" name="operations[${i}][name]" class="form-control form-control-sm uppercase-input"
             value="${data.name ?? ''}" required maxlength="100"></td>
        <td>
            <select name="operations[${i}][resource_id]" class="form-select form-select-sm">
                ${buildResourceOptions(data.resource_id ?? '')}
            </select>
        </td>
        <td><input type="number" name="operations[${i}][cycle_time_minutes]" class="form-control form-control-sm"
             value="${data.cycle_time_minutes ?? 0}" min="0" step="0.01"></td>
        <td><input type="number" name="operations[${i}][setup_time_minutes]" class="form-control form-control-sm"
             value="${data.setup_time_minutes ?? 0}" min="0"></td>
        <td><input type="number" name="operations[${i}][wait_time_minutes]" class="form-control form-control-sm"
             value="${data.wait_time_minutes ?? 0}" min="0"></td>
        <td><button type="button" class="btn btn-outline-danger btn-sm py-0" onclick="removeOp('op_row_${i}')">
            <i class="bi bi-trash"></i></button></td>`;
    tbody.appendChild(row);
    document.getElementById('opsEmpty').style.display = 'none';
}

function removeOp(rowId) {
    document.getElementById(rowId)?.remove();
    if (!document.getElementById('opsList').children.length)
        document.getElementById('opsEmpty').style.display = '';
}
</script>
@endsection