@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Import Result'))

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-emerald-100 bg-emerald-50/80 p-6 shadow-sm dark:border-emerald-900/40 dark:bg-emerald-950/20">
        <p class="text-xs font-black uppercase tracking-[0.28em] text-emerald-600 dark:text-emerald-300">{{ __('dashboard.Import Report') }}</p>
        <h1 class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ __('dashboard.Import Result Details') }}</h1>
        <p class="mt-3 text-sm text-surface-600 dark:text-surface-300">{{ $importResult->file_name }}</p>
    </section>

    @if(session('status_message'))
        <div class="rounded-xl bg-sky-50 p-4 text-sm font-bold text-sky-600 dark:bg-sky-500/10 dark:text-sky-300">{{ session('status_message') }}</div>
    @endif

    <section class="grid gap-4 md:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Total Records') }}</p><p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $importResult->total_records }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Successful Imports') }}</p><p class="mt-3 text-3xl font-black text-emerald-600 dark:text-emerald-300">{{ $importResult->successful_imports }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.Failed Imports') }}</p><p class="mt-3 text-3xl font-black text-red-600 dark:text-red-300">{{ $importResult->failed_imports }}</p></article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900"><p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.File Name') }}</p><p class="mt-3 truncate text-sm font-black text-surface-900 dark:text-white">{{ $importResult->file_name }}</p></article>
    </section>

    <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ __('dashboard.Failed Records') }}</h2>
        </div>
        @if($importResult->failures->isEmpty())
            <div class="px-6 py-10 text-center text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.No data found') }}</div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4">{{ __('dashboard.Row Number') }}</th>
                            <th class="px-6 py-4">{{ __('dashboard.Errors') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($importResult->failures as $failure)
                            <tr>
                                <td class="px-6 py-4 text-sm font-bold text-surface-900 dark:text-white">{{ $failure->row_number }}</td>
                                <td class="px-6 py-4 text-sm text-surface-600 dark:text-surface-300">{{ implode(', ', json_decode($failure->errors, true)) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</div>
@endsection