{{-- New-Unity ERP | Modules/Products/Resources/Views/brands/index.blade.php | v1.5 | 05/08/2026 --}}
{{-- v1.5 — Industria: checkboxes → <select> single con botón "+" e inline crear. --}}
{{-- v1.4 — Restaura botón "+" con campo inline para crear industria (AJAX, sin modal secundario) --}}
{{-- v1.3 — FIX [object Object]: industry dropdown → checkboxes many-to-many; nuevo endpoint /catalogs/industries/all --}}
{{-- v1.2 — Agrega campo industry_name (dropdown dinámico desde BD) en modal crear/editar marca --}}
{{-- v1.1 — Agrega material_types checkboxes y own_brand toggle al modal. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-tag me-2"></i>{{ __('brands.brands') }}</h1>
            <p class="text-muted mb-0">{{ __('brands.subtitle') }}</p>
        </div>
    </div>

    <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="#">{{ __('brands.breadcrumb_products') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('brands.breadcrumb_catalogs') }}</a></li>
            <li class="breadcrumb-item active">{{ __('brands.brands') }}</li>
        </ol>
    </nav>

    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0"><i class="fad fa-list me-2"></i>{{ __('brands.brands_list') }}</h5>
        </div>
        <div class="card-body">
            <button class="btn btn-primary btn-sm mb-3" onclick="openBrandModal()">
                <i class="fad fa-plus me-1"></i>{{ __('brands.new_brand') }}
            </button>

            <div class="table-responsive">
                <table id="brandsTable" class="table table-sm table-hover">
                    <thead>
                        <tr>
                            <th>{{ __('brands.col_id') }}</th>
                            <th>{{ __('brands.col_brand') }}</th>
                            <th>{{ __('brands.col_industry') }}</th>
                            <th>{{ __('brands.col_material_types') }}</th>
                            <th>{{ __('brands.col_own_brand') }}</th>
                            <th>{{ __('brands.col_logo') }}</th>
                            <th class="text-center">{{ __('brands.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Modal: Create/Edit Brand --}}
<div class="modal fade" id="brandModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="brandModalTitle">{{ __('brands.new_brand') }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="brandForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="brand_id" name="brand_id">
                <div class="modal-body">
                    <div class="row g-3">

                        {{-- Left --}}
                        <div class="col-md-7">

                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('brands.brand_name') }} <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm text-uppercase"
                                       id="validbrand_id" name="validbrand_id" required
                                       oninput="this.value=this.value.toUpperCase()"
                                       placeholder="{{ __('brands.brand_name_ph') }}">
                            </div>

                            {{-- Industria (select + crear inline) --}}
                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('brands.industry') }}</label>
                                <div class="input-group input-group-sm">
                                    <select id="brand_industry_select" name="industry_ids[]" class="form-select">
                                        <option value="">{{ __('brands.industry_ph') }}</option>
                                    </select>
                                    @can('products.industries.manage')
                                    <button type="button" class="btn btn-outline-secondary"
                                            onclick="toggleBrandNewIndustry()" title="Agregar nueva industria">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                    @endcan
                                </div>
                                @can('products.industries.manage')
                                <div id="brand_new_industry_inline" class="mt-1" style="display:none;">
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="brand_new_industry_input"
                                               class="form-control lowercase-input"
                                               placeholder="Nombre de la nueva industria" maxlength="100"
                                               autocomplete="new-password">
                                        <button type="button" class="btn btn-success btn-sm"
                                                onclick="saveBrandNewIndustry()">Agregar</button>
                                        <button type="button" class="btn btn-secondary btn-sm"
                                                onclick="toggleBrandNewIndustry()">Cancelar</button>
                                    </div>
                                </div>
                                @endcan
                                <small class="text-muted">{{ __('brands.industry_hint') }}</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">{{ __('brands.logo') }}</label>
                                <input type="file" class="form-control form-control-sm"
                                       id="logo" name="logo" accept="image/*">
                                <div id="logo_preview" class="mt-2"></div>
                            </div>

                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <label class="form-label fw-bold mb-0">{{ __('brands.product_lines') }}</label>
                                    <button type="button" class="btn btn-sm btn-link text-primary p-0"
                                            onclick="openLineModal()">
                                        <i class="fad fa-plus-circle me-1"></i>{{ __('brands.new_line') }}
                                    </button>
                                </div>
                                <div class="border rounded p-2" style="max-height:160px;overflow-y:auto;"
                                     id="product_lines_checkboxes">
                                    <div class="text-muted text-center small">{{ __('brands.loading') }}</div>
                                </div>
                            </div>

                        </div>

                        {{-- Right --}}
                        <div class="col-md-5">

                            {{-- Own Brand --}}
                            <div class="card border-warning mb-3">
                                <div class="card-header bg-warning text-dark py-2">
                                    <h6 class="mb-0 small"><i class="fas fa-star me-1"></i>{{ __('brands.own_brand') }}</h6>
                                </div>
                                <div class="card-body py-2">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox"
                                               id="own_brand" name="own_brand"
                                               value="1" role="switch">
                                        <label class="form-check-label small fw-semibold" for="own_brand">
                                            {{ __('brands.own_brand_switch') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1" style="font-size:10px;">
                                        {{ __('brands.own_brand_hint') }}
                                    </small>
                                </div>
                            </div>

                            {{-- Material Types --}}
                            <div class="card">
                                <div class="card-header bg-primary text-white py-2">
                                    <h6 class="mb-0 small"><i class="fas fa-tags me-1"></i>{{ __('brands.material_types') }}</h6>
                                </div>
                                <div class="card-body py-2">
                                    <small class="text-muted d-block mb-2" style="font-size:10px;">
                                        {{ __('brands.material_types_where') }}
                                    </small>

                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="TR" id="mt_TR" checked>
                                        <label class="form-check-label small" for="mt_TR">
                                            <strong>TR</strong> — {{ __('brands.mt_tr') }}
                                            <i class="fas fa-info-circle text-muted ms-1" style="font-size:10px;" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ __('brands.mt_tr_tooltip') }}"></i>
                                        </label>
                                    </div>
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="RM" id="mt_RM">
                                        <label class="form-check-label small" for="mt_RM">
                                            <strong>RM</strong> — {{ __('brands.mt_rm') }}
                                            <i class="fas fa-info-circle text-muted ms-1" style="font-size:10px;" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ __('brands.mt_rm_tooltip') }}"></i>
                                        </label>
                                    </div>
                                    <div class="form-check mb-1" id="fg-check-wrapper">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="FG" id="mt_FG" disabled>
                                        <label class="form-check-label small text-muted" for="mt_FG">
                                            <strong>FG</strong> — {{ __('brands.mt_fg') }}
                                            <i class="fas fa-info-circle text-muted ms-1" style="font-size:10px;" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ __('brands.mt_fg_tooltip') }}"></i>
                                            <span id="fg-lock" class="ms-1">
                                                <i class="fas fa-lock" style="font-size:9px;"></i>
                                            </span>
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox"
                                               name="material_types[]" value="SV" id="mt_SV">
                                        <label class="form-check-label small" for="mt_SV">
                                            <strong>SV</strong> — {{ __('brands.mt_sv') }}
                                            <i class="fas fa-info-circle text-muted ms-1" style="font-size:10px;" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ __('brands.mt_sv_tooltip') }}"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{{ __('brands.close') }}</button>
                    <button type="submit" class="btn btn-success btn-sm">{{ __('brands.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

@include('products::shared.product-line-modal')
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let allIndustries      = [];
let allProductLines    = [];
let selectedProductLines = [];

$(document).ready(function() {
    loadProductLines();
    loadIndustries(); // loadBrands() se llama dentro cuando las industrias ya están cargadas

    document.getElementById('brandModal').addEventListener('shown.bs.modal', function() {
        document.querySelectorAll('#brandModal [data-bs-toggle="tooltip"]').forEach(function(el) {
            var existing = bootstrap.Tooltip.getInstance(el);
            if (existing) existing.dispose();
            new bootstrap.Tooltip(el, { trigger: 'hover', placement: 'right' });
        });
    });

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

    $('#own_brand').on('change', function() {
        if ($(this).is(':checked')) {
            $('#mt_FG').prop('disabled', false).prop('checked', true);
            $('#mt_FG').closest('label').removeClass('text-muted');
            $('#fg-lock').html('<i class="fas fa-unlock text-success" style="font-size:9px;"></i>');
            $('#mt_TR').prop('checked', false).prop('disabled', true);
            $('#mt_RM').prop('checked', false).prop('disabled', true);
            $('#mt_SV').prop('checked', false).prop('disabled', true);
        } else {
            $('#mt_FG').prop('disabled', true).prop('checked', false);
            $('#mt_FG').closest('label').addClass('text-muted');
            $('#fg-lock').html('<i class="fas fa-lock" style="font-size:9px;"></i>');
            $('#mt_TR').prop('disabled', false).prop('checked', true);
            $('#mt_RM').prop('disabled', false);
            $('#mt_SV').prop('disabled', false);
        }
    });
});

// Cargar industrias desde catálogo brand_industries
function loadIndustries() {
    $.get('/products/catalogs/industries/all', function(data) {
        allIndustries = data; // [{id, name, description}]
        renderIndustrySelect('');
    }).always(function() {
        loadBrands(); // siempre cargar marcas, incluso si las industrias fallan
    });
}

// Renderizar opciones del select de industria (single selection)
function renderIndustrySelect(selectedId) {
    var options = '<option value="">{{ __('brands.industry_ph') }}</option>';
    allIndustries.forEach(function(ind) {
        var sel = (ind.id == selectedId) ? 'selected' : '';
        options += '<option value="' + ind.id + '" ' + sel + '>' + ind.name + '</option>';
    });
    $('#brand_industry_select').html(options);
}

function loadBrands() {
    $.get('/products/brands/get', function(data) {
        let html = '';
        const typeLabels = {
            'TR': '<span class="badge bg-primary me-1">TR</span>',
            'RM': '<span class="badge bg-success me-1">RM</span>',
            'FG': '<span class="badge bg-warning text-dark me-1">FG</span>',
            'SV': '<span class="badge bg-info text-dark me-1">SV</span>',
        };
        data.forEach(b => {
            const logo     = b.logo ? `<img src="/storage/${b.logo}" style="max-width:60px;max-height:30px;">` : '-';
            const types    = (b.material_types || ['TR']).map(t => typeLabels[t] || t).join('');
            const own      = b.own_brand
                ? '<span class="badge bg-warning text-dark"><i class="fas fa-star me-1"></i>{{ __('brands.own_badge') }}</span>'
                : '-';
            const firstId  = b.industry_ids && b.industry_ids[0] ? b.industry_ids[0] : null;
            const firstInd = firstId ? allIndustries.find(function(i) { return i.id == firstId; }) : null;
            const industry = firstInd
                ? `<span class="badge bg-light text-secondary border">${firstInd.name}</span>`
                : '<span class="text-muted">-</span>';
            html += `<tr>
                <td>${b.id}</td>
                <td><strong>${b.validbrand_id}</strong></td>
                <td>${industry}</td>
                <td>${types}</td>
                <td>${own}</td>
                <td>${logo}</td>
                <td class="text-center">
                    <button class="btn btn-sm btn-warning" onclick="editBrand(${b.id})">
                        <i class="fad fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deleteBrand(${b.id})">
                        <i class="fad fa-trash"></i>
                    </button>
                </td>
            </tr>`;
        });
        $('#brandsTable tbody').html(html);
    });
}

function openBrandModal() {
    $('#brand_id').val('');
    $('#brandModalTitle').text('{{ __('brands.new_brand') }}');
    $('#brandForm')[0].reset();
    $('#logo_preview').html('');
    selectedProductLines = [];
    renderIndustrySelect('');
    $('#brand_new_industry_inline').hide();
    $('#brand_new_industry_input').val('');
    $('input[name="material_types[]"]').prop('checked', false).prop('disabled', false);
    $('#mt_TR').prop('checked', true);
    $('#mt_FG').prop('disabled', true);
    $('#own_brand').prop('checked', false);
    $('#fg-lock').html('<i class="fas fa-lock" style="font-size:9px;"></i>');
    renderProductLinesCheckboxes();
    $('#brandModal').modal('show');
}

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

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

    const id       = $('#brand_id').val();
    const formData = new FormData(this);
    const url      = id ? `/products/brands/${id}` : '/products/brands';

    if (id) formData.append('_method', 'PUT');

    if (!$('#own_brand').is(':checked')) {
        formData.set('own_brand', '0');
    }

    selectedProductLines.forEach(function(lineId) {
        formData.append('product_lines[]', lineId);
    });

    $.ajax({
        url: url,
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#brandModal').modal('hide');
            loadBrands();
            showNotification(response.message || '{{ __('brands.brand_saved') }}', 'success');
        },
        error: function(xhr) {
            const errors = xhr.responseJSON?.errors || {};
            let msg = '';
            for (let f in errors) msg += errors[f][0] + '<br>';
            showNotification(msg || '{{ __('brands.error_saving') }}', 'error', '{{ __('brands.validation_error') }}');
        }
    });
});

function editBrand(id) {
    $.get(`/products/brands/${id}`, function(data) {
        $('#brand_id').val(data.id);
        $('#validbrand_id').val(data.validbrand_id);
        $('#own_brand').prop('checked', data.own_brand == 1);

        if (data.logo) {
            $('#logo_preview').html(`<img src="/storage/${data.logo}" style="max-width:120px;max-height:80px;">`);
        } else {
            $('#logo_preview').html('');
        }

        // Industria (single select — primera del pivot)
        renderIndustrySelect(data.industry_ids && data.industry_ids[0] ? data.industry_ids[0] : '');

        // Material types
        $('input[name="material_types[]"]').prop('checked', false);
        const types = data.material_types || ['TR'];
        types.forEach(t => $(`#mt_${t}`).prop('checked', true));

        if (data.own_brand) {
            $('#mt_FG').prop('disabled', false);
            $('#mt_TR').prop('disabled', true);
            $('#mt_RM').prop('disabled', true);
            $('#mt_SV').prop('disabled', true);
            $('#fg-lock').html('<i class="fas fa-unlock text-success" style="font-size:9px;"></i>');
        } else {
            $('#mt_FG').prop('disabled', true).prop('checked', false);
            $('#mt_TR').prop('disabled', false);
            $('#mt_RM').prop('disabled', false);
            $('#mt_SV').prop('disabled', false);
            $('#fg-lock').html('<i class="fas fa-lock" style="font-size:9px;"></i>');
        }

        selectedProductLines = data.product_lines ? data.product_lines.map(l => l.id) : [];
        renderProductLinesCheckboxes();

        $('#brandModalTitle').text('{{ __('brands.edit_brand_prefix') }}' + data.validbrand_id);
        $('#brandModal').modal('show');
    });
}

function deleteBrand(id) {
    if (!confirm('{{ __('brands.delete_confirm') }}')) return;
    $.ajax({
        url: `/products/brands/${id}`,
        method: 'DELETE',
        data: { _token: '{{ csrf_token() }}' },
        success: function(response) {
            loadBrands();
            showNotification(response.message, 'success');
        },
        error: function(xhr) {
            showNotification(xhr.responseJSON.message, 'error');
        }
    });
}

function loadProductLines() {
    $.get('/products/product-lines/get', function(data) {
        allProductLines = data.filter(l => l.active);
        renderProductLinesCheckboxes();
    });
}

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

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

function onProductLineSaved(newLine) {
    loadProductLines();
    setTimeout(function() {
        selectedProductLines.push(newLine.id);
        renderProductLinesCheckboxes();
    }, 100);
}

function toggleBrandNewIndustry() {
    var inline = document.getElementById('brand_new_industry_inline');
    var input  = document.getElementById('brand_new_industry_input');
    if (!inline) return;
    if (inline.style.display === 'none') {
        inline.style.display = 'block';
        if (input) input.focus();
    } else {
        inline.style.display = 'none';
        if (input) input.value = '';
    }
}

function saveBrandNewIndustry() {
    var input = document.getElementById('brand_new_industry_input');
    var name  = input ? input.value.trim() : '';
    if (!name) return;
    $.ajax({
        url: '/products/catalogs/industries',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', name: name },
        success: function(res) {
            if (res.success && res.industry) {
                allIndustries.push(res.industry);
                allIndustries.sort(function(a, b) { return a.name.localeCompare(b.name); });
                renderIndustrySelect(res.industry.id);
                document.getElementById('brand_new_industry_inline').style.display = 'none';
                input.value = '';
            }
        },
        error: function(xhr) {
            var msg = (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.name)
                ? xhr.responseJSON.errors.name[0]
                : 'Error al crear la industria.';
            alert(msg);
        }
    });
}

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