@extends('layouts.app')

@section('content')
<main class="main-content"><div class="container-fluid"><h4>Preview {{ ucwords(str_replace('-', ' ', $next)) }} conversion</h4><div class="card"><div class="card-body">
    <p>Review every required target value from <strong>{{ $document->reference_number }}</strong>. Changes are recorded as field-level overrides on both records.</p>
    <div id="conversion-missing" class="alert alert-danger {{ collect($required)->contains(fn ($field) => blank($mapping[$field] ?? null)) ? '' : 'd-none' }}">Complete the highlighted target fields before creating this draft.</div>
    <form id="conversion-form" method="POST" action="{{ route('operational-documents.next', $document) }}">@csrf<input type="hidden" name="confirmed_preview" value="1"><table class="table"><thead><tr><th>Target field</th><th>Source / mapped value</th><th>Target value</th></tr></thead><tbody>
        @foreach ($mapping as $field => $value)
            @php($isRequired = in_array($field, $required, true))
            @php($kind = $fieldKinds[$field] ?? 'text')
            <tr data-conversion-row="{{ $field }}" class="{{ $isRequired && blank($value) ? 'table-danger' : '' }}"><td>{{ ucwords(str_replace('_', ' ', $field)) }} @if($isRequired)<span class="text-danger">*</span>@endif</td><td>{{ filled($value) ? $value : 'Missing' }}</td><td>
                @if (str_starts_with($kind, 'select:'))
                    <select class="form-select conversion-value" name="overrides[{{ $field }}]" data-required="{{ $isRequired ? '1' : '0' }}"><option value="">Select</option>@foreach(explode(',', substr($kind, 7)) as $option)<option value="{{ $option }}" @selected((string) $value === $option)>{{ ucwords(str_replace('_', ' ', $option)) }}</option>@endforeach</select>
                @else
                    <input class="form-control conversion-value" name="overrides[{{ $field }}]" type="{{ $kind === 'date' ? 'date' : ($kind === 'number' ? 'number' : (in_array($kind, ['account','contact','deal','project','user'], true) ? 'number' : 'text')) }}" @if($kind === 'number') step=".01" min="0" @endif value="{{ $value }}" data-required="{{ $isRequired ? '1' : '0' }}">
                @endif
            </td></tr>
        @endforeach
    </tbody></table><button id="conversion-submit" class="btn btn-primary" type="submit">Create draft {{ ucwords(str_replace('-', ' ', $next)) }}</button></form>
</div></div></div></main>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('conversion-form'), button = document.getElementById('conversion-submit'), alertBox = document.getElementById('conversion-missing');
    const refresh = () => {
        let missing = false;
        form.querySelectorAll('.conversion-value[data-required="1"]').forEach((input) => {
            const row = input.closest('tr'), empty = !String(input.value || '').trim();
            row.classList.toggle('table-danger', empty); missing = missing || empty;
        });
        button.disabled = missing; alertBox.classList.toggle('d-none', !missing);
    };
    form.querySelectorAll('.conversion-value').forEach((input) => input.addEventListener('input', refresh));
    form.querySelectorAll('select.conversion-value').forEach((input) => input.addEventListener('change', refresh));
    refresh();
});
</script>
@endsection
