# Botão Enviar Fixo + Modal de Confirmação — Tela Reordenar Rota

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Fixar o botão "Enviar" no rodapé da tela de reordenação de rota (mobile + desktop) e adicionar modal de confirmação com campo opcional de justificativa para o motorista.

**Architecture:** Mudanças puramente em frontend (HTML/CSS/JS inline). A barra sticky usa `position: sticky; bottom: 0` como último filho de `#formRota` — no mobile esse elemento é o scroll container (`overflow-y: auto`), no desktop o viewport assume o papel. O modal reutiliza as animações e o estilo visual do `.seq-modal` já existente. O campo `justificativa_motorista` vai como hidden field no POST sem mudança de backend.

**Tech Stack:** PHP (template), CSS inline em `_layout.php`, JS inline IIFE em `editar_rota.php`

---

### Task 1: CSS — Barra sticky e modal de confirmação

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Edicaorota/html/_layout.php` (antes da tag `</style>`)

- [ ] **Step 1: Inserir CSS da barra sticky e do modal antes do `</style>` em `_layout.php`**

Localizar a linha:
```css
</style>
```
(atualmente a última linha do bloco `<style>`, logo após os estilos de `.rota-timer-overlay-sub`)

Inserir **antes** dela o seguinte bloco CSS:

```css
  /* ============ Barra sticky de envio (rodapé do form) ============ */
  .enviar-fixo {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 12px 0 16px;
    background: linear-gradient(to top, rgba(10,8,32,0.97) 70%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-top: 8px;
  }
  .enviar-fixo-btn {
    flex: 1;
    width: auto;
    margin-top: 0;
  }
  .enviar-fixo-obs {
    width: 52px;
    min-width: 52px;
    margin-top: 0;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid var(--border-strong);
    box-shadow: none;
    font-size: 1.3rem;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .enviar-fixo-obs:hover { filter: brightness(1.2); }
  .enviar-fixo-obs.tem-obs {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.18);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
  }

  /* Padding para o último card não ficar coberto pela barra */
  @media (max-width: 899px) {
    .layout-rota > #formRota { padding-bottom: 80px; }
  }
  @media (min-width: 900px) {
    #formRota { padding-bottom: 80px; }
  }

  /* ============ Modal de confirmação de envio ============ */
  /* Reutiliza as animações seq-modal-fade e seq-modal-pop já definidas acima */
  .enviar-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(5, 5, 15, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: seq-modal-fade 0.18s ease-out;
  }
  .enviar-modal-overlay.oculto { display: none; }
  .enviar-modal {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(145deg, rgba(20, 16, 50, 0.98) 0%, rgba(30, 24, 65, 0.98) 100%);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 32px rgba(139, 92, 246, 0.28);
    animation: seq-modal-pop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .enviar-modal-titulo {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-soft);
    margin: 0 0 4px;
  }
  .enviar-modal-sub {
    font-size: 0.92rem;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.35;
  }
  .enviar-modal-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-soft);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .enviar-modal-opcional {
    font-size: 0.75rem;
    color: var(--muted-2);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
  }
  .enviar-modal-textarea {
    width: 100%;
    background: rgba(15, 12, 41, 0.7);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.95rem;
    padding: 12px 14px;
    resize: none;
    line-height: 1.5;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .enviar-modal-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
  }
  .enviar-modal-textarea::placeholder { color: rgba(196, 181, 253, 0.4); }
  .enviar-modal-acoes {
    display: flex;
    gap: 10px;
    margin-top: 18px;
  }
  .enviar-modal-btn {
    flex: 1;
    width: auto;
    border: none;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0;
    transition: filter 0.15s, transform 0.05s;
  }
  .enviar-modal-btn:active { transform: scale(0.98); }
  .enviar-modal-btn-cancelar {
    background: rgba(139, 92, 246, 0.12);
    color: var(--muted);
    border: 1px solid var(--border);
    box-shadow: none;
  }
  .enviar-modal-btn-cancelar:hover { filter: brightness(1.15); }
  .enviar-modal-btn-ok {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.45);
  }
  .enviar-modal-btn-ok:hover { filter: brightness(1.12); }
```

- [ ] **Step 2: Verificar sintaxe PHP**

```bash
php -l componentes/Missoes/Logistica/sinais/Edicaorota/html/_layout.php
```
Esperado: `No syntax errors detected in componentes/Missoes/Logistica/sinais/Edicaorota/html/_layout.php`

- [ ] **Step 3: Commit**

```bash
git add componentes/Missoes/Logistica/sinais/Edicaorota/html/_layout.php
git commit -m "feat(edicaorota): CSS barra sticky de envio e modal de confirmação"
```

---

### Task 2: HTML — Hidden field, remover botão antigo, barra sticky

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php`

- [ ] **Step 1: Adicionar hidden field `justificativa_motorista` após `#rotaProposta`**

Localizar:
```html
    <input type="hidden" name="rota_proposta" id="rotaProposta" value="">
```
Inserir a linha abaixo logo após:
```html
    <input type="hidden" name="justificativa_motorista" id="justificativaMotorista" value="">
```

- [ ] **Step 2: Remover o `<button type="submit">` do interior do `.card`**

Localizar e **remover** a linha (entre o `</ul>` de `#listaParadas` e o `</div>` que fecha o último `.card`):
```html
      <button type="submit">Enviar nova ordem para aprovação</button>
```

- [ ] **Step 3: Adicionar a barra `.enviar-fixo` dentro do `<form>`, após o último `.card`**

Após remover o botão, o final do form ficará assim:
```html
      </ul>

    </div>
  </form>
```
(o `</div>` fecha o último `.card`; o `</form>` fecha o formulário)

Substituir por:
```html
      </ul>

    </div>

    <div class="enviar-fixo" id="enviarFixo">
      <button type="button" class="enviar-fixo-obs" id="btnAbrirConfirmacao"
              aria-label="Adicionar observação e enviar rota">📝</button>
      <button type="button" class="enviar-fixo-btn" id="btnEnviarRota">
        Enviar nova ordem para aprovação
      </button>
    </div>
  </form>
```

- [ ] **Step 4: Verificar sintaxe PHP**

```bash
php -l componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
```
Esperado: `No syntax errors detected in componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php`

- [ ] **Step 5: Commit**

```bash
git add componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
git commit -m "feat(edicaorota): hidden field justificativa e barra sticky de envio"
```

---

### Task 3: HTML — Modal de confirmação

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php`

- [ ] **Step 1: Inserir o `.enviar-modal-overlay` após o bloco `.seq-modal-overlay`**

Localizar o trecho (final do bloco `.seq-modal-overlay`, antes do primeiro `<script>` com `window.__rotaOrigem`):
```html
</div>

<script>
window.__rotaOrigem
```

Inserir o bloco do modal **entre** o `</div>` e o `<script>`:
```html
</div>

<div class="enviar-modal-overlay oculto" id="enviarModalOverlay"
     role="dialog" aria-modal="true" aria-labelledby="enviarModalTitulo">
  <div class="enviar-modal" role="document">
    <div class="enviar-modal-titulo" id="enviarModalTitulo">Confirmar envio?</div>
    <div class="enviar-modal-sub">
      A nova sequência de entregas será enviada para aprovação.
    </div>
    <label class="enviar-modal-label" for="enviarModalTexto">
      📝 Motivo da alteração
      <span class="enviar-modal-opcional">(opcional)</span>
    </label>
    <textarea id="enviarModalTexto" class="enviar-modal-textarea"
              placeholder="Ex: cliente pediu mudança de horário…"
              rows="3"></textarea>
    <div class="enviar-modal-acoes">
      <button type="button"
              class="enviar-modal-btn enviar-modal-btn-cancelar"
              id="enviarModalCancelar">Cancelar</button>
      <button type="button"
              class="enviar-modal-btn enviar-modal-btn-ok"
              id="enviarModalConfirmar">Confirmar envio</button>
    </div>
  </div>
</div>

<script>
window.__rotaOrigem
```

- [ ] **Step 2: Verificar sintaxe PHP**

```bash
php -l componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
```
Esperado: `No syntax errors detected`

- [ ] **Step 3: Commit**

```bash
git add componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
git commit -m "feat(edicaorota): HTML modal de confirmação de envio"
```

---

### Task 4: JS — IIFE do modal de confirmação

**Files:**
- Modify: `componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php`

- [ ] **Step 1: Inserir a IIFE antes do fechamento do output buffer**

Localizar o trecho no final do arquivo (após todos os `<script>` existentes):
```php
<?php
$conteudo = ob_get_clean();
$titulo   = 'Reordenar rota';
include __DIR__ . '/_layout.php';
```

Inserir **antes** do `<?php` final:
```html
<script>
(function () {
  var overlay    = document.getElementById('enviarModalOverlay');
  var textarea   = document.getElementById('enviarModalTexto');
  var btnObs     = document.getElementById('btnAbrirConfirmacao');
  var btnEnviar  = document.getElementById('btnEnviarRota');
  var btnOk      = document.getElementById('enviarModalConfirmar');
  var btnCancel  = document.getElementById('enviarModalCancelar');
  var hiddenJust = document.getElementById('justificativaMotorista');

  if (!overlay || !textarea || !btnObs || !btnEnviar || !btnOk || !btnCancel || !hiddenJust) return;

  function abrirModal() {
    overlay.classList.remove('oculto');
    setTimeout(function () { textarea.focus(); }, 80);
  }

  function fecharModal() {
    overlay.classList.add('oculto');
  }

  function confirmarEnvio() {
    hiddenJust.value = textarea.value.trim();
    fecharModal();
    document.getElementById('formRota').requestSubmit();
  }

  // Indicador visual no ícone 📝 quando há justificativa preenchida
  textarea.addEventListener('input', function () {
    btnObs.classList.toggle('tem-obs', textarea.value.trim().length > 0);
  });

  btnEnviar.addEventListener('click', abrirModal);
  btnObs.addEventListener('click', abrirModal);
  btnOk.addEventListener('click', confirmarEnvio);
  btnCancel.addEventListener('click', fecharModal);

  // Click no fundo (fora do quadro) fecha o modal
  overlay.addEventListener('click', function (ev) {
    if (ev.target === overlay) fecharModal();
  });

  // Esc fecha o modal (acessibilidade)
  textarea.addEventListener('keydown', function (ev) {
    if (ev.key === 'Escape') fecharModal();
  });
})();
</script>
```

- [ ] **Step 2: Verificar sintaxe PHP**

```bash
php -l componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
```
Esperado: `No syntax errors detected`

- [ ] **Step 3: Commit**

```bash
git add componentes/Missoes/Logistica/sinais/Edicaorota/html/editar_rota.php
git commit -m "feat(edicaorota): JS modal de confirmação com justificativa do motorista"
```

---

### Task 5: Verificação no browser

- [ ] **Step 1: Abrir a URL de teste no browser mobile (DevTools, viewport 390px)**

URL: `https://dev-galpaotms.goldieapp.com.br/edicao-rota/b49f452483b38ae89d11f1d72f628ede1853de03948a38fd7b72fd90309e90a2`

- [ ] **Step 2: Verificar barra sticky no mobile (viewport ≤899px)**
  - A barra com 📝 e "Enviar nova ordem para aprovação" aparece no rodapé
  - O último card da lista está acima da barra, não coberto por ela
  - Ao rolar a lista, a barra permanece fixada no rodapé
  - Ao deslizar para o painel do **mapa**, a barra desaparece (está dentro do form, não é `position: fixed` global)

- [ ] **Step 3: Verificar abertura do modal**
  - Clicar em "Enviar nova ordem para aprovação" → modal abre com animação
  - Clicar em 📝 → mesmo modal abre
  - A textarea recebe foco automaticamente (~80ms após abertura)

- [ ] **Step 4: Verificar fechamento do modal**
  - Clicar em "Cancelar" → modal fecha, formulário NÃO é enviado
  - Clicar fora do quadro do modal (no overlay escuro) → modal fecha
  - Pressionar Esc dentro da textarea → modal fecha

- [ ] **Step 5: Verificar indicador de justificativa**
  - Digitar algo na textarea → ícone 📝 ganha borda âmbar (`.tem-obs`)
  - Apagar todo o texto → borda âmbar some
  - Fechar e reabrir o modal → o texto digitado persiste (modal não é destruído, só ocultado)

- [ ] **Step 6: Verificar envio real**
  - Com o DevTools Network aberto, clicar "Confirmar envio"
  - O POST deve incluir `justificativa_motorista` (com o texto digitado ou vazio)
  - `rota_proposta` também deve estar no POST (handler existente na linha 1106 do `editar_rota.php`)

- [ ] **Step 7: Verificar desktop (≥900px)**
  - Grid de 2 colunas (lista + mapa) não é afetado
  - A barra sticky aparece ao rolar a página
  - Último card não fica coberto pela barra (padding-bottom: 80px)