@extends('layouts.app', ['title' => 'Produtos'])
@section('css')
<style type="text/css">
    /* ========== MODERN DARK DESIGN ========== */
    .modern-products-container {
        max-width: 1600px;
        margin: 0 auto;
        padding: 20px;
    }

    .card-modern {
        border: none;
        border-radius: 20px !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
        background: rgba(30, 41, 59, 0.6);
        backdrop-filter: blur(10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .card-modern:hover {
        box-shadow: 0 12px 40px rgba(0,0,0,0.3) !important;
        transform: translateY(-2px);
    }
    
    /* ========== TABLE MODERN ========== */
    .table-modern {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
    }
    
    .table-modern thead th {
        border: none;
        background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
        color: #e2e8f0 !important;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        padding: 18px 16px !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table-modern thead th:first-child {
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }

    .table-modern thead th:last-child {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    
    .table-modern tbody tr {
        background: #ffffff !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .table-modern tbody tr:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 10px 30px rgba(71, 85, 105, 0.2) !important;
        z-index: 5;
        position: relative;
    }
    
    .table-modern td {
        padding: 18px 16px !important;
        vertical-align: middle;
        border: none;
        color: #2d3748;
        font-size: 14px;
    }
    
    .table-modern td:first-child {
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }
    
    .table-modern td:last-child {
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    
    /* ========== IMAGES ========== */
    .img-avatar {
        width: 55px;
        height: 55px;
        object-fit: cover;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.15);
        transition: all 0.3s ease;
        border: 3px solid #fff;
    }

    .img-avatar:hover {
        transform: scale(1.15) rotate(2deg);
        box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    
    /* ========== ID BADGE ========== */
    .id-badge {
        transition: all 0.3s ease;
        font-weight: 700 !important;
    }
    
    .id-badge:hover {
        transform: scale(1.1) translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4) !important;
    }
    
    /* Light mode - texto PRETO FORTE */
    html[data-bs-theme='light'] .id-badge,
    [data-theme='light'] .id-badge,
    body:not([data-bs-theme='dark']):not([data-theme='dark']) .id-badge {
        background: linear-gradient(135deg, #ddd6fe 0%, #c7d2fe 100%) !important;
        color: #000000 !important;
        text-shadow: none !important;
        border: 2px solid #6366f1 !important;
        font-weight: 800 !important;
    }
    
    html[data-bs-theme='light'] .id-badge:hover,
    [data-theme='light'] .id-badge:hover,
    body:not([data-bs-theme='dark']):not([data-theme='dark']) .id-badge:hover {
        background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%) !important;
        color: #000000 !important;
        border-color: #4f46e5 !important;
        font-weight: 900 !important;
    }
    
    /* Dark mode - texto branco */
    html[data-bs-theme='dark'] .id-badge,
    [data-theme='dark'] .id-badge {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        font-weight: 700 !important;
    }
    
    html[data-bs-theme='dark'] .id-badge:hover,
    [data-theme='dark'] .id-badge:hover {
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }
    
    /* ========== FILTER CARD ========== */
    .filter-card {
        background: transparent;
        border-radius: 20px;
        padding: 28px;
        margin-bottom: 28px;
        box-shadow: none;
        border: none;
    }

    .filter-card .form-label {
        color: #cbd5e0 !important;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .filter-card .form-control,
    .filter-card .form-select {
        background-color: #1a202c !important;
        border: 2px solid #2d3748 !important;
        color: #e2e8f0 !important;
        border-radius: 12px !important;
        min-height: 48px;
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.3s ease;
    }

    .filter-card .form-control:focus,
    .filter-card .form-select:focus {
        border-color: #64748b !important;
        box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15) !important;
        background: #2d3748 !important;
    }
    
    .filter-card .input-group-text {
        background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
        border: none !important;
        color: white !important;
        font-weight: 600;
        border-radius: 12px 0 0 12px !important;
    }
    
    .filter-card .input-group .form-control {
        border-left: 2px solid #e2e8f0 !important;
        border-radius: 0 12px 12px 0 !important;
    }

    /* ========== SELECT2 ========== */
    .filter-card .select2-container--default .select2-selection--single {
        background-color: #1a202c !important;
        border: 2px solid #2d3748 !important;
        height: 48px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        transition: all 0.3s ease;
    }

    .filter-card .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #e2e8f0 !important;
        font-weight: 500;
        line-height: 48px !important;
        padding-left: 18px !important;
    }

    .filter-card .select2-container--open .select2-selection--single {
        border-color: #64748b !important;
        box-shadow: 0 0 0 4px rgba(100, 116, 139, 0.15) !important;
    }

    .select2-dropdown {
        background: #1a202c !important;
        border: 2px solid #2d3748 !important;
        border-radius: 16px !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
    }

    .select2-results__option {
        padding: 14px 18px !important;
        font-size: 14px !important;
        transition: all 0.2s ease !important;
        font-weight: 500;
        background: #1a202c !important;
        color: #e2e8f0 !important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
        color: white !important;
    }

    /* ========== BUTTONS ========== */
    .btn {
        border-radius: 12px !important;
        font-weight: 600;
        padding: 11px 24px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

    .btn-success {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
        border: none !important;
    }

    .btn-primary {
        background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
        border: none !important;
    }

    .btn-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        border: none !important;
    }

    .btn-danger {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
        border: none !important;
    }
    
    /* ========== BADGES ========== */
    .badge {
        padding: 7px 16px !important;
        border-radius: 10px !important;
        font-weight: 600;
        font-size: 12px;
    }

    .badge-success {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #155724;
    }

    .badge-danger {
        background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
        color: #721c24;
    }
    
    /* Status Badges - Always Readable */
    .badge-status-active {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        border: none !important;
    }
    
    .badge-status-inactive {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        border: none !important;
    }
    
    [data-bs-theme='dark'] .badge-status-active,
    [data-theme='dark'] .badge-status-active {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
        color: #ffffff !important;
    }
    
    [data-bs-theme='dark'] .badge-status-inactive,
    [data-theme='dark'] .badge-status-inactive {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
        color: #ffffff !important;
    }
    
    /* ========== DARK MODE TABLES ========== */
    [data-theme="dark"] .card-modern {
        background: #1e293b !important;
        border-color: #334155;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    }

    [data-theme="dark"] .table-modern tbody tr {
        background: #1e293b !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    [data-theme="dark"] .table-modern tbody tr:hover {
        background: #2d3b52 !important;
        box-shadow: 0 10px 30px rgba(71, 85, 105, 0.3) !important;
    }

    [data-theme="dark"] .table-modern td {
        color: #e2e8f0;
    }

    @media (max-width: 768px) {
        .btns .btn {
            width: 100%;
            margin-bottom: 10px;
        }

        .table-modern {
            font-size: 13px;
        }

        .filter-card {
            padding: 20px;
        }
    }

    .ibpt-modal-dialog {
        max-width: 560px;
    }

    .ibpt-modal-content {
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.10);
        background: radial-gradient(1200px 500px at 20% 0%, rgba(99, 102, 241, 0.18), transparent 50%),
                    radial-gradient(900px 400px at 80% 0%, rgba(34, 211, 238, 0.14), transparent 45%),
                    rgba(15, 23, 42, 0.92);
        backdrop-filter: blur(12px);
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }

    html[data-bs-theme='light'] .ibpt-modal-content {
        border: 1px solid rgba(15, 23, 42, 0.08);
        background: radial-gradient(1200px 500px at 20% 0%, rgba(99, 102, 241, 0.10), transparent 50%),
                    radial-gradient(900px 400px at 80% 0%, rgba(34, 211, 238, 0.08), transparent 45%),
                    rgba(255, 255, 255, 0.98);
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
    }

    .ibpt-modal-header {
        padding: 18px 20px 10px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    html[data-bs-theme='light'] .ibpt-modal-header {
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .ibpt-modal-title {
        font-weight: 800;
        letter-spacing: 0.2px;
        color: #e2e8f0;
    }

    html[data-bs-theme='light'] .ibpt-modal-title {
        color: #0f172a;
    }

    .ibpt-modal-subtitle {
        color: rgba(226, 232, 240, 0.72);
    }

    html[data-bs-theme='light'] .ibpt-modal-subtitle {
        color: rgba(15, 23, 42, 0.65);
    }

    .ibpt-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        background: rgba(99, 102, 241, 0.20);
        border: 1px solid rgba(99, 102, 241, 0.35);
        color: #c7d2fe;
        flex: 0 0 auto;
    }

    html[data-bs-theme='light'] .ibpt-icon {
        background: rgba(99, 102, 241, 0.14);
        border: 1px solid rgba(99, 102, 241, 0.22);
        color: #4f46e5;
    }

    .ibpt-progress {
        height: 10px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.20);
        overflow: hidden;
    }

    html[data-bs-theme='light'] .ibpt-progress {
        background: rgba(15, 23, 42, 0.08);
    }

    .ibpt-progress .progress-bar {
        border-radius: 999px;
        background: linear-gradient(90deg, #6366f1 0%, #22d3ee 55%, #34d399 100%);
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
        transition: width 0.4s ease;
    }

    .ibpt-badge {
        background: rgba(99, 102, 241, 0.22);
        border: 1px solid rgba(99, 102, 241, 0.35);
        color: #e2e8f0;
        font-weight: 800;
        padding: 7px 14px;
        font-size: 0.85rem;
    }

    html[data-bs-theme='light'] .ibpt-badge {
        color: #0f172a;
        background: rgba(99, 102, 241, 0.12);
        border: 1px solid rgba(99, 102, 241, 0.22);
    }

    .ibpt-badge-muted {
        background: rgba(148, 163, 184, 0.16);
        border: 1px solid rgba(148, 163, 184, 0.24);
        color: rgba(226, 232, 240, 0.85);
        font-weight: 700;
        padding: 7px 14px;
        font-size: 0.85rem;
    }

    html[data-bs-theme='light'] .ibpt-badge-muted {
        background: rgba(15, 23, 42, 0.06);
        border: 1px solid rgba(15, 23, 42, 0.10);
        color: rgba(15, 23, 42, 0.75);
    }

    .ibpt-modal-body {
        padding: 16px 20px 20px 20px;
    }

    .ibpt-modal-meta {
        color: rgba(226, 232, 240, 0.78);
        font-size: 0.78rem;
        line-height: 1.5;
    }

    html[data-bs-theme='light'] .ibpt-modal-meta {
        color: rgba(15, 23, 42, 0.70);
    }

    .ibpt-modal-timer {
        color: rgba(148, 163, 184, 0.90);
        font-size: 0.75rem;
    }

    html[data-bs-theme='light'] .ibpt-modal-timer {
        color: rgba(15, 23, 42, 0.60);
    }

    .ibpt-stat-card {
        border-radius: 12px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .ibpt-stat-card.success {
        background: rgba(52, 211, 153, 0.12);
        border: 1px solid rgba(52, 211, 153, 0.25);
    }

    .ibpt-stat-card.danger {
        background: rgba(248, 113, 113, 0.12);
        border: 1px solid rgba(248, 113, 113, 0.25);
    }

    html[data-bs-theme='light'] .ibpt-stat-card.success {
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.20);
    }

    html[data-bs-theme='light'] .ibpt-stat-card.danger {
        background: rgba(239, 68, 68, 0.08);
        border: 1px solid rgba(239, 68, 68, 0.20);
    }

    .ibpt-stat-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-size: 14px;
        flex: 0 0 auto;
    }

    .ibpt-stat-card.success .ibpt-stat-icon {
        background: rgba(52, 211, 153, 0.20);
        color: #34d399;
    }

    .ibpt-stat-card.danger .ibpt-stat-icon {
        background: rgba(248, 113, 113, 0.20);
        color: #f87171;
    }

    .ibpt-stat-value {
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
        color: #e2e8f0;
    }

    html[data-bs-theme='light'] .ibpt-stat-value {
        color: #0f172a;
    }

    .ibpt-stat-label {
        font-size: 0.7rem;
        color: rgba(148, 163, 184, 0.85);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    html[data-bs-theme='light'] .ibpt-stat-label {
        color: rgba(15, 23, 42, 0.55);
    }

    .ibpt-error-panel {
        border-radius: 12px;
        padding: 14px 16px;
        background: rgba(248, 113, 113, 0.10);
        border: 1px solid rgba(248, 113, 113, 0.30);
        display: none;
    }

    html[data-bs-theme='light'] .ibpt-error-panel {
        background: rgba(239, 68, 68, 0.07);
        border: 1px solid rgba(239, 68, 68, 0.22);
    }

    .ibpt-error-panel .ibpt-error-title {
        font-weight: 700;
        color: #fca5a5;
        font-size: 0.85rem;
    }

    html[data-bs-theme='light'] .ibpt-error-panel .ibpt-error-title {
        color: #dc2626;
    }

    .ibpt-error-panel .ibpt-error-msg {
        color: rgba(226, 232, 240, 0.80);
        font-size: 0.78rem;
        margin-top: 3px;
    }

    html[data-bs-theme='light'] .ibpt-error-panel .ibpt-error-msg {
        color: rgba(15, 23, 42, 0.70);
    }

    .ibpt-close-btn {
        background: rgba(99, 102, 241, 0.18);
        border: 1px solid rgba(99, 102, 241, 0.35);
        color: #c7d2fe;
        border-radius: 8px;
        padding: 6px 18px;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
    }

    .ibpt-close-btn:hover {
        background: rgba(99, 102, 241, 0.30);
    }

    html[data-bs-theme='light'] .ibpt-close-btn {
        background: rgba(99, 102, 241, 0.10);
        border: 1px solid rgba(99, 102, 241, 0.25);
        color: #4f46e5;
    }
</style>
@endsection
@section('content')
<div class="mt-4 container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Action Header -->
            <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
                <div>
                    <h4 class="mb-1 fw-bold">Produtos</h4>
                    <p class="text-muted mb-0 small">Gerencie seu catálogo de produtos</p>
                </div>
                <div class="btns d-flex gap-2 flex-wrap">
                    @can('produtos_create')
                    <a href="{{ route('produtos.create') }}" class="btn btn-success shadow-sm px-4">
                        <i class="ri-add-line align-middle me-1"></i> Novo Produto
                    </a>
                    @endcan
                    
                    <div class="dropdown d-inline-block">
                        <button class="btn btn-secondary shadow-sm px-3 dropdown-toggle" type="button" id="moreActions" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="ri-settings-3-line align-middle me-1"></i> Mais Ações
                        </button>
                        <ul class="dropdown-menu border-0 shadow-lg rounded-3" aria-labelledby="moreActions">
                            <li>
                                <a class="dropdown-item py-2" href="{{ route('produtos.import') }}">
                                    <i class="ri-upload-cloud-line me-2 text-info"></i> Importar Produtos
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item py-2" href="{{ route('produtos.export') }}">
                                    <i class="ri-download-cloud-line me-2 text-warning"></i> Exportar Produtos
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item py-2" href="{{ route('produtos.upload-imagens') }}">
                                    <i class="ri-image-line me-2 text-primary"></i> Upload de Imagens
                                </a>
                            </li>
                            @can('produtos_edit')
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                <a class="dropdown-item py-2" href="{{ route('produtos.reajuste') }}">
                                    <i class="ri-price-tag-3-line me-2 text-dark"></i> Reajuste em Grupo
                                </a>
                            </li>
                            @endcan
                            <li>
                                @if($empresa->token_ibpt)
                                    <a class="dropdown-item py-2 js-ibpt-update" href="{{ route('produtos.ibpt') }}" data-empresa-id="{{ $empresa->id }}">
                                        <i class="ri-book-read-line me-2 text-primary"></i> Atualizar IBPT
                                    </a>
                                @else
                                    <a class="dropdown-item py-2" href="{{ route('config.index') }}#tab-emissao">
                                        <i class="ri-book-read-line me-2 text-primary"></i> Configurar IBPT
                                    </a>
                                @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modal-ibpt-progress" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
                <div class="modal-dialog modal-dialog-centered ibpt-modal-dialog">
                    <div class="modal-content ibpt-modal-content">
                        <div class="modal-header ibpt-modal-header">
                            <div class="d-flex align-items-center gap-3 w-100">
                                <div class="ibpt-icon">
                                    <i class="ri-book-read-line"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="modal-title ibpt-modal-title mb-0">Atualizando IBPT</h5>
                                    <div class="small ibpt-modal-subtitle">Consultando impostos por NCM e atualizando produtos</div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-body ibpt-modal-body">
                            {{-- Progress header --}}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="badge rounded-pill ibpt-badge" id="ibpt-progress-text">0%</span>
                                <span class="badge rounded-pill ibpt-badge-muted" id="ibpt-progress-counts">0/0</span>
                            </div>
                            <div class="progress ibpt-progress mb-3">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            {{-- Stats cards --}}
                            <div class="d-flex gap-2 mb-3" id="ibpt-stats-row">
                                <div class="ibpt-stat-card success">
                                    <div class="ibpt-stat-icon"><i class="ri-checkbox-circle-line"></i></div>
                                    <div>
                                        <div class="ibpt-stat-value" id="ibpt-stat-updated">0</div>
                                        <div class="ibpt-stat-label">Atualizados</div>
                                    </div>
                                </div>
                                <div class="ibpt-stat-card danger">
                                    <div class="ibpt-stat-icon"><i class="ri-error-warning-line"></i></div>
                                    <div>
                                        <div class="ibpt-stat-value" id="ibpt-stat-errors">0</div>
                                        <div class="ibpt-stat-label">Erros</div>
                                    </div>
                                </div>
                            </div>

                            {{-- Error panel (shown on fatal error) --}}
                            <div class="ibpt-error-panel mb-3" id="ibpt-error-panel">
                                <div class="d-flex align-items-start gap-2">
                                    <i class="ri-error-warning-fill text-danger mt-1" style="font-size:16px;flex:0 0 auto;"></i>
                                    <div class="flex-grow-1">
                                        <div class="ibpt-error-title">Serviço indisponível</div>
                                        <div class="ibpt-error-msg" id="ibpt-error-msg"></div>
                                    </div>
                                </div>
                                <div class="mt-3 text-end">
                                    <button type="button" class="ibpt-close-btn" id="ibpt-error-close">Fechar</button>
                                </div>
                            </div>

                            <div class="small ibpt-modal-meta" id="ibpt-progress-extra"></div>
                            <div class="small mt-1 ibpt-modal-timer" id="ibpt-progress-timer"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filters -->
            <div class="filter-card">
                <form method="GET" action="{{ request()->url() }}">
                <input type="hidden" id="empresa_id" name="empresa_id" value="{{ request()->empresa_id ?? auth()->user()->empresa->empresa_id }}">
                <div class="row g-3 align-items-end">
                    <div class="col-md-4">
                        <label class="form-label">Pesquisa</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="ri-search-line"></i></span>
                            <input type="text" name="q" class="form-control" placeholder="Nome ou código" value="{{ request('q') }}">
                        </div>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Categoria</label>
                        <select name="categoria_id" class="form-select select2">
                            <option value="">Todos</option>
                            @foreach($categorias as $c)
                            <option value="{{ $c->id }}" {{ request('categoria_id') == $c->id ? 'selected' : '' }}>{{ $c->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Tipo</label>
                        <select name="tipo" class="form-select">
                            <option value="">Todos</option>
                            <option value="composto" {{ request('tipo') == 'composto' ? 'selected' : '' }}>Composto</option>
                            <option value="variavel" {{ request('tipo') == 'variavel' ? 'selected' : '' }}>Variável</option>
                            <option value="combo" {{ request('tipo') == 'combo' ? 'selected' : '' }}>Combo</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Todos</option>
                            <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Ativo</option>
                            <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>Inativo</option>
                        </select>
                    </div>
                    <div class="col-md-2 d-flex gap-2">
                        <button class="btn btn-primary flex-fill shadow-sm" type="submit" style="height: 48px;">
                            <i class="ri-search-line me-1"></i> Buscar
                        </button>
                        <a class="btn btn-secondary d-flex align-items-center justify-content-center" href="{{ route('produtos.index') }}" title="Limpar Filtros" style="height: 48px; width: 48px; flex-shrink: 0;">
                            <i class="ri-eraser-line"></i>
                        </a>
                        <button class="btn d-flex align-items-center justify-content-center {{ request()->hasAny(['start_date','end_date','local_id','com_variacao','com_imagem','gerenciar_estoque','ordem']) ? 'btn-warning' : 'btn-secondary' }}" 
                                style="height: 48px; width: 48px; flex-shrink: 0;" 
                                type="button" data-bs-toggle="collapse" data-bs-target="#advancedFilters" 
                                title="Filtros Avançados">
                            <i class="ri-filter-3-line"></i>
                        </button>
                    </div>
                </div>

                <div class="collapse mt-3" id="advancedFilters">
                    <div class="p-3 rounded-3" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
                        <p class="text-muted small fw-bold mb-2 text-uppercase"><i class="ri-filter-line me-1"></i> Filtros Avançados</p>
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label class="form-label">Dt. Inicial</label>
                                <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Dt. Final</label>
                                <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}">
                            </div>
                            @if(__countLocalAtivo() > 1)
                            <div class="col-md-2">
                                <label class="form-label">Local</label>
                                <select name="local_id" class="form-select select2">
                                    <option value="">Selecione</option>
                                    @foreach(__getLocaisAtivoUsuario() as $l)
                                    <option value="{{ $l->id }}" {{ request('local_id') == $l->id ? 'selected' : '' }}>{{ $l->descricao }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @endif
                            <div class="col-md-2">
                                <label class="form-label">Variação</label>
                                <select name="com_variacao" class="form-select">
                                    <option value="">Todos</option>
                                    <option value="1" {{ request('com_variacao') === '1' ? 'selected' : '' }}>Sim</option>
                                    <option value="0" {{ request('com_variacao') === '0' ? 'selected' : '' }}>Não</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Imagem</label>
                                <select name="com_imagem" class="form-select">
                                    <option value="">Todos</option>
                                    <option value="1" {{ request('com_imagem') === '1' ? 'selected' : '' }}>Sim</option>
                                    <option value="0" {{ request('com_imagem') === '0' ? 'selected' : '' }}>Não</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Estoque</label>
                                <select name="gerenciar_estoque" class="form-select">
                                    <option value="">Todos</option>
                                    <option value="1" {{ request('gerenciar_estoque') === '1' ? 'selected' : '' }}>Sim</option>
                                    <option value="-1" {{ request('gerenciar_estoque') === '-1' ? 'selected' : '' }}>Não</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Ordenar por</label>
                                <select name="ordem" class="form-select">
                                    <option value="nome" {{ request('ordem') == 'nome' ? 'selected' : '' }}>Nome</option>
                                    <option value="numero_sequencial" {{ request('ordem') == 'numero_sequencial' ? 'selected' : '' }}>Código</option>
                                    <option value="created_at" {{ request('ordem') == 'created_at' ? 'selected' : '' }}>Data de cadastro</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                </form>
            </div>

            <div class="card card-modern border-0">
                <div class="card-body p-4">
                    <!-- Table -->
                    <div class="table-responsive">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="text-muted text-uppercase fw-bold small">Total de registros: <strong class="text-dark">{{ $data->total() }}</strong></h6>
                        </div>
                        <table class="table table-modern align-middle">
                            <thead>
                                <tr>
                                    @can('produtos_delete')
                                    <th style="width: 40px">
                                        <div class="form-check form-check-danger">
                                            <input class="form-check-input" type="checkbox" id="select-all-checkbox">
                                        </div>
                                    </th>
                                    @endcan
                                    <th>Ações</th>
                                    <th style="width: 80px">#</th>
                                    <th>Produto</th>
                                    <th>Valores</th>
                                    @if(__countLocalAtivo() > 1)
                                    <th>Disponibilidade</th>
                                    @endif
                                    <th>Detalhes</th>
                                    <th>Estoque</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data as $item)
                                <tr>
                                    @can('produtos_delete')
                                    <td>
                                        <div class="form-check form-check-danger">
                                            <input class="form-check-input check-delete" type="checkbox" name="item_delete[]" value="{{ $item->id }}">
                                        </div>
                                    </td>
                                    @endcan
                                    <td width="120">
                                        <div class="dropdown">
                                            <button class="btn btn-light btn-sm rounded-pill shadow-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                Opções
                                            </button>
                                            <ul class="dropdown-menu border-0 shadow-lg">
                                                @can('produtos_edit')
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('produtos.edit', [$item->id]) }}">
                                                        <i class="ri-edit-line text-warning me-2"></i> Editar
                                                    </a>
                                                </li>
                                                @endcan
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('produtos.duplicar', [$item->id]) }}">
                                                        <i class="ri-file-copy-line text-info me-2"></i> Duplicar
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" target="_blank" href="{{ route('produtos.etiqueta', [$item->id]) }}">
                                                        <i class="ri-barcode-line text-dark me-2"></i> Etiqueta
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item" href="{{ route('produtos.show', [$item->id]) }}">
                                                        <i class="ri-eye-line text-primary me-2"></i> Detalhes
                                                    </a>
                                                </li>
                                                @can('produtos_delete')
                                                <li><hr class="dropdown-divider"></li>
                                                <li>
                                                    <form action="{{ route('produtos.destroy', $item->id) }}" method="post" id="form-{{$item->id}}">
                                                        @method('delete')
                                                        @csrf
                                                        <button type="button" class="dropdown-item text-danger btn-delete-algo">
                                                            <i class="ri-delete-bin-line me-2"></i> Excluir
                                                        </button>
                                                    </form>
                                                </li>
                                                @endcan
                                            </ul>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center justify-content-center">
                                            <span class="badge bg-gradient id-badge" 
                                                  onclick="editarIdProduto({{ $item->id }}, '{{ $item->numero_sequencial ?? 0 }}', '{{ addslashes($item->nome) }}')" 
                                                  style="font-size: 13px; padding: 8px 12px; border-radius: 8px; font-family: monospace; letter-spacing: 1px; cursor: pointer;"
                                                  title="Clique para editar o código">
                                                #{{ $item->numero_sequencial }}
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="{{ $item->img }}" class="img-avatar me-3">
                                            <div>
                                                <div class="fw-bold text-dark">{{ $item->nome }}</div>
                                                <small class="text-muted">{{ $item->codigo_barras }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="text-success fw-bold">Venda: {{ __moeda($item->valor_unitario) }}</span>
                                            <span class="text-muted small">Compra: {{ __moeda($item->valor_compra) }}</span>
                                        </div>
                                    </td>
                                    @if(__countLocalAtivo() > 1)
                                    <td>
                                        <div class="div-overflow">
                                        @foreach($item->locais as $l)
                                        <span class="badge bg-info text-white me-1">{{ $l->descricao }}</span>
                                        @endforeach
                                        </div>
                                    </td>
                                    @endif
                                    <td>
                                        <div class="d-flex flex-column small">
                                            <span class="text-muted">Cat: <strong class="text-dark">{{ $item->categoria ? $item->categoria->nome : '--' }}</strong></span>
                                            <span class="text-muted">NCM: {{ $item->ncm }}</span>
                                            <span class="text-muted">Und: {{ $item->unidade }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        @if($item->gerenciar_estoque)
                                            @can('estoque_view')
                                                @if($item->estoque_atual <= $item->estoque_minimo)
                                                <span class="badge bg-danger rounded-pill">{{ $item->estoque_atual }}</span>
                                                @else
                                                <span class="badge bg-success rounded-pill">{{ $item->estoque_atual }}</span>
                                                @endif
                                            @endcan
                                        @else
                                            <span class="badge bg-secondary rounded-pill">Não gere.</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($item->status)
                                        <span class="badge badge-status-active"><i class="ri-checkbox-circle-line me-1"></i> Ativo</span>
                                        @else
                                        <span class="badge badge-status-inactive"><i class="ri-close-circle-line me-1"></i> Inativo</span>
                                        @endif
                                        
                                        <div class="mt-1 d-flex gap-1 flex-wrap">
                                            @if($item->combo)
                                            <span class="badge bg-warning text-dark" title="Combo">C</span>
                                            @endif
                                            @if($item->variacao_modelo_id)
                                            <span class="badge bg-info text-white" title="Variação">V</span>
                                            @endif
                                            @if($item->cardapio)
                                            <span class="badge bg-primary text-white" title="Cardápio"><i class="ri-restaurant-line"></i></span>
                                            @endif
                                            @if($item->delivery)
                                            <span class="badge bg-danger text-white" title="Delivery"><i class="ri-motorbike-line"></i></span>
                                            @endif
                                            @if($item->ecommerce)
                                            <span class="badge bg-success text-white" title="Ecommerce"><i class="ri-shopping-bag-line"></i></span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="15" class="text-center py-5">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="ri-inbox-line display-4 text-muted mb-3"></i>
                                            <h5 class="text-muted">Nenhum produto encontrado</h5>
                                            <p class="text-muted small">Tente alterar os filtros de pesquisa</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="d-flex justify-content-center mt-4">
                        {!! $data->appends(request()->all())->links() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script>
(function(){
    function getCsrf(){
        var el = document.querySelector('meta[name="csrf-token"]');
        return el ? el.getAttribute('content') : '';
    }

    function showMsg(title, text, icon){
        try{
            if(typeof swal === 'function'){
                swal(title, text, icon || 'info');
                return;
            }
        }catch(_e){}
        try{
            if(window.toastr){
                if(icon === 'error'){ toastr.error(text, title); return; }
                if(icon === 'warning'){ toastr.warning(text, title); return; }
                toastr.success(text, title);
                return;
            }
        }catch(_e){}
        alert((title ? (title + "\n") : "") + (text || ""));
    }

    function setProgress(pct, processed, total, updated, errors, versao, fonte){
        var bar = document.querySelector('#modal-ibpt-progress .progress-bar');
        var txt = document.getElementById('ibpt-progress-text');
        var cnt = document.getElementById('ibpt-progress-counts');
        var extra = document.getElementById('ibpt-progress-extra');
        var statUpdated = document.getElementById('ibpt-stat-updated');
        var statErrors = document.getElementById('ibpt-stat-errors');
        if(bar){
            bar.style.width = pct + '%';
            bar.setAttribute('aria-valuenow', String(pct));
        }
        if(txt) txt.textContent = pct + '%';
        if(cnt) cnt.textContent = (processed || 0) + '/' + (total || 0);
        if(statUpdated) statUpdated.textContent = updated || 0;
        if(statErrors) statErrors.textContent = errors || 0;
        if(extra){
            var parts = [];
            if(versao) parts.push('Versão: ' + versao);
            if(fonte) parts.push('Fonte: ' + fonte);
            extra.textContent = parts.join(' | ');
        }
    }

    function showIbptError(msg, modal){
        var panel = document.getElementById('ibpt-error-panel');
        var msgEl = document.getElementById('ibpt-error-msg');
        var statsRow = document.getElementById('ibpt-stats-row');
        var timerEl = document.getElementById('ibpt-progress-timer');
        if(msgEl) msgEl.textContent = msg || 'Erro desconhecido.';
        if(panel) panel.style.display = 'block';
        if(statsRow) statsRow.style.display = 'none';
        if(timerEl) timerEl.textContent = '';
        var closeBtn = document.getElementById('ibpt-error-close');
        if(closeBtn){
            closeBtn.onclick = function(){
                if(modal && modal.hide) modal.hide();
                if(panel) panel.style.display = 'none';
                if(statsRow) statsRow.style.display = '';
            };
        }
    }

    function postJson(url, data){
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': getCsrf(),
                'Accept': 'application/json'
            },
            body: JSON.stringify(data || {})
        }).then(async function(resp){
            var json = null;
            try{ json = await resp.json(); }catch(_e){}
            if(!resp.ok){
                var msg = (json && json.message) ? json.message : ('Erro HTTP: ' + resp.status);
                throw new Error(msg);
            }
            return json;
        });
    }

    function openModal(){
        var el = document.getElementById('modal-ibpt-progress');
        if(!el) return null;
        try{
            var modal = bootstrap.Modal.getOrCreateInstance(el);
            modal.show();
            return modal;
        }catch(_e){}
        return null;
    }

    function closeModal(modal){
        try{
            if(modal && modal.hide) modal.hide();
        }catch(_e){}
    }

    function runIbptUpdate(empresaId){
        // Reset error panel and stats
        var errorPanel = document.getElementById('ibpt-error-panel');
        var statsRow = document.getElementById('ibpt-stats-row');
        if(errorPanel) errorPanel.style.display = 'none';
        if(statsRow) statsRow.style.display = '';

        var modal = openModal();
        setProgress(0, 0, 0, 0, 0, null, null);
        var startedAt = Date.now();
        var timerEl = document.getElementById('ibpt-progress-timer');
        if(timerEl){
            timerEl.textContent = 'Aguardando...';
        }
        var timer = setInterval(function(){
            if(!timerEl) return;
            var seconds = Math.floor((Date.now() - startedAt) / 1000);
            timerEl.textContent = 'Tempo: ' + seconds + 's';
        }, 1000);

        postJson('{{ route('produtos.ibpt-start') }}', { empresa_id: empresaId })
        .then(function(res){
            if(!res || !res.success) throw new Error((res && res.message) ? res.message : 'Não foi possível iniciar o IBPT.');
            var jobId = res.data.job_id;
            var total = res.data.total_com_ncm || 0;
            setProgress(total ? 1 : 100, 0, total, 0, 0, null, null);

            var step = function(){
                startedAt = Date.now();
                postJson('{{ route('produtos.ibpt-step') }}', { empresa_id: empresaId, job_id: jobId })
                .then(function(r){
                    if(!r || !r.success) throw new Error((r && r.message) ? r.message : 'Erro ao processar IBPT.');
                    if(r.done){
                        setProgress(100, r.data.processed, r.data.total, r.data.updated, r.data.errors, r.data.versao, r.data.fonte);
                        closeModal(modal);
                        clearInterval(timer);
                        showMsg('IBPT', r.data.message || 'Atualização concluída.', 'success');
                        setTimeout(function(){ location.reload(); }, 500);
                        return;
                    }
                    setProgress(r.data.percent || 0, r.data.processed, r.data.total, r.data.updated, r.data.errors, r.data.versao, r.data.fonte);
                    if(r.data && r.data.last_error){
                        var extraEl = document.getElementById('ibpt-progress-extra');
                        if(extraEl){
                            extraEl.textContent = 'Último erro: ' + r.data.last_error;
                        }
                    }
                    setTimeout(step, 120);
                })
                .catch(function(err){
                    clearInterval(timer);
                    showIbptError(err && err.message ? err.message : 'Erro ao processar IBPT.', modal);
                });
            };

            step();
        })
        .catch(function(err){
            clearInterval(timer);
            showIbptError(err && err.message ? err.message : 'Não foi possível iniciar o IBPT.', modal);
        });
    }

    document.addEventListener('DOMContentLoaded', function(){
        document.querySelectorAll('.js-ibpt-update').forEach(function(a){
            a.addEventListener('click', function(e){
                try{
                    e.preventDefault();
                    var empresaId = this.getAttribute('data-empresa-id');
                    if(!empresaId){
                        empresaId = document.getElementById('empresa_id') ? document.getElementById('empresa_id').value : null;
                    }
                    runIbptUpdate(empresaId);
                }catch(_e){}
            });
        });
    });
})();
</script>
@endsection


<script>
// produtoDbId = id do banco (para a rota), codigoAtual = numero_sequencial atual
function editarIdProduto(produtoDbId, codigoAtual, nomeProduto) {
    Swal.fire({
        title: 'Editar Código do Produto',
        html: `<p style="font-size:13px;margin-bottom:10px;opacity:.7">${nomeProduto}</p>
               <input id="swal-input-codigo" type="text" class="swal2-input" value="${codigoAtual}" placeholder="Novo código" style="font-size:18px;font-weight:700;text-align:center;">`,
        confirmButtonText: 'Salvar',
        showCancelButton: true,
        cancelButtonText: 'Cancelar',
        focusConfirm: false,
        didOpen: () => {
            const inp = document.getElementById('swal-input-codigo');
            inp.focus(); inp.select();
        },
        preConfirm: () => {
            const val = document.getElementById('swal-input-codigo').value.trim();
            if (!val) {
                Swal.showValidationMessage('Digite um código válido');
                return false;
            }
            return val;
        }
    }).then(function(result) {
        if (!result.isConfirmed) return;
        const novoCodigo = result.value;
        // Removida a verificação estrita de igualdade numérica para permitir códigos alfanuméricos
        if (String(novoCodigo) === String(codigoAtual)) return;

        $.ajax({
            url: path_url + 'api/produtos/verificar-codigo',
            method: 'GET',
            data: { codigo: novoCodigo, empresa_id: $('#empresa_id').val() },
            success: function(response) {
                if (response.existe && response.produto.id != produtoDbId) {
                    Swal.fire({
                        title: 'Código Duplicado!',
                        html: `Já existe um produto com código <strong>${novoCodigo}</strong>:<br>"${response.produto.nome}"<br><br>Tente outro código.`,
                        icon: 'warning',
                        confirmButtonText: 'Tentar Outro',
                        showCancelButton: true,
                        cancelButtonText: 'Cancelar',
                    }).then(function(r) {
                        if (r.isConfirmed) editarIdProduto(produtoDbId, codigoAtual, nomeProduto);
                    });
                } else {
                    salvarNovoCodigo(produtoDbId, novoCodigo, nomeProduto);
                }
            },
            error: function(xhr) {
                Swal.fire('Erro', xhr.responseJSON?.message || 'Erro ao verificar código', 'error');
            }
        });
    });
}

function salvarNovoCodigo(produtoDbId, novoCodigo, nomeProduto) {
    $.ajax({
        url: path_url + 'produtos/' + produtoDbId + '/atualizar-codigo',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            novo_codigo: novoCodigo,
            empresa_id: $('#empresa_id').val()
        },
        success: function(response) {
            Swal.fire({
                title: "Código Atualizado!",
                text: "O produto \"" + nomeProduto + "\" agora tem o código #" + novoCodigo,
                icon: "success",
                timer: 2000,
                showConfirmButton: false
            }).then(function() {
                location.reload();
            });
        },
        error: function(xhr) {
            var errorMsg = "Erro ao atualizar código";
            if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
            }
            Swal.fire("Erro", errorMsg, "error");
        }
    });
}
</script>