@extends('layouts.app')

@section('title', 'Preview Import')

@section('content')
<div class="mb-8 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Preview Import</h1>
        <p class="mt-2 text-gray-600 dark:text-gray-400">Review the data before confirming the import.</p>
    </div>
    <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1 text-green-500 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
        <span>File: <strong class="text-gray-900 dark:text-white">{{ $filename }}</strong></span>
    </div>
</div>

<div class="card mb-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-medium text-gray-900 dark:text-white">Data Preview</h2>
        <span class="text-sm text-gray-500 dark:text-gray-400">Showing the first {{ count($previewData) }} rows</span>
    </div>

    @if(count($columns) > 0)
    <div class="mb-4 bg-blue-50 dark:bg-blue-900 border-l-4 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-300 p-4 rounded" role="alert">
        <p class="font-medium">Selected Columns:</p>
        <ul class="list-disc ml-5 mt-1">
            @foreach($columns as $column)
                <li>{{ preg_match('/^[A-Z]+$/', $column) ? "Column $column (by letter)" : $column }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- Preview Table -->
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    @foreach($columns as $column)
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider border-r border-gray-200 dark:border-gray-700 last:border-r-0">
                            {{ $column }}
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                @if(count($previewData) > 0)
                    @foreach($previewData as $row)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                            @foreach($columns as $column)
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 border-r border-gray-200 dark:border-gray-700 last:border-r-0">
                                    @if(isset($row[$column]))
                                        {{ $row[$column] === '' ? '(empty)' : $row[$column] }}
                                    @else
                                        <span class="text-red-500 dark:text-red-400">Column not found</span>
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="{{ count($columns) }}" class="px-6 py-4 text-center text-sm text-gray-500 dark:text-gray-400">
                            No data found
                        </td>
                    </tr>
                @endif
            </tbody>
        </table>
    </div>

    <!-- If no rows found message -->
    @if(count($previewData) === 0)
        <div class="py-8 text-center">
            <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No data found</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">No data could be extracted from the file using the selected columns.</p>
            <div class="mt-4 bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-800 rounded-md p-4 max-w-md mx-auto text-left">
                <h4 class="text-sm font-medium text-red-800 dark:text-red-200 mb-1">Possible reasons:</h4>
                <ul class="text-sm text-red-700 dark:text-red-300 space-y-1 ml-5 list-disc">
                    <li>The selected columns don't exist in the file</li>
                    <li>The columns exist but don't contain any data</li>
                    <li>If using column names, ensure they match exactly with the first row of your Excel file</li>
                    <li>If using column letters, ensure they are valid (A, B, C, etc.)</li>
                </ul>
            </div>
        </div>
    @endif
</div>

<div class="flex justify-between">
    <!-- Back button -->
    <a href="{{ route('excel.import.cancel') }}" class="btn btn-secondary">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
        </svg>
        Back
    </a>

    <!-- Confirm form -->
    <form action="{{ route('excel.import.confirm') }}" method="POST">
        @csrf
        <button type="submit" class="btn btn-primary" {{ count($previewData) === 0 ? 'disabled' : '' }}>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            Confirm Import
        </button>
    </form>
</div>

<!-- Data Processing Information -->
<div class="mt-8 bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
    <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">What happens next?</h3>
    <ul class="text-sm text-gray-600 dark:text-gray-300 space-y-1 ml-5 list-disc">
        <li>The data will be processed and imported into the system.</li>
        <li>You'll receive a confirmation once the import is complete.</li>
        <li>Only the selected columns shown in the preview will be imported.</li>
        <li>If any errors occur during import, you'll be notified.</li>
    </ul>
</div>
@endsection