@php
    $panelId = $panelId ?? 'importPanel';
    $tabKey = $tabKey ?? 'coa';
    $canImport = auth()->user()->hasPermission($permission[0], $permission[1]);
@endphp

<div class="card border-0 shadow-sm">
    <div class="card-body p-4">
        <div class="d-flex align-items-start gap-3 mb-4">
            <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
                 style="width:48px;height:48px;background:var(--accent);color:var(--primary)">
                <i class="bi {{ $icon }} fs-4"></i>
            </div>
            <div>
                <h5 class="fw-bold mb-1" style="color:var(--primary-dark)">{{ $title }}</h5>
                <p class="text-muted mb-0" style="font-size:13px">{{ $description }}</p>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-md-6">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <h6 class="fw-semibold mb-2"><i class="bi bi-table me-1 text-primary"></i>QuickBooks Excel Columns</h6>
                    <div class="d-flex flex-wrap gap-1">
                        @foreach($columns as $column)
                            <span class="badge text-bg-white border text-dark fw-medium">{{ $column }}</span>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="border rounded-3 p-3 h-100 bg-light">
                    <h6 class="fw-semibold mb-2"><i class="bi bi-database me-1 text-primary"></i>Mapped To Database</h6>
                    <ul class="mb-0 ps-3" style="font-size:13px">
                        @foreach($targets as $target)
                            <li class="text-muted">{{ $target }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>

        @if($errors->has('import') && $activeTab === $tabKey)
            <div class="alert alert-warning" style="font-size:13px">{{ $errors->first('import') }}</div>
        @endif

        @unless($canImport)
            <div class="alert alert-warning mb-0" style="font-size:13px">
                You do not have permission to import this list.
            </div>
        @else
            <form method="POST"
                  action="{{ route('admin.quickbooks.list-import.process', $tabKey) }}"
                  enctype="multipart/form-data">
                @csrf
                <div class="border rounded-3 p-4 text-center import-dropzone" id="{{ $panelId }}Dropzone">
                    <i class="bi bi-file-earmark-excel text-success display-5 d-block mb-3"></i>
                    <h6 class="fw-semibold mb-2">Upload QuickBooks Excel File</h6>
                    <p class="text-muted mb-3" style="font-size:13px">
                        Use the QuickBooks Desktop export format with <strong>Sheet1</strong> data.
                    </p>
                    <input type="file"
                           name="import_file"
                           class="form-control form-control-sm mx-auto import-file-input"
                           id="{{ $panelId }}File"
                           accept=".xlsx,.xls,.csv"
                           required
                           style="max-width:360px">
                    <div class="form-text mt-2">Accepted: .xlsx, .xls, .csv — maximum 10 MB</div>
                </div>

                <div class="d-flex flex-wrap gap-2 mt-4">
                    <button type="submit" class="btn btn-primary btn-sm">
                        <i class="bi bi-upload me-1"></i>Import {{ $title }}
                    </button>
                    <a href="{{ route('admin.quickbooks.list-import.sample', $tabKey) }}"
                       class="btn btn-outline-success btn-sm">
                        <i class="bi bi-download me-1"></i>Download Sample Format
                    </a>
                </div>
            </form>
        @endunless
    </div>
</div>