@extends('layouts.vertical')

@section('content')
<style>
    input[readonly], textarea[readonly], select[disabled] {
        background-color: #e9ecef !important;
        cursor: not-allowed;
        opacity: 1;
    }
    /* Fix modal transparente */
    #modalConfirmSave .modal-content,
    #modalConfirmAction .modal-content {
        background-color: rgba(33, 37, 41, 0.95) !important;
    }
    /* Fix texto tabla en modal oscuro */
    #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">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-layer-group me-2"></i>{{ __('bundles.new_kit') }}</h1>
            <p class="text-muted mb-0"><strong>{{ $group->es_name }}</strong> / {{ $category->name }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('products.classification.index') }}" class="btn btn-secondary btn-sm">
                <i class="fad fa-times me-1"></i>{{ __('bundles.cancel') }}
            </a>
            <button type="button" class="btn btn-success btn-sm" onclick="confirmSave()">
                <i class="fad fa-save me-1"></i>{{ __('bundles.save_kit') }}
            </button>
        </div>
    </div>

    <form id="bundleForm" action="{{ route('products.bundles.store') }}" method="POST">
        @csrf
        <input type="hidden" name="category_id" value="{{ $category->id }}">
        <input type="hidden" name="key_name"    value="{{ $keyName }}">
        <input type="hidden" name="tax_code"    value="{{ $code }}">
        <input type="hidden" name="is_bundle"   value="1">
        <input type="hidden" name="partidas"    id="partidasInput" value="[]">

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

                {{-- Row 1: Part No + KIT Name --}}
                <div class="row mb-3">
                    <div class="col-md-2">
                        <label class="form-label fw-bold">
                            {{ __('bundles.part_no') }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.part_no_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               id="part_no_display" value="{{ $productNumber }}" readonly>
                    </div>
                    <div class="col-md-10">
                        <label class="form-label fw-bold">
                            {{ __('bundles.kit_name') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.kit_name_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase bg-light"
                               id="product_name" name="product_name" required
                               value="{{ $keyName }}" readonly>
                        <small class="text-muted">{{ __('bundles.auto_name_hint') }}</small>
                    </div>
                </div>

                {{-- Row 2: Group Code + Key Name + SAT --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">
                            {{ __('bundles.group_code') }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.group_code_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               id="group_code" name="group_code"
                               value="{{ $category->group_id }}-{{ $category->id }}-{{ $productNumber }}" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">
                            {{ __('bundles.key_name') }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.key_name_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               value="{{ $keyName }}" readonly>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-bold">
                            {{ __('bundles.sat_code') }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.sat_code_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               value="{{ $code }}" readonly>
                    </div>
                </div>

                {{-- Row 3: SKU + Product Code --}}
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold">
                            {{ __('bundles.sku') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.sku_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               id="sku" name="sku" required placeholder="KIT-XXXXXXXX">
                        <small class="text-danger d-none" id="sku_error">{{ __('bundles.already_exists') }}</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold">
                            {{ __('bundles.product_code') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.product_code_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               id="product_code" name="product_code" required placeholder="BDL-XXXXXXXX">
                        <small class="text-danger d-none" id="product_code_error">{{ __('bundles.already_exists') }}</small>
                    </div>
                </div>

                {{-- Row 4: Barcode --}}
                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">
                            {{ __('bundles.barcode') }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.barcode_tooltip') }}"></i>
                        </label>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <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>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               id="barcode" name="barcode" placeholder="{{ __('bundles.min_12_digits') }}">
                    </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">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">
                            {{ __('bundles.brand') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.brand_tooltip') }}"></i>
                        </label>
                        <select class="form-select form-select-sm" id="brand" name="brand_id" required>
                            <option value="">{{ __('bundles.select') }}</option>
                            @foreach($compatibleBrands as $b)
                            <option value="{{ $b->id }}">{{ $b->validbrand_id }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label fw-bold">
                            {{ __('bundles.family') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.family_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase" id="family" name="family" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">
                            {{ __('bundles.model') }} *
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.model_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase" id="model" name="model" required>
                    </div>
                </div>
                <div class="row g-2">
                    @for($i = 1; $i <= 8; $i++)
                    <div class="col-md-3">
                        <label class="form-label small fw-bold">
                            {{ $category->{'custom_field_'.$i} ?? __('bundles.custom_field').' '.$i }}
                            <i class="fad fa-question-circle text-muted ms-1"
                               data-bs-toggle="tooltip"
                               title="{{ __('bundles.custom_field_tooltip') }}"></i>
                        </label>
                        <input type="text" class="form-control form-control-sm text-uppercase"
                               name="additional_description_{{ $i }}">
                    </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') }}
                        <i class="fad fa-question-circle text-muted ms-1"
                           data-bs-toggle="tooltip"
                           title="{{ __('bundles.description_tooltip') }}"></i>
                    </label>
                    <textarea class="form-control" name="description" rows="7" style="text-transform:uppercase;"></textarea>
                </div>
                {{-- <div>
                    <label class="form-label fw-bold">Store Description</label>
                    <textarea class="form-control" name="store_description" rows="3" style="text-transform:uppercase;"></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') }}
                    <i class="fad fa-question-circle ms-2"
                       data-bs-toggle="tooltip"
                       title="{{ __('bundles.bundle_components_tooltip') }}"></i>
                </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">
                        <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_optional') }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Save Bottom --}}
        <div class="d-flex justify-content-end gap-2 mb-4">
            <a href="{{ route('products.classification.index') }}" class="btn btn-secondary">
                <i class="fad fa-times me-1"></i>{{ __('bundles.cancel') }}
            </a>
            <button type="button" class="btn btn-success" onclick="confirmSave()">
                <i class="fad fa-save me-1"></i>{{ __('bundles.save_kit') }}
            </button>
        </div>

    </form>
</div>

{{-- ============================================================ --}}
{{-- MODAL: ¿Nuevo o Existente? --}}
{{-- ============================================================ --}}
<div class="modal fade" id="modalBaseType" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fad fa-layer-group me-2"></i>{{ __('bundles.base_product_title') }}</h5>
            </div>
            <div class="modal-body text-center py-4">
                <p class="mb-4 fs-6">{{ __('bundles.is_base_product') }}</p>
                <div class="d-grid gap-3">
                    <button type="button" class="btn btn-primary btn-lg" id="btnBaseNew">
                        <i class="fad fa-plus-circle fa-2x d-block mb-2"></i>
                        <strong>{{ __('bundles.new_product') }}</strong>
                        <small class="d-block text-white-50">{{ __('bundles.new_product_hint') }}</small>
                    </button>
                    <button type="button" class="btn btn-outline-primary btn-lg" id="btnBaseExisting">
                        <i class="fad fa-search fa-2x d-block mb-2"></i>
                        <strong>{{ __('bundles.existing_product') }}</strong>
                        <small class="d-block text-muted">{{ __('bundles.existing_product_hint') }}</small>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ============================================================ --}}
{{-- MODAL: Search Existing Base Product --}}
{{-- ============================================================ --}}
<div class="modal fade" id="modalSearchBase" tabindex="-1" data-bs-backdrop="static">
    <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-search me-2"></i>{{ __('bundles.select_base_product') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-2">
                        <select class="form-select form-select-sm" id="baseFilterGroup">
                            <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="baseFilterCategory" disabled>
                            <option value="">{{ __('bundles.all_categories') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select form-select-sm" id="baseFilterBrand">
                            <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">
                        <select class="form-select form-select-sm" id="baseFilterFamily">
                            <option value="">{{ __('bundles.all_families') }}</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <input type="text" class="form-control form-select-sm" id="baseFilterSearch" placeholder="{{ __('bundles.name_or_sku') }}">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary btn-sm w-100" type="button" id="btnSearchBase">
                            <i class="fad fa-search me-1"></i>{{ __('bundles.search') }}
                        </button>
                    </div>
                </div>

                <div class="table-responsive" style="max-height:350px;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.family') }}</th>
                                <th>{{ __('bundles.sku') }}</th>
                                <th width="80"></th>
                            </tr>
                        </thead>
                        <tbody id="baseSearchResults">
                            <tr><td colspan="6" 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>
        </div>
    </div>
</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">
                    <input type="hidden" id="compSelectedSku">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-bold">
                                {{ __('bundles.quantity') }} *
                                <i class="fad fa-question-circle text-muted ms-1"
                                   data-bs-toggle="tooltip"
                                   title="{{ __('bundles.quantity_tooltip') }}"></i>
                            </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') }}
                                <i class="fad fa-question-circle text-muted ms-1"
                                   data-bs-toggle="tooltip"
                                   title="{{ __('bundles.notes_tooltip') }}"></i>
                            </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 Save --}}
{{-- ============================================================ --}}
<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_save_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">
                {{-- KIT Info --}}
                <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.group_code') }}</small>
                        <span class="badge bg-primary fw-normal" id="confirmCode"></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>

                <hr style="border-color: rgba(255,255,255,0.15)">

                {{-- Components --}}
                <div class="d-flex align-items-center mb-2">
                    <small class="text-white opacity-50 text-uppercase me-2">{{ __('bundles.components') }}</small>
                    <span class="badge bg-info" id="confirmCount">0</span>
                </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-success waves-effect waves-themed" id="btnConfirmSave">
                    <i class="fad fa-check me-1"></i>{{ __('bundles.confirm_save') }}
                </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>
let components = [];
let compSelected = null;
let baseIsExisting = false;
let baseDescription = '';

$(document).ready(function() {

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

    // Show initial modal
    new bootstrap.Modal(document.getElementById('modalBaseType')).show();

    // Pre-filter base search modal with corresponding product group/category
    const preGroupId    = {{ $productGroup->id ?? 'null' }};
    const preCategoryId = {{ $productCategory->id ?? 'null' }};
    const preGroupName  = '{{ $productGroup->es_name ?? '' }}';
    const preCatName    = '{{ $productCategory->name ?? '' }}';

    if (preGroupId) {
        $('#baseFilterGroup').val(preGroupId).prop('disabled', true);
        loadCategories(preGroupId, '#baseFilterCategory', function() {
            if (preCategoryId) $('#baseFilterCategory').val(preCategoryId).prop('disabled', true);
        });
    }

    // Choice: New product
    $('#btnBaseNew').on('click', function() {
        baseIsExisting = false;
        bootstrap.Modal.getInstance(document.getElementById('modalBaseType')).hide();
    });

    // Choice: Existing product
    $('#btnBaseExisting').on('click', function() {
        baseIsExisting = true;
        bootstrap.Modal.getInstance(document.getElementById('modalBaseType')).hide();
        new bootstrap.Modal(document.getElementById('modalSearchBase')).show();
    });

    // ============================================================
    // BASE PRODUCT SEARCH (existing)
    // ============================================================

    // Group filter → load categories
    $('#baseFilterGroup').on('change', function() {
        loadCategories($(this).val(), '#baseFilterCategory');
    });

    // Autocomplete: search while typing (base modal)
    let baseTimer;
    $('#baseFilterSearch').on('keyup', function() {
        clearTimeout(baseTimer);
        baseTimer = setTimeout(searchBase, 400);
    });

    // Search base on button click
    $('#btnSearchBase').on('click', searchBase);

    function searchBase() {
        const params = {
            _token: $('meta[name="csrf-token"]').attr('content'),
            search: $('#baseFilterSearch').val(),
            type: 'product',
            group_id: $('#baseFilterGroup').val(),
            category_id: $('#baseFilterCategory').val(),
            brand_id: $('#baseFilterBrand').val()
        };
        $('#baseSearchResults').html('<tr><td colspan="6" 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 = res.products || [];
            if (!items.length) {
                $('#baseSearchResults').html('<tr><td colspan="6" 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>${item.family || '-'}</td>
                    <td><code>${item.sku || '-'}</code></td>
                    <td><button type="button" class="btn btn-sm btn-success btnSelectBase"
                        data-id="${item.id}" data-name="${item.name}" 
                        data-brand="${item.brand_id || ''}"
                        data-family="${encodeURIComponent(item.family || '')}" 
                        data-model="${encodeURIComponent(item.model || '')}"
                        data-sku="${item.sku || ''}"
                        data-productcode="${item.product_code || ''}"
                        data-description="${encodeURIComponent(item.description || '')}">
                        <i class="fad fa-check me-1"></i>{{ __('bundles.select_btn') }}</button>
                        <input type="hidden" id="cf1_temp" value="${item.cf1 || ''}">
                        <input type="hidden" id="cf2_temp" value="${item.cf2 || ''}">
                        <input type="hidden" id="cf3_temp" value="${item.cf3 || ''}">
                        <input type="hidden" id="cf4_temp" value="${item.cf4 || ''}">
                        <input type="hidden" id="cf5_temp" value="${item.cf5 || ''}">
                        <input type="hidden" id="cf6_temp" value="${item.cf6 || ''}">
                        <input type="hidden" id="cf7_temp" value="${item.cf7 || ''}">
                        <input type="hidden" id="cf8_temp" value="${item.cf8 || ''}">
                    </td>
                </tr>`;
            });
            $('#baseSearchResults').html(html);
        });
    }

    // Select base product → pre-fill form and lock fields
    $(document).on('click', '.btnSelectBase', function() {
        const id          = $(this).data('id');
        const name        = $(this).data('name');
        const brandId     = $(this).data('brand');
        const family      = decodeURIComponent($(this).data('family') || '');
        const model       = decodeURIComponent($(this).data('model') || '');
        const sku         = $(this).data('sku');
        const productCode = $(this).data('productcode') || '';
        const description = decodeURIComponent($(this).data('description') || '');
        const catId       = '{{ $category->id }}';
        const groupId     = '{{ $category->group_id }}';

        // KIT name = "KIT DE " + original name
        $('#product_name').val('KIT DE ' + name);

        // Pre-fill and lock: Brand, Family, Model
            $('#brand').val(brandId).prop('disabled', true).css('background-color', '#e9ecef');
            $('#family').val(family ? family.toUpperCase() : '').prop('readonly', true).css('background-color', '#e9ecef');
            $('#model').val(model ? model.toUpperCase() : '').prop('readonly', true).css('background-color', '#e9ecef');

            // Pre-fill and lock: Descriptions
            baseDescription = description ? description.toUpperCase() : '';
            $('textarea[name="description"]').val(baseDescription).prop('readonly', true).css('background-color', '#e9ecef');
            $('textarea[name="store_description"]').prop('readonly', true).css('background-color', '#e9ecef');

            // Pre-fill and lock: Custom fields 1-8
            for (let i = 1; i <= 8; i++) {
                const cfVal = $('#cf' + i + '_temp').val() || '';
                $(`[name="additional_description_${i}"]`)
                    .val(cfVal ? cfVal.toUpperCase() : '')
                    .prop('readonly', true)
                    .css('background-color', '#e9ecef');
            }

            // Hidden brand_id
            if ($('#brand_hidden').length === 0) {
                $('#bundleForm').append(`<input type="hidden" id="brand_hidden" name="brand_id" value="${brandId}">`);
            } else {
                $('#brand_hidden').val(brandId);
            }

            // Fill and LOCK SKU and Product Code
            const skuVal = 'KIT-' + sku;
            const pcVal  = productCode ? 'BDL-' + productCode : '';
            $('#sku').val(skuVal).prop('readonly', true).css('background-color', '#e9ecef');
            if (pcVal) $('#product_code').val(pcVal).prop('readonly', true).css('background-color', '#e9ecef');

            // Add base as first component
            components = components.filter(c => !c.is_base);
            components.unshift({
                item_id: id, item_type: 'product', name: name,
                sku: sku, quantity: 1, description: '{{ __('bundles.base_product_word') }}', is_base: true
            });
            renderComponents();

            bootstrap.Modal.getInstance(document.getElementById('modalSearchBase')).hide();
            showToast('success', `{{ __('bundles.base_prefix') }} KIT DE ${name}`);
    });

    // ============================================================
    // KIT NAME AUTO-BUILD
    // ============================================================
    function updateKitName() {
        const keyName = '{{ $keyName }}';
        const brand = $('#brand option:selected').text().trim();
        const family = $('#family').val().trim().toUpperCase();
        const model = $('#model').val().trim().toUpperCase();
        const parts = [keyName];
        if (brand && brand !== '{{ __('bundles.select') }}') parts.push(brand);
        if (family) parts.push(family);
        if (model) parts.push(model);
        $('#product_name').val(parts.join(' '));
    }

    updateKitName();
    $('#brand, #family, #model').on('input change', updateKitName);

    // ============================================================
    // COMPONENTS SEARCH (add component modal)
    // ============================================================
    $('#compFilterGroup').on('change', function() {
        loadCategories($(this).val(), '#compFilterCategory');
    });

    // Autocomplete: search while typing (components modal)
    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; }
        components.push({
            item_id: compSelected.id, item_type: compSelected.type,
            name: compSelected.name, sku: compSelected.sku,
            quantity: qty, description: $('#compNotes').val() || null, is_base: false
        });
        renderComponents();
        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>');
    }

    // ============================================================
    // SHARED: Load categories by group
    // ============================================================
    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.filter(c => !c.name.startsWith('KIT')).forEach(c => {
                    $(targetSelect).append(`<option value="${c.id}">${c.name}</option>`);
                });
            }
            $(targetSelect).prop('disabled', false);
            if (callback) callback();
        });
    }

    // ============================================================
    // RENDER COMPONENTS TABLE
    // ============================================================
    function renderComponents() {
        if (!components.length) {
            $('#componentsList').html('<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_optional') }}</td></tr>');
        } else {
            let html = '';
            components.forEach((c, idx) => {
                const isBase = c.is_base;
                html += `<tr class="${isBase ? 'table-warning' : ''}">
                    <td>${idx + 1}${isBase ? ' <span class="badge bg-warning text-dark">BASE</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><small class="text-muted">${c.description || '-'}</small></td>
                    <td>${!isBase ? `<button type="button" class="btn btn-sm btn-danger" onclick="removeComponent(${idx})"><i class="fad fa-trash"></i></button>` : ''}</td>
                </tr>`;
            });
            $('#componentsList').html(html);
        }

        // Update description dynamically
        updateDescription();
    }

    function updateDescription() {
        const baseDesc = baseDescription; // original product description
        const additionals = components.filter(c => !c.is_base);

        let fullDesc = baseDesc || '';

        if (additionals.length > 0) {
            if (fullDesc) fullDesc += '\n\n';
            fullDesc += 'INCLUYE:\n';
            additionals.forEach((c, idx) => {
                fullDesc += `${idx + 1}. ${c.name} (x${c.quantity})`;
                if (c.description && c.description !== '{{ __('bundles.base_product_word') }}') {
                    fullDesc += ` - ${c.description}`;
                }
                fullDesc += '\n';
            });
        }

        $('textarea[name="description"]').val(fullDesc.toUpperCase());
    }

    // SmartAdmin - Confirm modal (static)
    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.removeComponent = function(idx) {
        if (components[idx] && components[idx].is_base) { showAlert('{{ __('bundles.cannot_remove_base') }}', 'warning'); return; }
        showConfirm('{{ __('bundles.remove_component') }}', function() {
            components.splice(idx, 1); renderComponents();
        });
    };

    // ============================================================
    // VALIDATIONS
    // ============================================================
    let skuTimer;
    $('#sku').on('input', function() {
        this.value = this.value.toUpperCase();
        clearTimeout(skuTimer);
        if ($(this).val().length < 3) return;
        skuTimer = setTimeout(() => {
            $.get(`/products/check-unique/sku/${$(this).val()}`, function(data) {
                $('#sku').toggleClass('is-invalid', !data.unique);
                $('#sku_error').toggleClass('d-none', data.unique);
            });
        }, 500);
    });

    $('#product_code, #family, #model').on('input', function() { this.value = this.value.toUpperCase(); });
    $('#description, #store_description').on('input', function() {
        const pos = this.selectionStart;
        this.value = this.value.toUpperCase();
        this.setSelectionRange(pos, pos);
    });

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

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

        if (isChecked && currentBarcode) {
            checkbox.prop('checked', false);
            showConfirm('{{ __('bundles.barcode_replace_confirm') }}', function() {
                checkbox.prop('checked', true);
                applyChange();
            });
        } else if (!isChecked && currentBarcode) {
            checkbox.prop('checked', true);
            showConfirm('{{ __('bundles.barcode_remove_confirm') }}', function() {
                checkbox.prop('checked', false);
                applyChange();
            });
        } else {
            applyChange();
        }
    });

    // ============================================================
    // CONFIRM & SAVE
    // ============================================================
    // Uses project's own notification system
    window.showAlert = function(message, type = 'error') {
        showNotification(message, type);
    };

    window.confirmSave = function() {
        if ($('.is-invalid').length) { showAlert('{{ __('bundles.fix_validation') }}'); return; }
        if (!$('#sku').val()) { showAlert('{{ __('bundles.sku_required') }}'); return; }
        if (!$('#brand').val()) { showAlert('{{ __('bundles.brand_required') }}'); return; }
        if (!$('#barcode').val()) { showAlert('{!! __('bundles.barcode_required') !!}', 'warning'); return; }

        $('#confirmName').text($('#product_name').val());
        $('#confirmCode').text($('#group_code').val());
        $('#confirmSku').text($('#sku').val());
        $('#confirmBrand').text($('#brand option:selected').text());
        $('#confirmCount').text(components.length);

        let compHtml = '';
        if (components.length) {
            compHtml = '<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);">';
            compHtml += `<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>`;
            components.forEach((c, i) => {
                const baseLabel = c.is_base ? ' <span class="badge bg-warning text-dark ms-1 small">BASE</span>' : '';
                compHtml += `<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}${baseLabel}</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>`;
            });
            compHtml += '</tbody></table>';
        } else {
            compHtml = '<p style="color:rgba(255,255,255,0.5)"><em>{{ __('bundles.no_components_word') }}</em></p>';
        }
        $('#confirmCompList').html(compHtml);

        new bootstrap.Modal(document.getElementById('modalConfirmSave')).show();
    };

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

    // Uses project's own notification system
    window.showToast = function(type, message) {
        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