<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"><a id="breadcrumbPackBookings" href=""></a></li>
        <li class="breadcrumb-item active" aria-current="page"><a id="breadcrumbBookingDetails" 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">Inscrição</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 da inscrição</h5>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-success" id="buttonBookingChangeEmail">Alterar e enviar email</button>
            <button type="button" class="btn btn-warning" id="buttonBookingChange">Alterar</button>
            <button type="button" class="btn btn-danger"  id="buttonBookingDelete">Eliminar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearFilter">Limpar</button>
        </div>
    </div>
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tableBookingDetails" 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="clearSelection">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tableBookingPayments" 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-warning" id="buttonEmailResend" disabled>Renviar</button>
            <button type="button" class="btn btn-outline-secondary" id="clearSelection">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tableBookingEmails" 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="clearSelection">Limpar</button>
        </div>
    </div>        
    <div class="card-body">
        <div class="datatable table-responsive">
            <table class="display" id="tableBookingLogs" 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-outline-secondary" id="closeBookingEmail">Fechar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Resend Email content -->
<div class="modal fade" id="modalEmailResend" tabindex="-1" role="dialog" aria-labelledby="modalEmailResendLabel" aria-hidden="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalEmailResendLabel">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 original:</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">Para:</label>
              <input id="emailTo" name="emailTo" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailSubject">Assunto:</label>
              <input id="emailSubject" name="emailSubject" class="form-control" type="text" readonly />
          </div>
          <div class="form-check">
              <label for="emailBody">Conteúdo (HTML):</label>
              <input id="emailBody" name="emailBody" class="form-control" type="text" readonly />
          </div>
          <br />
          <button type="submit" class="btn btn-success">Reenviar</button>
          <button type="button" class="btn btn-outline-secondary" id="cancelEmailResend">Cancelar</button>
        </form>
      </div>
    </div>
  </div>
</div>

