{{-- New-Unity ERP | Modules/Products/Resources/Views/products/create.blade.php | v1.9 | 23/07/2026 --}}
{{-- v1.9 — text-uppercase reemplazado por uppercase-input (valor real uppercased via JS global). Modelo también marcado. --}}
{{-- v1.8 — material_type dinámico heredado del Group (fuente de verdad). Campo readonly con etiqueta descriptiva. Marcas ya filtradas desde el Controller. --}}
{{-- v1.7 — Material Type visible pero readonly — asignado automáticamente como TR/MC. --}}
{{-- v1.6 — Material Type hardcodeado TR (campo oculto) — cada módulo asigna su tipo. --}}
{{-- v1.5 — Agrega Material Type en fila 1; SAT Code reducido a col-2; barcode EAN-13. --}}
{{-- v1.1 — Agrega campo SAT Unity (clave de unidad) obligatorio en Product Details. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    {{-- Page Header --}}
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-box me-2"></i>{{ __('products.new-product') }}</h1>
            <p class="text-muted mb-0">
                {{ __('products.create-product-lead') }} &mdash;
                <span class="fw-bold text-primary">{{ $group->es_name }}</span>
                <span class="text-muted mx-1">/</span>
                <span class="fw-bold">{{ $category->name }}</span>
            </p>
        </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.classification.index') }}">{{ __('products.breadcrumb-classification') }}</a></li>
            <li class="breadcrumb-item">{{ $group->es_name }}</li>
            <li class="breadcrumb-item">{{ $category->name }}</li>
            <li class="breadcrumb-item active">{{ __('products.breadcrumb-new-product') }}</li>
        </ol>
    </nav>

    {{-- Main Form --}}
    <div class="card">
        <div class="card-header bg-primary text-white">
            <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.store') }}" method="POST">
                @csrf

                {{-- Hidden Fields --}}
                <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 }}">
                {{-- material_type viene del servidor (Group→resolveMaterialType) — NO editable por el usuario --}}
                <input type="hidden" name="material_type" value="{{ $materialType }}">

                {{-- ════════════════════════════════════════════════════════════ --}}
                {{-- 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>

                {{-- Row 1: Product Name | SAT Code | SAT Unity | Material Type --}}
                <div class="row mb-3">
                    <div class="col-md-7">
                        <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="{{ $keyName }}"
                               readonly
                               required>
                        <small class="text-muted">{{ __('products.auto-generated') }}</small>
                    </div>
                    <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="{{ $code }}"
                               readonly>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.sat-unity') }} *</label>
                        <select class="form-select form-select-sm" name="unity" id="unity" required>
                            <option value="">{{ __('products.select') }}</option>
                            @foreach($satUnities as $satCode => $satLabel)
                                <option value="{{ $satCode }}" {{ old('unity', 'H87') == $satCode ? 'selected' : '' }}>
                                    {{ $satLabel }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    {{-- Material Type: readonly — heredado automáticamente del Grupo --}}
                    <div class="col-md-1">
                        <label class="form-label fw-bold small">{{ __('products.material-type') }}</label>
                        <input type="text"
                               class="form-control form-control-sm bg-light text-center fw-bold"
                               value="{{ $materialType }}"
                               readonly
                               title="{{ $materialTypeLabel }}">
                        <small class="text-muted d-block text-truncate" title="{{ $materialTypeLabel }}">
                            {{ $materialTypeLabel }}
                        </small>
                    </div>
                </div>

                {{-- Row 2: Group Code | Part Number | Key Name | Product Code | SKU --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.group-code-label') }} *</label>
                        <input type="text"
                               class="form-control form-control-sm bg-light"
                               id="group_code"
                               value="{{ $group->id }}-{{ $category->id }}-{{ $productNumber }}"
                               readonly>
                        <small class="text-muted">{{ __('products.group-category-part') }}</small>
                    </div>
                    <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="{{ $productNumber }}"
                               readonly>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.key-name') }} *</label>
                        <input type="text"
                               class="form-control form-control-sm bg-light"
                               value="{{ $keyName }}"
                               readonly>
                    </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 uppercase-input"
                               name="product_code"
                               id="product_code"
                               autocomplete="on"
                               required>
                        <small class="text-danger d-none" id="product_code_error">{{ __('products.product-code-exists') }}</small>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.sku') }} *</label>
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               name="sku"
                               id="sku"
                               autocomplete="on"
                               required>
                        <small class="text-danger d-none" id="sku_error">{{ __('products.sku-exists') }}</small>
                    </div>
                </div>

                {{-- Row 3: Barcode --}}
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.barcode-label') }}</label>
                        <div class="form-check form-check-inline float-end">
                            <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') }}
                            </label>
                        </div>
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               id="barcode"
                               name="barcode"
                               autocomplete="on">
                        <small id="msg_generic_barcode" class="text-warning d-none">
                            {{ __('products.using-group-code') }}
                        </small>
                        <small class="text-danger d-none" id="barcode_error">{{ __('products.barcode-exists') }}</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 — filtradas según material_type del Grupo --}}
                    <div class="col-md-2">
                        <label class="form-label fw-bold">{{ __('products.brand') }} *</label>
                        <select class="form-select form-select-sm"
                                name="brand_id"
                                id="brand"
                                autocomplete="on"
                                required>
                            <option value="">{{ __('products.select') }}</option>
                            @foreach($compatibleBrands as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->validbrand_id }}</option>
                            @endforeach
                        </select>
                        @if($compatibleBrands->isEmpty())
                            <small class="text-danger">
                                <i class="fad fa-exclamation-triangle"></i>
                                {{ __('products.no-brands-available') }} <strong>{{ $materialType }}</strong>.
                                {{ __('products.add-compatible-brands') }}
                            </small>
                        @elseif($materialType === 'FG')
                            <small class="text-info">
                                <i class="fad fa-info-circle"></i> {{ __('products.own-brands-only') }}
                            </small>
                        @else
                            <small class="text-success">
                                <i class="fad fa-check-circle"></i> {{ __('products.filtered-by') }} {{ $materialTypeLabel }}
                            </small>
                        @endif
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.family-or-category') }} *</label>
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               name="family"
                               id="family"
                               autocomplete="on"
                               required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">{{ __('products.model-or-presentation') }} *</label>
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               name="model"
                               id="model"
                               autocomplete="on"
                               required>
                    </div>
                    {{-- Additional Fields 1-2 --}}
                    <div class="col-md-2">
                        <label class="form-label fw-bold editable-label" data-field="1">
                            <i class="fad fa-pencil text-muted small"></i>
                            <span class="label-text">
                                {{ $category->custom_field_1 ?? __('products.custom-field-num').' 1' }}
                            </span>
                        </label>
                        <input type="hidden"
                               name="label_description_1"
                               id="label_description_1"
                               value="{{ $category->custom_field_1 ?? __('products.custom-field-num').' 1' }}">
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               id="additional_description_1"
                               name="additional_description_1">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold editable-label" data-field="2">
                            <i class="fad fa-pencil text-muted small"></i>
                            <span class="label-text">
                                {{ $category->custom_field_2 ?? __('products.custom-field-num').' 2' }}
                            </span>
                        </label>
                        <input type="hidden"
                               name="label_description_2"
                               id="label_description_2"
                               value="{{ $category->custom_field_2 ?? __('products.custom-field-num').' 2' }}">
                        <input type="text"
                               class="form-control form-control-sm uppercase-input"
                               id="additional_description_2"
                               name="additional_description_2">
                    </div>
                </div>

                <div class="row mb-3">
                    {{-- Additional Fields 3-8 --}}
                    @for($i = 3; $i <= 8; $i++)
                        <div class="col-md-2">
                            <label class="form-label fw-bold editable-label" data-field="{{ $i }}">
                                <i class="fad fa-pencil text-muted small"></i>
                                <span class="label-text">
                                    {{ $category->{'custom_field_'.$i} ?? __('products.custom-field-num').' '.$i }}
                                </span>
                            </label>
                            <input type="hidden"
                                   name="label_description_{{ $i }}"
                                   id="label_description_{{ $i }}"
                                   value="{{ $category->{'custom_field_'.$i} ?? __('products.custom-field-num').' '.$i }}">
                            <input type="text"
                                   class="form-control form-control-sm uppercase-input"
                                   id="additional_description_{{ $i }}"
                                   name="additional_description_{{ $i }}">
                        </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"></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"></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.by_category', $category->id) }}"
                           class="btn btn-secondary">
                            <i class="fad fa-times me-1"></i>{{ __('products.cancel') }}
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fad fa-save me-1"></i>{{ __('products.save-product') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    const keyName = $('input[name="key_name"]').val().trim();

    // ── Rebuild product name respecting FIXED positions ───────────────────────
    function updateProductName() {
        let parts = [];

        // Position 0: KEY_NAME (always first)
        if (keyName) parts.push(keyName.toUpperCase());

        // Position 1: BRAND
        const brand = $('#brand option:selected').text().trim();
        if (brand && $('#brand').val() !== '') {
            parts.push(brand.toUpperCase());
        }

        // Position 2: FAMILY
        const family = $('#family').val().trim();
        if (family) parts.push(family.toUpperCase());

        // Position 3: MODEL
        const model = $('#model').val().trim();
        if (model) parts.push(model.toUpperCase());

        // Positions 4-11: ADDITIONAL FIELDS (CAMPO1 to CAMPO8)
        for (let i = 1; i <= 8; i++) {
            const fieldValue = $(`#additional_description_${i}`).val().trim();
            if (fieldValue) {
                parts.push(fieldValue.toUpperCase());
            }
        }

        $('#product_name').val(parts.join(' '));
    }

    // ── Trigger on field changes ──────────────────────────────────────────────
    $('#brand').on('change', updateProductName);

    $('#family').on('keyup', function() {
        $(this).val($(this).val().toUpperCase());
        updateProductName();
    });

    $('#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();
        });
    }

    // ── Force uppercase ───────────────────────────────────────────────────────
    $('#product_code, #sku, #barcode').on('input', function() {
        $(this).val($(this).val().toUpperCase());
    });

    // ── Generic barcode checkbox ──────────────────────────────────────────────
    $('#generic_barcode').on('change', function() {
        if ($(this).is(':checked')) {
            const groupCode = $('#group_code').val().replaceAll('-', '');
            const ean13     = groupCode.padStart(13, '0');
            $('#barcode').val(ean13).addClass('bg-warning bg-opacity-10').prop('readonly', true).removeAttr('required');
            $('#msg_generic_barcode').removeClass('d-none');
        } else {
            $('#barcode').val('').removeClass('bg-warning bg-opacity-10').prop('readonly', false).attr('required', 'required');
            $('#msg_generic_barcode').addClass('d-none');
        }
    });

    // ── Editable labels for custom fields ────────────────────────────────────
    $('.editable-label').on('click', function() {
        const field       = $(this).data('field');
        const currentText = $(this).find('.label-text').text().trim();
        const newText     = prompt('{{ __('products.enter-label-name') }}', currentText);

        if (newText && newText !== currentText) {
            $(this).find('.label-text').text(newText);
            $(`#label_description_${field}`).val(newText);
        }
    });

    // ── AJAX unique validations ───────────────────────────────────────────────
    $('#product_code').on('blur', function() {
        const value = $(this).val().trim();
        if (!value) return;
        $.get(`/products/check-unique/product_code/${value}`, function(data) {
            if (!data.unique) {
                $('#product_code_error').removeClass('d-none');
                $('#product_code').addClass('is-invalid');
            } else {
                $('#product_code_error').addClass('d-none');
                $('#product_code').removeClass('is-invalid');
            }
        });
    });

    $('#sku').on('blur', function() {
        const value = $(this).val().trim();
        if (!value) return;
        $.get(`/products/check-unique/sku/${value}`, function(data) {
            if (!data.unique) {
                $('#sku_error').removeClass('d-none');
                $('#sku').addClass('is-invalid');
            } else {
                $('#sku_error').addClass('d-none');
                $('#sku').removeClass('is-invalid');
            }
        });
    });

    $('#barcode').on('blur', function() {
        const value = $(this).val().trim();
        if (!value || $('#generic_barcode').is(':checked')) return;
        $.get(`/products/check-unique/barcode/${value}`, function(data) {
            if (!data.unique) {
                $('#barcode_error').removeClass('d-none');
                $('#barcode').addClass('is-invalid');
            } else {
                $('#barcode_error').addClass('d-none');
                $('#barcode').removeClass('is-invalid');
            }
        });
    });

    // ── Prevent submit if validation errors ──────────────────────────────────
    $('#productForm').on('submit', function(e) {
        if ($('.is-invalid').length > 0) {
            e.preventDefault();
            showNotification('{{ __('products.fix-validation-errors') }}', 'error');
            return false;
        }
    });
});
</script>
@endsection