{{-- Incluido por companies.create y companies.edit — espera $form (CompanyForm) y $this->responsables --}}

<div class="space-y-8">
    <section>
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Datos de empresa</h3>
        <p class="mb-4 text-sm text-gray-400">Identificación básica del cliente.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="nombre" value="Nombre *" />
                <x-text-input wire:model="form.nombre" id="nombre" class="mt-1.5 block w-full" placeholder="Nombre de la empresa" />
                <x-input-error :messages="$errors->get('form.nombre')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="industria" value="Industria" />
                <x-select-input wire:model="form.industria" id="industria" class="mt-1.5 w-full">
                    <option value="">— Selecciona —</option>
                    @foreach ($form->industriaOptions() as $option)
                        <option value="{{ $option }}">{{ $option }}</option>
                    @endforeach
                </x-select-input>
                <x-input-error :messages="$errors->get('form.industria')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="nit" value="NIT" />
                <x-text-input wire:model="form.nit" id="nit" class="mt-1.5 block w-full" placeholder="900123456-7" />
            </div>
            <div>
                <x-input-label for="tipo_empresa" value="Tipo de empresa" />
                <x-text-input wire:model="form.tipo_empresa" id="tipo_empresa" class="mt-1.5 block w-full" />
            </div>
            <div class="sm:col-span-2">
                <x-input-label for="direccion" value="Dirección" />
                <x-text-input wire:model="form.direccion" id="direccion" class="mt-1.5 block w-full" />
            </div>
        </div>
    </section>

    <section class="border-t border-gray-100 pt-8">
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Marca</h3>
        <p class="mb-4 text-sm text-gray-400">Logo y color de acento del cliente — se muestran en sus tarjetas de tareas/tickets, su ficha y su Portal.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="color_primario" value="Color de acento" />
                <div class="mt-1.5 flex items-center gap-3">
                    <input type="color" wire:model="form.color_primario" id="color_primario"
                           class="h-10 w-14 cursor-pointer rounded-lg border border-gray-300 shadow-sm">
                    <x-text-input wire:model="form.color_primario" placeholder="#9ca3af" class="w-full" />
                </div>
                <x-input-error :messages="$errors->get('form.color_primario')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="logo" value="Logo" />
                <input type="file" wire:model="logo" id="logo" accept="image/svg+xml,image/png,image/jpeg,image/webp,image/gif,image/bmp"
                       class="mt-1.5 block w-full text-sm text-gray-600 file:mr-3 file:rounded-lg file:border-0 file:bg-cck-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-cck-700 hover:file:bg-cck-100">
                <p class="mt-1.5 text-xs text-gray-400">SVG (recomendado, se ve nítido a cualquier tamaño) o PNG/JPG — máx. 2MB.</p>
                <x-input-error :messages="$errors->get('logo')" class="mt-2" />
                @php
                    // Instancia sin persistir, solo para reusar la misma lógica de
                    // color/sombra del avatar en la vista previa del formulario.
                    $companyPreview = new \App\Models\Company(['color_primario' => $form->color_primario]);
                @endphp
                <div class="mt-2 flex items-center gap-2">
                    @if ($logo && $logo->isPreviewable())
                        <img src="{{ $logo->temporaryUrl() }}" style="box-shadow: {{ $companyPreview->sombraAcento() }}"
                             class="h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-white object-contain p-1">
                        <span class="text-xs text-gray-400">Nuevo logo (sin guardar)</span>
                    @elseif (! $logo && isset($company) && $company->logoUrl())
                        <img src="{{ $company->logoUrl() }}" style="box-shadow: {{ $companyPreview->sombraAcento() }}"
                             class="h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-white object-contain p-1">
                        <span class="text-xs text-gray-400">Logo actual</span>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <section class="border-t border-gray-100 pt-8">
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Datos financieros</h3>
        <p class="mb-4 text-sm text-gray-400">Valores del contrato en pesos colombianos.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="mensualidad_cop" value="Mensualidad (COP)" />
                <x-text-input type="number" step="0.01" wire:model="form.mensualidad_cop" id="mensualidad_cop" class="mt-1.5 block w-full" placeholder="0" />
            </div>
            <div>
                <x-input-label for="implementacion_cop" value="Implementación (COP)" />
                <x-text-input type="number" step="0.01" wire:model="form.implementacion_cop" id="implementacion_cop" class="mt-1.5 block w-full" placeholder="0" />
            </div>
            <div>
                <x-input-label for="fecha_facturacion" value="Fecha de facturación" />
                <x-text-input type="date" wire:model="form.fecha_facturacion" id="fecha_facturacion" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="modulos_contratados_texto" value="Módulos contratados" />
                <x-text-input wire:model="form.modulos_contratados_texto" id="modulos_contratados_texto" class="mt-1.5 block w-full" placeholder="Mantenimiento, Calidad, QR" />
                <p class="mt-1.5 text-xs text-gray-400">Separados por coma.</p>
            </div>
        </div>
    </section>

    <section class="border-t border-gray-100 pt-8">
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Datos de contacto</h3>
        <p class="mb-4 text-sm text-gray-400">Personas de referencia dentro de la empresa.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="nombre_gerencia" value="Nombre gerencia" />
                <x-text-input wire:model="form.nombre_gerencia" id="nombre_gerencia" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="email_gerencia" value="Email gerencia" />
                <x-text-input type="email" wire:model="form.email_gerencia" id="email_gerencia" class="mt-1.5 block w-full" placeholder="gerencia@empresa.com" />
                <x-input-error :messages="$errors->get('form.email_gerencia')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="telefono_gerencia" value="Teléfono gerencia" />
                <x-text-input wire:model="form.telefono_gerencia" id="telefono_gerencia" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="nombre_contable" value="Nombre contable" />
                <x-text-input wire:model="form.nombre_contable" id="nombre_contable" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="email_contable" value="Email contable" />
                <x-text-input type="email" wire:model="form.email_contable" id="email_contable" class="mt-1.5 block w-full" placeholder="contable@empresa.com" />
                <x-input-error :messages="$errors->get('form.email_contable')" class="mt-2" />
            </div>
            <div class="sm:col-span-2">
                <x-input-label for="datos_embajador" value="Datos embajador" />
                <textarea wire:model="form.datos_embajador" id="datos_embajador" rows="2"
                          class="mt-1.5 w-full rounded-lg border-gray-300 text-sm text-gray-900 shadow-sm transition focus:border-cck-400 focus:ring-cck-400"></textarea>
            </div>
        </div>
    </section>

    <section class="border-t border-gray-100 pt-8">
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Fechas del ciclo comercial</h3>
        <p class="mb-4 text-sm text-gray-400">Hitos del proceso de venta con este cliente.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
            <div>
                <x-input-label for="fecha_primer_contacto" value="Primer contacto" />
                <x-text-input type="date" wire:model="form.fecha_primer_contacto" id="fecha_primer_contacto" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_primera_reunion" value="Primera reunión" />
                <x-text-input type="date" wire:model="form.fecha_primera_reunion" id="fecha_primera_reunion" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_envio_propuesta" value="Envío de propuesta" />
                <x-text-input type="date" wire:model="form.fecha_envio_propuesta" id="fecha_envio_propuesta" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_inicio_negociacion" value="Inicio de negociación" />
                <x-text-input type="date" wire:model="form.fecha_inicio_negociacion" id="fecha_inicio_negociacion" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_cierre" value="Cierre" />
                <x-text-input type="date" wire:model="form.fecha_cierre" id="fecha_cierre" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_proxima_reunion" value="Próxima reunión" />
                <x-text-input type="date" wire:model="form.fecha_proxima_reunion" id="fecha_proxima_reunion" class="mt-1.5 block w-full" />
            </div>
            <div>
                <x-input-label for="fecha_ultimo_contacto" value="Último contacto" />
                <x-text-input type="date" wire:model="form.fecha_ultimo_contacto" id="fecha_ultimo_contacto" class="mt-1.5 block w-full" />
            </div>
        </div>
    </section>

    <section class="border-t border-gray-100 pt-8">
        <h3 class="mb-1 font-display text-sm font-bold uppercase tracking-wide text-gray-700">Gestión</h3>
        <p class="mb-4 text-sm text-gray-400">Etapa comercial y responsable dentro del equipo.</p>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
                <x-input-label for="estado_pipeline" value="Etapa del pipeline *" />
                <x-select-input wire:model="form.estado_pipeline" id="estado_pipeline" class="mt-1.5 w-full">
                    @foreach ($form->estadoPipelineOptions() as $option)
                        <option value="{{ $option }}">{{ $option }}</option>
                    @endforeach
                </x-select-input>
                <x-input-error :messages="$errors->get('form.estado_pipeline')" class="mt-2" />
            </div>
            <div>
                <x-input-label for="responsable_cck_id" value="Responsable CCK" />
                <x-select-input wire:model="form.responsable_cck_id" id="responsable_cck_id" class="mt-1.5 w-full">
                    <option value="">— Sin asignar —</option>
                    @foreach ($this->responsables as $usuario)
                        <option value="{{ $usuario->id }}">{{ $usuario->name }}</option>
                    @endforeach
                </x-select-input>
            </div>
            <div>
                <x-input-label for="tipo_reporte" value="Tipo de reporte" />
                <x-text-input wire:model="form.tipo_reporte" id="tipo_reporte" class="mt-1.5 block w-full" />
            </div>
            <div class="flex items-end pb-2">
                <label class="inline-flex cursor-pointer items-center">
                    <input type="checkbox" wire:model="form.reporte_por_entregar" class="rounded border-gray-300 text-cck-500 shadow-sm focus:ring-cck-400">
                    <span class="ms-2 text-sm text-gray-600">Reporte por entregar</span>
                </label>
            </div>
            <div class="sm:col-span-2">
                <x-input-label for="notas_ultimo_contacto" value="Notas del último contacto" />
                <textarea wire:model="form.notas_ultimo_contacto" id="notas_ultimo_contacto" rows="3"
                          class="mt-1.5 w-full rounded-lg border-gray-300 text-sm text-gray-900 shadow-sm transition focus:border-cck-400 focus:ring-cck-400"></textarea>
            </div>
        </div>
    </section>
</div>