@extends('admin.layout')

@section('content')

<h2 class="mb-4">CSV Preview - {{ $supplier->name }}</h2>

@include('admin.partials.back')

@if(count($errors))
<div class="alert alert-danger">
<strong>Problemas detectados:</strong>
<ul>
@foreach($errors as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif


<form method="POST" action="{{ route('supplier-sync.import',$supplier->id) }}">
@csrf


@if(isset($mapping))

<div class="card mb-4">
<div class="card-body">

<h5>Detected Column Mapping (Manual Override)</h5>

<table class="table table-bordered table-sm">

<thead>
<tr>
<th>System Field</th>
<th>Column Mapping</th>
</tr>
</thead>

<tbody>

@foreach($mapping as $field => $index)

<tr>

<td>
<strong>{{ $field }}</strong>
</td>

<td>

<select name="mapping[{{ $field }}]" class="form-control">

<option value="">-- not mapped --</option>

@foreach($columns as $i => $col)

<option value="{{ $i }}"
@if($index !== null && $index == $i) selected @endif
>
{{ $col }}
</option>

@endforeach

</select>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>
</div>

@endif


<div class="card mb-4">
<div class="card-body">

<h5>Colunas detectadas</h5>

<ul>
@foreach($columns as $col)
<li>{{ $col }}</li>
@endforeach
</ul>

</div>
</div>


<div class="card">
<div class="card-body">

<h5>Primeiras linhas do CSV</h5>

<table class="table table-bordered table-sm">

<thead>
<tr>
@foreach($columns as $col)
<th>{{ $col }}</th>
@endforeach
</tr>
</thead>

<tbody>

@foreach($rows as $row)

<tr>

@foreach($columns as $col)

<td>
{{ $row[$col] ?? '' }}
</td>

@endforeach

</tr>

@endforeach

</tbody>

</table>

</div>
</div>


<div class="mt-4 d-flex gap-2">

<a href="/admin/supplier-sync"
class="btn btn-secondary">
← Back
</a>

<button class="btn btn-success">
Confirm Import
</button>

</div>

</form>

@endsection