<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a id="breadcrumbActivities" href="?">Início</a></li>
        <li class="breadcrumb-item"><a id="breadcrumbEvent" href=""></a></li>
        <li class="breadcrumb-item active" aria-current="page"><a id="breadcrumbPackBookings" 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="pillsBookingsPack_buttonInfo" data-bs-toggle="pill" data-bs-target="#pillsActivities_tabList" type="button" role="tab" aria-controls="pillsActivities_List" aria-selected="true"><span class="fs-5">Pacote de inscrições</span></button>
            </li>
        </ul>
    </div>
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-4 text-gray-800">Dados das inscrições</h5>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-success" id="buttonPackBookingAdd">Adicionar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearPackBookingFilter">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tablePackBookings" width="100%" cellspacing="0"></table>
        </div>
    </div>
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-4 text-gray-800">Pagamentos recebidos</h5>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-success" id="buttonPaymentCreate">Criar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearPaymentFilter">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tablePackPayments" width="100%" cellspacing="0"></table>
        </div>
    </div>
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-4 text-gray-800">Emails enviados</h5>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-success" id="buttonEmailSend">Enviar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearEmailFilter">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tablePackEmails" width="100%" cellspacing="0"></table>
        </div>
    </div>
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h5 class="mb-4 text-gray-800">Histórico de alterações</h5>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-warning" id="buttonBookingRestore" disabled>Restaurar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearBookingRestoreFilter">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tablePackLogs" width="100%" cellspacing="0"></table>
        </div>
    </div>
</div>
<h7 class="m-0 text-gray-600">
    <strong>Instruções</strong><br />
</h7>

<!-- Modal Delete Booking -->
<div class="modal fade" id="modalBookingDelete" tabindex="-1" role="dialog" aria-labelledby="modalBookingDeleteLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBookingDeleteLabel">Inscrição a eliminar</h5>
      </div>
      <div class="modal-body">
        <form id="formBookingDelete">
            <div class="form-check">
                <label for="bookingDeleteNumber">Número</label>
                <input id="bookingDeleteNumber" name="bookingDeleteNumber" class="form-control" type="text" readonly required />
            </div>
            <div class="form-check">
                <label for="bookingDeleteName">Nome</label>
                <input id="bookingDeleteName" name="bookingDeleteName" 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="cancelBookingDelete">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- Modal Restore Booking -->
<div class="modal fade" id="modalBookingRestore" tabindex="-1" role="dialog" aria-labelledby="modalBookingRestoreLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalBookingRestoreLabel">Inscrição a restaurar</h5>
      </div>
      <div class="modal-body">
        <form id="formBookingRestore">
            <div class="form-check">
                <input id="event" name="event" class="form-control" type="hidden" readonly required />
            </div>
            <div class="form-check">
                <label for="bookingRestoreNumber">Número</label>
                <input id="number" name="number" class="form-control" type="text" readonly required />
            </div>
            <div class="form-check">
                <h6>Nome</h6>
                <p id="name"></p>
            </div>
            <div class="form-check">
                <label for="bookingRestoreCreated">Data da salvaguarda</label>
                <input id="created" name="created" class="form-control" type="text" readonly required />
            </div>
            <br />
            <button type="submit" class="btn btn-success">Restaurar</button>
            <button type="button" class="btn btn-outline-secondary" id="cancelBookingRestore">Cancelar</button>
        </form>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

<!-- Modal Show 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 enviado</h5>
      </div>
      <div class="modal-body">
        <div class="form-check">
            <label for="bookingEmailDate">Data de envio:</label>
            <input id="bookingEmailDate" name="bookingEmailDate" class="form-control" type="text" readonly />
        </div>
        <div class="form-check">
            <label for="bookingEmailTo">Enviado para:</label>
            <input id="bookingEmailTo" name="bookingEmailTo" class="form-control" type="text" readonly />
        </div>
        <div class="form-check">
            <label for="bookingEmailSubject">Assunto:</label>
            <div id="bookingEmailSubject" style="width:100%;height:42px; overflow:auto; border:1px solid #ccc; padding:10px;"></div>
        </div>
        <div class="form-check">
            <label for="bookingEmailBody">Conteúdo:</label>
            <div id="bookingEmailBody" style="width:100%;height:500px; overflow:auto; border:1px solid #ccc; padding:10px;"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" id="buttonEmailResend">Renviar</button>
        <button type="button" class="btn btn-outline-secondary" id="closeBookingEmail">Fechar</button>
      </div>
    </div>
  </div>
</div>
-->
<!-- Modal save Payment content -->
<div class="modal fade" id="modalPackPayment" tabindex="-1" role="dialog" aria-labelledby="modalPackPaymentLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalPackPaymentLabel">Pagamento a registar</h5>
      </div>
      <div class="modal-body">
        <form id="formPackPayment">
          <label for="provider">Forma de pagamento:</label>
          <div id="paymentProviders"></div>
          <br />
          <div class="col-12">
            Quantias a pagar para cada inscrição do pacote:
          </div>
          <div class="col-12">
            <table class="table" id="tablePackPayment">
              <thead>
                <tr>
                  <th scope="col">N&uacute;mero</th>
                  <th scope="col">Nome</th>
                  <th scope="col">Total</th>
                  <th scope="col">Dep&oacute;sito</th>
                  <th scope="col">Pago</th>
                  <th scope="col">Quantia a pagar</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>
                    <div class="form-check"><input class="form-check-input" type="radio" name="t_payment" id="t_payment.none" value="none"><label class="form-check-label" for="t_payment.none" data-text="Nenhuma quantia">Nenhuma</label></div>
                    <div class="form-check"><input class="form-check-input" type="radio" name="t_payment" id="t_payment.deposit" value="deposit"><label class="form-check-label" for="t_payment.deposit" data-text="Valor do depósito">Valor do depósito</label></div>
                    <div class="form-check"><input class="form-check-input" type="radio" name="t_payment" id="t_payment.full" value="full"><label class="form-check-label" for="t_payment.full" data-text="Valor restante">Valor restante</label></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <br />
          <button type="submit" class="btn btn-warning">Registar pagamento</button>
          <button type="button" class="btn btn-outline-secondary" id="closePackPayment">Fechar</button>
        </form>
      </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>

