@extends('layouts.app')

@section('title', 'Preview & Map Columns')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.dashboard') }}">Attendance</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.upload') }}">Upload</a>
        <span class="separator">/</span>
        <span class="current">Preview</span>
    </div>
@endsection

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="font-display text-2xl font-semibold text-gray-900">Map Columns & Preview</h1>
        <p class="text-sm text-gray-500 mt-1">
            File: <strong>{{ $originalName }}</strong> — {{ $totalRows }} data rows found
        </p>
    </div>

    <form action="{{ route('attendance.upload.process') }}" method="POST">
        @csrf

        {{-- Column Mapping --}}
        <div class="card mb-6">
            <div class="card-header">
                <h2 class="card-header-title">Column Mapping</h2>
                <p class="text-xs text-gray-500">Map each file column to a system field</p>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-{{ min(count($headers), 5) }} gap-4">
                    @foreach($headers as $index => $header)
                        <div>
                            <label class="form-label text-xs">Column: <strong>{{ $header ?: 'Column ' . ($index + 1) }}</strong></label>
                            <select name="mapping[{{ $index }}]" class="form-select text-sm py-1.5">
                                @foreach($systemFields as $value => $label)
                                    <option value="{{ $value }}" {{ (isset($autoMapping[$index]) && $autoMapping[$index] === $value) ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endforeach
                </div>
                <p class="text-xs text-gray-400 mt-3">
                    <strong>Employee Code</strong> and <strong>Date</strong> are required. Other fields are optional.
                </p>
            </div>
        </div>

        {{-- Data Preview --}}
        <div class="card mb-6">
            <div class="card-header">
                <h2 class="card-header-title">Data Preview</h2>
                <span class="text-xs text-gray-500">Showing first {{ count($previewRows) }} of {{ $totalRows }} rows</span>
            </div>
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th class="text-xxs">#</th>
                            @foreach($headers as $header)
                                <th class="text-xxs">{{ $header ?: '—' }}</th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($previewRows as $rowIndex => $row)
                            <tr>
                                <td class="text-xs text-gray-400">{{ $rowIndex + 1 }}</td>
                                @foreach($row as $cell)
                                    <td class="text-sm text-gray-700">{{ $cell ?? '' }}</td>
                                @endforeach
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center justify-between">
            <a href="{{ route('attendance.upload') }}" class="btn-secondary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                Cancel
            </a>
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                Confirm & Process ({{ $totalRows }} rows)
            </button>
        </div>
    </form>
</div>
@endsection