@props([
    'corporateNumber' => null,
    'action',
    'method' => 'POST',
    'sectors' => collect(),
])

<form method="POST" action="{{ $action }}" class="space-y-6">
    @csrf
    @if($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
            <x-form.label for="number" value="Número corporativo" />
            <x-form.input
                id="number"
                name="number"
                value="{{ old('number', $corporateNumber?->number) }}"
                required
                maxlength="15"
                placeholder="(34) 99999-9999"
                oninput="let v = this.value.replace(/\D/g, '').slice(0, 11); if (v.length > 10) { this.value = v.replace(/^(\d{2})(\d{5})(\d{0,4}).*/, '($1) $2-$3').replace(/-$/, ''); } else if (v.length > 6) { this.value = v.replace(/^(\d{2})(\d{4})(\d{0,4}).*/, '($1) $2-$3').replace(/-$/, ''); } else if (v.length > 2) { this.value = v.replace(/^(\d{2})(\d{0,5})/, '($1) $2'); } else if (v.length > 0) { this.value = '(' + v; } else { this.value = ''; }"
            />
            <x-form.error name="number" />
        </div>

        <div>
            <x-form.label for="sector_id" value="Setor inicial" />
            <select name="sector_id" id="sector_id" required
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">— Selecione —</option>
                @foreach($sectors as $sectorOption)
                    <option value="{{ $sectorOption->id }}" @selected((string) old('sector_id', $corporateNumber?->sector_id) === (string) $sectorOption->id)>
                        {{ $sectorOption->name }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="sector_id" />
        </div>

        <div>
            <x-form.label for="chip_unit" value="Unidade do chip" />
            <select name="chip_unit" id="chip_unit" required
                    class="block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500/40">
                <option value="">— Selecione —</option>
                @foreach(\App\Enums\EquipmentAcquisitionUnit::cases() as $unit)
                    <option value="{{ $unit->value }}" @selected(old('chip_unit', $corporateNumber?->chip_unit?->value) === $unit->value)>
                        {{ $unit->label() }}
                    </option>
                @endforeach
            </select>
            <x-form.error name="chip_unit" />
        </div>

        <div class="flex items-center gap-3 pt-7">
            <input
                type="checkbox"
                name="is_active"
                id="is_active"
                value="1"
                @checked((string) old('is_active', $corporateNumber?->is_active ? '1' : '0') === '1')
                class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
            />
            <x-form.label for="is_active" value="Número ativo para novas alocações" />
        </div>

        <div class="md:col-span-2">
            <x-form.label for="description" value="Observação" />
            <x-form.textarea id="description" name="description" rows="4" :value="old('description', $corporateNumber?->description)" />
            <x-form.error name="description" />
        </div>
    </div>

    <div class="flex justify-end gap-3">
        <a href="{{ route('inventory.corporate-numbers.index') }}" class="text-gray-600 hover:text-gray-900">
            Cancelar
        </a>
        <x-ui.button type="submit">
            {{ $corporateNumber ? 'Atualizar' : 'Salvar' }}
        </x-ui.button>
    </div>
</form>