@extends('layouts.app')
@section('title', 'QuickBooks List Import')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item">Company</li>
    <li class="breadcrumb-item">Import from QuickBooks</li>
    <li class="breadcrumb-item active">QuickBooks List Import</li>
@endsection

@push('styles')
<style>
    #qbListImportTabs .nav-link {
        font-size: 13px;
        font-weight: 500;
        color: #495057;
        border: 0;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        padding: 12px 18px;
        white-space: nowrap;
    }
    #qbListImportTabs .nav-link:hover {
        color: var(--primary);
        background: var(--accent);
    }
    #qbListImportTabs .nav-link.active {
        color: var(--primary);
        background: #fff;
        border-bottom-color: var(--primary-light);
        font-weight: 700;
    }
    .import-dropzone {
        border-style: dashed !important;
        background: #fafbfc !important;
    }
    .import-file-input:disabled {
        cursor: not-allowed;
        opacity: .65;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">QuickBooks List Import</h1>
        <p class="page-subtitle">Import master lists from QuickBooks Desktop Excel exports into your company records</p>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body py-2 px-3">
        <div style="overflow-x:auto;-webkit-overflow-scrolling:touch">
            <ul class="nav flex-nowrap" id="qbListImportTabs" role="tablist" style="min-width:max-content">
                @foreach($tabs as $key => $tab)
                    <li class="nav-item" role="presentation">
                        <a href="{{ route('admin.quickbooks.list-import', ['tab' => $key]) }}"
                           class="nav-link {{ $activeTab === $key ? 'active' : '' }}"
                           role="tab"
                           aria-selected="{{ $activeTab === $key ? 'true' : 'false' }}">
                            <i class="bi {{ $tab['icon'] }} me-1"></i>{{ $tab['label'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>

<div class="tab-content">
    @foreach($tabs as $key => $tab)
        <div class="tab-pane fade {{ $activeTab === $key ? 'show active' : '' }}"
             id="tab-{{ $key }}"
             role="tabpanel">
            @include('admin.quickbooks.partials._import-panel', [
                'panelId'     => 'qb' . str_replace('-', '', ucwords($key, '-')),
                'tabKey'      => $key,
                'activeTab'   => $activeTab,
                'title'       => $tab['label'],
                'icon'        => $tab['icon'],
                'description' => $tab['description'],
                'columns'     => $tab['columns'],
                'targets'     => $tab['targets'],
                'permission'  => $tab['permission'],
            ])
        </div>
    @endforeach
</div>
@endsection