{% extends "layout/layout-calendar.html" %} {% set page_title = "Calender" %} {%
block content %}

<main class="app-wrapper">
  {% include "../templates/layout/header-footer/app-header.html" %} {% include
  "../templates/layout/header-footer/app-sidebar.html" %} {% include
  "../templates/layout/header-footer/topnavbar.html" %}
  <div class="content-wrapper">
    <div class="page-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12 rt-mb-25">
            {% include "../templates/components/breadcrumbs/breadcrumbs.html" %}
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="row">
              <div class="col-xl-3">
                <div class="card">
                  <div class="card-body">
                    <div
                      id="btn-new-event"
                      class="btn waves-effect waves-light btn-primary btn-icon d-block"
                    >
                      <div class="button-content-wrapper">
                        <div class="button-icon">
                          <i class="ph-plus-circle"></i>
                        </div>
                        <div class="button-text">Create New Event</div>
                      </div>
                    </div>
                    <div class="body-font-4 text-gray-600 rt-pt-30 rt-mb-20">
                      Drag and drop your event or click in the calenda
                    </div>
                    <div id="external-events">
                      <div
                        class="external-event fc-event bg-success"
                        data-class="bg-success"
                      >
                        <i
                          class="mdi mdi-checkbox-blank-circle f-size-11 me-2"
                        ></i
                        >New Event Planning
                      </div>
                      <div
                        class="external-event fc-event bg-info"
                        data-class="bg-info"
                      >
                        <i
                          class="mdi mdi-checkbox-blank-circle f-size-11 me-2"
                        ></i
                        >Meeting
                      </div>
                      <div
                        class="external-event fc-event bg-warning"
                        data-class="bg-warning"
                      >
                        <i
                          class="mdi mdi-checkbox-blank-circle f-size-11 me-2"
                        ></i
                        >Generating Reports
                      </div>
                      <div
                        class="external-event fc-event bg-danger"
                        data-class="bg-danger"
                      >
                        <i
                          class="mdi mdi-checkbox-blank-circle f-size-11 me-2"
                        ></i
                        >Create New theme
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end col-->
              <div class="col-xl-9">
                <div class="card">
                  <div class="card-body">
                    <div id="calendar"></div>
                  </div>
                </div>
              </div>
              <!-- end col -->
            </div>

            <!-- Add New Event MODAL -->
            <div class="modal fade" id="event-modal" tabindex="-1">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header py-3 px-4">
                    <h5 class="modal-title f-size-18 font-medium">Event</h5>
                    <button
                      type="button"
                      class="btn-close"
                      data-bs-dismiss="modal"
                      aria-label="Close"
                    ></button>
                  </div>
                  <div class="modal-body p-4">
                    <form
                      class="needs-validation"
                      name="event-form"
                      id="form-event"
                      novalidate
                    >
                      <div class="row">
                        <div class="col-12">
                          <div class="mb-3">
                            <label class="form-label">Event Name</label>
                            <input
                              class="form-control"
                              placeholder="Insert Event Name"
                              type="text"
                              name="title"
                              id="event-title"
                              required
                              value=""
                            />
                            <div class="invalid-feedback">
                              Please provide a valid event name
                            </div>
                          </div>
                        </div>
                        <div class="col-12">
                          <div class="mb-3">
                            <label class="form-label">Category</label>
                            <select
                              class="form-select"
                              name="category"
                              id="event-category"
                            >
                              <option selected>--Select--</option>
                              <option value="bg-danger">Danger</option>
                              <option value="bg-success">Success</option>
                              <option value="bg-primary">Primary</option>
                              <option value="bg-info">Info</option>
                              <option value="bg-dark">Dark</option>
                              <option value="bg-warning">Warning</option>
                            </select>
                            <div class="invalid-feedback">
                              Please select a valid event category
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="row mt-2">
                        <div class="col-6">
                          <button
                            type="button"
                            class="btn waves-effect waves-light btn-danger"
                            id="btn-delete-event"
                          >
                            Delete
                          </button>
                        </div>
                        <div class="col-6 text-end">
                          <button
                            type="button"
                            class="btn waves-effect waves-light btn-light me-1"
                            data-bs-dismiss="modal"
                          >
                            Close
                          </button>
                          <button
                            type="submit"
                            class="btn waves-effect waves-light btn-success"
                            id="btn-save-event"
                          >
                            Save
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <!-- end modal-content-->
              </div>
              <!-- end modal dialog-->
            </div>
            <!-- end modal-->
          </div>
        </div>
        {% include "../templates/layout/header-footer/footer.html" %}
      </div>
    </div>
  </div>
</main>

{% endblock %}