{{-- New-Unity ERP | products/brands/create.blade.php | v1.1 | 27/06/2026 --}}
{{-- 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>

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

@push('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') }}');
        }
    });
});
</script>
@endpush
@endsection