{{-- New-Unity ERP | products/brands/create.blade.php | v1.5 | 05/08/2026 --}}
{{-- v1.5 — Industria: checkboxes → <select> single con botón "+" e inline crear. --}}
{{-- v1.4 — Botón "+" + campo inline para crear industria desde la card (AJAX, sin salir de la página). --}}
{{-- v1.3 — FIX: @push('scripts')/@endpush → @section/@endsection (Select2 y own_brand toggle ahora funcionan). --}}
{{-- v1.2 — Agrega card de Industrias (checkboxes many-to-many). --}}
{{-- v1.1 — Agrega material_types checkboxes y own_brand toggle. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="fad fa-trademark me-2 text-primary"></i>{{ __('brands.new_brand') }}</h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
                <li class="breadcrumb-item"><a href="{{ route('products.brands.index') }}">{{ __('brands.brands') }}</a></li>
                <li class="breadcrumb-item active">{{ __('brands.new_brand') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('products.brands.index') }}" class="btn btn-sm btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>{{ __('brands.back') }}
        </a>
    </div>

    <form id="brandForm" action="{{ route('products.brands.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row g-3">

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

                {{-- General --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>{{ __('brands.general') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                {{ __('brands.brand_name') }} <span class="text-danger">*</span>
                                <i class="fas fa-question-circle text-muted ms-1"
                                   data-bs-toggle="tooltip"
                                   title="{{ __('brands.brand_name_tooltip') }}"></i>
                            </label>
                            <input type="text" name="validbrand_id" class="form-control text-uppercase"
                                   required placeholder="{{ __('brands.brand_name_ph') }}"
                                   oninput="this.value=this.value.toUpperCase()">
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                {{ __('brands.product_lines_segments') }}
                                <i class="fas fa-question-circle text-muted ms-1"
                                   data-bs-toggle="tooltip"
                                   title="{{ __('brands.product_lines_tooltip') }}"></i>
                            </label>
                            <select name="product_lines[]" id="product_lines"
                                    class="form-select form-select-sm" multiple>
                                @foreach($productLines as $line)
                                    <option value="{{ $line->id }}">{{ $line->name }}</option>
                                @endforeach
                            </select>
                        </div>

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

                {{-- Industria --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0">
                            <i class="bi bi-building me-2"></i>Industria
                            <i class="bi bi-info-circle ms-1 text-white-50"
                               data-bs-toggle="tooltip"
                               title="Sector de mercado al que aplica esta marca."></i>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="input-group input-group-sm mb-1">
                            <select id="brand_industry_select" name="industry_ids[]" class="form-select">
                                <option value="">— Sin industria —</option>
                                @foreach($industries as $industry)
                                <option value="{{ $industry->id }}"
                                        {{ old('industry_ids.0') == $industry->id ? 'selected' : '' }}>
                                    {{ $industry->name }}
                                </option>
                                @endforeach
                            </select>
                            @can('products.industries.manage')
                            <button type="button" class="btn btn-outline-secondary btn-sm"
                                    onclick="toggleNewIndustry()" title="Agregar nueva industria">
                                <i class="bi bi-plus-lg"></i>
                            </button>
                            @endcan
                        </div>
                        @can('products.industries.manage')
                        <div id="new_industry_inline" style="display:none;">
                            <div class="input-group input-group-sm">
                                <input type="text" id="new_industry_name" 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="saveNewIndustry()">Agregar</button>
                                <button type="button" class="btn btn-secondary btn-sm"
                                        onclick="toggleNewIndustry()">Cancelar</button>
                            </div>
                        </div>
                        @endcan
                    </div>
                </div>

                {{-- Material Types --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0">
                            <i class="fas fa-tags me-2"></i>{{ __('brands.material_types') }}
                            <small class="ms-2 opacity-75">— {{ __('brands.material_types_where') }}</small>
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">

                            {{-- TR --}}
                            <div class="col-md-4">
                                <div class="border rounded p-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input mt-type-check"
                                               name="material_types[]" value="TR" id="mt_TR" checked>
                                        <label class="form-check-label fw-semibold" for="mt_TR">
                                            TR — {{ __('brands.mt_tr_short') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        {{ __('brands.mt_tr_desc') }}
                                    </small>
                                </div>
                            </div>

                            {{-- RM --}}
                            <div class="col-md-4">
                                <div class="border rounded p-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input mt-type-check"
                                               name="material_types[]" value="RM" id="mt_RM">
                                        <label class="form-check-label fw-semibold" for="mt_RM">
                                            RM — {{ __('brands.mt_rm') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        {{ __('brands.mt_rm_desc') }}
                                    </small>
                                </div>
                            </div>

                            {{-- FG — solo si own_brand --}}
                            <div class="col-md-4">
                                <div class="border rounded p-3" id="fg-box">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input"
                                               name="material_types[]" value="FG" id="mt_FG" disabled>
                                        <label class="form-check-label fw-semibold text-muted" for="mt_FG">
                                            FG — {{ __('brands.mt_fg') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1" id="fg-hint">
                                        <i class="fas fa-lock me-1"></i>
                                        {{ __('brands.mt_fg_enable_hint') }}
                                    </small>
                                </div>
                            </div>

                            {{-- WIP --}}
                            <div class="col-md-4">
                                <div class="border rounded p-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input mt-type-check"
                                               name="material_types[]" value="WIP" id="mt_WIP">
                                        <label class="form-check-label fw-semibold" for="mt_WIP">
                                            WIP — {{ __('brands.mt_wip') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        {{ __('brands.mt_wip_desc') }}
                                    </small>
                                </div>
                            </div>

                            {{-- SV --}}
                            <div class="col-md-4">
                                <div class="border rounded p-3">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input mt-type-check"
                                               name="material_types[]" value="SV" id="mt_SV">
                                        <label class="form-check-label fw-semibold" for="mt_SV">
                                            SV — {{ __('brands.mt_sv') }}
                                        </label>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        {{ __('brands.mt_sv_desc') }}
                                    </small>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>

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

                {{-- Own Brand --}}
                <div class="card mb-3 border-warning">
                    <div class="card-header bg-warning text-dark py-2">
                        <h6 class="mb-0"><i class="fas fa-star me-2"></i>{{ __('brands.own_brand') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch mb-3">
                            <input type="hidden" name="own_brand" value="0">
                            <input class="form-check-input" type="checkbox"
                                   name="own_brand" value="1" id="own_brand" role="switch">
                            <label class="form-check-label fw-semibold" for="own_brand">
                                {{ __('brands.own_brand_switch2') }}
                            </label>
                        </div>
                        <div class="alert alert-warning py-2 small mb-0">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            <strong>{{ __('brands.own_brand_alert') }}</strong>
                            <br>{{ __('brands.own_brand_alert_fg') }}
                            <br><br>
                            {{ __('brands.examples') }}
                            <ul class="mb-0 ps-3">
                                <li>✅ {{ __('brands.example_candy') }}</li>
                                <li>✅ {{ __('brands.example_bynet') }}</li>
                                <li>❌ {{ __('brands.example_dell') }}</li>
                            </ul>
                        </div>
                    </div>
                </div>

                {{-- Info card --}}
                <div class="card border-info">
                    <div class="card-body">
                        <h6 class="text-info"><i class="fas fa-info-circle me-1"></i>{{ __('brands.how_it_works') }}</h6>
                        <ul class="small text-muted mb-0 ps-3">
                            <li>{{ __('brands.hiw_1') }}</li>
                            <li>{!! __('brands.hiw_2') !!}</li>
                            <li>{{ __('brands.hiw_3') }}</li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>

        <div class="d-flex justify-content-between mt-3 mb-4">
            <a href="{{ route('products.brands.index') }}" class="btn btn-secondary">
                <i class="fas fa-times me-1"></i>{{ __('brands.cancel') }}
            </a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save me-1"></i>{{ __('brands.save_brand') }}
            </button>
        </div>

    </form>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    $('#product_lines').select2({
        placeholder: '{{ __('brands.select_product_lines') }}',
        allowClear: true,
        width: '100%'
    });

    // Tooltips
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function(el) {
        new bootstrap.Tooltip(el, { trigger: 'hover' });
    });

    // Own Brand toggle habilita/deshabilita FG
    $('#own_brand').on('change', function() {
        const fgCheckbox = $('#mt_FG');
        const fgHint     = $('#fg-hint');
        const fgBox      = $('#fg-box');

        if ($(this).is(':checked')) {
            fgCheckbox.prop('disabled', false);
            fgBox.removeClass('opacity-75');
            fgHint.html('<i class="fas fa-unlock me-1 text-success"></i>{{ __('brands.mt_fg_available') }}');
            $('#mt_FG').closest('label').removeClass('text-muted');
        } else {
            fgCheckbox.prop('disabled', true).prop('checked', false);
            fgBox.addClass('opacity-75');
            fgHint.html('<i class="fas fa-lock me-1"></i>{{ __('brands.mt_fg_enable_hint') }}');
            $('#mt_FG').closest('label').addClass('text-muted');
        }
    });

    // Validación: al menos un material type seleccionado
    $('#brandForm').on('submit', function(e) {
        const checked = $('input[name="material_types[]"]:checked').length;
        if (checked === 0) {
            e.preventDefault();
            alert('{{ __('brands.select_material_type_brand') }}');
        }
    });
});

function toggleNewIndustry() {
    var inline = document.getElementById('new_industry_inline');
    var input  = document.getElementById('new_industry_name');
    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 saveNewIndustry() {
    var input = document.getElementById('new_industry_name');
    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) {
                var select = document.getElementById('brand_industry_select');
                var option = document.createElement('option');
                option.value    = res.industry.id;
                option.text     = res.industry.name;
                option.selected = true;
                select.appendChild(option);
                document.getElementById('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);
        }
    });
}
</script>
@endsection