<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="?">Início</a></li>
        <li class="breadcrumb-item active" aria-current="page"><a id="breadcrumbEvent" href=""></a></li>
    </ol>
</nav>
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center active" id="pillsEventResources_button" data-bs-toggle="pill" data-bs-target="#pillsEventResources_tab" type="button" role="tab" aria-controls="pillsEventResources" aria-selected="true"><span class="fs-5">Recursos</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventBookings_button" data-bs-toggle="pill" data-bs-target="#pillsEventBookings_tab" type="button" role="tab" aria-controls="pillsEventBookings" aria-selected="false"><span class="fs-5">Inscrições</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventPaymnts_button" data-bs-toggle="pill" data-bs-target="#pillsEventPayments_tab" type="button" role="tab" aria-controls="pillsEventPayments" aria-selected="false"><span class="fs-5">Pagamentos</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventEmails_button" data-bs-toggle="pill" data-bs-target="#pillsEventEmails_tab" type="button" role="tab" aria-controls="pillsEventEmails" aria-selected="false"><span class="fs-5">Emails</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventLogs_button" data-bs-toggle="pill" data-bs-target="#pillsEventLogs_tab" type="button" role="tab" aria-controls="pillsEventLogs" aria-selected="false"><span class="fs-5">Logs</span></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="btn btn-light nav-link d-flex align-items-center justify-content-center" id="pillsEventConfig_button" data-bs-toggle="pill" data-bs-target="#pillsEventConfig_tab" type="button" role="tab" aria-controls="pillsEventConfig" aria-selected="false"><span class="fs-5">Configuração</span></button>
            </li>
        </ul>
    </div>
    <div class="tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="pillsEventResources_tab" role="tabpanel" aria-labelledby="pillsEventResources_button">
            <div class="card-header py-3 d-flex align-items-center">
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="clearEventResourcesFilter">Limpar filtros</button>
                </div>
            </div>        
            <div id="tablesResource">
            </div>
            <div class="card-footer">
                <h7 class="m-0 text-gray-600">
                    <strong>Instruções</strong><br />
                </h7>
            </div>
            
      </div>

      <div class="tab-pane fade" id="pillsEventBookings_tab" role="tabpanel" aria-labelledby="pillsEventBookings_button">

        <div class="card-header py-3 d-flex align-items-center">
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-success" id="buttonBookingCreate">Criar inscrição</button>
                <button type="button" class="btn btn-warning" id="buttonSessionLinkSend">Enviar link</button>
                <button type="button" class="btn btn-warning" id="buttonRequestDepositPayment">Pedir pagamento depósito</button>
                <button type="button" class="btn btn-warning" id="buttonRequestFullPayment">Pedir pagamento completo</button>
                <button type="button" class="btn btn-dark" id="buttonGenerateBadges">Gerar passes</button>
                <button type="button" class="btn btn-dark" id="buttonGenerateCSV">Descarregar CSV</button>
                <button type="button" class="btn btn-outline-dark" data-bs-toggle="button" autocomplete="off" id="buttonCompactExpand">Compacta/Expandida</button>
                <button type="button" class="btn btn-outline-secondary" id="cleaEventBookingsrFilter">Limpar filtros</button>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventBookings" width="100%" cellspacing="0"><caption>Dados das inscrições</caption></table>
            </div>
        </div>
        <div class="card-footer">
            <h7 class="m-0 text-gray-600">
                <strong>Instruções</strong><br />
                A geração de passes/CSV é feita apenas para as linhas visíveis.<br />
                É possível aplicar filtros, que escondem linhas, usando as caixas de texto Search e no topo de cada coluna.<br />
                Exemplos regex para filtros:<br />- Dívida 0€: <strong>^0</strong><br />- Com dívida: <strong>^[1-9]</strong><br />- Número 54: <strong>^54$</strong><br />- Números maiores do que 54: <strong>^(5[4-9]|[6-9]\d|\d{3,})$</strong><br />- Número 21 e 37:<strong>^21|37$</strong><br />- "Ana" mas não "Anabela": <strong>\bAna\b</strong><br />- Com concessão: <strong>^[A-Z]</strong><br />- Sem concessão: <strong>^\s+$</strong>
            </h7>
        </div>
                    
      </div>

      <div class="tab-pane fade" id="pillsEventPayments_tab" role="tabpanel" aria-labelledby="pillsEventPayments_button">

        <div class="card-header py-3 d-flex align-items-center">
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="cleaEventPaymentsrFilter">Limpar filtros</button>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventPayments" width="100%" cellspacing="0"><caption>Pagamentos recebidos</caption></table>
            </div>
        </div>
        <div class="card-footer">
            <h7 class="m-0 text-gray-600">
                <strong>Instruções</strong><br />
            </h7>
        </div>
                    
      </div>

      <div class="tab-pane fade" id="pillsEventEmails_tab" role="tabpanel" aria-labelledby="pillsEventEmails_button">

        <div class="card-header py-3 d-flex align-items-center">
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="cleaEventEmailsrFilter">Limpar filtros</button>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventEmails" width="100%" cellspacing="0"><caption>Emails enviados</caption></table>
            </div>
        </div>
        <div class="card-footer">
            <h7 class="m-0 text-gray-600">
                <strong>Instruções</strong><br />
            </h7>
        </div>
                    
      </div>

      <div class="tab-pane fade" id="pillsEventLogs_tab" role="tabpanel" aria-labelledby="pillsEventLogs_button">

        <div class="card-header py-3 d-flex align-items-center">
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="cleaEventLogsrFilter">Limpar filtros</button>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventLogs" width="100%" cellspacing="0"><caption>Histórico de alterações</caption></table>
            </div>
        </div>
        <div class="card-footer">
            <h7 class="m-0 text-gray-600">
                <strong>Instruções</strong><br />
            </h7>
        </div>
                    
      </div>

      <div class="tab-pane fade" id="pillsEventConfig_tab" role="tabpanel" aria-labelledby="pillsEventConfig_button">

        <div class="card-header py-3 d-flex align-items-center">
            <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-dark" id="buttonGenerateEmptyBadges">Gerar passes vazios</button>
                <button type="button" class="btn btn-warning" id="buttonCloneEvent">Clonar evento</button>
                <button type="button" class="btn btn-danger" id="buttonDeleteEvent">Eliminar evento</button>
                <button type="button" class="btn btn-outline-secondary" id="clearEventConfigFilter">Limpar filtros</button>
            </div>
        </div>        
        <div class="card-body">
            <h5 class="m-0 text-gray-600">Links:</h5>
            Inscrições - <a id="link_event_booking" href=""></a></a><br/>
            Gestão - <a id="link_event_manage" href=""></a></a><br/><br/>
            <h5 class="m-0 text-gray-600">Links para testes:</h5>
            Inscrições de teste - <a id="link_event_booking_test" href=""></a></a><br/>
            Gestão de testes - <a id="link_event_manage_test" href=""></a></a>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventRemoteLinks" width="100%" cellspacing="0"><caption>Links para sessões remotas</caption></table>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventConfigPublic" width="100%" cellspacing="0"><caption>Página(s) web e UI</caption></table>
            </div>
        </div>
        <div class="card-body">
            <div class="datatable table-responsive">
                <table class="display" id="tableEventConfigPrivate" width="100%" cellspacing="0"><caption>Configuração interna e emails</caption></table>
            </div>
        </div>
        <div class="card-footer">
            <h7 class="m-0 text-gray-600">
                <strong>Instruções</strong><br />
                Na primeira tabela encontram-se a(s) página(s) web com os formulários disponíveis, um por cada língua usada, e a configuração do comportamento da interface do utilizador (UI).
                Na segunda tabela encontram-se os modelos de emails, um por cada língua usada, e toda a configuração da atividade.
            </h7>
        </div>
        
      </div>

    </div>

</div> 

<!-- Modal Clone Event -->
<div class="modal fade" id="modalCloneEvent" tabindex="-1" role="dialog" aria-labelledby="modalCloneEventLabel" aria-hidden="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCloneEventLabel">Clonar evento</h5>
            </div>
            <div class="modal-body">
                <form id="formCloneEvent">
                    <div class="form-check">
                        <label for="eventClone">Evento a clonar</label>
                        <input id="eventClone" name="eventClone" class="form-control" type="text" readonly required />
                    </div>
                    <div class="form-check">
                        <label for="startDate">Data do novo evento</label>
                        <input id="startDate" name="startDate" class="form-control" type="date" required />
                        <span id="startDateSelected"></span>
                    </div>
                    <div class="form-check">
                        <label for="startDate">Título do novo evento</label>
                        <input id="title" name="title" class="form-control" type="text" required />
                    </div>
                    <br />
                    <button type="submit" class="btn btn-primary">Clonar</button>
                    <button type="button" class="btn btn-outline-secondary" id="cancelCloneEvent">Cancelar</button>
                </form>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

<!-- Modal Delete Event -->
<div class="modal fade" id="modalDeleteEvent" tabindex="-1" role="dialog" aria-labelledby="modalDeleteEventLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalDeleteEventLabel">Eliminar evento</h5>
      </div>
      <div class="modal-body">
        <p>Info: Esta operação só será efetuada se não existirem inscrições (aceites ou candidatas). Se este for o único evento da atividade então a atividade será também eliminada.</p>
        <form id="formDeleteEvent">
            <div class="form-check">
                <label for="EventDeleteNumber">Evento a eliminar</label>
                <input id="eventId" name="eventId" class="form-control" type="text" readonly required />
            </div>
            <br />
            <button type="submit" class="btn btn-success">Eliminar</button>
            <button type="button" class="btn btn-outline-secondary" id="cancelDeleteEvent">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>


<!-- Modal Session Link Send -->
<div class="modal fade" id="modalSendSessionLink" tabindex="-1" role="dialog" aria-labelledby="modalSendSessionLinkLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalSendSessionLinkLabel">Enviar link para as sessões remotas</h5>
      </div>
      <div class="modal-body">
        <p>O link para as sessões remotas será enviado apenas para os destinatários visíveis na tabela com inscrição nas sessões remotas (s_Session) e de acordo com as sessões em que se inscreveram (t_Session). Pode aplicar filtros para excluir inscrições. Verifique que os links abaixo estão corretos para cada tipo de inscrição (t_Session). Depois de clicar no emvio já não será possível anular a operação. Cada envio ficará registado na secção de emails de cada inscrição.</p>
        <form id="formSessionLinkSend">
            <div class="form-check">
                <label for="SessionLink">Inscrições por cada link</label>
                <pre id="SessionLink" style="background:#f0f0f0; padding:1em; border:1px solid #ccc;"></pre>
            </div>
            <div class="form-check">
                <label for="SessionLinkSendQuantity">Número total de emails a enviar</label>
                <input id="SessionLinkSendQuantity" name="SessionLinkSendQuantity" class="form-control" type="text" readonly required />
            </div>
            <br />
            <button type="submit" class="btn btn-success">Enviar email(s)</button>
            <button type="button" class="btn btn-outline-secondary" id="cancelSessionLinkSend">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- Modal Request Payment Deposit -->
<div class="modal fade" id="modalRequestPaymentDeposit" tabindex="-1" role="dialog" aria-labelledby="modalRequestPaymentDepositLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalRequestPaymentDepositLabel">Pedir pagamento de valor mínimo</h5>
      </div>
      <div class="modal-body">
        <p>O pedido de pagamento do valor mínimo será enviado apenas para os destinatários visíveis na tabela que ainda não completaram esse pagamento. Pode aplicar filtros para excluir inscrições. Depois de clicar no emvio já não será possível anular a operação. Cada envio ficará registado na secção de emails de cada inscrição.</p>
        <form id="formRequestPaymentDeposit">
            <div class="form-check">
                <label for="PaymentDeposit">Inscrições selecionadas</label>
                <pre id="PaymentDeposit" style="background:#f0f0f0; padding:1em; border:1px solid #ccc;"></pre>
            </div>
            <div class="form-check">
                <label for="RequestPaymentDepositQuantity">Número total de emails a enviar</label>
                <input id="RequestPaymentDepositQuantity" name="RequestPaymentDepositQuantity" class="form-control" type="text" readonly required />
            </div>
            <br />
            <button type="submit" class="btn btn-success">Enviar email(s)</button>
            <button type="button" class="btn btn-outline-secondary" id="cancelRequestPaymentDeposit">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- Modal Request Payment Full -->
<div class="modal fade" id="modalRequestPaymentFull" tabindex="-1" role="dialog" aria-labelledby="modalRequestPaymentFullLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalRequestPaymentFullLabel">Pedir pagamento do valor restante</h5>
      </div>
      <div class="modal-body">
        <p>O pedido de pagamento do valor restante será enviado apenas para os destinatários visíveis na tabela que ainda não completaram o pagamento. Pode aplicar filtros para excluir inscrições. Depois de clicar no emvio já não será possível anular a operação. Cada envio ficará registado na secção de emails de cada inscrição.</p>
        <form id="formRequestPaymentFull">
            <div class="form-check">
                <label for="PaymentFull">Inscrições selecionadas</label>
                <pre id="PaymentFull" style="background:#f0f0f0; padding:1em; border:1px solid #ccc;"></pre>
            </div>
            <div class="form-check">
                <label for="RequestPaymentFullQuantity">Número total de emails a enviar</label>
                <input id="RequestPaymentFullQuantity" name="RequestPaymentFullQuantity" class="form-control" type="text" readonly required />
            </div>
            <br />
            <button type="submit" class="btn btn-success">Enviar email(s)</button>
            <button type="button" class="btn btn-outline-secondary" id="cancelRequestPaymentFull">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- Modal Show/Resend Email content -->
<div class="modal fade" id="modalBookingEmail" tabindex="-1" role="dialog" aria-labelledby="modalBookingEmailLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBookingEmailLabel">Email a reenviar</h5>
      </div>
      <div class="modal-body">
        <form id="formEmailResend">
          <div class="form-check">
              <label for="number">Numero da inscrição:</label>
              <input id="number" name="number" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailDate">Data de envio:</label>
              <input id="emailDate" name="emailDate" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailType">Tipo de email:</label>
              <input id="emailType" name="emailType" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailTo">Enviado para:</label>
              <input id="emailTo" name="emailTo" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailSubject">Assunto:</label>
              <div id="emailSubject" style="width:100%;height:42px; overflow:auto; border:1px solid #ccc; padding:10px;"></div>
          </div>
          <div class="form-check">
              <label for="emailBody">Conteúdo (HTML):</label>
              <div id="emailBody" style="width:100%;height:500px; overflow:auto; border:1px solid #ccc; padding:10px;"></div>
          </div>
          <br />
          <button type="submit" class="btn btn-warning">Reenviar</button>
          <button type="button" class="btn btn-outline-secondary" id="closeBookingEmail">Fechar</button>
        </form>
      </div>
    </div>
  </div>
</div>
