@extends('layouts.app')

@section('title', 'Upload History')

@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>
        <span class="current">Upload History</span>
    </div>
@endsection

@section('content')
<div class="space-y-6" x-data="{ showErrors: false, errorData: [] }">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Upload History</h1>
            <p class="text-sm text-gray-500 mt-1">View all attendance file uploads and their processing results.</p>
        </div>
        <a href="{{ route('attendance.upload') }}" 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
            New Upload
        </a>
    </div>

    <div class="card">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th>Uploaded By</th>
                        <th>Date</th>
                        <th class="text-center">Records</th>
                        <th class="text-center">Processed</th>
                        <th class="text-center">Failed</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($uploads as $upload)
                        <tr>
                            <td>
                                <div class="flex items-center gap-2">
                                    <svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                                    <span class="text-sm font-medium text-gray-800">{{ $upload->original_filename }}</span>
                                </div>
                            </td>
                            <td class="text-sm text-gray-600">{{ $upload->uploadedBy?->name ?? '—' }}</td>
                            <td class="text-sm text-gray-600">{{ $upload->created_at->format('d M Y, h:i A') }}</td>
                            <td class="text-center text-sm text-gray-700">{{ $upload->records_count }}</td>
                            <td class="text-center text-sm text-success-600 font-medium">{{ $upload->processed_count }}</td>
                            <td class="text-center text-sm {{ $upload->failed_count > 0 ? 'text-danger-500 font-medium' : 'text-gray-400' }}">{{ $upload->failed_count }}</td>
                            <td>
                                <span class="badge {{ $upload->status_badge_class }}">
                                    <span class="badge-dot"></span>
                                    {{ $upload->status_label }}
                                </span>
                            </td>
                            <td>
                                @if($upload->failed_count > 0 && $upload->error_log)
                                    <button @click="errorData = {{ json_encode($upload->error_log) }}; showErrors = true"
                                        class="btn-ghost text-danger-500 hover:text-danger-600">
                                        View Errors
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <div class="empty-state py-12">
                                    <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                                    <div class="empty-state-title">No uploads yet</div>
                                    <p class="empty-state-text">Upload your first attendance file to get started.</p>
                                    <a href="{{ route('attendance.upload') }}" class="btn-primary">Upload File</a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($uploads->hasPages())
            <div class="px-5 py-4 border-t border-gray-100">
                {{ $uploads->links() }}
            </div>
        @endif
    </div>

    {{-- Error Details Modal --}}
    <div x-show="showErrors" x-cloak class="modal-backdrop" @click.self="showErrors = false" @keydown.escape.window="showErrors = false">
        <div class="modal max-w-2xl">
            <div class="modal-header">
                <h3 class="font-display text-lg font-semibold text-gray-800">Upload Errors</h3>
                <button @click="showErrors = false" class="btn-icon w-8 h-8">
                    <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="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <div class="modal-body max-h-96 overflow-y-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Row</th>
                            <th>Error</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(err, idx) in errorData" :key="idx">
                            <tr>
                                <td class="text-sm text-gray-700 font-medium" x-text="'Row ' + err.row"></td>
                                <td class="text-sm text-danger-500" x-text="err.error"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button @click="showErrors = false" class="btn-secondary">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection