<?php

session_start();

include("../includes/auth.php");
include("../config/db.php");

$success = "";

/*
|--------------------------------------------------------------------------
| TABLA campaign_fields
|--------------------------------------------------------------------------
*/

$conn->query("
CREATE TABLE IF NOT EXISTS campaign_fields (

    id INT AUTO_INCREMENT PRIMARY KEY,

    campaign_id INT NOT NULL,

    field_name VARCHAR(255),

    field_label VARCHAR(255),

    field_type VARCHAR(100),

    is_required TINYINT(1) DEFAULT 0,

    field_options TEXT NULL,

    field_order INT DEFAULT 0,

    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

)
");

/*
|--------------------------------------------------------------------------
| CREAR CAMPO
|--------------------------------------------------------------------------
*/

if(
    $_SERVER['REQUEST_METHOD'] === 'POST'
    &&
    isset($_POST['create_field'])
){

    $campaign_id =
    intval($_POST['campaign_id']);

    $field_name =
    trim($_POST['field_name']);

    $field_label =
    trim($_POST['field_label']);

    $field_type =
    trim($_POST['field_type']);

    $is_required =
    isset($_POST['is_required'])
    ? 1
    : 0;

    $field_options =
    trim($_POST['field_options']);

    $field_order =
    intval($_POST['field_order']);

    $stmt = $conn->prepare("
    INSERT INTO campaign_fields
    (
        campaign_id,
        field_name,
        field_label,
        field_type,
        is_required,
        field_options,
        field_order
    )
    VALUES
    (
        ?, ?, ?, ?, ?, ?, ?
    )
    ");

    $stmt->bind_param(
        "isssisi",
        $campaign_id,
        $field_name,
        $field_label,
        $field_type,
        $is_required,
        $field_options,
        $field_order
    );

    $stmt->execute();

    $success =
    "Campo creado correctamente.";

}

/*
|--------------------------------------------------------------------------
| CAMPAÑAS
|--------------------------------------------------------------------------
*/

$campaigns = $conn->query("
SELECT *
FROM campaigns
ORDER BY name ASC
");

/*
|--------------------------------------------------------------------------
| CAMPOS
|--------------------------------------------------------------------------
*/

$fields = $conn->query("
SELECT
    campaign_fields.*,
    campaigns.name AS campaign_name
FROM campaign_fields

LEFT JOIN campaigns
ON campaigns.id = campaign_fields.campaign_id

ORDER BY
campaign_fields.campaign_id ASC,
campaign_fields.field_order ASC
");

?>

<!DOCTYPE html>
<html lang="es">

<head>

<meta charset="UTF-8">

<title>
Configuración Leads
</title>

<link rel="stylesheet" href="/assets/css/style.css">

<style>

.content-area{
    margin-left:260px;
    padding:40px;
}

.page-title{
    font-size:42px;
    font-weight:800;
    color:#02122c;
    margin-bottom:10px;
}

.page-subtitle{
    color:#64748b;
    margin-bottom:30px;
}

.white-card{
    background:#ffffff;
    border-radius:24px;
    padding:30px;
    margin-bottom:25px;
    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.form-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    margin-bottom:10px;
    font-size:14px;
    font-weight:700;
    color:#475569;
}

.form-control{
    height:54px;
    border:none;
    border-radius:16px;
    background:#f1f5f9;
    padding:0 18px;
    font-size:15px;
}

textarea.form-control{
    height:120px;
    padding-top:15px;
}

.btn-save{
    margin-top:25px;
    height:54px;
    border:none;
    border-radius:16px;
    background:linear-gradient(
        90deg,
        #5b4bff,
        #7b61ff
    );
    color:#ffffff;
    padding:0 28px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

.success-box{
    background:#dcfce7;
    color:#166534;
    padding:15px;
    border-radius:14px;
    margin-bottom:20px;
}

.crm-table{
    width:100%;
    border-collapse:collapse;
}

.crm-table th{
    background:#f8fafc;
    padding:16px;
    text-align:left;
    font-size:13px;
    color:#475569;
}

.crm-table td{
    padding:16px;
    border-top:1px solid #eef2ff;
    font-size:14px;
    color:#02122c;
}

.required-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:#fee2e2;
    color:#991b1b;
    font-size:12px;
    font-weight:700;
}

</style>

</head>

<body>

<?php include("../includes/sidebar.php"); ?>

<div class="content-area">

    <div class="page-title">
        Configuración de Leads
    </div>

    <div class="page-subtitle">
        Campos dinámicos por campaña
    </div>

    <div class="white-card">

        <?php if($success): ?>

            <div class="success-box">
                <?= $success ?>
            </div>

        <?php endif; ?>

        <form method="POST">

            <input
                type="hidden"
                name="create_field"
                value="1"
            >

            <div class="form-grid">

                <div class="form-group">

                    <label>
                        Campaña
                    </label>

                    <select
                        name="campaign_id"
                        class="form-control"
                        required
                    >

                        <?php while($campaign = $campaigns->fetch_assoc()): ?>

                            <option value="<?= $campaign['id'] ?>">

                                <?= htmlspecialchars($campaign['name']) ?>

                            </option>

                        <?php endwhile; ?>

                    </select>

                </div>

                <div class="form-group">

                    <label>
                        Nombre interno
                    </label>

                    <input
                        type="text"
                        name="field_name"
                        class="form-control"
                        placeholder="ejemplo: consumo"
                        required
                    >

                </div>

                <div class="form-group">

                    <label>
                        Label visual
                    </label>

                    <input
                        type="text"
                        name="field_label"
                        class="form-control"
                        placeholder="Consumo eléctrico"
                        required
                    >

                </div>

                <div class="form-group">

                    <label>
                        Tipo de campo
                    </label>

                    <select
                        name="field_type"
                        class="form-control"
                        required
                    >

                        <option value="text">Text</option>
                        <option value="number">Number</option>
                        <option value="email">Email</option>
                        <option value="tel">Teléfono</option>
                        <option value="textarea">Textarea</option>
                        <option value="select">Select</option>
                        <option value="date">Fecha</option>
                        <option value="checkbox">Checkbox</option>

                    </select>

                </div>

                <div class="form-group">

                    <label>
                        Opciones select
                    </label>

                    <textarea
                        name="field_options"
                        class="form-control"
                        placeholder="Sí,No,Tal vez"
                    ></textarea>

                </div>

                <div class="form-group">

                    <label>
                        Orden
                    </label>

                    <input
                        type="number"
                        name="field_order"
                        class="form-control"
                        value="0"
                    >

                </div>

            </div>

            <div
                style="
                margin-top:20px;
                display:flex;
                align-items:center;
                gap:10px;
                "
            >

                <input
                    type="checkbox"
                    name="is_required"
                    value="1"
                >

                <span>
                    Campo obligatorio
                </span>

            </div>

            <button
                type="submit"
                class="btn-save"
            >
                Crear campo
            </button>

        </form>

    </div>

    <div class="white-card">

        <table class="crm-table">

            <thead>

                <tr>

                    <th>ID</th>
                    <th>Campaña</th>
                    <th>Campo</th>
                    <th>Label</th>
                    <th>Tipo</th>
                    <th>Obligatorio</th>
                    <th>Orden</th>

                </tr>

            </thead>

            <tbody>

                <?php while($field = $fields->fetch_assoc()): ?>

                    <tr>

                        <td>
                            #<?= $field['id'] ?>
                        </td>

                        <td>
                            <?= htmlspecialchars($field['campaign_name']) ?>
                        </td>

                        <td>
                            <?= htmlspecialchars($field['field_name']) ?>
                        </td>

                        <td>
                            <?= htmlspecialchars($field['field_label']) ?>
                        </td>

                        <td>
                            <?= htmlspecialchars($field['field_type']) ?>
                        </td>

                        <td>

                            <?php if($field['is_required'] == 1): ?>

                                <span class="required-badge">
                                    Obligatorio
                                </span>

                            <?php else: ?>

                                -

                            <?php endif; ?>

                        </td>

                        <td>
                            <?= $field['field_order'] ?>
                        </td>

                    </tr>

                <?php endwhile; ?>

            </tbody>

        </table>

    </div>

</div>

</body>
</html>