@extends('layouts.vertical')

@section('content')
<style>
    input[readonly], textarea[readonly], select[disabled] {
        background-color: #e9ecef !important;
        cursor: not-allowed;
        opacity: 1;
    }
    .lockable-field.unlocked {
        background-color: #fff !important;
        cursor: text;
        border-color: #ffc107 !important;
    }
    #modalConfirmSave .modal-content,
    #modalConfirmAction .modal-content {
        background-color: rgba(33, 37, 41, 0.95) !important;
    }
    #modalConfirmSave .table td,
    #modalConfirmSave .table th {
        color: rgba(255,255,255,0.85) !important;
        border-color: rgba(255,255,255,0.1) !important;
    }
    #modalConfirmSave .table {
        --bs-table-bg: transparent !important;
    }
</style>

<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-layer-group me-2"></i>{{ __('bundles.edit_kit') }}</h1>
            <p class="text-muted mb-0">{{ __('bundles.edit_kit_subtitle') }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('products.bundles.show', $product->id) }}" class="btn btn-secondary btn-sm">
                <i class="fad fa-times me-1"></i>{{ __('bundles.cancel') }}
            </a>
            <button type="button" class="btn btn-warning btn-sm" onclick="confirmUpdate()">
                <i class="fad fa-save me-1"></i>{{ __('bundles.update_kit') }}
            </button>
        </div>
    </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="{{ route('products.index') }}">{{ __('bundles.breadcrumb_products') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('products.bundles.show', $product->id) }}">{{ $product->product_code }}</a></li>
            <li class="breadcrumb-item active">{{ __('bundles.breadcrumb_edit') }}</li>
        </ol>
    </nav>

    {{-- Aviso campos bloqueados --}}
    <div class="alert alert-warning d-flex align-items-center mb-3">
        <i class="fad fa-lock fa-lg me-3"></i>
        <div>
            <strong>{{ __('bundles.locked_fields_title') }}</strong>
            {!! __('bundles.locked_fields_notice') !!}
        </div>
    </div>

    <form id="bundleForm" action="{{ route('products.bundles.update', $product->id) }}" method="POST">
        @csrf
        @method('PUT')
        <input type="hidden" name="partidas" id="partidasInput" value="[]">

        {{-- KIT Identity --}}
        <div class="card mb-3">
            <div class="card-header bg-warning text-dark py-2">
                <h6 class="mb-0"><i class="fad fa-tag me-2"></i>{{ __('bundles.kit_identity') }}</h6>
            </div>
            <div class="card-body">

                <div class="row mb-3">
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('bundles.part_number') }}</label>
                        <input type="text" class="form-control form-control-sm" value="{{ $product->id }}" readonly>
                    </div>
                    <div class="col-md-10">
                        <label class="form-label fw-bold">{{ __('bundles.product_name_label') }} *</label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               id="product_name" name="product_name"
                               value="{{ $product->product_name }}" readonly>
                        <small class="text-muted">{{ __('bundles.auto_name_hint') }}</small>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('bundles.group_code') }}</label>
                        <input type="text" class="form-control form-control-sm"
                               value="{{ $product->group_code }}" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">{{ __('bundles.key_name') }}</label>
                        <input type="text" class="form-control form-control-sm"
                               value="{{ $product->key_name }}" readonly>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-bold">{{ __('bundles.sat_code') }}</label>
                        <input type="text" class="form-control form-control-sm"
                               value="{{ $product->tax_code }}" readonly>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">{{ __('bundles.sku') }} *</label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               value="{{ $product->sku }}" readonly>
                        <input type="hidden" name="sku" value="{{ $product->sku }}">
                        <small class="text-muted">{{ __('bundles.cannot_modify') }}</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">{{ __('bundles.product_code') }} *</label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               value="{{ $product->product_code }}" readonly>
                        <input type="hidden" name="product_code" value="{{ $product->product_code }}">
                        <small class="text-muted">{{ __('bundles.cannot_modify') }}</small>
                    </div>
                </div>

                {{-- Barcode con candado --}}
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('bundles.barcode') }}
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="barcode"
                               title="{{ __('bundles.unlock_tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        @if(!$product->barcode)
                            <div class="d-flex align-items-center gap-2 mb-1" id="generic_barcode_row" style="display:none !important;">
                                <input class="form-check-input" type="checkbox" id="generic_barcode" name="generic_barcode">
                                <label class="form-check-label small text-muted" for="generic_barcode">{{ __('bundles.use_generic_barcode') }}</label>
                            </div>
                        @endif
                        <input type="text" class="form-control form-control-sm text-uppercase lockable-field"
                               id="barcode" name="barcode"
                               value="{{ $product->barcode }}"
                               placeholder="{{ $product->barcode ? '' : __('bundles.barcode_no_code_placeholder') }}"
                               readonly>
                        <small class="text-muted field-hint-barcode">
                            @if(!$product->barcode)
                                {!! __('bundles.barcode_hint_missing') !!}
                            @else
                                {{ __('bundles.barcode_hint_locked') }}
                            @endif
                        </small>
                    </div>
                </div>
            </div>
        </div>

        {{-- Brand & Details --}}
        <div class="card mb-3">
            <div class="card-header py-2">
                <h6 class="mb-0"><i class="fad fa-tag me-1 text-success"></i>{{ __('bundles.product_details') }}</h6>
            </div>
            <div class="card-body">
                <div class="row mb-3">

                    {{-- Brand BLOQUEADO permanente --}}
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('bundles.brand') }} *</label>
                        <input type="text" class="form-control form-control-sm"
                               value="{{ optional($compatibleBrands->firstWhere('id', $product->brand_id))->validbrand_id ?? 'N/A' }}"
                               disabled>
                        <input type="hidden" name="brand_id" value="{{ $product->brand_id }}">
                        <small class="text-muted">{{ __('bundles.cannot_modify') }}</small>
                    </div>

                    {{-- Family con candado --}}
                    <div class="col-md-5">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('bundles.family') }} *
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="family"
                               title="{{ __('bundles.unlock_tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase lockable-field"
                               id="family" name="family"
                               value="{{ $product->family }}" readonly>
                        <small class="text-muted field-hint-family">{{ __('bundles.barcode_hint_locked') }}</small>
                    </div>

                    {{-- Model con candado --}}
                    <div class="col-md-4">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('bundles.model') }} *
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="model"
                               title="{{ __('bundles.unlock_tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase lockable-field"
                               id="model" name="model"
                               value="{{ $product->model }}" readonly>
                        <small class="text-muted field-hint-model">{{ __('bundles.barcode_hint_locked') }}</small>
                    </div>
                </div>

                {{-- Custom Fields 1-8 con candado --}}
                <div class="row g-2">
                    @for($i = 1; $i <= 8; $i++)
                    <div class="col-md-3">
                        <label class="form-label small fw-bold d-flex align-items-center gap-2">
                            {{ $categoryModel->{'custom_field_'.$i} ?? __('bundles.custom_field').' '.$i }}
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="additional_description_{{ $i }}"
                               title="{{ __('bundles.unlock_tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase lockable-field"
                               id="additional_description_{{ $i }}"
                               name="additional_description_{{ $i }}"
                               value="{{ $product->{'additional_description_'.$i} }}"
                               readonly>
                        <small class="text-muted field-hint-additional_description_{{ $i }}">{{ __('bundles.barcode_hint_locked') }}</small>
                    </div>
                    @endfor
                </div>
            </div>
        </div>

        {{-- Descriptions --}}
        <div class="card mb-3">
            <div class="card-header py-2">
                <h6 class="mb-0"><i class="fad fa-align-left me-1 text-warning"></i>{{ __('bundles.descriptions') }}</h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">{{ __('bundles.description_quotations') }}</label>
                    <textarea class="form-control" name="description" rows="5"
                              style="text-transform:uppercase;">{{ $product->description }}</textarea>
                </div>
                <div>
                    <label class="form-label fw-bold">{{ __('bundles.store_description_label') }}</label>
                    <textarea class="form-control" name="store_description" rows="3"
                              style="text-transform:uppercase;">{{ $product->store_description }}</textarea>
                </div>
            </div>
        </div>

        {{-- Bundle Components --}}
        <div class="card mb-3">
            <div class="card-header bg-info text-white py-2 d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="fad fa-boxes me-2"></i>{{ __('bundles.bundle_components') }}
                </h6>
                <button type="button" class="btn btn-sm btn-light" data-bs-toggle="modal" data-bs-target="#modalAddComponent">
                    <i class="fad fa-plus me-1"></i>{{ __('bundles.add_component') }}
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table table-sm table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th width="5%">#</th>
                            <th width="8%">{{ __('bundles.type') }}</th>
                            <th>{{ __('bundles.name') }}</th>
                            <th width="12%">{{ __('bundles.sku') }}</th>
                            <th width="7%">{{ __('bundles.qty') }}</th>
                            <th width="18%">{{ __('bundles.notes') }}</th>
                            <th width="5%"></th>
                        </tr>
                    </thead>
                    <tbody id="componentsList">
                        {{-- Componentes existentes --}}
                        @forelse($product->bundleComponents as $idx => $item)
                        <tr id="existing-row-{{ $item->id }}" class="{{ $item->is_base ? 'table-warning' : '' }}">
                            <td>{{ $idx + 1 }}@if($item->is_base) <span class="badge bg-warning text-dark">BASE</span>@endif</td>
                            <td><span class="badge bg-{{ $item->item_type === 'product' ? 'primary' : 'info' }}">{{ $item->item_type }}</span></td>
                            <td>{{ $item->product->product_name ?? 'N/A' }}</td>
                            <td><code>{{ $item->product->sku ?? '-' }}</code></td>
                            <td>{{ $item->quantity }}</td>
                            <td class="text-muted small">{{ $item->description ?? '-' }}</td>
                            <td>
                                @if(!$item->is_base)
                                <button type="button" class="btn btn-sm btn-danger"
                                    onclick="removeExistingPartida({{ $item->id }}, this)">
                                    <i class="fad fa-trash"></i>
                                </button>
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr id="noComponentsRow">
                            <td colspan="7" class="text-center text-muted py-3">
                                <i class="fad fa-info-circle me-1"></i>{{ __('bundles.no_components_yet') }}
                            </td>
                        </tr>
                        @endforelse
                        {{-- Nuevos componentes agregados en esta sesión se renderizan aquí --}}
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Save Bottom --}}
        <div class="d-flex justify-content-end gap-2 mb-4">
            <a href="{{ route('products.bundles.show', $product->id) }}" class="btn btn-secondary">
                <i class="fad fa-times me-1"></i>{{ __('bundles.cancel') }}
            </a>
            <button type="button" class="btn btn-warning" onclick="confirmUpdate()">
                <i class="fad fa-save me-1"></i>{{ __('bundles.update_kit') }}
            </button>
        </div>

    </form>
</div>

{{-- ============================================================ --}}
{{-- MODAL: Add Component --}}
{{-- ============================================================ --}}
<div class="modal fade" id="modalAddComponent" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="fad fa-boxes me-2"></i>{{ __('bundles.add_component') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="btn-group w-100 mb-3">
                    <input type="radio" class="btn-check" name="componentType" id="typeProduct" value="product" checked>
                    <label class="btn btn-outline-primary" for="typeProduct"><i class="fad fa-box me-1"></i>{{ __('bundles.product') }}</label>
                    <input type="radio" class="btn-check" name="componentType" id="typeService" value="service">
                    <label class="btn btn-outline-info" for="typeService"><i class="fad fa-tools me-1"></i>{{ __('bundles.service') }}</label>
                </div>
                <div class="row g-2 mb-3">
                    <div class="col-md-2">
                        <select class="form-select form-select-sm" id="compFilterGroup">
                            <option value="">{{ __('bundles.all_groups') }}</option>
                            @foreach(\App\Modules\Products\Models\Group::where('type','Product')->orderBy('es_name')->get() as $g)
                            <option value="{{ $g->id }}">{{ $g->es_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select form-select-sm" id="compFilterCategory" disabled>
                            <option value="">{{ __('bundles.all_categories') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select form-select-sm" id="compFilterBrand">
                            <option value="">{{ __('bundles.all_brands') }}</option>
                            @foreach(\App\Modules\Products\Models\Validbrand::orderBy('validbrand_id')->get() as $b)
                            <option value="{{ $b->id }}">{{ $b->validbrand_id }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control form-select-sm" id="compFilterSearch" placeholder="{{ __('bundles.name_or_sku') }}">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary btn-sm w-100" type="button" id="btnSearchComp">
                            <i class="fad fa-search me-1"></i>{{ __('bundles.search') }}
                        </button>
                    </div>
                </div>

                <div class="table-responsive" style="max-height:280px;overflow-y:auto;">
                    <table class="table table-sm table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>{{ __('bundles.part_no') }}</th>
                                <th>{{ __('bundles.name') }}</th>
                                <th>{{ __('bundles.brand') }}</th>
                                <th>{{ __('bundles.sku') }}</th>
                                <th width="80"></th>
                            </tr>
                        </thead>
                        <tbody id="compResults">
                            <tr><td colspan="5" class="text-center text-muted py-4">
                                <i class="fad fa-filter me-1"></i>{{ __('bundles.use_filters_search') }}
                            </td></tr>
                        </tbody>
                    </table>
                </div>

                <div id="compSelectedForm" class="d-none mt-3 border-top pt-3">
                    <div class="alert alert-info py-2 mb-3">
                        <i class="fad fa-check-circle me-2"></i>
                        <strong>{{ __('bundles.selected') }}</strong> <span id="compSelectedName"></span>
                    </div>
                    <input type="hidden" id="compSelectedId">
                    <input type="hidden" id="compSelectedType">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">{{ __('bundles.quantity') }} *</label>
                            <input type="number" class="form-control form-control-sm" id="compQty" min="1" value="1">
                        </div>
                        <div class="col-md-9">
                            <label class="form-label fw-bold">{{ __('bundles.notes') }}</label>
                            <input type="text" class="form-control form-control-sm" id="compNotes">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary w-100 mt-3" id="btnConfirmComp">
                        <i class="fad fa-plus me-2"></i>{{ __('bundles.add_to_kit') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================ --}}
{{-- MODAL: Confirm Update --}}
{{-- ============================================================ --}}
<div class="modal fade" id="modalConfirmSave" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-dark bg-opacity-75 shadow-5">
            <div class="modal-header border-bottom-0">
                <h4 class="modal-title text-white">
                    <i class="fad fa-save me-2"></i>{{ __('bundles.confirm_update_kit') }}
                    <small class="m-0 text-white opacity-70 d-block">{{ __('bundles.review_before_saving') }}</small>
                </h4>
                <button class="btn btn-system btn-system-light ms-auto" type="button" data-bs-dismiss="modal">
                    <svg class="sa-icon sa-icon-2x sa-icon-light"><use href="icons/sprite.svg#x"></use></svg>
                </button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-12">
                        <small class="text-white opacity-50 text-uppercase d-block">{{ __('bundles.kit_name') }}</small>
                        <span class="text-white fw-bold" id="confirmName"></span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-white opacity-50 text-uppercase d-block">{{ __('bundles.sku') }}</small>
                        <span class="text-white" id="confirmSku"></span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-white opacity-50 text-uppercase d-block">{{ __('bundles.brand') }}</small>
                        <span class="text-white" id="confirmBrand"></span>
                    </div>
                    <div class="col-md-4">
                        <small class="text-white opacity-50 text-uppercase d-block">{{ __('bundles.new_components') }}</small>
                        <span class="badge bg-info" id="confirmCount">0</span>
                    </div>
                </div>
                <hr style="border-color: rgba(255,255,255,0.15)">
                <div class="d-flex align-items-center mb-2">
                    <small class="text-white opacity-50 text-uppercase me-2">{{ __('bundles.new_components_to_add') }}</small>
                </div>
                <div id="confirmCompList" style="max-height:200px;overflow-y:auto;scrollbar-width:thin;"></div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-secondary waves-effect waves-themed" data-bs-dismiss="modal">
                    <i class="fad fa-arrow-left me-1"></i>{{ __('bundles.go_back') }}
                </button>
                <button type="button" class="btn btn-warning waves-effect waves-themed" id="btnConfirmSave">
                    <i class="fad fa-check me-1"></i>{{ __('bundles.confirm_update') }}
                </button>
            </div>
        </div>
    </div>
</div>

{{-- MODAL: Static Confirm --}}
<div class="modal fade" id="modalConfirmAction" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content bg-dark bg-opacity-75 shadow-5">
            <div class="modal-header border-bottom-0">
                <h4 class="modal-title text-white">
                    {{ __('bundles.confirm') }}
                    <small class="m-0 text-white opacity-70 d-block" id="modalConfirmContent"></small>
                </h4>
                <button class="btn btn-system btn-system-light ms-auto" type="button" data-bs-dismiss="modal">
                    <svg class="sa-icon sa-icon-2x sa-icon-light"><use href="icons/sprite.svg#x"></use></svg>
                </button>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-secondary waves-effect waves-themed" data-bs-dismiss="modal">{{ __('bundles.cancel') }}</button>
                <button type="button" class="btn btn-primary waves-effect waves-themed" id="modalConfirmOk">{{ __('bundles.confirm') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Nuevos componentes agregados en esta sesión
let newComponents = [];
let compSelected  = null;

$(document).ready(function() {

    // Init tooltips
    $('[data-bs-toggle="tooltip"]').tooltip({ trigger: 'hover', placement: 'top' });

    // ── Lógica de candados ──────────────────────────────────────────
    $('.lock-icon').on('click', function() {
        const targetId = $(this).data('target');
        const $input   = $('#' + targetId);
        const $icon    = $(this);
        const $hint    = $('.field-hint-' + targetId);
        const isLocked = $input.prop('readonly');

        if (isLocked) {
            $input.prop('readonly', false).addClass('unlocked').focus();
            $icon.removeClass('fa-lock text-danger').addClass('fa-lock-open text-success');
            $hint.html('{{ __('bundles.field_unlocked') }}');
            // Mostrar checkbox de barcode genérico si aplica
            if (targetId === 'barcode') {
                $('#generic_barcode_row').css('display', 'flex !important').show();
            }
        } else {
            $input.prop('readonly', true).removeClass('unlocked');
            $icon.removeClass('fa-lock-open text-success').addClass('fa-lock text-danger');
            if (targetId === 'barcode' && !$('#barcode').val()) {
                $hint.html('{!! __('bundles.barcode_hint_missing') !!}');
            } else {
                $hint.html('{{ __('bundles.barcode_hint_locked') }}');
            }
            if (targetId === 'barcode') $('#generic_barcode_row').hide();
        }
    });

    // ── Uppercase en campos desbloqueados ───────────────────────────
    $(document).on('keyup', '.lockable-field', function() {
        if (!$(this).prop('readonly')) {
            const pos = this.selectionStart;
            this.value = this.value.toUpperCase();
            this.setSelectionRange(pos, pos);
        }
    });

    // ── Generic barcode checkbox ────────────────────────────────────
    $('#generic_barcode').on('change', function() {
        const isChecked = $(this).is(':checked');
        const currentBarcode = $('#barcode').val();

        const applyChange = function() {
            if (isChecked) {
                const groupCode = '{{ $product->group_code }}'.replace(/-/g, '');
                $('#barcode').val(groupCode.padStart(13, '0'));
            } else {
                $('#barcode').val('');
            }
        };

        if (isChecked && currentBarcode) {
            $(this).prop('checked', false);
            showConfirm('{{ __('bundles.barcode_replace_confirm') }}', function() {
                $('#generic_barcode').prop('checked', true);
                applyChange();
            });
        } else {
            applyChange();
        }
    });

    // ── Filtro grupos → categorías en modal componentes ─────────────
    $('#compFilterGroup').on('change', function() {
        loadCategories($(this).val(), '#compFilterCategory');
    });

    // ── Búsqueda componentes ─────────────────────────────────────────
    let compTimer;
    $('#compFilterSearch').on('keyup', function() {
        clearTimeout(compTimer);
        compTimer = setTimeout(searchComponents, 400);
    });
    $('#btnSearchComp').on('click', searchComponents);

    function searchComponents() {
        const type = $('input[name="componentType"]:checked').val();
        const params = {
            _token: $('meta[name="csrf-token"]').attr('content'),
            search: $('#compFilterSearch').val(),
            type: type,
            group_id: $('#compFilterGroup').val(),
            category_id: $('#compFilterCategory').val(),
            brand_id: $('#compFilterBrand').val()
        };
        $('#compResults').html('<tr><td colspan="5" class="text-center py-3"><i class="fad fa-spinner fa-spin"></i></td></tr>');
        $.post('/products/bundles/search/items', params, function(res) {
            const items = (type === 'product' ? res.products : res.services) || [];
            if (!items.length) {
                $('#compResults').html('<tr><td colspan="5" class="text-center text-muted py-4">{{ __('bundles.no_results_found') }}</td></tr>');
                return;
            }
            let html = '';
            items.forEach(item => {
                html += `<tr>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.brand || '-'}</td>
                    <td><code>${item.sku || '-'}</code></td>
                    <td><button type="button" class="btn btn-sm btn-primary btnPickComp"
                        data-id="${item.id}" data-type="${item.type || type}"
                        data-name="${item.name}" data-sku="${item.sku || ''}">
                        <i class="fad fa-plus"></i></button></td>
                </tr>`;
            });
            $('#compResults').html(html);
        });
    }

    $(document).on('click', '.btnPickComp', function() {
        compSelected = {
            id: $(this).data('id'), type: $(this).data('type'),
            name: $(this).data('name'), sku: $(this).data('sku')
        };
        $('#compSelectedId').val(compSelected.id);
        $('#compSelectedType').val(compSelected.type);
        $('#compSelectedName').text(compSelected.name);
        $('#compSelectedForm').removeClass('d-none');
        $('#compQty').val(1);
        $('#compNotes').val('');
    });

    $('#btnConfirmComp').on('click', function() {
        if (!compSelected) return;
        const qty = parseInt($('#compQty').val());
        if (!qty || qty < 1) { showAlert('{{ __('bundles.qty_min_1') }}', 'warning'); return; }

        const component = {
            item_id: compSelected.id, item_type: compSelected.type,
            name: compSelected.name, sku: compSelected.sku,
            quantity: qty, description: $('#compNotes').val() || null, is_base: false
        };
        newComponents.push(component);
        appendNewComponentRow(component, newComponents.length - 1);

        bootstrap.Modal.getInstance(document.getElementById('modalAddComponent')).hide();
        resetCompModal();
    });

    $('#modalAddComponent').on('hidden.bs.modal', resetCompModal);

    function resetCompModal() {
        compSelected = null;
        $('#compFilterSearch').val('');
        $('#compSelectedForm').addClass('d-none');
        $('#compResults').html('<tr><td colspan="5" class="text-center text-muted py-4"><i class="fad fa-filter me-1"></i>{{ __('bundles.use_filters_search') }}</td></tr>');
    }

    // ── Confirmar update ─────────────────────────────────────────────
    $('#btnConfirmSave').on('click', function() {
        $('#partidasInput').val(JSON.stringify(newComponents.map(c => ({
            item_id: c.item_id, item_type: c.item_type,
            quantity: c.quantity, description: c.description, is_base: false
        }))));
        $('#bundleForm').submit();
    });
});

// ── Agregar fila de nuevo componente en tabla ────────────────────
function appendNewComponentRow(c, idx) {
    $('#noComponentsRow').remove();
    const existingCount = $('#componentsList tr[id^="existing-row-"]').length;
    const rowNum = existingCount + idx + 1;
    const row = `<tr id="new-row-${idx}" class="table-success">
        <td>${rowNum} <span class="badge bg-success">{{ __('bundles.new_badge') }}</span></td>
        <td><span class="badge bg-${c.item_type === 'product' ? 'primary' : 'info'}">${c.item_type}</span></td>
        <td>${c.name}</td>
        <td><code>${c.sku || '-'}</code></td>
        <td>${c.quantity}</td>
        <td class="text-muted small">${c.description || '-'}</td>
        <td><button type="button" class="btn btn-sm btn-danger" onclick="removeNewComponent(${idx})">
            <i class="fad fa-trash"></i></button></td>
    </tr>`;
    $('#componentsList').append(row);
}

// ── Eliminar componente nuevo (no guardado aún) ──────────────────
function removeNewComponent(idx) {
    newComponents.splice(idx, 1);
    $(`#new-row-${idx}`).remove();
    showNotification('{{ __('bundles.component_removed') }}', 'warning');
}

// ── Eliminar componente existente (vía AJAX) ─────────────────────
function removeExistingPartida(itemId, btn) {
    showConfirm('{{ __('bundles.remove_component') }}', function() {
        $.ajax({
            url: `/products/bundles/{{ $product->id }}/partidas/${itemId}`,
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                _method: 'DELETE'
            },
            success: function() {
                $(`#existing-row-${itemId}`).fadeOut(300, function() { $(this).remove(); });
                showNotification('{{ __('bundles.component_removed') }}', 'success');
            },
            error: function() {
                showNotification('{{ __('bundles.error_removing_component') }}', 'error');
            }
        });
    });
}

// ── Confirm & Update ────────────────────────────────────────────
window.confirmUpdate = function() {
    const barcode = $('#barcode').val();
    if (!barcode) {
        showNotification('{{ __('bundles.barcode_required_unlock') }}', 'warning');
        return;
    }

    $('#confirmName').text($('#product_name').val());
    $('#confirmSku').text('{{ $product->sku }}');
    $('#confirmBrand').text('{{ optional($compatibleBrands->firstWhere("id", $product->brand_id))->validbrand_id ?? "N/A" }}');
    $('#confirmCount').text(newComponents.length);

    let compHtml = newComponents.length
        ? '<table class="table table-sm mb-0" style="--bs-table-bg:transparent;--bs-table-color:rgba(255,255,255,0.85);--bs-table-border-color:rgba(255,255,255,0.1);">'
          + '<thead><tr>'
          + '<th style="color:rgba(255,255,255,0.5) !important">#</th>'
          + '<th style="color:rgba(255,255,255,0.5) !important">{{ __('bundles.name') }}</th>'
          + '<th style="color:rgba(255,255,255,0.5) !important">{{ __('bundles.sku') }}</th>'
          + '<th style="color:rgba(255,255,255,0.5) !important">{{ __('bundles.qty') }}</th>'
          + '</tr></thead><tbody>'
          + newComponents.map((c, i) => `<tr>
                <td style="color:rgba(255,255,255,0.85) !important">${i+1}</td>
                <td style="color:rgba(255,255,255,0.85) !important">${c.name}</td>
                <td style="color:rgba(255,255,255,0.5) !important;font-size:11px">${c.sku || '-'}</td>
                <td style="color:rgba(255,255,255,0.85) !important">${c.quantity}</td>
            </tr>`).join('')
          + '</tbody></table>'
        : '<p style="color:rgba(255,255,255,0.5)"><em>{{ __('bundles.no_new_components') }}</em></p>';

    $('#confirmCompList').html(compHtml);
    new bootstrap.Modal(document.getElementById('modalConfirmSave')).show();
};

// ── Helpers compartidos ─────────────────────────────────────────
function loadCategories(groupId, targetSelect, callback) {
    $(targetSelect).prop('disabled', !groupId).html('<option value="">{{ __('bundles.all_categories') }}</option>');
    if (!groupId) return;
    $.get(`/products/classification/categories/group/${groupId}`, function(res) {
        const cats = res.categories || res;
        if (Array.isArray(cats)) {
            cats.forEach(c => {
                $(targetSelect).append(`<option value="${c.id}">${c.name}</option>`);
            });
        }
        $(targetSelect).prop('disabled', false);
        if (callback) callback();
    });
}

window.showConfirm = function(message, onConfirm) {
    $('#modalConfirmContent').text(message);
    const modal = new bootstrap.Modal(document.getElementById('modalConfirmAction'));
    modal.show();
    $('#modalConfirmOk').off('click').on('click', function() {
        modal.hide();
        onConfirm();
    });
};

window.showAlert = function(message, type = 'error') {
    showNotification(message, type);
};

// ── Notificaciones desde sesión Laravel ─────────────────────────
@if(session('success'))
    $(document).ready(function() {
        showNotification('{{ session('success') }}', 'success');
    });
@endif
@if(session('error'))
    $(document).ready(function() {
        showNotification('{{ session('error') }}', 'error');
    });
@endif
@if(session('warning'))
    $(document).ready(function() {
        showNotification('{{ session('warning') }}', 'warning');
    });
@endif
</script>
@endsection