@extends('layouts-v2.app')

@include('section_import_tool.partials-v2.styles')

@section('content')
<div class="flex-1 space-y-4">
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Xem tài liệu</span>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Import Course Sections</span>
    </div>

    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-2">
        <h1 class="text-3xl font-bold text-slate-900">Import Course Sections</h1>
        <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-100 text-slate-600 text-sm border border-slate-200">
            <i data-lucide="database" class="w-4 h-4"></i>
            tenant: {{ $tenantConnection ?: 'n/a' }}
        </span>
    </div>

    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    @if(!$tenantConnection)
        <div class="bg-amber-50 border border-amber-200 text-amber-800 rounded-xl px-4 py-3 text-sm">
            Chưa có <code class="bg-amber-100 px-1 rounded">tenant_connection</code> trong session. Chọn tenant trước khi thao tác.
        </div>
    @endif

    @include('section_import_tool.partials-v2.form')
    @include('section_import_tool.partials-v2.preview')
    @include('section_import_tool.partials-v2.history')
</div>

@include('section_import_tool.partials-v2.modals')

<input type="hidden" id="tenant_connection" value="{{ $tenantConnection }}">
<input type="hidden" id="currentUser" value="{{ $currentUser }}">
<input type="hidden" id="currentUserEmail" value="{{ $currentEmail }}">
<input type="hidden" id="lastJobId" value="">

@endsection

@include('section_import_tool.partials-v2.scripts')