{{-- New-Unity ERP | app/Modules/Warehouse/Resources/Views/receptions/form.blade.php | v1.0 | 10/07/2026 01:17:00 --}}
{{-- v1.0 — Paso 2-3: Formulario de confrontación con reglas auto-cargadas y guía integrada. --}}

@extends('layouts.vertical', ['pageTitle' => __('warehouse.gr-inspection-title')])

@section('page-title')
<div class="subheader">
    <h1 class="subheader-title">
        <i class="subheader-icon fal fa-clipboard-check"></i> {{ __('warehouse.gr-inspection') }}
        <small>{{ __('warehouse.po-prefix') }} {{ $po->po_number }} — {{ $po->supplier_name }}</small>
    </h1>
    <div class="subheader-block">
        <a href="{{ route('warehouse.receptions.create') }}" class="btn btn-secondary btn-sm">
            <i class="fal fa-arrow-left me-1"></i> {{ __('warehouse.back') }}
        </a>
    </div>
</div>
@endsection

@section('content')

{{-- ── PROGRESS BAR ────────────────────────────────────────────────────────── --}}
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex align-items-center gap-2 p-3 bg-white border rounded">
            <div class="d-flex align-items-center gap-2 opacity-50">
                <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;flex-shrink:0;">
                    <i class="fal fa-check" style="font-size:12px;"></i>
                </div>
                <span class="small">{{ __('warehouse.step-select-type') }}</span>
            </div>
            <div class="flex-grow-1 border-top border-success opacity-50 mx-2"></div>
            <div class="d-flex align-items-center gap-2">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;flex-shrink:0;">2</div>
                <span class="fw-bold small">{{ __('warehouse.step-inspection-form') }}</span>
            </div>
            <div class="flex-grow-1 border-top border-secondary opacity-25 mx-2"></div>
            <div class="d-flex align-items-center gap-2 opacity-50">
                <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center fw-bold" style="width:32px;height:32px;flex-shrink:0;">3</div>
                <span class="small">{{ __('warehouse.step-confirm-post') }}</span>
            </div>
        </div>
    </div>
</div>

@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show">
    <ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

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

    {{-- Campos ocultos --}}
    <input type="hidden" name="purchase_order_id" value="{{ $po->id }}">
    <input type="hidden" name="purchase_order_number" value="{{ $po->po_number }}">
    <input type="hidden" name="supplier_id" value="{{ $po->supplier_id }}">
    <input type="hidden" name="warehouse_id" value="{{ $warehouse->id }}">
    <input type="hidden" name="zone_id" value="{{ $zone->id }}">

    <div class="row">
        {{-- ── COLUMNA IZQUIERDA: PO Info + Items ──────────────────────────────── --}}
        <div class="col-xl-8">

            {{-- PO Info --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-file-invoice me-2"></i> {{ __('warehouse.po-details') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="row g-2">
                            <div class="col-md-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.po-number') }}</div>
                                <div class="fw-bold">{{ $po->po_number }}</div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.supplier') }}</div>
                                <div>{{ $po->supplier_name }}</div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.destination') }}</div>
                                <div>{{ $warehouse->code }} / {{ $zone->code }}</div>
                            </div>
                            <div class="col-md-2">
                                <div class="text-xs text-muted fw-bold">{{ __('warehouse.total-po') }}</div>
                                <div class="fw-bold">${{ number_format($po->total, 2) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Items a recibir --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-boxes me-2"></i> {{ __('warehouse.items-to-receive') }}</h2>
                    <div class="panel-toolbar">
                        <small class="text-muted">{{ __('warehouse.enter-qty-each') }}</small>
                    </div>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">

                        {{-- Ayuda --}}
                        <div class="alert alert-info py-2 mb-3">
                            <i class="fal fa-info-circle me-1"></i>
                            {!! __('warehouse.items-help') !!}
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-sm">
                                <thead>
                                    <tr>
                                        <th>{{ __('warehouse.part-num') }}</th>
                                        <th>{{ __('warehouse.product') }}</th>
                                        <th class="text-center">{{ __('warehouse.type') }}</th>
                                        <th class="text-end">{{ __('warehouse.ordered') }}</th>
                                        <th class="text-end">{{ __('warehouse.previously-rec') }}</th>
                                        <th class="text-end" style="min-width:120px;">{{ __('warehouse.qty-received-req') }} <span class="text-danger">*</span></th>
                                        <th class="text-end" style="min-width:110px;">{{ __('warehouse.unit-cost-lbl') }} <span class="text-danger">*</span></th>
                                        <th>{{ __('warehouse.entry-date') }}</th>
                                        <th>{{ __('warehouse.pallet-code') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($items as $i => $item)
                                    <input type="hidden" name="items[{{ $i }}][product_id]" value="{{ $item->product_id }}">
                                    <input type="hidden" name="items[{{ $i }}][material_type]" value="{{ $item->material_type ?? 'TR' }}">
                                    <tr>
                                        <td class="fw-bold small">{{ $item->part_number ?? '—' }}</td>
                                        <td class="small">{{ $item->product_name }}</td>
                                        <td class="text-center">
                                            <span class="badge bg-secondary">{{ $item->material_type ?? 'TR' }}</span>
                                        </td>
                                        <td class="text-end">{{ number_format($item->quantity, 2) }}</td>
                                        <td class="text-end text-muted">{{ number_format($item->qty_received ?? 0, 2) }}</td>
                                        <td>
                                            <input type="number" name="items[{{ $i }}][qty_received]"
                                                   class="form-control form-control-sm text-end item-qty"
                                                   value="{{ $item->quantity - ($item->qty_received ?? 0) }}"
                                                   min="0" max="{{ $item->quantity }}" step="0.0001"
                                                   onchange="updateTotals()" required>
                                        </td>
                                        <td>
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">$</span>
                                                <input type="number" name="items[{{ $i }}][unit_cost]"
                                                       class="form-control form-control-sm text-end"
                                                       value="{{ $item->unit_cost }}"
                                                       min="0" step="0.000001" required>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="date" name="items[{{ $i }}][entry_date]"
                                                   class="form-control form-control-sm"
                                                   value="{{ date('Y-m-d') }}" required>
                                        </td>
                                        <td>
                                            <input type="text" name="items[{{ $i }}][pallet_code]"
                                                   class="form-control form-control-sm"
                                                   placeholder="{{ __('warehouse.ph-scan') }}">
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        {{-- Totales --}}
                        <div class="row g-2 mt-2">
                            <div class="col-md-4">
                                <label class="form-label fw-bold small">{{ __('warehouse.total-ordered') }}</label>
                                <input type="number" name="quantity_ordered" id="qty_ordered"
                                       class="form-control form-control-sm bg-light text-end fw-bold"
                                       value="{{ $items->sum('quantity') }}" readonly>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-bold small">{{ __('warehouse.total-received') }} <span class="text-danger">*</span></label>
                                <input type="number" name="quantity_received" id="qty_received"
                                       class="form-control form-control-sm text-end fw-bold"
                                       value="{{ $items->sum(fn($i) => $i->quantity - ($i->qty_received ?? 0)) }}"
                                       step="0.0001" min="0" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold small">{{ __('warehouse.accepted') }}</label>
                                <input type="number" name="quantity_accepted" id="qty_accepted"
                                       class="form-control form-control-sm text-end text-success fw-bold"
                                       value="{{ $items->sum(fn($i) => $i->quantity - ($i->qty_received ?? 0)) }}"
                                       step="0.0001" min="0" required>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-bold small">{{ __('warehouse.rejected') }}</label>
                                <input type="number" name="quantity_rejected" id="qty_rejected"
                                       class="form-control form-control-sm text-end text-danger fw-bold"
                                       value="0" step="0.0001" min="0" required>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Reglas de Confrontación --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-clipboard-check me-2"></i> {{ __('warehouse.inspection-rules') }}</h2>
                    <div class="panel-toolbar">
                        <span id="rules-progress" class="badge bg-secondary">0 / {{ collect($rulesMap)->flatten()->unique('id')->count() }} {{ __('warehouse.completed-suffix') }}</span>
                    </div>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">

                        {{-- Ayuda --}}
                        <div class="alert alert-info py-2 mb-3">
                            <i class="fal fa-info-circle me-1"></i>
                            {!! __('warehouse.rules-auto-help') !!}
                        </div>

                        @php $ruleIndex = 0; $shownRuleIds = []; @endphp
                        @foreach($rulesMap as $key => $rules)
                        @php [$materialType] = explode('_', $key); @endphp
                        <h6 class="fw-bold text-muted mb-2 mt-3">
                            <span class="badge bg-secondary me-1">{{ $materialType }}</span>
                            {{ __('warehouse.rules-word') }}
                        </h6>
                        @foreach($rules as $rule)
                        @if(!in_array($rule->id, $shownRuleIds))
                        @php $shownRuleIds[] = $rule->id; @endphp
                        <div class="card mb-2 rule-card" id="rule-card-{{ $rule->id }}">
                            <div class="card-body py-2 px-3">
                                <input type="hidden" name="rules[{{ $ruleIndex }}][rule_id]" value="{{ $rule->id }}">
                                <div class="row g-2 align-items-start">
                                    <div class="col-md-4">
                                        <div class="d-flex align-items-center gap-2">
                                            <i class="fal fa-{{ $rule->rule_type_icon }} text-primary"></i>
                                            <div>
                                                <div class="fw-bold small">{{ $rule->rule_name }}</div>
                                                @if($rule->is_required)
                                                <span class="badge bg-danger" style="font-size:9px;">{{ __('warehouse.js-required') }}</span>
                                                @else
                                                <span class="badge bg-secondary" style="font-size:9px;">{{ __('warehouse.js-optional') }}</span>
                                                @endif
                                                @if($rule->requires_photo)
                                                <span class="badge bg-info" style="font-size:9px;">{{ __('warehouse.photo-required') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        @if($rule->description)
                                        <p class="text-muted small mb-0 mt-1">{{ $rule->description }}</p>
                                        @endif
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label small fw-bold mb-1">{{ __('warehouse.result') }} <span class="text-danger">*</span></label>
                                        <select name="rules[{{ $ruleIndex }}][result]"
                                                class="form-select form-select-sm rule-result"
                                                onchange="onRuleChange(this, {{ $rule->id }}, {{ $rule->requires_photo ? 'true' : 'false' }})"
                                                {{ $rule->is_required ? 'required' : '' }}>
                                            <option value="pending">{{ __('warehouse.opt-evaluate-em') }}</option>
                                            <option value="ok">{{ __('warehouse.opt-ok-emoji') }}</option>
                                            <option value="warning">{{ __('warehouse.opt-warning-emoji') }}</option>
                                            <option value="fail">{{ __('warehouse.opt-fail-emoji') }}</option>
                                            <option value="na">{{ __('warehouse.opt-na-em') }}</option>
                                        </select>
                                    </div>
                                    @if(in_array($rule->rule_type, ['quantity', 'price']))
                                    <div class="col-md-2">
                                        <label class="form-label small fw-bold mb-1">{{ __('warehouse.lbl-expected') }}</label>
                                        <input type="number" name="rules[{{ $ruleIndex }}][value_expected]"
                                               class="form-control form-control-sm text-end" step="0.01" min="0">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label small fw-bold mb-1">{{ __('warehouse.lbl-received') }}</label>
                                        <input type="number" name="rules[{{ $ruleIndex }}][value_received]"
                                               class="form-control form-control-sm text-end" step="0.01" min="0">
                                    </div>
                                    @else
                                    <div class="col-md-4">
                                        <label class="form-label small fw-bold mb-1">{{ __('warehouse.observations') }}</label>
                                        <input type="text" name="rules[{{ $ruleIndex }}][observations]"
                                               class="form-control form-control-sm" placeholder="{{ __('warehouse.ph-optional-notes') }}">
                                    </div>
                                    @endif
                                    {{-- Photo reference --}}
                                    <div class="col-md-12 photo-section-{{ $rule->id }}" style="display:{{ $rule->requires_photo ? 'block' : 'none' }}">
                                        <div class="row g-2 align-items-center">
                                            <div class="col-auto">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox"
                                                           name="rules[{{ $ruleIndex }}][photo_taken]"
                                                           id="photo_{{ $ruleIndex }}" value="1">
                                                    <label class="form-check-label small" for="photo_{{ $ruleIndex }}">
                                                        {{ __('warehouse.photo-taken') }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <input type="text" name="rules[{{ $ruleIndex }}][photo_reference]"
                                                       class="form-control form-control-sm"
                                                       placeholder="\\NAS\evidencias\REC-2026-XXXX\foto1.jpg">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @php $ruleIndex++; @endphp
                        @endif
                        @endforeach
                        @endforeach

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

        </div>

        {{-- ── COLUMNA DERECHA: Certificado + Notas + Ayuda ───────────────────── --}}
        <div class="col-xl-4">

            {{-- Ubicación --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-map-marker-alt me-2"></i> {{ __('warehouse.storage-location') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="mb-2">
                            <label class="form-label fw-bold small">{{ __('warehouse.bin-location-opt') }}</label>
                            <select name="location_id" class="form-select form-select-sm">
                                <option value="">{{ __('warehouse.auto-assign-em') }}</option>
                                @foreach($locations as $loc)
                                <option value="{{ $loc->id }}">{{ $loc->code }} {{ $loc->description ? '— '.$loc->description : '' }}</option>
                                @endforeach
                            </select>
                            <div class="form-text">{{ __('warehouse.leave-empty-auto') }}</div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Certificado de calidad --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-certificate me-2"></i> {{ __('warehouse.quality-certificate') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" name="has_quality_cert"
                                   id="has_cert" value="1" onchange="toggleCert(this.checked)">
                            <label class="form-check-label fw-bold small" for="has_cert">
                                {{ __('warehouse.cert-provided') }}
                            </label>
                        </div>
                        <div id="cert-fields" style="display:none;">
                            <div class="mb-2">
                                <label class="form-label small fw-bold">{{ __('warehouse.certificate-number') }}</label>
                                <input type="text" name="cert_number" class="form-control form-control-sm"
                                       placeholder="CERT-2026-0001">
                            </div>
                            <div class="mb-2">
                                <label class="form-label small fw-bold">{{ __('warehouse.certificate-date') }}</label>
                                <input type="date" name="cert_date" class="form-control form-control-sm">
                            </div>
                            <div class="mb-2">
                                <label class="form-label small fw-bold">{{ __('warehouse.cert-file-ref') }}</label>
                                <input type="text" name="cert_reference" class="form-control form-control-sm"
                                       placeholder="\\NAS\certificados\2026\...">
                                <div class="form-text">{{ __('warehouse.cert-path-help') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Evidencia fotográfica --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-camera me-2"></i> {{ __('warehouse.photo-evidence-folder') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <input type="text" name="photo_folder_reference" class="form-control form-control-sm"
                               placeholder="\\NAS\evidencias\recepciones\REC-2026-XXXX\">
                        <div class="form-text">
                            {{ __('warehouse.photo-folder-help') }}
                        </div>
                    </div>
                </div>
            </div>

            {{-- Notas --}}
            <div class="panel mb-3">
                <div class="panel-hdr">
                    <h2><i class="fal fa-sticky-note me-2"></i> {{ __('warehouse.notes') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <textarea name="notes" class="form-control form-control-sm" rows="3"
                                  placeholder="{{ __('warehouse.ph-general-obs-reception') }}"></textarea>
                        <div class="mt-2">
                            <label class="form-label small fw-bold">{{ __('warehouse.rejection-reason-opt') }}</label>
                            <textarea name="rejection_reason" class="form-control form-control-sm" rows="2"
                                      placeholder="{{ __('warehouse.ph-reason-rejecting') }}"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Ayuda contextual --}}
            <div class="panel">
                <div class="panel-hdr">
                    <h2><i class="fal fa-question-circle me-2"></i> {{ __('warehouse.quick-guide') }}</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <div class="mb-2">
                            <div class="fw-bold small text-success"><i class="fal fa-check-circle me-1"></i> OK</div>
                            <p class="text-muted small mb-0">{{ __('warehouse.guide-ok') }}</p>
                        </div>
                        <div class="mb-2">
                            <div class="fw-bold small text-warning"><i class="fal fa-exclamation-triangle me-1"></i> {{ __('warehouse.lbl-warning') }}</div>
                            <p class="text-muted small mb-0">{{ __('warehouse.guide-warning') }}</p>
                        </div>
                        <div class="mb-2">
                            <div class="fw-bold small text-danger"><i class="fal fa-times-circle me-1"></i> {{ __('warehouse.lbl-fail') }}</div>
                            <p class="text-muted small mb-0">{{ __('warehouse.guide-fail') }}</p>
                        </div>
                        <div class="mb-0">
                            <div class="fw-bold small text-muted"><i class="fal fa-minus-circle me-1"></i> {{ __('warehouse.lbl-na') }}</div>
                            <p class="text-muted small mb-0">{{ __('warehouse.guide-na') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Botón de envío --}}
            <div class="mt-3">
                <button type="button" class="btn btn-primary w-100" onclick="submitReception()">
                    <i class="fal fa-check-circle me-1"></i> {{ __('warehouse.confirm-reception-post') }}
                </button>
                <a href="{{ route('warehouse.receptions.create') }}" class="btn btn-secondary w-100 mt-2">
                    <i class="fal fa-times me-1"></i> {{ __('warehouse.cancel') }}
                </a>
            </div>

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

@endsection

@section('scripts')
<script>
let totalRules = document.querySelectorAll('.rule-result').length;

function onRuleChange(select, ruleId, requiresPhoto) {
    const card = document.getElementById('rule-card-' + ruleId);
    card.classList.remove('border-success', 'border-warning', 'border-danger');
    if (select.value === 'ok') card.classList.add('border-success');
    if (select.value === 'warning') card.classList.add('border-warning');
    if (select.value === 'fail') card.classList.add('border-danger');

    // Mostrar campo foto si requiere y result es ok o warning
    const photoSection = document.querySelector('.photo-section-' + ruleId);
    if (photoSection && requiresPhoto) {
        photoSection.style.display = ['ok', 'warning'].includes(select.value) ? 'block' : 'none';
    }

    // Actualizar contador
    const completed = document.querySelectorAll('.rule-result:not([value="pending"])').length;
    const evaluated = Array.from(document.querySelectorAll('.rule-result')).filter(s => s.value !== 'pending').length;
    document.getElementById('rules-progress').textContent = evaluated + ' / ' + totalRules + ' {{ __('warehouse.completed-suffix') }}';
    document.getElementById('rules-progress').className = 'badge bg-' + (evaluated === totalRules ? 'success' : 'warning');
}

function toggleCert(show) {
    document.getElementById('cert-fields').style.display = show ? 'block' : 'none';
}

function updateTotals() {
    let total = 0;
    document.querySelectorAll('.item-qty').forEach(input => {
        total += parseFloat(input.value) || 0;
    });
    document.getElementById('qty_received').value = total.toFixed(4);
    document.getElementById('qty_accepted').value = total.toFixed(4);
}

function submitReception() {
    // Verificar reglas requeridas
    const requiredUneval = Array.from(document.querySelectorAll('.rule-result[required]'))
        .filter(s => s.value === 'pending');

    if (requiredUneval.length > 0) {
        alert('{{ __('warehouse.js-eval-required-confirm') }}');
        requiredUneval[0].focus();
        return;
    }

    document.getElementById('receptionForm').submit();
}
</script>
@endsection