{{-- New-Unity ERP | purchases/rfq/create.blade.php | v1.1 | 29/06/2026 --}}
{{-- v1.1 — Filtro FG en modal productos. Presentación de proveedores mejorada. --}}
{{-- v1.0 — Formulario de creación de RFQ. --}}
@extends('layouts.vertical')

@section('content')
<div class="container-fluid px-3 py-2">

    {{-- Header --}}
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <h1 class="h4 mb-0"><i class="fad fa-file-invoice me-2 text-primary"></i>{{ __('purchases.new-rfq') }}</h1>
            <nav><ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('purchases.erp') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('purchases.rfq.index') }}">RFQ</a></li>
                <li class="breadcrumb-item active">{{ __('purchases.new-crumb') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('purchases.rfq.index') }}" class="btn btn-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>{{ __('purchases.back') }}
        </a>
    </div>

    <form action="{{ route('purchases.rfq.store') }}" method="POST" id="formRfq">
        @csrf
        <div class="row g-3">

            {{-- Left: Información general --}}
            <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>{{ __('purchases.general-information') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">{{ __('purchases.rfq-number') }}</label>
                                <input type="text" class="form-control bg-light"
                                       value="{{ $nextNumber }}" readonly>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">{{ __('purchases.currency') }} *</label>
                                <select name="currency" class="form-select">
                                    <option value="MXN" selected>MXN</option>
                                    <option value="USD">USD</option>
                                    <option value="EUR">EUR</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.min-quotes') }} *
                                    <i class="fas fa-question-circle text-muted ms-1 small"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-min-quotes') }}"></i>
                                </label>
                                <input type="number" name="min_quotes" class="form-control"
                                       value="2" min="2" max="10">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-semibold">{{ __('purchases.description-requirement') }}</label>
                                <textarea name="description" class="form-control" rows="2"
                                          placeholder="{{ __('purchases.ph-rfq-desc') }}"></textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('purchases.required-date') }}</label>
                                <input type="date" name="required_date" class="form-control"
                                       value="{{ old('required_date') }}">
                                <small class="text-muted">{{ __('purchases.required-date-hint') }}</small>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">{{ __('purchases.quote-deadline') }}</label>
                                <input type="date" name="deadline_date" class="form-control"
                                       value="{{ old('deadline_date') }}">
                                <small class="text-muted">{{ __('purchases.quote-deadline-hint') }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Productos --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2 d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-boxes me-2"></i>{{ __('purchases.products-to-quote') }}</h6>
                        <button type="button" class="btn btn-light btn-sm"
                                onclick="addProductRow()">
                            <i class="fas fa-plus me-1"></i>{{ __('purchases.add-product') }}
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-sm align-middle mb-0" id="rfqProductsTable" style="font-size:0.82rem;">
                                <thead class="table-light">
                                    <tr>
                                        <th class="ps-3" style="min-width:220px;">{{ __('purchases.product') }}</th>
                                        <th style="width:80px;" class="text-center">{{ __('purchases.qty') }}</th>
                                        <th style="width:80px;" class="text-center">{{ __('purchases.unit') }}</th>
                                        <th style="width:120px;" class="text-end">{{ __('purchases.ref-cost') }}</th>
                                        <th style="width:180px;">{{ __('purchases.specs') }}</th>
                                        <th style="width:40px;"></th>
                                    </tr>
                                </thead>
                                <tbody id="rfqProductsBody">
                                    {{-- Filas dinámicas --}}
                                </tbody>
                            </table>
                        </div>
                        <div id="noProductsMsg" class="text-center text-muted py-4">
                            <i class="fad fa-box-open fa-2x d-block mb-2 opacity-25"></i>
                            {!! __('purchases.no-products-added', ['btn' => __('purchases.add-product')]) !!}
                        </div>
                    </div>
                </div>

                {{-- Proveedores --}}
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0"><i class="fas fa-truck me-2"></i>{{ __('purchases.suppliers-to-quote') }}</h6>
                    </div>
                    <div class="card-body">
                        <p class="small text-muted mb-2">
                            {{ __('purchases.select-min-suppliers', ['min' => old('min_quotes', 2)]) }}
                        </p>
                        <div class="row g-2">
                            @foreach($suppliers as $supplier)
                            <div class="col-md-4">
                                <label class="d-block cursor-pointer" for="sup_{{ $supplier->id }}">
                                    <div class="border rounded p-2 supplier-card {{ in_array($supplier->id, old('suppliers', [])) ? 'border-primary bg-primary bg-opacity-10' : '' }}"
                                         id="card_{{ $supplier->id }}"
                                         style="cursor:pointer; transition: all .15s;">
                                        <div class="d-flex align-items-center gap-2">
                                            <input class="form-check-input supplier-check mt-0" type="checkbox"
                                                   name="suppliers[]"
                                                   value="{{ $supplier->id }}"
                                                   id="sup_{{ $supplier->id }}"
                                                   @checked(in_array($supplier->id, old('suppliers', [])))
                                                   onchange="toggleSupplierCard({{ $supplier->id }}, this)">
                                            <div>
                                                <div class="fw-semibold small">{{ $supplier->commercial_name ?? $supplier->name }}</div>
                                                @if($supplier->rfc)
                                                <div class="text-muted" style="font-size:10px;">{{ __('purchases.rfc-prefix') }} {{ $supplier->rfc }}</div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            @endforeach
                        </div>
                        <div id="supplierError" class="text-danger small mt-2 d-none">
                            <i class="fas fa-exclamation-circle me-1"></i>
                            {{ __('purchases.select-2-suppliers') }}
                        </div>
                    </div>
                </div>

            </div>

            {{-- Right: Resumen --}}
            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-header bg-primary text-white py-2">
                        <h6 class="mb-0"><i class="fas fa-clipboard-check me-2"></i>{{ __('purchases.summary') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.products-count') }}</span>
                            <strong id="summaryProducts">0</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.suppliers-selected') }}</span>
                            <strong id="summarySuppliers">0</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2 small">
                            <span class="text-muted">{{ __('purchases.min-required-lbl') }}</span>
                            <strong id="summaryMinQuotes">2</strong>
                        </div>
                        <hr class="my-2">
                        <div id="summaryAlert" class="alert alert-warning py-1 small d-none">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            {{ __('purchases.summary-add-least') }} <span id="summaryMissing">2</span> {{ __('purchases.summary-suppliers-product') }}
                        </div>
                        <div id="summaryOk" class="alert alert-success py-1 small d-none">
                            <i class="fas fa-check-circle me-1"></i>
                            {{ __('purchases.ready-send-rfq') }}
                        </div>
                    </div>
                </div>

                <div class="card border-info">
                    <div class="card-body py-2">
                        <h6 class="text-info mb-1 small"><i class="fas fa-info-circle me-1"></i>{{ __('purchases.rules') }}</h6>
                        <ul class="small text-muted mb-0 ps-3">
                            <li>{{ __('purchases.rule-1') }}</li>
                            <li>{{ __('purchases.rule-2') }}</li>
                            <li>{{ __('purchases.rule-3') }}</li>
                            <li>{{ __('purchases.rule-4') }}</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

        <div class="d-flex justify-content-between mt-3 mb-4">
            <a href="{{ route('purchases.rfq.index') }}" class="btn btn-secondary">
                <i class="fas fa-times me-1"></i>{{ __('purchases.cancel') }}
            </a>
            <button type="submit" class="btn btn-primary" id="btnSendRfq">
                <i class="fas fa-paper-plane me-1"></i>{{ __('purchases.create-send-rfq') }}
            </button>
        </div>

    </form>

    {{-- Modal búsqueda de producto --}}
    <div class="modal fade" id="modalProductRfq" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white py-2">
                    <h5 class="modal-title"><i class="fas fa-search me-2"></i>{{ __('purchases.select-product-modal') }}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <select id="rfqGroupSelect" class="form-select form-select-sm"
                                    onchange="rfqLoadCategories()">
                                <option value="">{{ __('purchases.group-placeholder') }}</option>
                                @foreach($groups as $g)
                                    <option value="{{ $g->id }}">{{ $g->es_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select id="rfqCategorySelect" class="form-select form-select-sm"
                                    onchange="rfqLoadBrands()">
                                <option value="">{{ __('purchases.category-placeholder') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select id="rfqBrandSelect" class="form-select form-select-sm">
                                <option value="">{{ __('purchases.brand-placeholder') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="button" class="btn btn-success btn-sm w-100"
                                    onclick="rfqFilterProducts()">
                                <i class="fas fa-filter me-1"></i>{{ __('purchases.filter') }}
                            </button>
                        </div>
                    </div>
                    <div class="input-group input-group-sm mb-3">
                        <input type="text" id="rfqProductSearch" class="form-control"
                               placeholder="{{ __('purchases.ph-search-name-sku-comma') }}"
                               onkeypress="if(event.key==='Enter') rfqSearchProducts()">
                        <button class="btn btn-outline-primary" onclick="rfqSearchProducts()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                    <div class="table-responsive" style="max-height:360px;overflow-y:auto;">
                        <table class="table table-sm table-hover align-middle">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>{{ __('purchases.product') }}</th>
                                    <th>{{ __('purchases.col-sku') }}</th>
                                    <th class="text-center">{{ __('purchases.type') }}</th>
                                    <th class="text-end">{{ __('purchases.ref-cost') }}</th>
                                    <th class="text-center">{{ __('purchases.col-action') }}</th>
                                </tr>
                            </thead>
                            <tbody id="rfqProductRows">
                                <tr><td colspan="5" class="text-center text-muted py-4">
                                    {{ __('purchases.select-filters-hint') }}
                                </td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@section('scripts')
@parent
<script>
var AppUrl     = '{{ url('') }}';
var productIdx = 0;

// ── Tooltips ──────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el =>
        new bootstrap.Tooltip(el, { trigger: 'hover' })
    );
    updateSummary();
    $('input[name="min_quotes"]').on('change', updateSummary);
    $(document).on('change', '.supplier-check', updateSummary);
});

// ── Agregar fila de producto ──────────────────────────────────────────────────
window.addProductRow = function() {
    // Abrir modal de búsqueda
    $('#modalProductRfq').modal('show');
};

function insertProductRow(product) {
    var idx = productIdx++;
    var refCost = product.reference_cost > 0
        ? '$' + parseFloat(product.reference_cost).toFixed(2) + ' ' + product.reference_currency
        : '<span class="text-danger small">{{ __('purchases.no-cost') }}</span>';

    var row = '<tr id="rfq_row_' + idx + '">'
        + '<td class="ps-2">'
        +   '<input type="hidden" name="products[' + idx + '][product_id]" value="' + product.id + '">'
        +   '<span class="fw-semibold small">' + product.product_name + '</span>'
        +   '<br><small class="text-muted">{{ __('purchases.sku-label') }} ' + (product.sku || '—') + '</small>'
        + '</td>'
        + '<td class="text-center">'
        +   '<input type="number" name="products[' + idx + '][quantity]" class="form-control form-control-sm text-center" value="1" min="0.0001" step="0.0001" style="width:70px;" required>'
        + '</td>'
        + '<td class="text-center">'
        +   '<input type="text" name="products[' + idx + '][unit]" class="form-control form-control-sm text-center" value="' + (product.unity || 'H87') + '" style="width:65px;">'
        + '</td>'
        + '<td class="text-end small">' + refCost + '</td>'
        + '<td>'
        +   '<input type="text" name="products[' + idx + '][specs]" class="form-control form-control-sm" placeholder="{{ __('purchases.js-specs-ph') }}">'
        + '</td>'
        + '<td class="text-center">'
        +   '<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(' + idx + ')" title="{{ __('purchases.js-remove') }}">'
        +   '<i class="fas fa-times"></i></button>'
        + '</td>'
        + '</tr>';

    $('#rfqProductsBody').append(row);
    $('#noProductsMsg').addClass('d-none');
    bootstrap.Modal.getInstance(document.getElementById('modalProductRfq')).hide();
    updateSummary();
}

window.removeRow = function(idx) {
    $('#rfq_row_' + idx).remove();
    if ($('#rfqProductsBody tr').length === 0) {
        $('#noProductsMsg').removeClass('d-none');
    }
    updateSummary();
};

// ── Resumen dinámico ─────────────────────────────────────────────────────────
function updateSummary() {
    var products  = $('#rfqProductsBody tr').length;
    var suppliers = $('.supplier-check:checked').length;
    var minQ      = parseInt($('input[name="min_quotes"]').val()) || 2;

    $('#summaryProducts').text(products);
    $('#summarySuppliers').text(suppliers);
    $('#summaryMinQuotes').text(minQ);

    var ok = products >= 1 && suppliers >= minQ;
    $('#summaryAlert').toggleClass('d-none', ok).find('#summaryMissing').text(Math.max(0, minQ - suppliers));
    $('#summaryOk').toggleClass('d-none', !ok);
}

// ── Validación antes de submit ────────────────────────────────────────────────
document.getElementById('formRfq').addEventListener('submit', function(e) {
    var products  = $('#rfqProductsBody tr').length;
    var suppliers = $('.supplier-check:checked').length;
    var minQ      = parseInt($('input[name="min_quotes"]').val()) || 2;

    if (products < 1) {
        e.preventDefault();
        showNotification('{{ __('purchases.js-add-one-product') }}', 'error');
        return;
    }
    if (suppliers < minQ) {
        e.preventDefault();
        $('#supplierError').removeClass('d-none');
        showNotification('{{ __('purchases.js-select-min-suppliers') }}'.replace(':min', minQ), 'error');
    }
});

// ── Modal filtros cascada ─────────────────────────────────────────────────────
window.rfqLoadCategories = function() {
    var gId = $('#rfqGroupSelect').val();
    $('#rfqCategorySelect, #rfqBrandSelect').find('option:not(:first)').remove();
    if (!gId) return;
    $.ajax({ url: AppUrl + '/invoices/getCategories', data: { idGroup: gId }, success: function(d) {
        $.each(d.categories, function(i, c) { $('#rfqCategorySelect').append('<option value="'+c.id+'">'+c.name+'</option>'); });
    }});
};

window.rfqLoadBrands = function() {
    var cId = $('#rfqCategorySelect').val();
    $('#rfqBrandSelect').find('option:not(:first)').remove();
    if (!cId) return;
    $.ajax({ url: AppUrl + '/invoices/getBrands', data: { categoryId: cId }, success: function(d) {
        $.each(d.brands, function(i, b) { $('#rfqBrandSelect').append('<option value="'+b.id+'">'+b.name+'</option>'); });
    }});
};

window.rfqFilterProducts = function() {
    $('#rfqProductRows').html('<tr><td colspan="5" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></td></tr>');
    $.ajax({
        url: AppUrl + '/invoices/getFilteredProducts',
        data: { groupId: $('#rfqGroupSelect').val(), categoryId: $('#rfqCategorySelect').val(), brandId: $('#rfqBrandSelect').val() },
        success: function(d) { renderRfqProductRows(d.products || []); }
    });
};

window.rfqSearchProducts = function() {
    var term = $('#rfqProductSearch').val().trim();
    if (!term) return;
    $('#rfqProductRows').html('<tr><td colspan="5" class="text-center py-3"><i class="fas fa-spinner fa-spin"></i></td></tr>');
    $.ajax({
        url: AppUrl + '/invoices/getProductsPage',
        data: { search: term },
        success: function(d) { renderRfqProductRows(d.products || []); }
    });
};

function renderRfqProductRows(products) {
    if (!products.length) {
        $('#rfqProductRows').html('<tr><td colspan="5" class="text-center text-muted py-4">{{ __('purchases.js-no-products-found') }}</td></tr>');
        return;
    }
    var rows = '';
    products.forEach(function(p) {
        rows += '<tr>'
            + '<td class="small fw-semibold">' + p.product_name + '</td>'
            + '<td class="small text-muted">' + (p.sku || '') + '</td>'
            + '<td class="text-center"><span class="badge bg-secondary small">' + (p.material_type || '') + '</span></td>'
            + '<td class="text-end small">'
            +   (p.reference_cost > 0 ? '$' + parseFloat(p.reference_cost).toFixed(2) : '<span class="text-danger">{{ __('purchases.no-cost') }}</span>')
            + '</td>'
            + '<td class="text-center"><button type="button" class="btn btn-success btn-sm" onclick="addRfqProduct(' + JSON.stringify(p).replace(/"/g, '&quot;') + ')">'
            + '<i class="fas fa-plus me-1"></i>{{ __('purchases.js-add') }}</button></td>'
            + '</tr>';
    });
    $('#rfqProductRows').html(rows);
}

// Toggle card visual al seleccionar proveedor
window.toggleSupplierCard = function(id, checkbox) {
    var card = document.getElementById('card_' + id);
    if (checkbox.checked) {
        card.classList.add('border-primary', 'bg-primary', 'bg-opacity-10');
    } else {
        card.classList.remove('border-primary', 'bg-primary', 'bg-opacity-10');
    }
    updateSummary();
};

window.addRfqProduct = function(product) {
    // Verificar que no esté duplicado
    var exists = false;
    $('input[name$="[product_id]"]').each(function() {
        if ($(this).val() == product.id) { exists = true; return false; }
    });
    if (exists) {
        showNotification('{{ __('purchases.js-product-added') }}', 'warning');
        return;
    }

    // Cargar precio de referencia por AJAX (también valida que no sea FG)
    $.ajax({
        url: AppUrl + '/purchases/rfq/ajax/product-info/' + product.id,
        success: function(data) {
            if (data.error) {
                showNotification(data.message, 'error');
                return;
            }
            insertProductRow(data);
        },
        error: function(xhr) {
            if (xhr.status === 422) {
                var msg = xhr.responseJSON?.message || '{{ __('purchases.js-cannot-add-rfq') }}';
                showNotification(msg, 'error');
            } else {
                insertProductRow(product);
            }
        }
    });
};
</script>
@endsection