{{-- New-Unity ERP | Modules/Products/Resources/Views/products/edit.blade.php | v1.6 | 23/07/2026 --}}
{{-- v1.6 — text-uppercase reemplazado por uppercase-input en campos editables (JS global convierte el valor real). --}}
{{-- v1.5 — Campo "Número de Parte" muestra product_number en vez de $product->id. --}}
{{-- v1.4 — Detecta desincronización de key_name con la categoría al cargar el form. --}}
{{--         Banner de aviso con [Update now] — campo key_name readonly y protegido. --}}
{{-- v1.3 — Material Type informativo (readonly). v1.2 — material_type. v1.1 — SAT Unity. --}}
@extends('layouts.vertical')

@section('content')
<style>
    input[readonly], textarea[readonly], select[disabled] {
        background-color: #e9ecef !important;
        cursor: not-allowed;
        opacity: 1;
    }
    .lockable-field {
        background-color: #e9ecef !important;
        pointer-events: none;
        user-select: none;
    }
    .lockable-field.unlocked {
        background-color: #fff !important;
        pointer-events: auto !important;
        user-select: auto !important;
        cursor: text;
        border-color: #ffc107 !important;
    }
    .lockable-select {
        background-color: #e9ecef !important;
        pointer-events: none;
    }
    .lockable-select.unlocked {
        background-color: #fff !important;
        pointer-events: auto !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-edit me-2"></i>{{ __('products.edit-product-title') }}</h1>
            <p class="text-muted mb-0">{{ __('products.update-product-info') }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('products.show', $product->id) }}" class="btn btn-secondary btn-sm">
                <i class="fad fa-times me-1"></i>{{ __('products.cancel') }}
            </a>
            <button type="submit" form="productForm" class="btn btn-warning btn-sm">
                <i class="fad fa-save me-1"></i>{{ __('products.update-product') }}
            </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') }}">{{ __('products.breadcrumb-products') }}</a></li>
            <li class="breadcrumb-item active">{{ __('products.breadcrumb-edit') }} {{ $product->product_code }}</li>
        </ol>
    </nav>

    {{-- Banner: key_name desincronizado con la categoría --}}
    @if($product->key_name !== $product->category?->key_name)
    <div class="alert alert-warning d-flex align-items-center justify-content-between mb-3" id="keyNameSyncBanner">
        <div class="d-flex align-items-center">
            <i class="fas fa-exclamation-triangle fa-lg me-3 text-warning"></i>
            <div>
                <strong>{{ __('products.keyname-out-of-sync') }}</strong>
                <br>
                <small>
                    {{ __('products.keyname-category') }} <strong class="text-success">{{ $product->category?->key_name }}</strong>
                    &nbsp;·&nbsp;
                    {{ __('products.keyname-this-product') }} <strong class="text-danger">{{ $product->key_name }}</strong>
                </small>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-success btn-sm" id="btnSyncKeyName">
                <i class="fas fa-sync me-1"></i>{{ __('products.update-now') }}
            </button>
            <button type="button" class="btn btn-secondary btn-sm"
                    onclick="$('#keyNameSyncBanner').remove()">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    @endif

    {{-- 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>
            {!! __('products.locked-fields-notice') !!}
        </div>
    </div>

    {{-- Main Form --}}
    <div class="card">
        <div class="card-header bg-warning text-dark">
            <h5 class="card-title mb-0"><i class="fad fa-edit me-2"></i>{{ __('products.product-information') }}</h5>
        </div>
        <div class="card-body">
            <form id="productForm" action="{{ route('products.update', $product->id) }}" method="POST">
                @csrf
                @method('PUT')

                {{-- Section: Basic Information --}}
                <div class="mb-4">
                    <h5 class="text-primary mb-3">
                        <i class="fad fa-info-circle me-2"></i>{{ __('products.section-description') }}
                    </h5>
                    <hr class="mb-4" style="border-top: 2px solid #dee2e6;">
                </div>

                <div class="row mb-3">
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.part-number') }}</label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               value="{{ $product->product_number }}" readonly>
                    </div>
                    <div class="col-md-10">
                        <label class="form-label fw-bold">{{ __('products.product-name-label') }} *</label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               id="product_name" name="product_name"
                               value="{{ $product->product_name }}" readonly>
                        <small class="text-muted">{{ __('products.auto-generated') }}</small>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.sat-code') }}</label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               value="{{ $product->tax_code }}" readonly>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('products.sat-unity') }} *
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="unity"
                               data-type="select"
                               title="{{ __('products.unlock-tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        <select class="form-select form-select-sm lockable-select"
                                name="unity" id="unity">
                            @foreach($satUnities as $code => $label)
                                <option value="{{ $code }}" {{ $product->unity == $code ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted field-hint-unity">{{ __('products.field-locked-hint') }}</small>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.group-code-label') }}</label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               value="{{ $product->group_code }}" readonly>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">
                            {{ __('products.key-name') }}
                            @if($product->key_name !== $product->category?->key_name)
                                <span class="badge bg-warning ms-1" style="font-size:9px;"
                                      title="{{ __('products.out-of-sync-title') }}">{{ __('products.outdated-badge') }}</span>
                            @endif
                        </label>
                        <input type="text" class="form-control form-control-sm bg-light"
                               id="displayKeyName"
                               value="{{ $product->key_name }}" readonly>
                        <input type="hidden" name="key_name" id="keyNameHidden"
                               value="{{ $product->key_name }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.product-code') }} *</label>
                        <input type="text" class="form-control form-control-sm bg-light text-uppercase"
                               value="{{ $product->product_code }}" readonly>
                        <input type="hidden" name="product_code" value="{{ $product->product_code }}">
                        <small class="text-muted">{{ __('products.cannot-be-modified') }}</small>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.sku') }} *</label>
                        <input type="text" class="form-control form-control-sm bg-light text-uppercase"
                               value="{{ $product->sku }}" readonly>
                        <input type="hidden" name="sku" value="{{ $product->sku }}">
                        <small class="text-muted">{{ __('products.cannot-be-modified') }}</small>
                    </div>
                </div>

                {{-- Barcode con candado --}}
                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('products.barcode-label') }}
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="barcode"
                               title="{{ __('products.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;">
                                <input class="form-check-input" type="checkbox" id="generic_barcode" name="generic_barcode">
                                <label class="form-check-label small text-muted" for="generic_barcode">{{ __('products.use-generic-barcode') }}</label>
                            </div>
                        @endif
                        <input type="text" class="form-control form-control-sm uppercase-input lockable-field"
                               id="barcode" name="barcode"
                               value="{{ $product->barcode }}"
                               placeholder="{{ $product->barcode ? '' : __('products.barcode-empty-placeholder') }}">
                        <small class="text-muted field-hint-barcode">
                            @if(!$product->barcode)
                                {!! __('products.barcode-missing-hint') !!}
                            @else
                                {{ __('products.field-locked-hint') }}
                            @endif
                        </small>
                    </div>
                </div>

                {{-- Section: Product Details --}}
                <div class="mb-4 mt-5">
                    <h5 class="text-success mb-3">
                        <i class="fad fa-tag me-2"></i>{{ __('products.section-details') }}
                    </h5>
                    <hr class="mb-4" style="border-top: 2px solid #dee2e6;">
                </div>

                <div class="row mb-3">
                    {{-- Brand con candado --}}
                    <div class="col-md-2">
                        <label class="form-label fw-bold d-flex align-items-center gap-2">
                            {{ __('products.brand') }} *
                            <i class="fad fa-lock text-danger lock-icon"
                               data-target="brand"
                               data-type="select"
                               title="{{ __('products.unlock-tooltip') }}"
                               style="cursor:pointer; font-size:0.85rem;"></i>
                        </label>
                        <select class="form-select form-select-sm lockable-select"
                                name="brand_id" id="brand" required>
                            @foreach($compatibleBrands as $brand)
                                <option value="{{ $brand->id }}" {{ $product->brand_id == $brand->id ? 'selected' : '' }}>
                                    {{ $brand->validbrand_id }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted field-hint-brand">{{ __('products.field-locked-hint') }}</small>
                    </div>

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

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

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

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

                {{-- Section: Descriptions --}}
                <div class="mb-4 mt-5">
                    <h5 class="text-warning mb-3">
                        <i class="fad fa-align-left me-2"></i>{{ __('products.section-descriptions') }}
                    </h5>
                    <hr class="mb-4" style="border-top: 2px solid #dee2e6;">
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label fw-bold">{{ __('products.description-quotations') }}</label>
                        <textarea class="form-control" name="description" id="description" rows="4">{{ $product->description }}</textarea>
                        <small class="text-muted">{{ __('products.description-quotations-hint') }}</small>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-12">
                        <label class="form-label fw-bold">{{ __('products.store-description-label') }}</label>
                        <textarea class="form-control" name="store_description" rows="4">{{ $product->store_description }}</textarea>
                        <small class="text-muted">{{ __('products.store-description-hint') }}</small>
                    </div>
                </div>

                {{-- Form Actions --}}
                <div class="row mt-4">
                    <div class="col-md-12 text-end">
                        <a href="{{ route('products.show', $product->id) }}" class="btn btn-secondary">
                            <i class="fad fa-times me-1"></i>{{ __('products.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-warning">
                            <i class="fad fa-save me-1"></i>{{ __('products.update-product') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    const keyName = '{{ $product->key_name }}';

    // ── Notificaciones desde sesión Laravel ─────────────────────────
    @if(session('success'))
        showNotification('{{ session('success') }}', 'success');
    @endif
    @if(session('error'))
        showNotification('{{ session('error') }}', 'error');
    @endif
    @if(session('warning'))
        showNotification('{{ session('warning') }}', 'warning');
    @endif

    // ── Lógica de candados ──────────────────────────────────────────
    $('.lock-icon').on('click', function() {
        const targetId = $(this).data('target');
        const isSelect = $(this).data('type') === 'select';
        const $field   = $('#' + targetId);
        const $icon    = $(this);
        const $hint    = $('.field-hint-' + targetId);
        const isLocked = !$field.hasClass('unlocked');

        if (isLocked) {
            $field.addClass('unlocked').focus();
            $icon.removeClass('fa-lock text-danger').addClass('fa-lock-open text-success');
            $hint.html('{{ __('products.field-unlocked-hint') }}');
            if (targetId === 'barcode') $('#generic_barcode_row').show();
        } else {
            $field.removeClass('unlocked');
            $icon.removeClass('fa-lock-open text-success').addClass('fa-lock text-danger');
            if (targetId === 'barcode' && !$('#barcode').val()) {
                $hint.html('{!! __('products.barcode-missing-hint') !!}');
            } else {
                $hint.html('{{ __('products.field-locked-hint') }}');
            }
            if (targetId === 'barcode') $('#generic_barcode_row').hide();
        }
    });

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

    // ── Rebuild product name ────────────────────────────────────────
    function updateProductName() {
        let parts = [];
        if (keyName) parts.push(keyName.toUpperCase());
        const brand = $('#brand option:selected').text().trim();
        if (brand && $('#brand').val() !== '') parts.push(brand.toUpperCase());
        const family = $('#family').val().trim();
        if (family) parts.push(family.toUpperCase());
        const model = $('#model').val().trim();
        if (model) parts.push(model.toUpperCase());
        for (let i = 1; i <= 8; i++) {
            const val = $(`#additional_description_${i}`).val().trim();
            if (val) parts.push(val.toUpperCase());
        }
        $('#product_name').val(parts.join(' '));
    }

    $('#brand').on('change', updateProductName);
    $('#family, #model').on('keyup', function() {
        $(this).val($(this).val().toUpperCase());
        updateProductName();
    });
    for (let i = 1; i <= 8; i++) {
        $(`#additional_description_${i}`).on('keyup', function() {
            $(this).val($(this).val().toUpperCase());
            updateProductName();
        });
    }

    // ── Generic barcode checkbox ────────────────────────────────────
    $('#generic_barcode').on('change', function() {
        if ($(this).is(':checked')) {
            const groupCode = '{{ $product->group_code }}'.replaceAll('-', '');
            $('#barcode').val(groupCode.padStart(13, '0'));
        } else {
            $('#barcode').val('');
        }
    });

    // ── Validación unique barcode ───────────────────────────────────
    $('#barcode').on('blur', function() {
        const value = $(this).val().trim();
        if (value && value !== '{{ $product->barcode }}' && !$('#generic_barcode').is(':checked')) {
            $.get(`/products/check-unique/barcode/${value}`, function(data) {
                if (!data.unique) {
                    $('#barcode').addClass('is-invalid');
                } else {
                    $('#barcode').removeClass('is-invalid');
                }
            });
        }
    });

    // ── Prevenir submit si hay errores ──────────────────────────────
    $('#productForm').on('submit', function(e) {
        if ($('.is-invalid').length > 0) {
            e.preventDefault();
            showNotification('{{ __('products.fix-validation-errors') }}', 'error');
            return false;
        }
    });

    // ── Sincronizar key_name con la categoría ────────────────────────
    // Solo se activa si hay desincronización (banner visible)
    const categoryKeyName = '{{ $product->category?->key_name }}';
    const productKeyName  = '{{ $product->key_name }}';

    $('#btnSyncKeyName').on('click', function() {
        if (!categoryKeyName) return;

        // Actualizar el campo visual y el hidden
        $('#displayKeyName').val(categoryKeyName);
        $('#keyNameHidden').val(categoryKeyName);

        // Reconstruir el product_name con el nuevo key_name
        let parts = [];
        parts.push(categoryKeyName.toUpperCase());
        const brand = $('#brand option:selected').text().trim();
        if (brand && $('#brand').val() !== '') parts.push(brand.toUpperCase());
        const family = $('#family').val().trim();
        if (family) parts.push(family.toUpperCase());
        const model = $('#model').val().trim();
        if (model) parts.push(model.toUpperCase());
        for (let i = 1; i <= 8; i++) {
            const val = $(`#additional_description_${i}`).val().trim();
            if (val) parts.push(val.toUpperCase());
        }
        $('#product_name').val(parts.join(' '));

        // Remover el banner y mostrar confirmación
        $('#keyNameSyncBanner').remove();
        showNotification('{{ __('products.keyname-updated') }}', 'success');
    });

    // ── Actualizar product_name usa el key_name actual (hidden) ──────
    // Sobrescribir updateProductName para que use el hidden actualizado
    function updateProductName() {
        let parts = [];
        const currentKeyName = $('#keyNameHidden').val() || keyName;
        if (currentKeyName) parts.push(currentKeyName.toUpperCase());
        const brand = $('#brand option:selected').text().trim();
        if (brand && $('#brand').val() !== '') parts.push(brand.toUpperCase());
        const family = $('#family').val().trim();
        if (family) parts.push(family.toUpperCase());
        const model = $('#model').val().trim();
        if (model) parts.push(model.toUpperCase());
        for (let i = 1; i <= 8; i++) {
            const val = $(`#additional_description_${i}`).val().trim();
            if (val) parts.push(val.toUpperCase());
        }
        $('#product_name').val(parts.join(' '));
    }
});
</script>
@endsection