@extends('layouts.app')

@section('title', 'Nuevo Contacto — ' . $company->name)

@section('content')
<div class="animate-fadeIn">
    <div class="page-header">
        <div class="page-header-top">
            <div class="d-flex align-center gap-md">
                <a href="{{ route('companies.show', $company) }}" class="btn btn-ghost btn-icon" title="Volver a la empresa">
                    <i class="ph ph-arrow-left"></i>
                </a>
                <div>
                    <h1 class="page-title" style="margin-bottom: 2px;">Nuevo Contacto</h1>
                    <span class="text-muted">Empresa: {{ $company->name }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="max-width: 600px; margin: 0 auto;">
        <form action="{{ route('companies.contacts.store', $company) }}" method="POST">
            @csrf

            <div class="form-group">
                <label for="name" class="form-label">Nombre del Contacto <span class="text-danger">*</span></label>
                <input type="text" id="name" name="name" class="form-control" value="{{ old('name') }}" required>
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="position" class="form-label">Cargo / Posición</label>
                <input type="text" id="position" name="position" class="form-control" value="{{ old('position') }}" placeholder="Ej. Gerente de TI, Soporte...">
                @error('position') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="email" class="form-label">Correo Electrónico</label>
                    <input type="email" id="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="correo@empresa.com">
                    @error('email') <span class="form-error">{{ $message }}</span> @enderror
                </div>

                <div class="form-group">
                    <label for="phone" class="form-label">Teléfono</label>
                    <input type="text" id="phone" name="phone" class="form-control" value="{{ old('phone') }}">
                    @error('phone') <span class="form-error">{{ $message }}</span> @enderror
                </div>
            </div>

            <div class="form-group">
                <label class="d-flex align-center gap-sm" style="cursor: pointer;">
                    <input type="checkbox" name="is_primary" value="1" {{ old('is_primary') ? 'checked' : '' }} style="width: 18px; height: 18px; accent-color: var(--primary);">
                    <span style="font-weight: 500;">Establecer como contacto principal</span>
                </label>
                <p class="text-xs text-muted" style="margin-top: 4px; padding-left: 26px;">Si seleccionas esta opción, reemplazará al contacto principal actual de la empresa.</p>
                @error('is_primary') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            <div class="d-flex gap-sm mt-xl">
                <button type="submit" class="btn btn-primary" style="flex: 1;">
                    <i class="ph ph-floppy-disk"></i> Guardar Contacto
                </button>
                <a href="{{ route('companies.show', $company) }}" class="btn btn-outline" style="flex: 1;">
                    Cancelar
                </a>
            </div>
        </form>
    </div>
</div>
@endsection