{{-- New-Unity ERP | purchases/suppliers/create.blade.php | v1.4 | 25/07/2026 --}}
{{-- v1.4 — Fix: novalidate en <form> + error banner. Formularios con tabs deben desactivar la validación HTML5 --}}
{{--         nativa: el browser cancela silenciosamente el submit cuando un campo required está en un tab oculto.  --}}
{{-- v1.3 — (Sin cambios en la vista) BUG era en routes/web.php v2.1: /create registrada DESPUÉS del wildcard /{supplier}. --}}
{{-- v1.2 — uppercase-input en campos de datos maestros (nombre, rfc, dirección). Skip: email, phone, website, notes. --}}
{{-- v1.1 — Tooltips en todos los campos, textos en inglés. --}}
@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-truck me-2 text-primary"></i>{{ __('purchases.new-supplier') }}</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.suppliers.index') }}">{{ __('purchases.suppliers') }}</a></li>
                <li class="breadcrumb-item active">{{ __('purchases.new') }}</li>
            </ol></nav>
        </div>
        <a href="{{ route('purchases.suppliers.index') }}" class="btn btn-sm btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>{{ __('purchases.back') }}
        </a>
    </div>

    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-3">
        <strong><i class="fas fa-exclamation-triangle me-1"></i>{{ __('admin.fix-errors') }}</strong>
        <ul class="mb-0 mt-1 small">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <form action="{{ route('purchases.suppliers.store') }}" method="POST" id="formSupplier" novalidate>
        @csrf

        {{-- Tabs --}}
        <ul class="nav nav-tabs mb-3" id="supplierTabs" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button">
                    <i class="fas fa-building me-1"></i>{{ __('purchases.tab-general') }}
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contacts" type="button">
                    <i class="fas fa-users me-1"></i>{{ __('purchases.tab-contacts') }}
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-address" type="button">
                    <i class="fas fa-map-marker-alt me-1"></i>{{ __('purchases.tab-address') }}
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-bank" type="button">
                    <i class="fas fa-university me-1"></i>{{ __('purchases.tab-bank') }}
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-commercial" type="button">
                    <i class="fas fa-handshake me-1"></i>{{ __('purchases.tab-commercial') }}
                </button>
            </li>
        </ul>

        <div class="tab-content">

            {{-- ── Tab General ── --}}
            <div class="tab-pane fade show active" id="tab-general">
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.form-company-name') }} <span class="text-danger">*</span>
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-company-name') }}"></i>
                                </label>
                                <input type="text" name="name" class="form-control uppercase-input @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" required
                                       placeholder="EMPRESA EJEMPLO SA DE CV">
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.commercial-name') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-commercial-name') }}"></i>
                                </label>
                                <input type="text" name="commercial_name" class="form-control uppercase-input"
                                       value="{{ old('commercial_name') }}"
                                       placeholder="{{ __('purchases.ph-commercial-name') }}">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.rfc') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-rfc') }}"></i>
                                </label>
                                <input type="text" name="rfc" class="form-control uppercase-input"
                                       value="{{ old('rfc') }}" maxlength="13"
                                       oninput="this.value=this.value.toUpperCase()"
                                       placeholder="RFC123456ABC">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.type') }} <span class="text-danger">*</span>
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-type') }}"></i>
                                </label>
                                <select name="type" class="form-select" required>
                                    @foreach(\App\Modules\Purchases\Models\Supplier::types() as $key => $label)
                                        <option value="{{ $key }}" @selected(old('type', 'nacional') == $key)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.supplier-role') }} <span class="text-danger">*</span>
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-supplier-role') }}"></i>
                                </label>
                                <select name="supplier_role" class="form-select" required>
                                    <option value="">{{ __('purchases.select-role') }}</option>
                                    @foreach(\App\Modules\Purchases\Models\Supplier::roles() as $key => $label)
                                        <option value="{{ $key }}" @selected(old('supplier_role') == $key)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.category') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-category') }}"></i>
                                </label>
                                <input type="text" name="supplier_category" class="form-control uppercase-input"
                                       value="{{ old('supplier_category') }}"
                                       placeholder="{{ __('purchases.ph-category') }}">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.status') }} <span class="text-danger">*</span>
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-status') }}"></i>
                                </label>
                                <select name="status" class="form-select" required>
                                    @foreach(\App\Modules\Purchases\Models\Supplier::statuses() as $key => $label)
                                        <option value="{{ $key }}" @selected(old('status', 'evaluation') == $key)>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.main-email') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-main-email') }}"></i>
                                </label>
                                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                                       value="{{ old('email') }}"
                                       placeholder="supplier@company.com">
                                @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.phone') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-phone') }}"></i>
                                </label>
                                <input type="text" name="phone" class="form-control"
                                       value="{{ old('phone') }}"
                                       placeholder="33 1234 5678">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.website') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-website') }}"></i>
                                </label>
                                <input type="text" name="website" class="form-control"
                                       value="{{ old('website') }}"
                                       placeholder="https://...">
                            </div>

                            <div class="col-12">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.notes') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-notes') }}"></i>
                                </label>
                                <textarea name="notes" class="form-control" rows="3"
                                          placeholder="{{ __('purchases.ph-notes') }}">{{ old('notes') }}</textarea>
                            </div>

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

            {{-- ── Tab Contacts ── --}}
            <div class="tab-pane fade" id="tab-contacts">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">{{ __('purchases.supplier-contacts') }}</h6>
                        <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddContact">
                            <i class="fas fa-plus me-1"></i>{{ __('purchases.add-contact') }}
                        </button>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small mb-2">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('purchases.contacts-help') }}
                        </p>
                        <div id="contacts-container"></div>
                        <p id="no-contacts-msg" class="text-muted small">{{ __('purchases.no-contacts-yet') }}</p>
                    </div>
                </div>
            </div>

            {{-- ── Tab Address ── --}}
            <div class="tab-pane fade" id="tab-address">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('purchases.address-help') }}
                        </p>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.address-type') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-address-type') }}"></i>
                                </label>
                                <select name="address_type" class="form-select">
                                    <option value="fiscal">{{ __('purchases.addr-fiscal') }}</option>
                                    <option value="warehouse">{{ __('purchases.addr-warehouse') }}</option>
                                    <option value="other">{{ __('purchases.addr-other') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.street') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-street') }}"></i>
                                </label>
                                <input type="text" name="street" class="form-control uppercase-input"
                                       value="{{ old('street') }}"
                                       placeholder="{{ __('purchases.ph-street') }}">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.ext-num') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-ext-num') }}"></i>
                                </label>
                                <input type="text" name="exterior_number" class="form-control uppercase-input"
                                       value="{{ old('exterior_number') }}">
                            </div>
                            <div class="col-md-1">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.int-num') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-int-num') }}"></i>
                                </label>
                                <input type="text" name="interior_number" class="form-control uppercase-input"
                                       value="{{ old('interior_number') }}">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.neighborhood') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-neighborhood') }}"></i>
                                </label>
                                <input type="text" name="neighborhood" class="form-control uppercase-input"
                                       value="{{ old('neighborhood') }}"
                                       placeholder="{{ __('purchases.ph-neighborhood') }}">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.postal-code') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-postal-code') }}"></i>
                                </label>
                                <input type="text" name="postal_code" class="form-control"
                                       value="{{ old('postal_code') }}" maxlength="5"
                                       placeholder="44100">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.city') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-city') }}"></i>
                                </label>
                                <input type="text" name="city" class="form-control uppercase-input"
                                       value="{{ old('city') }}"
                                       placeholder="{{ __('purchases.ph-city') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.state') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-state') }}"></i>
                                </label>
                                <input type="text" name="state" class="form-control uppercase-input"
                                       value="{{ old('state') }}"
                                       placeholder="{{ __('purchases.ph-state') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">{{ __('purchases.country') }}</label>
                                <input type="text" name="country" class="form-control"
                                       value="{{ old('country', 'México') }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Tab Bank Details ── --}}
            <div class="tab-pane fade" id="tab-bank">
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted small mb-3">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ __('purchases.bank-help') }}
                        </p>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.bank-name') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-bank-name') }}"></i>
                                </label>
                                <input type="text" name="bank_name" class="form-control"
                                       value="{{ old('bank_name') }}"
                                       placeholder="BANAMEX, BBVA, SANTANDER...">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.account-number') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-account-number') }}"></i>
                                </label>
                                <input type="text" name="account_number" class="form-control"
                                       value="{{ old('account_number') }}"
                                       placeholder="{{ __('purchases.ph-account-number') }}">
                            </div>
                            <div class="col-md-5">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.clabe') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-clabe') }}"></i>
                                </label>
                                <input type="text" name="clabe" class="form-control"
                                       value="{{ old('clabe') }}" maxlength="18"
                                       placeholder="{{ __('purchases.ph-clabe') }}">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.beneficiary') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-beneficiary') }}"></i>
                                </label>
                                <input type="text" name="beneficiary" class="form-control"
                                       value="{{ old('beneficiary') }}"
                                       placeholder="{{ __('purchases.ph-beneficiary') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.currency') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-bank-currency') }}"></i>
                                </label>
                                <select name="bank_currency" class="form-select">
                                    <option value="MXN" @selected(old('bank_currency', 'MXN') == 'MXN')>{{ __('purchases.mxn-peso') }}</option>
                                    <option value="USD" @selected(old('bank_currency') == 'USD')>{{ __('purchases.usd-dollar') }}</option>
                                    <option value="EUR" @selected(old('bank_currency') == 'EUR')>{{ __('purchases.eur-euro') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── Tab Commercial ── --}}
            <div class="tab-pane fade" id="tab-commercial">
                <div class="card">
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.default-currency') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-default-currency') }}"></i>
                                </label>
                                <select name="currency" class="form-select">
                                    <option value="MXN" @selected(old('currency', 'MXN') == 'MXN')>{{ __('purchases.mxn-peso') }}</option>
                                    <option value="USD" @selected(old('currency') == 'USD')>{{ __('purchases.usd-dollar') }}</option>
                                    <option value="EUR" @selected(old('currency') == 'EUR')>{{ __('purchases.eur-euro') }}</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.credit-days') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-credit-days') }}"></i>
                                </label>
                                <input type="number" name="credit_days" class="form-control"
                                       value="{{ old('credit_days', 0) }}" min="0"
                                       placeholder="{{ __('purchases.ph-credit-days') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.credit-limit') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-credit-limit') }}"></i>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" name="credit_limit" class="form-control"
                                           value="{{ old('credit_limit', 0) }}" min="0" step="0.01"
                                           placeholder="0.00">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.lead-time') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-lead-time') }}"></i>
                                </label>
                                <input type="number" name="lead_time_days" class="form-control"
                                       value="{{ old('lead_time_days', 0) }}" min="0"
                                       placeholder="{{ __('purchases.ph-lead-time') }}">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.payment-method') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-payment-method') }}"></i>
                                </label>
                                <select name="payment_method" class="form-select">
                                    <option value="">{{ __('purchases.select') }}</option>
                                    <option value="PUE" @selected(old('payment_method') == 'PUE')>{{ __('purchases.pue-single') }}</option>
                                    <option value="PPD" @selected(old('payment_method') == 'PPD')>{{ __('purchases.ppd-installments') }}</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label fw-semibold">
                                    {{ __('purchases.payment-way') }}
                                    <i class="fas fa-question-circle text-muted ms-1"
                                       data-bs-toggle="tooltip"
                                       title="{{ __('purchases.tt-payment-way') }}"></i>
                                </label>
                                <select name="payment_way" class="form-select">
                                    <option value="">{{ __('purchases.select') }}</option>
                                    <option value="01" @selected(old('payment_way') == '01')>{{ __('purchases.pw-01') }}</option>
                                    <option value="02" @selected(old('payment_way') == '02')>{{ __('purchases.pw-02') }}</option>
                                    <option value="03" @selected(old('payment_way') == '03')>{{ __('purchases.pw-03') }}</option>
                                    <option value="04" @selected(old('payment_way') == '04')>{{ __('purchases.pw-04') }}</option>
                                    <option value="28" @selected(old('payment_way') == '28')>{{ __('purchases.pw-28') }}</option>
                                    <option value="99" @selected(old('payment_way') == '99')>{{ __('purchases.pw-99') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>{{-- end tab-content --}}

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

    </form>
</div>
@endsection

@section('scripts')
@parent
<script>
document.addEventListener('DOMContentLoaded', function() {

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

    // Contactos
    var contactIdx = 0;
    var container  = document.getElementById('contacts-container');
    var noMsg      = document.getElementById('no-contacts-msg');

    document.getElementById('btnAddContact').addEventListener('click', function() {
        noMsg.classList.add('d-none');
        var html = `
        <div class="border rounded p-3 mb-3 contact-row" id="contact-row-${contactIdx}">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <strong class="small text-muted">{{ __('purchases.contact-num') }}${contactIdx + 1}</strong>
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeContact(${contactIdx})">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="row g-2">
                <div class="col-md-3">
                    <input type="text" name="new_contacts[${contactIdx}][name]"
                           class="form-control form-control-sm" placeholder="{{ __('purchases.ph-full-name') }}" required>
                </div>
                <div class="col-md-3">
                    <input type="text" name="new_contacts[${contactIdx}][position]"
                           class="form-control form-control-sm" placeholder="{{ __('purchases.ph-position') }}">
                </div>
                <div class="col-md-3">
                    <input type="email" name="new_contacts[${contactIdx}][email]"
                           class="form-control form-control-sm" placeholder="{{ __('purchases.ph-email') }}">
                </div>
                <div class="col-md-3">
                    <input type="text" name="new_contacts[${contactIdx}][phone]"
                           class="form-control form-control-sm" placeholder="{{ __('purchases.ph-phone') }}">
                </div>
            </div>
        </div>`;
        container.insertAdjacentHTML('beforeend', html);
        contactIdx++;
    });

    window.removeContact = function(idx) {
        var row = document.getElementById('contact-row-' + idx);
        if (row) row.remove();
        if (container.querySelectorAll('.contact-row').length === 0) {
            noMsg.classList.remove('d-none');
        }
    };
});
</script>
@endsection