{{-- New-Unity ERP | Modules/Products/Resources/Views/classification/index.blade.php | v2.1 | 05/08/2026 --}}
{{-- v2.1 — BUG B FIX: == en vez de === para comparar IDs (PHP puede retornar strings o ints según driver MySQL). --}}
{{-- v2.0 — BUG 1: industria en modal Marca → checkboxes (many-to-many). Modal secundario #newIndustryModal (z-1065). --}}
{{--          BUG 2: botón + Código SAT → modal secundario #satCodeModal (z-1065) en lugar de nueva pestaña. --}}
{{--          BUG 4: filterBrandsByIndustry() usa industry_ids[] en lugar de industry_name string. --}}
{{-- v1.9 — Versión bump confirmación: fix reset() en openGroupModal ya aplicado en v1.8. --}}
{{-- v1.8 — BUG FIX: openGroupModal() llamaba reset() DESPUÉS de set #group_type → type quedaba '' → validación 422 silenciosa. --}}
{{-- v1.7 — Alta de Línea de Producto inline desde modal de Nueva Marca (secondary modal, AJAX POST). --}}
{{-- v1.6 — uppercase-input aplicado en campos de nombre: grupos, marcas, categorías, bundles. Elimina oninput inline de marca. --}}
{{-- v1.5 — FIX: editCategory AJAX URL faltaba prefijo /products → retornaba 404 en silencio. + error callback. --}}
{{-- v1.4 — Grid de marcas vacío al abrir modal nuevo; editar muestra solo marcas asignadas hasta seleccionar industria --}}
{{-- v1.3 — Filtro de industria en modal de grupos: dropdown + renderBrandsGrid() + filterBrandsByIndustry() --}}
{{-- v1.2 — Botones con tooltips y labels. Botón Categories en nuevas pestañas. Fix DELETE POST spoofing. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-sitemap me-2"></i>{{ __('classification.title') }}</h1>
            <p class="text-muted mb-0">{{ __('classification.subtitle') }}</p>
        </div>
        {{-- Products List button removed - route not yet created --}}
    </div>

    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('classification.breadcrumb_products') }}</a></li>
            <li class="breadcrumb-item active">{{ __('classification.breadcrumb') }}</li>
        </ol>
    </nav>

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#products-tab" data-type="Product">
                <i class="fas fa-shopping-cart me-1"></i>{{ __('classification.tab_commercial') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#rawmaterial-tab" data-type="RawMaterial">
                <i class="fas fa-seedling me-1"></i>{{ __('classification.tab_raw_material') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#services-tab" data-type="Service">
                <i class="fas fa-tools me-1"></i>{{ __('classification.tab_services') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#finishedgood-tab" data-type="FinishedGood">
                <i class="fas fa-box-check me-1"></i>{{ __('classification.tab_finished_goods') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#bundlecommercial-tab" data-type="BundleCommercial">
                <i class="fas fa-cubes me-1"></i>{{ __('classification.tab_bundles_commercial') }}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#bundleproduction-tab" data-type="BundleProduction">
                <i class="fas fa-industry me-1"></i>{{ __('classification.tab_bundles_production') }}
            </a>
        </li>
    </ul>

    <div class="tab-content">
        {{-- Products Tab --}}
        <div class="tab-pane fade show active" id="products-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-shopping-cart me-2"></i>{{ __('classification.commercial_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('Product')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <div>
                            <a href="/products/classification/export-groups" class="btn btn-success btn-sm">
                                <i class="fad fa-file-excel me-1"></i>{{ __('classification.export_groups') }}
                            </a>
                            <button class="btn btn-info btn-sm" onclick="openImportModal()">
                                <i class="fad fa-file-upload me-1"></i>{{ __('classification.import_groups') }}
                            </button>
                        </div>
                    </div>
                    <div id="products-table"></div>
                </div>
            </div>
        </div>

        {{-- Services Tab --}}
        <div class="tab-pane fade" id="services-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-briefcase me-2"></i>{{ __('classification.service_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('Service')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <div>
                            <a href="/products/classification/export-groups" class="btn btn-success btn-sm">
                                <i class="fad fa-file-excel me-1"></i>{{ __('classification.export_groups') }}
                            </a>
                            <button class="btn btn-info btn-sm" onclick="openImportModal()">
                                <i class="fad fa-file-upload me-1"></i>{{ __('classification.import_groups') }}
                            </button>
                        </div>
                    </div>
                    <div id="services-table"></div>
                </div>
            </div>
        </div>

        {{-- Bundles Tab --}}
        <div class="tab-pane fade" id="bundles-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-box-open me-2"></i>{{ __('classification.bundle_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openBundleGroupModal()">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_bundle_group') }}
                        </button>
                        <div class="text-muted small">
                            <i class="fad fa-info-circle me-1"></i>{{ __('classification.bundle_prefix_hint') }}
                        </div>
                    </div>
                    <div id="bundles-table"></div>
                </div>
            </div>
        </div>

        {{-- Raw Material Tab --}}
        <div class="tab-pane fade" id="rawmaterial-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-seedling me-2"></i>{{ __('classification.raw_material_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('RawMaterial')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <small class="text-muted align-self-center">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('classification.raw_material_hint') }}
                        </small>
                    </div>
                    <div id="rawmaterial-table"></div>
                </div>
            </div>
        </div>

        {{-- Finished Goods Tab --}}
        <div class="tab-pane fade" id="finishedgood-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-box-check me-2"></i>{{ __('classification.finished_goods_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('FinishedGood')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <small class="text-muted align-self-center">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('classification.finished_goods_hint') }}
                        </small>
                    </div>
                    <div id="finishedgood-table"></div>
                </div>
            </div>
        </div>

        {{-- Bundles Commercial Tab --}}
        <div class="tab-pane fade" id="bundlecommercial-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-cubes me-2"></i>{{ __('classification.commercial_bundle_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('BundleCommercial')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <small class="text-muted align-self-center">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('classification.commercial_bundle_hint') }}
                        </small>
                    </div>
                    <div id="bundlecommercial-table"></div>
                </div>
            </div>
        </div>

        {{-- Bundles Production Tab --}}
        <div class="tab-pane fade" id="bundleproduction-tab">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="fad fa-industry me-2"></i>{{ __('classification.production_bundle_groups') }}</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-primary btn-sm" onclick="openGroupModal('BundleProduction')">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.new_group') }}
                        </button>
                        <small class="text-muted align-self-center">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('classification.production_bundle_hint') }}
                        </small>
                    </div>
                    <div id="bundleproduction-table"></div>
                </div>
            </div>
        </div>

    </div>
</div>

{{-- Modal: Create/Edit Group --}}
<div class="modal fade" id="groupModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="groupModalTitle">{{ __('classification.group_modal_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="groupForm">
                <div class="modal-body">
                    <input type="hidden" id="group_id" name="group_id">
                    <input type="hidden" id="group_type" name="type">

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('classification.group_name') }} *</label>
                                <input type="text" class="form-control form-control-sm uppercase-input" id="es_name" name="es_name" required>
                                <small class="text-muted">{{ __('classification.group_name_hint') }}</small>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <label class="form-label fw-bold mb-0">{{ __('classification.select_brands') }}</label>
                            <button type="button" class="btn btn-success btn-sm" onclick="openCreateBrandModal()" title="{{ __('classification.new_brand_tooltip') }}">
                                <i class="fad fa-plus me-1"></i>{{ __('classification.new_brand') }}
                            </button>
                        </div>
                        {{-- Filtro por industria --}}
                        <div class="mb-2">
                            <select id="industry_filter" class="form-select form-select-sm" onchange="filterBrandsByIndustry()">
                                <option value="">{{ __('classification.filter_by_industry') }}</option>
                            </select>
                        </div>
                        <div class="border rounded p-3" style="max-height: 300px; overflow-y: auto; background-color: #f8f9fa;">
                            <div id="brands_checkbox_grid" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2">
                                <div class="col-12 text-center text-muted py-3">
                                    <i class="fad fa-spinner fa-spin me-2"></i>{{ __('classification.loading_brands') }}
                                </div>
                            </div>
                        </div>
                        <small class="text-muted">
                            <i class="fad fa-info-circle me-1"></i>{{ __('classification.select_all_brands') }}
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
                    <button type="submit" class="btn btn-success btn-sm">{{ __('classification.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Create Brand (from Group modal) --}}
<div class="modal fade" id="createBrandModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">{{ __('classification.create_brand_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="createBrandForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        {{-- Left --}}
                        <div class="col-md-7">
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('brands.brand_name') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm uppercase-input"
                                       id="new_brand_name" name="validbrand_id" required
                                       placeholder="{{ __('brands.brand_name_ph') }}">
                            </div>
                            {{-- Industrias (many-to-many checkboxes) --}}
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-bold mb-0">
                                        {{ __('brands.industry') }}
                                        <i class="bi bi-info-circle ms-1 text-muted"
                                           data-bs-toggle="tooltip"
                                           title="Sectores de mercado a los que aplica esta marca. Puedes seleccionar varios."></i>
                                    </label>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-success"
                                            onclick="openNewIndustryModal()"
                                            title="{{ __('brands.industry_new_tooltip') }}">
                                        <i class="bi bi-plus-circle me-1"></i>Nueva Industria
                                    </button>
                                </div>
                                <div class="border rounded p-2" style="max-height:110px;overflow-y:auto;"
                                     id="cb_brand_industries">
                                    <div class="text-muted text-center small">{{ __('brands.loading') }}</div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('brands.logo') }}</label>
                                <input type="file" class="form-control form-control-sm"
                                       id="new_brand_logo" name="logo" accept="image/*">
                                <div id="new_brand_logo_preview" class="mt-2"></div>
                            </div>
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-bold mb-0">{{ __('brands.product_lines') }}</label>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-success"
                                            onclick="openNewProductLineModal()"
                                            title="{{ __('brands.product_line_new_tooltip') }}">
                                        <i class="fad fa-plus me-1"></i>{{ __('brands.product_line_new_btn') }}
                                    </button>
                                </div>
                                <div class="border rounded p-2" style="max-height:140px;overflow-y:auto;"
                                     id="cb_brand_product_lines">
                                    <div class="text-muted text-center small">{{ __('brands.loading') }}</div>
                                </div>
                            </div>
                        </div>
                        {{-- Right --}}
                        <div class="col-md-5">
                            {{-- Own Brand --}}
                            <div class="card border-warning mb-3">
                                <div class="card-header bg-warning text-dark py-2">
                                    <h6 class="mb-0 small"><i class="fas fa-star me-1"></i>{{ __('brands.own_brand') }}</h6>
                                </div>
                                <div class="card-body py-2">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox"
                                               id="cb_own_brand" name="own_brand" value="1" role="switch">
                                        <label class="form-check-label small fw-semibold" for="cb_own_brand">
                                            {{ __('brands.own_brand_switch') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1" style="font-size:10px;">
                                        {{ __('brands.own_brand_hint') }}
                                    </small>
                                </div>
                            </div>
                            {{-- Material Types --}}
                            <div class="card">
                                <div class="card-header bg-primary text-white py-2">
                                    <h6 class="mb-0 small"><i class="fas fa-tags me-1"></i>{{ __('brands.material_types') }}</h6>
                                </div>
                                <div class="card-body py-2">
                                    <small class="text-muted d-block mb-2" style="font-size:10px;">
                                        {{ __('brands.material_types_where') }}
                                    </small>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="TR" id="cb_mt_TR" checked>
                                        <label class="form-check-label small" for="cb_mt_TR">
                                            <strong>TR</strong> — {{ __('brands.mt_tr') }}
                                        </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="RM" id="cb_mt_RM">
                                        <label class="form-check-label small" for="cb_mt_RM">
                                            <strong>RM</strong> — {{ __('brands.mt_rm') }}
                                        </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="FG" id="cb_mt_FG" disabled>
                                        <label class="form-check-label small text-muted" for="cb_mt_FG">
                                            <strong>FG</strong> — {{ __('brands.mt_fg') }}
                                            <span id="cb_fg_lock" class="ms-1">
                                                <i class="fas fa-lock" style="font-size:9px;"></i>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="SV" id="cb_mt_SV">
                                        <label class="form-check-label small" for="cb_mt_SV">
                                            <strong>SV</strong> — {{ __('brands.mt_sv') }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.cancel') }}</button>
                    <button type="submit" class="btn btn-success btn-sm">{{ __('classification.create_add') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: New Industry (secondary, z-1065) --}}
<div class="modal fade" id="newIndustryModal" tabindex="-1" style="z-index:1065;">
    <div class="modal-dialog modal-sm" style="z-index:1066;">
        <div class="modal-content">
            <div class="modal-header bg-success text-white py-2">
                <h6 class="modal-title mb-0"><i class="bi bi-building me-1"></i>Nueva Industria</h6>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label form-label-sm fw-bold">Nombre <span class="text-danger">*</span></label>
                    <input type="text" id="new_ind_name" class="form-control form-control-sm uppercase-input"
                           placeholder="Ej. CIBERSEGURIDAD, REDES, MANUFACTURA" maxlength="100">
                    <div id="new_ind_name_error" class="invalid-feedback"></div>
                </div>
                <div class="mb-0">
                    <label class="form-label form-label-sm fw-bold">Descripción</label>
                    <textarea id="new_ind_desc" class="form-control form-control-sm" rows="2" maxlength="500"
                              placeholder="Descripción breve (opcional)"></textarea>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success btn-sm" onclick="saveNewIndustry()">
                    <i class="bi bi-check-lg me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: SAT Code quick-create (secondary, z-1065) --}}
<div class="modal fade" id="satCodeModal" tabindex="-1" style="z-index:1065;">
    <div class="modal-dialog modal-sm" style="z-index:1066;">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white py-2">
                <h6 class="modal-title mb-0"><i class="bi bi-upc-scan me-1"></i>Nuevo Código SAT</h6>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label form-label-sm fw-bold">Código <span class="text-danger">*</span></label>
                    <input type="text" id="new_sat_code" class="form-control form-control-sm uppercase-input"
                           placeholder="Ej. 43232905" maxlength="20">
                    <div id="new_sat_code_error" class="invalid-feedback"></div>
                </div>
                <div class="mb-0">
                    <label class="form-label form-label-sm fw-bold">Descripción <span class="text-danger">*</span></label>
                    <textarea id="new_sat_desc" class="form-control form-control-sm uppercase-input" rows="3" maxlength="500"
                              placeholder="Descripción del producto o servicio SAT"></textarea>
                    <div id="new_sat_desc_error" class="invalid-feedback"></div>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary btn-sm" onclick="saveQuickSatCode()">
                    <i class="bi bi-check-lg me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: New Product Line (secondary, inside brand creation flow) --}}
<div class="modal fade" id="newProductLineModal" tabindex="-1" style="z-index:1065;">
    <div class="modal-dialog modal-sm" style="z-index:1066;">
        <div class="modal-content">
            <div class="modal-header bg-success text-white py-2">
                <h6 class="modal-title mb-0"><i class="fad fa-plus me-1"></i>{{ __('brands.product_line_modal_title') }}</h6>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label form-label-sm fw-bold">{{ __('brands.product_line_name') }} <span class="text-danger">*</span></label>
                    <input type="text" id="new_pl_name" class="form-control form-control-sm uppercase-input"
                           placeholder="{{ __('brands.product_line_name_ph') }}" maxlength="255">
                    <div id="new_pl_name_error" class="invalid-feedback"></div>
                </div>
                <div class="mb-2">
                    <label class="form-label form-label-sm fw-bold">{{ __('brands.product_line_desc') }}</label>
                    <textarea id="new_pl_desc" class="form-control form-control-sm" rows="2"
                              placeholder="{{ __('brands.product_line_desc_ph') }}" maxlength="500"></textarea>
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.cancel') }}</button>
                <button type="button" class="btn btn-success btn-sm" onclick="saveNewProductLine()">
                    <i class="fad fa-save me-1"></i>{{ __('brands.product_line_save') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Modal: View Categories --}}
<div class="modal fade" id="categoriesModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="categoriesModalTitle">{{ __('classification.categories') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <button class="btn btn-success btn-sm mb-3" onclick="openCategoryModal()">
                    <i class="fad fa-plus me-1"></i>{{ __('classification.new_category') }}
                </button>
                <div id="categories-table"></div>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Create/Edit Category --}}
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="categoryModalTitle">{{ __('classification.category_modal_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="categoryForm">
                <div class="modal-body">
                    <input type="hidden" id="category_id" name="category_id">
                    <input type="hidden" id="category_group_id" name="group_id">

                    <div class="mb-2">
                        <label class="form-label">{{ __('classification.sat_code') }} *</label>
                        <input type="text" id="sat_code_search" class="form-control form-control-sm mb-1"
                               placeholder="{{ __('classification.sat_search_ph') }}"
                               oninput="filterSatCodes(this.value)">
                        <div class="input-group input-group-sm">
                            <select class="form-select form-select-sm" id="code" name="code" required size="1">
                                <option value="">{{ __('classification.select') }}</option>
                            </select>
                            <button type="button" class="btn btn-outline-primary btn-sm"
                                    onclick="openSatCodeModal()"
                                    title="{{ __('classification.add_sat_tooltip') }}">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                        </div>
                        <small class="text-muted">{{ __('classification.sat_not_exist') }} <i class="bi bi-plus-lg"></i> {{ __('classification.sat_add_catalog') }}</small>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">{{ __('classification.category_name') }} *</label>
                        <input type="text" class="form-control form-control-sm uppercase-input" id="cat_name" name="name" required>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">{{ __('classification.key_name') }} *</label>
                        <input type="text" class="form-control form-control-sm uppercase-input" id="key_name" name="key_name" required>
                    </div>

                    <div class="mb-2">
                        <label class="form-label">{{ __('classification.product_line') }}</label>
                        <select class="form-select form-select-sm" id="product_line_id" name="product_line_id">
                            <option value="">{{ __('classification.select_product_line') }}</option>
                        </select>
                        <small class="text-muted">{{ __('classification.product_line_hint') }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
                    <button type="submit" class="btn btn-success btn-sm">{{ __('classification.save_changes') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Import Groups --}}
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">{{ __('classification.import_modal_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="importForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>{{ __('classification.excel_format') }}</strong>
                        <ul class="mb-0">
                            <li>{!! __('classification.excel_col_a') !!}</li>
                            <li>{!! __('classification.excel_col_b') !!}</li>
                            <li>{!! __('classification.excel_col_c') !!}</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('classification.excel_file') }} *</label>
                        <input type="file" class="form-control" name="file" accept=".xlsx,.xls" required>
                        <small class="text-muted">{{ __('classification.excel_file_hint') }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
                    <button type="submit" class="btn btn-info btn-sm">
                        <i class="fad fa-upload me-1"></i>{{ __('classification.import') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Bundle Group --}}
<div class="modal fade" id="bundleGroupModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="bundleGroupModalTitle">{{ __('classification.bundle_group_modal_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="bundleGroupForm">
                @csrf
                <input type="hidden" id="bundle_group_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('classification.group_name') }} *</label>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text">KIT</span>
                            <input type="text" class="form-control form-control-sm uppercase-input" id="bundle_group_name"
                                   placeholder="{{ __('classification.bundle_group_name_ph') }}" required>
                        </div>
                        <small class="text-muted">{{ __('classification.bundle_group_prefix_hint') }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('classification.code_3_letters') }} *</label>
                        <input type="text" class="form-control form-control-sm uppercase-input" id="bundle_group_code"
                               placeholder="{{ __('classification.code_ph') }}" maxlength="3" required>
                        <small class="text-muted">{{ __('classification.code_sku_hint') }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
                    <button type="submit" class="btn btn-primary btn-sm">{{ __('classification.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Bundle (Kit/Set) --}}
<div class="modal fade" id="bundleModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="bundleModalTitle">{{ __('classification.bundle_modal_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="bundleForm">
                @csrf
                <input type="hidden" id="bundle_id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">{{ __('classification.group') }} *</label>
                            <select class="form-select form-select-sm" id="bundle_group_id" required>
                                <option value="">{{ __('classification.select_group') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">{{ __('classification.type') }} *</label>
                            <select class="form-select form-select-sm" id="bundle_type" required>
                                <option value="KIT">KIT</option>
                                <option value="SET">SET</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('classification.bundle_name') }} *</label>
                        <input type="text" class="form-control form-control-sm uppercase-input" id="bundle_name"
                               placeholder="{{ __('classification.bundle_name_ph') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">{{ __('classification.sku') }}</label>
                        <input type="text" class="form-control form-control-sm" id="bundle_sku" readonly
                               placeholder="{{ __('classification.sku_ph') }}">
                    </div>

                    <hr>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label class="form-label fw-bold mb-0">{{ __('classification.products_in_bundle') }} *</label>
                        <button type="button" class="btn btn-sm btn-info" onclick="openAddProductsModal()">
                            <i class="fad fa-plus me-1"></i>{{ __('classification.add_products') }}
                        </button>
                    </div>
                    <div class="table-responsive" style="max-height: 250px; overflow-y: auto;">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>{{ __('classification.col_product') }}</th>
                                    <th width="100">{{ __('classification.col_qty') }}</th>
                                    <th width="120">{{ __('classification.col_price') }}</th>
                                    <th width="120">{{ __('classification.col_subtotal') }}</th>
                                    <th width="80">{{ __('classification.col_actions') }}</th>
                                </tr>
                            </thead>
                            <tbody id="bundle_items_table">
                                <tr>
                                    <td colspan="5" class="text-center text-muted">{{ __('classification.no_products_added') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label fw-bold">{{ __('classification.calculated_price') }}</label>
                            <input type="text" class="form-control form-control-sm" id="bundle_calculated_price" readonly>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">{{ __('classification.final_price') }} *</label>
                            <input type="number" step="0.01" class="form-control form-control-sm"
                                   id="bundle_total_price" placeholder="0.00" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
                    <button type="submit" class="btn btn-success btn-sm">{{ __('classification.save_bundle') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Modal: Add Products to Bundle --}}
<div class="modal fade" id="addProductsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">{{ __('classification.add_products_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control form-control-sm mb-3" id="product_search"
                       placeholder="{{ __('classification.search_products') }}">
                <div style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-sm table-hover">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>{{ __('classification.col_product') }}</th>
                                <th>{{ __('classification.col_sku') }}</th>
                                <th width="100">{{ __('classification.col_price') }}</th>
                                <th width="80">{{ __('classification.col_action') }}</th>
                            </tr>
                        </thead>
                        <tbody id="available_products_table">
                            <tr>
                                <td colspan="4" class="text-center">
                                    <i class="fad fa-spinner fa-spin"></i> {{ __('classification.loading') }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('classification.close') }}</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@if(!isset($__env->getSections()['jquery_loaded']))
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@endif
<script>
let currentGroupId = null;
let currentGroupType = 'Product';
let currentType = 'Product';
let selectedBrands = [];
let allBrands = [];
let allIndustries = [];
let satCodes = [];

$(document).ready(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    loadBrands();
    loadSatCodes();
    loadProductLines();
    loadGroups('Product');
    loadIndustries();

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        currentType = $(e.target).data('type');
        const newTypes = ['RawMaterial','FinishedGood','BundleCommercial','BundleProduction'];
        if (newTypes.includes(currentType)) {
            loadGroupsInTab(currentType, currentType.toLowerCase() + '-table');
        } else {
            loadGroups(currentType);
        }
    });

    $('#new_brand_logo').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#new_brand_logo_preview').html(`<img src="${e.target.result}" style="max-width: 150px; max-height: 100px;">`);
            }
            reader.readAsDataURL(file);
        }
    });
});

// Cargar industrias disponibles (catálogo brand_industries)
function loadIndustries() {
    $.get('/products/catalogs/industries/all', function(data) {
        allIndustries = data; // [{id, name, description}]
        let options = '<option value="">{{ __('classification.filter_by_industry') }}</option>';
        allIndustries.forEach(function(ind) {
            options += `<option value="${ind.id}">${ind.name}</option>`;
        });
        $('#industry_filter').html(options);
    });
}

// Load brands
function loadBrands() {
    $.get('/products/classification/validbrands', function(data) {
        allBrands = data;
        allBrands.sort((a, b) => a.validbrand_id.localeCompare(b.validbrand_id));
        renderBrandsGrid(null);
    });
}

// Render grid de marcas con estado de checked preservado
// brands=null → estado inicial (selecciona industria), brands=[] → sin resultados, brands=[...] → mostrar
function renderBrandsGrid(brands) {
    let html = '';
    if (brands === null) {
        html = `<div class="col-12 text-center text-muted py-3">
                    <i class="fad fa-filter me-2"></i>{{ __('classification.filter_by_industry') }}
                </div>`;
    } else if (brands.length === 0) {
        html = `<div class="col-12 text-center text-muted py-3">
                    <i class="fad fa-search me-2"></i>{{ __('classification.no_brands_found') }}
                </div>`;
    } else {
        brands.forEach(brand => {
            const isChecked = selectedBrands.includes(brand.id) ? 'checked' : '';
            const industryNames = (brand.industry_ids || []).map(id => {
                const ind = allIndustries.find(i => i.id == id);
                return ind ? ind.name : '';
            }).filter(Boolean).join(', ');
            const industryBadge = industryNames
                ? `<span class="badge bg-light text-secondary ms-1" style="font-size:0.65rem;">${industryNames}</span>`
                : '';
            html += `
                <div class="col">
                    <div class="form-check">
                        <input class="form-check-input brand-checkbox"
                               type="checkbox"
                               value="${brand.id}"
                               id="brand_${brand.id}"
                               ${isChecked}
                               onchange="toggleBrandSelection(${brand.id})">
                        <label class="form-check-label small" for="brand_${brand.id}">
                            ${brand.validbrand_id}${industryBadge}
                        </label>
                    </div>
                </div>
            `;
        });
    }
    $('#brands_checkbox_grid').html(html);
}

// Filtrar marcas por industria seleccionada (Bug 4 fix: usa industry_ids[], no string)
// Sin industria → grid vacío (null); con industria → filtrar por ID en pivot array
function filterBrandsByIndustry() {
    const selectedId = $('#industry_filter').val();
    if (!selectedId) {
        renderBrandsGrid(null);
    } else {
        const id = parseInt(selectedId);
        const filtered = allBrands.filter(b => Array.isArray(b.industry_ids) && b.industry_ids.some(i => i == id));
        renderBrandsGrid(filtered);
    }
}

// Load SAT codes
function loadSatCodes(selectedCode = null) {
    $.get('/products/classification/satcodes', function(data) {
        satCodes = data;
        renderSatOptions(data, selectedCode);
    });
}

function renderSatOptions(data, selectedCode = null) {
    let options = '<option value="">{{ __('classification.select') }}</option>';
    data.forEach(c => {
        let selected = (selectedCode && c.code == selectedCode) ? 'selected' : '';
        options += `<option value="${c.code}" ${selected}>${c.code} - ${c.name}</option>`;
    });
    $('#code').html(options);
}

function filterSatCodes(term) {
    if (!satCodes || !satCodes.length) return;
    term = term.toLowerCase();
    const filtered = term
        ? satCodes.filter(c => c.code.toLowerCase().includes(term) || c.name.toLowerCase().includes(term))
        : satCodes;
    renderSatOptions(filtered, $('#code').val());
}

// Load Product Lines
function loadProductLines() {
    $.get('/products/product-lines/get', function(data) {
        let options = '<option value="">{{ __('classification.select_product_line') }}</option>';
        data.forEach(pl => {
            if (pl.active) {
                options += `<option value="${pl.id}">${pl.name}</option>`;
            }
        });
        $('#product_line_id').html(options);
    });
}

// Load groups
function loadGroupsInTab(type, tableId) {
    $.get(`/products/classification/groups/type/${type}`, function(data) {
        let html = '<table class="table table-sm table-hover"><thead><tr><th>{{ __('classification.col_id') }}</th><th>{{ __('classification.col_group_name') }}</th><th>{{ __('classification.col_type') }}</th><th>{{ __('classification.col_categories') }}</th><th>{{ __('classification.col_actions') }}</th></tr></thead><tbody>';
        if (data.length === 0) {
            html += '<tr><td colspan="5" class="text-center text-muted py-3">{{ __('classification.no_groups') }}</td></tr>';
        } else {
            data.forEach(g => {
                html += `<tr>
                    <td>${g.id}</td>
                    <td><strong>${g.es_name}</strong></td>
                    <td><span class="badge bg-secondary">${g.type}</span></td>
                    <td>${g.categories_count || 0}</td>
                    <td>
                        <button class="btn btn-primary btn-sm" onclick="viewCategories(${g.id}, '${g.es_name}', '${g.type}')" title="{{ __('classification.view_add_categories') }}"><i class="fad fa-folder-open me-1"></i>{{ __('classification.categories') }}</button>
                        <button class="btn btn-warning btn-sm" onclick="editGroup(${g.id})" title="{{ __('classification.edit_group') }}"><i class="fad fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm" onclick="deleteGroup(${g.id})" title="{{ __('classification.delete_group') }}"><i class="fad fa-trash"></i></button>
                    </td>
                </tr>`;
            });
        }
        html += '</tbody></table>';
        $('#' + tableId).html(html);
    });
}

function loadGroups(type) {
    $.get(`/products/classification/groups/type/${type}`, function(data) {
        let html = '<table class="table table-sm table-hover"><thead><tr><th>{{ __('classification.col_id') }}</th><th>{{ __('classification.col_group_name') }}</th><th>{{ __('classification.col_type') }}</th><th>{{ __('classification.col_categories') }}</th><th>{{ __('classification.col_actions') }}</th></tr></thead><tbody>';
        data.forEach(g => {
            html += `<tr>
                <td>${g.id}</td>
                <td>${g.es_name}</td>
                <td><span class="badge bg-${g.type=='Product'?'success':'info'}">${g.type}</span></td>
                <td>${g.categories_count || 0}</td>
                <td class="table-actions">
                    <button class="btn btn-sm btn-primary" onclick="viewCategories(${g.id}, '${g.es_name}', '${g.type}')" title="{{ __('classification.view_add_categories') }}"><i class="fad fa-folder-open me-1"></i>{{ __('classification.categories') }}</button>
                    <button class="btn btn-sm btn-warning" onclick="editGroup(${g.id})" title="{{ __('classification.edit_group') }}"><i class="fad fa-edit"></i></button>
                    <button class="btn btn-sm btn-danger" onclick="deleteGroup(${g.id})" title="{{ __('classification.delete_group') }}"><i class="fad fa-trash"></i></button>
                </td>
            </tr>`;
        });
        html += '</tbody></table>';
        $(`#${type.toLowerCase()}s-table`).html(html);
    });
}

// Open group modal — grid vacío hasta que el usuario seleccione industria
function openGroupModal(type) {
    currentType = type;
    selectedBrands = [];
    $('#groupForm')[0].reset();           // reset() FIRST — so it doesn't wipe values set below
    $('#group_id').val('');
    $('#group_type').val(type);           // set AFTER reset()
    $('#groupModalTitle').text('{{ __('classification.new_group_js', ['type' => '__TYPE__']) }}'.replace('__TYPE__', type));
    $('#industry_filter').val('');
    renderBrandsGrid(null);
    $('#groupModal').modal('show');
}

// Open create brand modal — modal completo igual a Catálogos/Marcas
let cbSelectedProductLines = [];
let cbAllProductLines = [];
let cbSelectedIndustries = []; // industry_ids seleccionados

function openCreateBrandModal() {
    $('#createBrandForm')[0].reset();
    $('#new_brand_logo_preview').html('');
    cbSelectedProductLines = [];
    cbSelectedIndustries = [];
    // Reset material types
    $('#cb_mt_TR').prop('checked', true).prop('disabled', false);
    $('#cb_mt_RM').prop('checked', false).prop('disabled', false);
    $('#cb_mt_FG').prop('checked', false).prop('disabled', true);
    $('#cb_mt_SV').prop('checked', false).prop('disabled', false);
    $('#cb_own_brand').prop('checked', false);
    $('#cb_fg_lock').html('<i class="fas fa-lock" style="font-size:9px;"></i>');
    // Render checkboxes de industrias
    renderCbIndustries([]);
    // Cargar product lines
    if (cbAllProductLines.length === 0) {
        $.get('/products/product-lines/get', function(data) {
            cbAllProductLines = data.filter(l => l.active);
            renderCbProductLines();
        });
    } else {
        renderCbProductLines();
    }
    $('#createBrandModal').modal('show');
}

function renderCbIndustries(selectedIds) {
    cbSelectedIndustries = selectedIds || [];
    let html = '';
    if (!allIndustries || allIndustries.length === 0) {
        html = '<div class="text-muted text-center small">Sin industrias. <a href="/products/catalogs/industries" target="_blank">Crea una</a>.</div>';
    } else {
        allIndustries.forEach(function(ind) {
            const isChecked = cbSelectedIndustries.some(i => i == ind.id) ? 'checked' : '';
            html += `<div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" value="${ind.id}"
                       id="cb_ind_${ind.id}" ${isChecked}
                       onchange="toggleCbIndustry(${ind.id})">
                <label class="form-check-label small" for="cb_ind_${ind.id}">${ind.name}</label>
            </div>`;
        });
    }
    $('#cb_brand_industries').html(html);
}

function toggleCbIndustry(industryId) {
    if (cbSelectedIndustries.some(i => i == industryId)) {
        cbSelectedIndustries = cbSelectedIndustries.filter(id => id != industryId);
    } else {
        cbSelectedIndustries.push(industryId);
    }
}

function openNewIndustryModal() {
    $('#new_ind_name').val('').removeClass('is-invalid');
    $('#new_ind_desc').val('');
    $('#new_ind_name_error').text('');
    bootstrap.Modal.getOrCreateInstance(document.getElementById('newIndustryModal')).show();
}

function saveNewIndustry() {
    const name = $('#new_ind_name').val().trim();
    const desc = $('#new_ind_desc').val().trim();
    $('#new_ind_name').removeClass('is-invalid');
    $('#new_ind_name_error').text('');

    $.ajax({
        url: '/products/catalogs/industries',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', name: name, description: desc },
        success: function(res) {
            if (res.success && res.industry) {
                allIndustries.push(res.industry);
                allIndustries.sort((a, b) => a.name.localeCompare(b.name));
                cbSelectedIndustries.push(res.industry.id);
                renderCbIndustries(cbSelectedIndustries);
                // Actualizar dropdown del filtro de grupos
                let options = '<option value="">{{ __('classification.filter_by_industry') }}</option>';
                allIndustries.forEach(ind => {
                    options += `<option value="${ind.id}">${ind.name}</option>`;
                });
                $('#industry_filter').html(options);
                bootstrap.Modal.getOrCreateInstance(document.getElementById('newIndustryModal')).hide();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const err = xhr.responseJSON?.errors?.name;
                if (err) {
                    $('#new_ind_name').addClass('is-invalid');
                    $('#new_ind_name_error').text(err[0]);
                }
            } else {
                alert('Error al guardar la industria.');
            }
        }
    });
}

function renderCbProductLines() {
    let html = '';
    if (cbAllProductLines.length === 0) {
        html = '<div class="text-muted text-center small">{{ __('brands.no_lines') }}</div>';
    } else {
        cbAllProductLines.forEach(line => {
            const isChecked = cbSelectedProductLines.includes(line.id) ? 'checked' : '';
            html += `<div class="form-check mb-1">
                <input class="form-check-input" type="checkbox" value="${line.id}"
                       id="cb_line_${line.id}" ${isChecked}
                       onchange="toggleCbProductLine(${line.id})">
                <label class="form-check-label small" for="cb_line_${line.id}">
                    ${line.name}${line.description ? ` <span class="text-muted">- ${line.description}</span>` : ''}
                </label>
            </div>`;
        });
    }
    $('#cb_brand_product_lines').html(html);
}

function toggleCbProductLine(lineId) {
    if (cbSelectedProductLines.includes(lineId)) {
        cbSelectedProductLines = cbSelectedProductLines.filter(id => id !== lineId);
    } else {
        cbSelectedProductLines.push(lineId);
    }
}

function openNewProductLineModal() {
    $('#new_pl_name').val('').removeClass('is-invalid');
    $('#new_pl_desc').val('');
    $('#new_pl_name_error').text('');
    $('#newProductLineModal').modal('show');
}

function saveNewProductLine() {
    const name = $('#new_pl_name').val().trim();
    if (!name) {
        $('#new_pl_name').addClass('is-invalid');
        $('#new_pl_name_error').text('{{ __('brands.product_line_name_required') }}');
        return;
    }
    $('#new_pl_name').removeClass('is-invalid');

    $.ajax({
        url: '/products/product-lines',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            name: name,
            description: $('#new_pl_desc').val().trim(),
            active: 1,
        },
        success: function(res) {
            if (res.success && res.line) {
                cbAllProductLines.push(res.line);
                cbSelectedProductLines.push(res.line.id);
                renderCbProductLines();
                $('#newProductLineModal').modal('hide');
                toastr.success(res.message || '{{ __('brands.product_line_created') }}');
            } else {
                toastr.error('{{ __('brands.product_line_error') }}');
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON?.errors?.name;
                const msg = errors ? errors[0] : '{{ __('brands.product_line_error') }}';
                $('#new_pl_name').addClass('is-invalid');
                $('#new_pl_name_error').text(msg);
            } else {
                toastr.error('{{ __('brands.product_line_error') }}');
            }
        },
    });
}

// Own brand toggle en createBrandModal
$('#cb_own_brand').on('change', function() {
    if ($(this).is(':checked')) {
        $('#cb_mt_FG').prop('disabled', false).prop('checked', true);
        $('#cb_mt_TR').prop('checked', false).prop('disabled', true);
        $('#cb_mt_RM').prop('checked', false).prop('disabled', true);
        $('#cb_mt_SV').prop('checked', false).prop('disabled', true);
        $('#cb_fg_lock').html('<i class="fas fa-unlock text-success" style="font-size:9px;"></i>');
    } else {
        $('#cb_mt_FG').prop('disabled', true).prop('checked', false);
        $('#cb_mt_TR').prop('disabled', false).prop('checked', true);
        $('#cb_mt_RM').prop('disabled', false);
        $('#cb_mt_SV').prop('disabled', false);
        $('#cb_fg_lock').html('<i class="fas fa-lock" style="font-size:9px;"></i>');
    }
});

// openSatCodeModal / saveQuickSatCode — Bug 2: modal secundario en lugar de nueva pestaña
function openSatCodeModal() {
    $('#new_sat_code').val('').removeClass('is-invalid');
    $('#new_sat_desc').val('').removeClass('is-invalid');
    $('#new_sat_code_error').text('');
    $('#new_sat_desc_error').text('');
    bootstrap.Modal.getOrCreateInstance(document.getElementById('satCodeModal')).show();
}

function saveQuickSatCode() {
    const code = $('#new_sat_code').val().trim();
    const desc = $('#new_sat_desc').val().trim();
    $('#new_sat_code').removeClass('is-invalid');
    $('#new_sat_desc').removeClass('is-invalid');
    $('#new_sat_code_error').text('');
    $('#new_sat_desc_error').text('');

    $.ajax({
        url: '/products/classification/sat-codes',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', code: code, description: desc },
        success: function(res) {
            if (res.success) {
                // Añadir nuevo código al array local y al select
                satCodes.push({ code: res.code, name: res.description });
                satCodes.sort((a, b) => a.code.localeCompare(b.code));
                renderSatOptions(satCodes, res.code);
                bootstrap.Modal.getOrCreateInstance(document.getElementById('satCodeModal')).hide();
            }
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                const errors = xhr.responseJSON?.errors || {};
                if (errors.code) {
                    $('#new_sat_code').addClass('is-invalid');
                    $('#new_sat_code_error').text(errors.code[0]);
                }
                if (errors.description) {
                    $('#new_sat_desc').addClass('is-invalid');
                    $('#new_sat_desc_error').text(errors.description[0]);
                }
            } else {
                alert('Error al guardar el código SAT.');
            }
        }
    });
}

// Submit create brand form — mismo endpoint que Catálogos/Marcas
$('#createBrandForm').submit(function(e) {
    e.preventDefault();

    const checked = $('input[name="material_types[]"]:checked', this).length;
    if (checked === 0) {
        showNotification('{{ __('brands.select_material_type') }}', 'warning');
        return false;
    }

    const formData = new FormData(this);

    // own_brand como 0 si no está checked
    if (!$('#cb_own_brand').is(':checked')) {
        formData.set('own_brand', '0');
    }

    // product lines seleccionadas
    cbSelectedProductLines.forEach(function(lineId) {
        formData.append('product_lines[]', lineId);
    });

    // industrias seleccionadas (many-to-many)
    cbSelectedIndustries.forEach(function(indId) {
        formData.append('industry_ids[]', indId);
    });

    $.ajax({
        url: '/products/brands',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            const brand = response.brand;
            brand.industry_ids = brand.industry_ids || cbSelectedIndustries.slice();
            allBrands.push(brand);
            allBrands.sort((a, b) => a.validbrand_id.localeCompare(b.validbrand_id));
            selectedBrands.push(brand.id);
            filterBrandsByIndustry();
            $('#createBrandModal').modal('hide');
            showNotification('{{ __('classification.brand_created') }}', 'success');
        },
        error: function(xhr) {
            const errors = xhr.responseJSON.errors;
            let errorMsg = '{{ __('classification.error') }}\n';
            for (let field in errors) {
                errorMsg += errors[field][0] + '\n';
            }
            showNotification(errorMsg, 'error', '{{ __('classification.validation_error') }}');
        }
    });
});

// Toggle brand selection via checkbox
function toggleBrandSelection(brandId) {
    const checkbox = $(`#brand_${brandId}`);
    if (checkbox.is(':checked')) {
        if (!selectedBrands.includes(brandId)) {
            selectedBrands.push(brandId);
        }
    } else {
        selectedBrands = selectedBrands.filter(id => id !== brandId);
    }
}

// Submit group form
$('#groupForm').submit(function(e) {
    e.preventDefault();
    const id = $('#group_id').val();
    const url = id ? `/products/groups/${id}` : '/products/groups';
    const method = id ? 'PUT' : 'POST';

    const groupName = $('#es_name').val();

    $.ajax({
        url: url,
        method: method,
        data: {
            _token: '{{ csrf_token() }}',
            type: $('#group_type').val(),
            es_name: groupName,
            en_name: null,
            validbrands: selectedBrands
        },
        success: function() {
            $('#groupModal').modal('hide');
            const newTypes = ['RawMaterial', 'FinishedGood', 'BundleCommercial', 'BundleProduction'];
            if (newTypes.includes(currentType)) {
                loadGroupsInTab(currentType, currentType.toLowerCase() + '-table');
            } else {
                loadGroups(currentType);
            }
            showNotification('{{ __('classification.group_saved') }}', 'success');
        },
        error: function(xhr) {
            const errors = xhr.responseJSON?.errors || {};
            let msg = '';
            for (let f in errors) msg += errors[f][0] + '<br>';
            showNotification(msg || '{{ __('classification.error_saving_group') }}', 'error', '{{ __('classification.validation_error') }}');
        }
    });
});

// Edit group — muestra solo marcas ya asignadas al abrir; filtro activo muestra las de esa industria
function editGroup(id) {
    $.get(`/products/groups/${id}/edit`, function(data) {
        $('#group_id').val(data.id);
        $('#group_type').val(data.type);
        $('#es_name').val(data.es_name);
        selectedBrands = data.validbrands.map(b => b.id);
        $('#industry_filter').val('');

        // Mostrar solo las marcas ya asignadas al grupo
        const assignedBrands = allBrands.filter(b => selectedBrands.includes(b.id));
        renderBrandsGrid(assignedBrands.length > 0 ? assignedBrands : null);

        $('#groupModalTitle').text('{{ __('classification.edit_group_id', ['id' => '__ID__']) }}'.replace('__ID__', data.id));
        $('#groupModal').modal('show');
    });
}

// Delete group
function deleteGroup(id) {
    $('#deleteGroupId').val(id);
    $('#modalDeleteGroup').modal('show');
}

function confirmDeleteGroup() {
    const id = $('#deleteGroupId').val();
    $('#modalDeleteGroup').modal('hide');
    $.ajax({
        url: `/products/groups/${id}`,
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
        success: function() {
            const newTypes = ['RawMaterial','FinishedGood','BundleCommercial','BundleProduction'];
            if (newTypes.includes(currentType)) {
                loadGroupsInTab(currentType, currentType.toLowerCase() + '-table');
            } else {
                loadGroups(currentType);
            }
            showNotification('{{ __('classification.group_deleted') }}', 'success');
        },
        error: function(xhr) {
            const msg = xhr.responseJSON?.message || '{{ __('classification.cannot_delete_group') }}';
            showNotification(msg, 'error');
        }
    });
}

// View categories
function viewCategories(groupId, groupName, groupType) {
    currentGroupId = groupId;
    currentGroupType = groupType || 'Product';
    $('#categoriesModalTitle').text(`${groupId} - ${groupName}`);
    loadCategories(groupId);
    $('#categoriesModal').modal('show');
}

// Load categories
function loadCategories(groupId) {
    $.get(`/products/classification/categories/group/${groupId}`, function(data) {
        let html = '<table class="table table-sm"><thead><tr><th>{{ __('classification.col_id') }}</th><th>{{ __('classification.col_name') }}</th><th>{{ __('classification.col_code') }}</th><th>{{ __('classification.col_key_name') }}</th><th>{{ __('classification.col_actions') }}</th></tr></thead><tbody>';
        data.categories.forEach(c => {
            const isBundle = currentGroupType === 'Bundle';
            const viewUrl    = `/products/category/${c.id}`;
            const createUrl  = isBundle
                ? `/products/bundles/create/${groupId}/${c.id}/${c.sat_code || ''}`
                : `/products/create/${groupId}/${c.id}/${c.sat_code || ''}`;
            const createTitle = isBundle ? '{{ __('classification.create_kit') }}' : '{{ __('classification.create_product') }}';
            const createIcon  = isBundle ? 'fa-layer-group' : 'fa-plus-circle';
            const createColor = isBundle ? 'btn-info' : 'btn-success';

            html += `<tr>
                <td>${c.id}</td>
                <td>${c.name}</td>
                <td>${c.code || '-'}</td>
                <td>${c.key_name}</td>
                <td>
                    <a href="${viewUrl}" class="btn btn-sm btn-primary me-1" title="{{ __('classification.view_products') }}">
                        <i class="fad fa-list"></i>
                    </a>
                    <a href="${createUrl}" class="btn btn-sm ${createColor} me-1" title="${createTitle}">
                        <i class="fad ${createIcon}"></i>
                    </a>
                    <button class="btn btn-sm btn-warning me-1" onclick="editCategory(${c.id})"><i class="fad fa-edit"></i></button>
                    <button class="btn btn-sm btn-danger" onclick="deleteCategory(${c.id})"><i class="fad fa-trash"></i></button>
                </td>
            </tr>`;
        });
        html += '</tbody></table>';
        $('#categories-table').html(html);
    });
}

// Open category modal
function openCategoryModal(id = null) {
    $('#categoryForm')[0].reset();
    $('#category_id').val('');
    $('#category_group_id').val(currentGroupId);
    $('#sat_code_search').val('');
    renderSatOptions(satCodes);
    $('#categoryModalTitle').text('{{ __('classification.category_modal_title') }}');
    $('#categoryModal').modal('show');
}

// Edit category
function editCategory(id) {
    $.get(`/products/categories/${id}/edit`, function(data) {
        $('#category_id').val(data.id);
        $('#category_group_id').val(data.group_id);
        $('#cat_name').val(data.name);
        $('#key_name').val(data.key_name);
        $('#product_line_id').val(data.product_line_id);
        loadSatCodes(data.code);
        $('#categoryModalTitle').text('{{ __('classification.edit_category_title', ['id' => '__ID__']) }}'.replace('__ID__', data.id));
        $('#categoryModal').modal('show');
    }).fail(function(xhr) {
        showNotification(xhr.responseJSON?.message || '{{ __('classification.error') }}', 'error');
    });
}

// Submit category form
$('#categoryForm').submit(function(e) {
    e.preventDefault();
    const id = $('#category_id').val();
    const url = id ? `/products/classification/categories/${id}` : '/products/classification/categories';
    const method = id ? 'PUT' : 'POST';

    if (!$('#code').val()) {
        alert('{{ __('classification.select_sat_code') }}');
        return;
    }

    $.ajax({
        url: url,
        method: method,
        data: {
            _token: '{{ csrf_token() }}',
            group_id: $('#category_group_id').val(),
            name: $('#cat_name').val(),
            code: $('#code').val(),
            key_name: $('#key_name').val(),
            product_line_id: $('#product_line_id').val()
        },
        success: function() {
            $('#categoryModal').modal('hide');
            loadCategories(currentGroupId);
        },
        error: function(xhr) {
            const errors = xhr.responseJSON?.errors || {};
            let msg = '';
            for (let f in errors) msg += errors[f][0] + '<br>';
            showNotification(msg || '{{ __('classification.error') }}', 'error', '{{ __('classification.validation_error') }}');
        }
    });
});

// Delete category
function deleteCategory(id) {
    if (!confirm('{{ __('classification.delete_category_confirm') }}')) return;
    $.ajax({
        url: `/products/classification/categories/${id}`,
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', _method: 'DELETE' },
        success: function() {
            loadCategories(currentGroupId);
        },
        error: function(xhr) {
            showNotification(xhr.responseJSON?.message || '{{ __('classification.error') }}', 'error');
        }
    });
}

// Notification helper
function showNotification(message, type = 'success', title = '') {
    if (typeof $.notify === 'function') {
        $.notify({ title: title, message: message }, { type: type });
    } else {
        alert((title ? title + ': ' : '') + message.replace(/<[^>]*>/g, ''));
    }
}

// Import modal
function openImportModal() {
    $('#importForm')[0].reset();
    $('#importModal').modal('show');
}

$('#importForm').submit(function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    $.ajax({
        url: '/products/classification/import-groups',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#importModal').modal('hide');
            showNotification(response.message, 'success');
            loadGroups(currentType);
        },
        error: function(xhr) {
            showNotification(xhr.responseJSON?.message || '{{ __('classification.import_failed') }}', 'error');
        }
    });
});

// Bundle Groups
let bundleGroups = [];
let bundleItems = [];
let availableProducts = [];

function loadBundleGroups() {
    $.get('/products/classification/groups/type/Bundle', function(data) {
        bundleGroups = data;
        let html = '';
        if (data.length === 0) {
            html = `<div class="text-center text-muted py-4"><i class="fad fa-box-open fa-2x mb-2"></i><p>{{ __('classification.no_bundle_groups') }}</p></div>`;
        } else {
            html = '<div class="row">';
            data.forEach(g => {
                html += `
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <h6 class="card-title">${g.es_name}</h6>
                                <p class="text-muted small mb-2">${g.bundles_count || 0} {{ __('classification.bundles_count') }}</p>
                                <button class="btn btn-sm btn-primary" onclick="openBundleModal(${g.id}, '${g.es_name}')">
                                    <i class="fad fa-plus me-1"></i>{{ __('classification.new_bundle') }}
                                </button>
                                <button class="btn btn-sm btn-info ms-1" onclick="viewBundlesInGroup(${g.id})">
                                    <i class="fad fa-list me-1"></i>{{ __('classification.view') }}
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
            html += '</div>';
        }
        $('#bundles-table').html(html);

        // Also update bundle_group_id select
        let options = '<option value="">{{ __('classification.select_group') }}</option>';
        data.forEach(g => {
            options += `<option value="${g.id}">${g.es_name}</option>`;
        });
        $('#bundle_group_id').html(options);
    });
}

function openBundleGroupModal() {
    $('#bundleGroupForm')[0].reset();
    $('#bundle_group_id_hidden').val('');
    $('#bundleGroupModalTitle').text('{{ __('classification.bundle_group_modal_title') }}');
    $('#bundleGroupModal').modal('show');
}

$('#bundleGroupForm').submit(function(e) {
    e.preventDefault();
    const name = $('#bundle_group_name').val().trim();
    const code = $('#bundle_group_code').val().trim().toUpperCase();

    if (code.length !== 3) {
        showNotification('{{ __('classification.code_must_3') }}', 'error');
        return;
    }

    $.ajax({
        url: '/products/groups',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            type: 'Bundle',
            es_name: 'KIT ' + name,
            en_name: null,
            code: code
        },
        success: function(response) {
            $('#bundleGroupModal').modal('hide');
            showNotification('{{ __('classification.bundle_group_created') }}', 'success');
            loadBundleGroups();
        },
        error: function(xhr) {
            showNotification(xhr.responseJSON?.message || '{{ __('classification.failed_create_group') }}', 'error');
        }
    });
});

function openBundleModal(groupId, groupName) {
    bundleItems = [];
    $('#bundleForm')[0].reset();
    $('#bundle_id').val('');
    $('#bundle_group_id').val(groupId);
    $('#bundle_sku').val('{{ __('classification.auto_generated') }}');
    renderBundleItems();
    $('#bundleModalTitle').text('{{ __('classification.bundle_modal_title') }} - ' + groupName);
    $('#bundleModal').modal('show');
}

function renderBundleItems() {
    let html = '';
    let total = 0;

    if (bundleItems.length === 0) {
        html = `<tr><td colspan="5" class="text-center text-muted">{{ __('classification.no_products_added') }}</td></tr>`;
    } else {
        bundleItems.forEach((item, index) => {
            const subtotal = item.price * item.quantity;
            total += subtotal;
            html += `
                <tr>
                    <td>${item.name}</td>
                    <td><input type="number" class="form-control form-control-sm" value="${item.quantity}" min="1"
                        onchange="updateBundleItemQty(${index}, this.value)" style="width:70px"></td>
                    <td>$${parseFloat(item.price).toFixed(2)}</td>
                    <td>$${subtotal.toFixed(2)}</td>
                    <td><button class="btn btn-sm btn-danger" onclick="removeBundleItem(${index})"><i class="fad fa-trash"></i></button></td>
                </tr>
            `;
        });
    }

    $('#bundle_items_table').html(html);
    $('#bundle_calculated_price').val('$' + total.toFixed(2));
}

function updateBundleItemQty(index, qty) {
    bundleItems[index].quantity = parseInt(qty) || 1;
    renderBundleItems();
}

function removeBundleItem(index) {
    bundleItems.splice(index, 1);
    renderBundleItems();
    renderAvailableProducts(availableProducts);
}

function openAddProductsModal() {
    availableProducts = [];
    $('#available_products_table').html('<tr><td colspan="4" class="text-center"><i class="fad fa-spinner fa-spin"></i> {{ __('classification.loading') }}</td></tr>');
    $('#product_search').val('');
    $('#addProductsModal').modal('show');

    $.get('/products/?format=json', function(data) {
        availableProducts = data.data || data;
        renderAvailableProducts(availableProducts);
    }).fail(function() {
        $('#available_products_table').html('<tr><td colspan="4" class="text-center text-muted">{{ __('classification.no_products_available') }}</td></tr>');
    });
}

function renderAvailableProducts(products) {
    const addedIds = bundleItems.map(i => i.id);
    let html = '';
    products.forEach(p => {
        const isAdded = addedIds.includes(p.id);
        html += `
            <tr>
                <td>${p.product_name || p.name}</td>
                <td>${p.sku || '-'}</td>
                <td>$${parseFloat(p.price || 0).toFixed(2)}</td>
                <td>
                    ${isAdded
                        ? `<span class="badge bg-success">{{ __('classification.added') }}</span>`
                        : `<button class="btn btn-sm btn-success" onclick="addProductToBundle(${p.id}, '${(p.product_name || p.name).replace(/'/g, "\\'")}', ${p.price || 0})"><i class="fad fa-plus"></i></button>`
                    }
                </td>
            </tr>
        `;
    });
    $('#available_products_table').html(html);
}

$('#product_search').on('keyup', function() {
    const search = $(this).val().toLowerCase();
    const filtered = availableProducts.filter(p =>
        p.name.toLowerCase().includes(search) ||
        (p.sku && p.sku.toLowerCase().includes(search))
    );
    renderAvailableProducts(filtered);
});

function addProductToBundle(id, name, price) {
    bundleItems.push({ id: id, name: name, price: price, quantity: 1 });
    renderBundleItems();
    renderAvailableProducts(availableProducts);
}

$('#bundleForm').submit(function(e) {
    e.preventDefault();

    const groupId = $('#bundle_group_id').val();
    const type = $('#bundle_type').val();
    const name = $('#bundle_name').val().trim();
    const totalPrice = parseFloat($('#bundle_total_price').val());

    if (!groupId || !name || !totalPrice || bundleItems.length === 0) {
        alert('{{ __('classification.fill_required_add_product') }}');
        return;
    }

    const formData = new FormData();
    formData.append('group_id', groupId);
    formData.append('type', type);
    formData.append('name', name);
    formData.append('total_price', totalPrice);

    bundleItems.forEach((item, index) => {
        formData.append(`items[${index}][item_type]`, 'product');
        formData.append(`items[${index}][item_id]`, item.id);
        formData.append(`items[${index}][quantity]`, item.quantity);
    });

    $.ajax({
        url: '/products/bundles',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#bundleModal').modal('hide');
            alert('{{ __('classification.bundle_created', ['sku' => '__SKU__']) }}'.replace('__SKU__', response.bundle.sku));
            loadBundleGroups();
        },
        error: function(xhr) {
            alert('{{ __('classification.error') }} ' + (xhr.responseJSON?.message || '{{ __('classification.failed_create_bundle') }}'));
        }
    });
});

function viewBundlesInGroup(groupId) {
    $.get(`/products/bundles/groups/${groupId}`, function(bundles) {
        let html = '<div class="row">';
        bundles.forEach(bundle => {
            html += `
                <div class="col-md-6 mb-2">
                    <div class="card">
                        <div class="card-body">
                            <h6>${bundle.name} <span class="badge bg-info">${bundle.type}</span></h6>
                            <p class="mb-1"><small><strong>{{ __('classification.sku') }}:</strong> ${bundle.sku}</small></p>
                            <p class="mb-1"><small><strong>{{ __('classification.items') }}:</strong> ${bundle.items_count}</small></p>
                            <p class="mb-2"><small><strong>{{ __('classification.col_price') }}:</strong> $${parseFloat(bundle.total_price).toFixed(2)}</small></p>
                            <button class="btn btn-sm btn-info" onclick="viewBundle(${bundle.id})">{{ __('classification.view') }}</button>
                        </div>
                    </div>
                </div>
            `;
        });
        html += '</div>';
        $('#bundles-table').html(html);
    });
}

function viewBundle(id) {
    $.get(`/products/bundles/${id}`, function(bundle) {
        let html = `
            <div class="card">
                <div class="card-header">
                    <h5>${bundle.name} (${bundle.sku})</h5>
                </div>
                <div class="card-body">
                    <p><strong>{{ __('classification.type') }}:</strong> ${bundle.type}</p>
                    <p><strong>{{ __('classification.col_price') }}:</strong> $${parseFloat(bundle.total_price).toFixed(2)}</p>
                    <p><strong>{{ __('classification.calculated') }}:</strong> $${parseFloat(bundle.calculated_price).toFixed(2)}</p>
                    <p><strong>{{ __('classification.discount') }}:</strong> $${parseFloat(bundle.discount_amount).toFixed(2)}</p>
                    <h6 class="mt-3">{{ __('classification.components') }}</h6>
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>{{ __('classification.col_product') }}</th>
                                <th>{{ __('classification.col_qty') }}</th>
                                <th>{{ __('classification.col_price') }}</th>
                                <th>{{ __('classification.col_subtotal') }}</th>
                            </tr>
                        </thead>
                        <tbody>
        `;
        bundle.items.forEach(item => {
            html += `
                <tr>
                    <td>${item.item_details?.product_name || '{{ __('classification.unknown') }}'}</td>
                    <td>${item.quantity}</td>
                    <td>$${parseFloat(item.unit_price).toFixed(2)}</td>
                    <td>$${parseFloat(item.subtotal).toFixed(2)}</td>
                </tr>
            `;
        });
        html += `
                        </tbody>
                    </table>
                    <button class="btn btn-sm btn-secondary" onclick="loadBundleGroups()">{{ __('classification.back') }}</button>
                </div>
            </div>
        `;
        $('#bundles-table').html(html);
    });
}

$('a[href="#bundles-tab"]').on('shown.bs.tab', function() {
    loadBundleGroups();
});
</script>
{{-- Modal Delete Group --}}
<div class="modal fade" id="modalDeleteGroup" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <input type="hidden" id="deleteGroupId">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-trash-alt me-2"></i>{{ __('classification.delete_group_title') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ __('classification.delete_group_confirm') }}</p>
                <p class="text-muted small mb-0">{{ __('classification.delete_group_note') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>{{ __('classification.cancel') }}
                </button>
                <button type="button" class="btn btn-danger" onclick="confirmDeleteGroup()">
                    <i class="fas fa-trash-alt me-1"></i>{{ __('classification.delete') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection