{{-- resources/views/import/preview.blade.php --}}
@extends('layouts.app')

@section('title', 'Предпросмотр импорта')

@section('content')
<div class="page-header">
    <div>
        <a href="{{ route('import.create', ['type' => $type]) }}" class="btn btn-outline btn-sm" style="margin-bottom: 10px;">
            <i class="bi bi-arrow-left"></i> Назад
        </a>
        <h1 class="page-title">Предпросмотр и настройка полей</h1>
    </div>
</div>

<!-- Предпросмотр данных -->
<div class="card" style="margin-bottom: 20px;">
    <div class="card-header"><h3 style="font-size: 14px;">Предпросмотр (первые 10 строк)</h3></div>
    <div class="card-body" style="padding: 0; overflow-x: auto;">
        <table class="table" style="font-size: 11px; margin: 0;">
            <thead>
                <tr>
                    <th style="width: 30px;">#</th>
                    @foreach($headers as $index => $header)
                        <th>{{ $header ?: 'Колонка '.$index }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($rows as $rowIndex => $row)
                    <tr>
                        <td>{{ $rowIndex + 1 }}</td>
                        @foreach($row as $cell)
                            <td>{{ Str::limit($cell, 50) }}</td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Сопоставление полей -->
<div class="card">
    <div class="card-header"><h3 style="font-size: 14px;">Сопоставление полей</h3></div>
    <div class="card-body">
        <form action="{{ route('import.store') }}" method="POST">
            @csrf
            <input type="hidden" name="type" value="{{ $type }}">
            
            <table class="table" style="font-size: 12px;">
                <thead>
                    <tr>
                        <th>Поле в БД</th>
                        <th>Название</th>
                        <th>Колонка из CSV</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($fields as $key => $field)
                        <tr>
                            <td><code>{{ $key }}</code></td>
                            <td>
                                {{ $field['label'] }}
                                @if(isset($field['required']) && $field['required'])
                                    <span style="color: var(--danger);">*</span>
                                @endif
                            </td>
                            <td>
                                <select class="form-control" name="mapping[{{ $key }}]" style="font-size: 12px;">
                                    <option value="">-- Не выбрано --</option>
                                    @foreach($headers as $index => $header)
                                        <option value="{{ $index }}">{{ $header ?: 'Колонка '.$index }}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            
            <div style="display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 15px;">
                <div style="flex: 1;">
                    <label class="form-check">
                        <input type="checkbox" name="skip_first" value="1" style="width: auto; margin-right: 8px;">
                        Пропустить первую строку (заголовок)
                    </label>
                </div>
                <div style="width: 200px;">
                    <label class="form-label">Сохранить как шаблон</label>
                    <input type="text" class="form-control" name="template_name" placeholder="Название шаблона" id="templateName">
                </div>
                <input type="hidden" name="save_template" id="saveTemplate" value="0">
            </div>
            
            <div style="display: flex; justify-content: space-between; margin-top: 20px;">
                <a href="{{ route('import.create', ['type' => $type]) }}" class="btn btn-outline">Отмена</a>
                <div style="display: flex; gap: 10px;">
                    <button type="submit" class="btn btn-outline" onclick="document.getElementById('saveTemplate').value='1'; document.getElementById('templateName').required=true;">
                        <i class="bi bi-save"></i> Сохранить шаблон и импортировать
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-upload"></i> Импортировать
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection