<?= $this->extend('layouts/layout') ?>

<?= $this->section('titulo') ?>Nuevo contacto<?= $this->endSection() ?>

<?= $this->section('contenido') ?>

<div class="tef-panel">

    <h2>Nuevo contacto</h2>
    <p class="text-muted">
        Registro de contacto en el CRM
    </p>

    <form method="post" action="<?= site_url('crm/contacts/store') ?>">

        <!-- ================= SISTEMA ================= -->
        <input type="hidden" name="PK_User" value="<?= esc($userId ?? 999) ?>">

        <!-- ================= DATOS PERSONALES ================= -->
        <div class="tef-card" style="margin-top:20px;">
            <h4>Información personal</h4>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Nombre</label>
                    <input type="text" class="tef-input" name="First_name">
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Apellido</label>
                    <input type="text" class="tef-input" name="Last_name">
                </div>
            </div>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Email</label>
                    <input type="email" class="tef-input" name="Email">
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Email de trabajo</label>
                    <input type="email" class="tef-input" name="Work_email">
                </div>
            </div>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-sm">
                    <label>Teléfono</label>
                    <input type="text" class="tef-input" name="Phone">
                </div>

                <div class="tef-input-group tef-input-sm">
                    <label>Móvil</label>
                    <input type="text" class="tef-input" name="Mobile">
                </div>

                <div class="tef-input-group tef-input-sm">
                    <label>WhatsApp</label>
                    <input type="text" class="tef-input" name="Whatsapp">
                </div>
            </div>
        </div>

        <!-- ================= EMPRESA ================= -->
        <div class="tef-card" style="margin-top:20px;">
            <h4>Empresa</h4>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Empresa</label>
                    <input type="text" class="tef-input" name="Company_name">
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Puesto</label>
                    <input type="text" class="tef-input" name="Job_title">
                </div>
            </div>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Función</label>
                    <input type="text" class="tef-input" name="Job_function">
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Sector</label>
                    <input type="text" class="tef-input" name="Sector">
                </div>
            </div>
        </div>

        <!-- ================= PERFIL DE COMPRA ================= -->
        <div class="tef-card" style="margin-top:20px;">
            <h4>Perfil comercial</h4>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Buyer persona</label>
                    <input type="text" class="tef-input" name="Buyer_persona">
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Rol de compra</label>
                    <input type="text" class="tef-input" name="Purchase_role">
                </div>
            </div>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Lead status</label>
                    <select class="tef-input" name="Lead_status">
                        <option value="">—</option>
                        <option value="Nuevo">Nuevo</option>
                        <option value="Contactado">Contactado</option>
                        <option value="Calificado">Calificado</option>
                        <option value="No interesado">No interesado</option>
                    </select>
                </div>

                <div class="tef-input-group tef-input-md">
                    <label>Lifecycle stage</label>
                    <select class="tef-input" name="Lifecycle_stage">
                        <option value="">—</option>
                        <option value="Lead">Lead</option>
                        <option value="Prospect">Prospect</option>
                        <option value="Cliente">Cliente</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- ================= DIRECCIÓN ================= -->
        <div class="tef-card" style="margin-top:20px;">
            <h4>Dirección</h4>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Dirección</label>
                    <input type="text" class="tef-input" name="Address">
                </div>
            </div>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-sm">
                    <label>Ciudad</label>
                    <input type="text" class="tef-input" name="City">
                </div>

                <div class="tef-input-group tef-input-sm">
                    <label>Estado</label>
                    <input type="text" class="tef-input" name="State">
                </div>

                <div class="tef-input-group tef-input-sm">
                    <label>País</label>
                    <input type="text" class="tef-input" name="Country">
                </div>

                <div class="tef-input-group tef-input-sm">
                    <label>Código postal</label>
                    <input type="text" class="tef-input" name="Postal_code">
                </div>
            </div>
        </div>

        <!-- ================= OTROS ================= -->
        <div class="tef-card" style="margin-top:20px;">
            <h4>Otros</h4>

            <div class="tef-form-row">
                <div class="tef-input-group tef-input-md">
                    <label>Zona horaria</label>
                    <input type="text" class="tef-input" name="Timezone">
                </div>
            </div>
        </div>

        <!-- ================= ACCIONES ================= -->
        <div style="margin-top:30px;display:flex;gap:12px;">
            <button class="c-btn"
                    style="padding:12px 20px;background:var(--tef-gold);color:#000;border-radius:12px;font-weight:600;">
                Guardar contacto
            </button>

            <a href="<?= site_url('crm/contacts') ?>"
               class="c-btn"
               style="padding:12px 20px;background:#222;color:#fff;border-radius:12px;">
                Cancelar
            </a>
        </div>

    </form>

</div>

<?= $this->endSection() ?>
