<?php
$formData = Session::get('servico_form_data', []);
if (!empty($formData)) {
    Session::forget('servico_form_data');
    $servico = array_merge($servico, $formData);
}

$editando = $modo === 'edit';
$action = $editando ? base_url('/admin/servicos/update') : base_url('/admin/servicos/store');
?>

<section class="page-header page-header-flex">
    <div>
        <h2><?= $editando ? 'Editar serviço' : 'Novo serviço' ?></h2>
        <p>Defina nome, SLA e cor usada no mapa, listagens e formulários.</p>
    </div>
    <div>
        <a class="btn btn-outline" href="<?= base_url('/admin/servicos') ?>">Voltar</a>
    </div>
</section>

<?php if ($msg = Session::getFlash('erro')): ?>
    <div class="alert error"><?= e($msg) ?></div>
<?php endif; ?>

<div class="card form-card">
    <form method="POST" action="<?= $action ?>">
        <?php if ($editando): ?>
            <input type="hidden" name="id" value="<?= (int) $servico['id'] ?>">
        <?php endif; ?>

        <div class="grid-2">
            <div>
                <label for="nome">Nome do serviço</label>
                <input type="text" id="nome" name="nome" value="<?= e($servico['nome'] ?? '') ?>" maxlength="100" required>
            </div>

            <div>
                <label for="sla_dias">SLA (dias)</label>
                <input type="number" id="sla_dias" name="sla_dias" min="0" max="365" value="<?= (int) ($servico['sla_dias'] ?? 0) ?>" required>
            </div>

            <div>
                <label for="cor">Cor de exibição</label>
                <div class="color-field-row">
                    <input type="color" id="cor_picker" value="<?= e($servico['cor'] ?? '#1351b4') ?>" oninput="document.getElementById('cor').value = this.value.toUpperCase()">
                    <input type="text" id="cor" name="cor" value="<?= e($servico['cor'] ?? '#1351b4') ?>" maxlength="7" placeholder="#1351B4" required>
                </div>
                <p class="help-text">Formato hexadecimal, por exemplo: #1351B4</p>
            </div>

            <div>
                <label for="icone">Ícone (opcional)</label>
                <input type="text" id="icone" name="icone" value="<?= e($servico['icone'] ?? '') ?>" maxlength="100" placeholder="Ex.: fa-lightbulb">
                <p class="help-text">Campo opcional para manter compatibilidade com os cadastros já existentes.</p>
            </div>
        </div>

        <label class="checkbox-inline checkbox-inline-card" for="ativo">
            <input type="checkbox" id="ativo" name="ativo" value="1" <?= (int) ($servico['ativo'] ?? 0) === 1 ? 'checked' : '' ?>>
            Serviço ativo para exibição e seleção nas ocorrências
        </label>

        <div class="service-preview-card" style="--service-color: <?= e($servico['cor'] ?? '#1351b4') ?>;">
            <div class="service-preview-head">
                <strong>Pré-visualização</strong>
                <span class="muted">Como o serviço será exibido</span>
            </div>
            <span class="category-badge service-preview-badge">
                <?= e($servico['nome'] ?: 'Nome do serviço') ?>
            </span>
        </div>

        <div class="actions-row">
            <button type="submit" class="btn"><?= $editando ? 'Salvar alterações' : 'Cadastrar serviço' ?></button>
            <a class="btn btn-outline" href="<?= base_url('/admin/servicos') ?>">Cancelar</a>
        </div>
    </form>
</div>

<script>
(function () {
    const colorInput = document.getElementById('cor');
    const colorPicker = document.getElementById('cor_picker');
    const nomeInput = document.getElementById('nome');
    const previewCard = document.querySelector('.service-preview-card');
    const previewBadge = document.querySelector('.service-preview-badge');

    function syncColor() {
        let value = (colorInput.value || '').trim().toUpperCase();
        if (value && value.charAt(0) !== '#') {
            value = '#' + value;
        }
        colorInput.value = value;
        if (/^#[0-9A-F]{6}$/.test(value)) {
            colorPicker.value = value;
            previewCard.style.setProperty('--service-color', value);
            previewBadge.style.color = value;
            previewBadge.style.borderColor = value;
            previewBadge.style.background = value + '22';
        }
    }

    function syncName() {
        previewBadge.textContent = nomeInput.value.trim() || 'Nome do serviço';
    }

    colorInput.addEventListener('input', syncColor);
    colorPicker.addEventListener('input', function () {
        colorInput.value = this.value.toUpperCase();
        syncColor();
    });
    nomeInput.addEventListener('input', syncName);

    syncColor();
    syncName();
})();
</script>
