<%- include('../partials/header') %>
<%- include('../partials/sidebar') %>

<div class="dashboard-header" style="margin-bottom: 30px;">
  <a href="/admin/programacao" style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 10px; display: inline-block;">
    <i class="fas fa-arrow-left"></i> Voltar para Grade
  </a>
  <h1 class="text-gradient">Novo Programa</h1>
</div>

<div class="card" style="max-width: 600px;">
  <% if (typeof error !== 'undefined' && error) { %>
    <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> <%= error %></div>
  <% } %>

  <form action="/admin/programacao/novo" method="POST" enctype="multipart/form-data">
    <div class="form-group">
      <label class="form-label">Nome do Programa *</label>
      <input type="text" name="nome" class="form-control" required placeholder="Ex: Manhã Top">
    </div>

    <div class="form-group">
      <label class="form-label">Locutor</label>
      <select name="locutor_id" class="form-control" style="appearance: auto; background-color: var(--bg-dark);">
        <option value="">Sem Locutor (AutoDJ)</option>
        <% locutores.forEach(l => { %>
          <option value="<%= l.id %>"><%= l.nome %></option>
        <% }) %>
      </select>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
      <div class="form-group">
        <label class="form-label">Horário de Início *</label>
        <input type="time" name="horario_inicio" class="form-control" required>
      </div>
      <div class="form-group">
        <label class="form-label">Horário de Término *</label>
        <input type="time" name="horario_fim" class="form-control" required>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label">Dias da Semana</label>
      <div style="display: flex; gap: 10px; flex-wrap: wrap;">
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="1"> Seg</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="2"> Ter</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="3"> Qua</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="4"> Qui</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="5"> Sex</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="6"> Sáb</label>
        <label style="display: flex; align-items: center; gap: 5px; color: var(--text-main);"><input type="checkbox" name="dias_semana" value="0"> Dom</label>
      </div>
      <small style="color: var(--text-muted);">Deixe vazio para tocar todos os dias.</small>
    </div>

    <div class="form-group">
      <label class="form-label">Imagem do Programa (Capa)</label>
      <div style="position: relative; overflow: hidden; display: inline-block; width: 100%;">
        <button type="button" class="btn" style="background: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-main); width: 100%; text-align: left; padding: 15px;">
          <i class="fas fa-image" style="color: var(--neon-purple); margin-right: 10px;"></i> 
          <span id="file-name-img">Selecionar imagem...</span>
        </button>
        <input type="file" name="imagem" accept="image/*" 
               style="font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer;"
               onchange="document.getElementById('file-name-img').textContent = this.files[0] ? this.files[0].name : 'Selecionar imagem...'">
      </div>
    </div>
    
    <div class="form-group">
      <label class="form-label">Descrição</label>
      <textarea name="descricao" class="form-control" rows="3"></textarea>
    </div>

    <button type="submit" class="btn btn-primary" style="margin-top: 10px; width: 100%; justify-content: center; padding: 12px;">
      <i class="fas fa-save"></i> Salvar Programa
    </button>
  </form>
</div>
<%- include('../partials/footer') %>
