@csrf

<div class="row g-4">

    <div class="col-md-4">
        <label class="form-label">Tipo de cliente</label>
        <select name="client_type" id="client_type" class="form-select @error('client_type') is-invalid @enderror" required>
            <option value="person" {{ old('client_type', $client->client_type ?? '') === 'person' ? 'selected' : '' }}>Persona natural</option>
            <option value="company" {{ old('client_type', $client->client_type ?? '') === 'company' ? 'selected' : '' }}>Empresa</option>
        </select>
        @error('client_type')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">RUT</label>
        <input type="text" name="rut" class="form-control @error('rut') is-invalid @enderror"
               value="{{ old('rut', $client->rut ?? '') }}" placeholder="12.345.678-9" required>
        @error('rut')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-4">
        <label class="form-label">Estado</label>
        <select name="is_active" class="form-select">
            <option value="1" {{ old('is_active', $client->is_active ?? true) == 1 ? 'selected' : '' }}>Activo</option>
            <option value="0" {{ old('is_active', $client->is_active ?? true) == 0 ? 'selected' : '' }}>Inactivo</option>
        </select>
    </div>

    <div class="col-md-6" id="price-list-field">
        <label class="form-label">Lista de precios</label>
        <select name="price_list_id" class="form-select @error('price_list_id') is-invalid @enderror">
            <option value="">Sin lista (usa precio base)</option>
            @foreach($priceLists as $priceList)
                <option value="{{ $priceList->id }}"
                    {{ (string) old('price_list_id', $client->price_list_id ?? '') === (string) $priceList->id ? 'selected' : '' }}>
                    {{ $priceList->name }}{{ $priceList->is_default ? ' (Boleta / por defecto)' : '' }}
                </option>
            @endforeach
        </select>
        <div class="form-text">Define qué precios por kg usará esta empresa en sus pedidos.</div>
        @error('price_list_id')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Departamentos</label>
        <div class="form-text mb-2">Agrega los departamentos propios de este cliente/empresa (nombre libre).</div>

        <div id="departments-wrapper">
            @php
                $existingDepartments = old('departments', isset($client) ? $client->departments->pluck('name')->all() : []);
            @endphp

            @forelse ($existingDepartments as $deptName)
                <div class="input-group mb-2 department-row">
                    <input type="text" name="departments[]" class="form-control" list="department-suggestions"
                           value="{{ $deptName }}" placeholder="Ej: Ventas, Logística, Bodega...">
                    <button type="button" class="btn btn-outline-danger remove-department">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @empty
                <div class="input-group mb-2 department-row">
                    <input type="text" name="departments[]" class="form-control" list="department-suggestions"
                           placeholder="Ej: Ventas, Logística, Bodega...">
                    <button type="button" class="btn btn-outline-danger remove-department">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            @endforelse
        </div>

        <datalist id="department-suggestions">
            @foreach($departmentSuggestions as $name)
                <option value="{{ $name }}">
            @endforeach
        </datalist>

        <button type="button" id="add-department" class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-plus-lg me-1"></i> Agregar otro departamento
        </button>

        @error('departments.*')
            <div class="text-danger small mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Razón social <span class="text-muted">(si aplica)</span></label>
        <input type="text" name="business_name" class="form-control @error('business_name') is-invalid @enderror"
               value="{{ old('business_name', $client->business_name ?? '') }}" placeholder="Ej: Salmones Aysén SpA">
        @error('business_name')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Nombre de contacto</label>
        <input type="text" name="contact_name" class="form-control @error('contact_name') is-invalid @enderror"
               value="{{ old('contact_name', $client->contact_name ?? '') }}" required>
        @error('contact_name')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Correo electrónico</label>
        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
               value="{{ old('email', $client->email ?? '') }}" placeholder="cliente@empresa.cl">
        @error('email')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Teléfono</label>
        <input type="text" name="phone" class="form-control @error('phone') is-invalid @enderror"
               value="{{ old('phone', $client->phone ?? '') }}" placeholder="+56 9 1234 5678">
        @error('phone')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Dirección</label>
        <input type="text" name="address" class="form-control @error('address') is-invalid @enderror"
               value="{{ old('address', $client->address ?? '') }}">
        @error('address')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">Comuna</label>
        <input type="text" name="commune" class="form-control @error('commune') is-invalid @enderror"
               value="{{ old('commune', $client->commune ?? '') }}">
        @error('commune')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-3">
        <label class="form-label">Región</label>
        <input type="text" name="region" class="form-control @error('region') is-invalid @enderror"
               value="{{ old('region', $client->region ?? 'Aysén') }}">
        @error('region')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-12">
        <label class="form-label">Notas</label>
        <textarea name="notes" rows="3" class="form-control @error('notes') is-invalid @enderror"
                  placeholder="Observaciones internas...">{{ old('notes', $client->notes ?? '') }}</textarea>
        @error('notes')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

</div>

<div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
    <a href="{{ route('clients.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i> Guardar cliente
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect = document.getElementById('client_type');
    const priceListField = document.getElementById('price-list-field');

    function syncPriceListVisibility() {
        priceListField.style.display = typeSelect.value === 'company' ? '' : 'none';
    }

    typeSelect.addEventListener('change', syncPriceListVisibility);
    syncPriceListVisibility();

    // Departamentos dinámicos (nombre libre)
    const wrapper = document.getElementById('departments-wrapper');
    const addBtn = document.getElementById('add-department');

    function makeRow() {
        const row = document.createElement('div');
        row.className = 'input-group mb-2 department-row';
        row.innerHTML = `
            <input type="text" name="departments[]" class="form-control" list="department-suggestions"
                   placeholder="Ej: Ventas, Logística, Bodega...">
            <button type="button" class="btn btn-outline-danger remove-department">
                <i class="bi bi-x-lg"></i>
            </button>
        `;
        return row;
    }

    addBtn.addEventListener('click', function () {
        wrapper.appendChild(makeRow());
    });

    wrapper.addEventListener('click', function (e) {
        const btn = e.target.closest('.remove-department');
        if (!btn) return;

        const rows = wrapper.querySelectorAll('.department-row');
        if (rows.length > 1) {
            btn.closest('.department-row').remove();
        } else {
            btn.closest('.department-row').querySelector('input').value = '';
        }
    });
});
</script>