{% extends "partials/base.html" %}
{% load static %}
{% block content %}
    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content">

            <!-- Page Header -->
            <div class="d-md-flex d-block align-items-center justify-content-between mb-3">
                {% block title %}
                {% include "partials/title.html" with title="Events" text="Dashboard" textone="Announcement" texttwo="Events" %}
                {% endblock title %}
                <div class="d-flex my-xl-auto right-content align-items-center flex-wrap">
                    <div class="pe-1 mb-2">
                        <a href="#" class="btn btn-outline-light bg-white btn-icon me-1" data-bs-toggle="tooltip"
                            data-bs-placement="top" aria-label="Refresh" data-bs-original-title="Refresh">
                            <i class="ti ti-refresh"></i>
                        </a>
                    </div>
                    <div class="pe-1 mb-2">
                        <button type="button" class="btn btn-outline-light bg-white btn-icon me-1"
                            data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Print"
                            data-bs-original-title="Print">
                            <i class="ti ti-printer"></i>
                        </button>
                    </div>
                    <div class="mb-2">
                        <a href="#" class="btn btn-light d-flex align-items-center"><i class="ti ti-calendar-up me-2"></i>Sync with Google Calendar</a>
                    </div>
                </div>
            </div>
            <!-- /Page Header -->

            <div class="row">

                <!-- Event Calendar -->
                <div class="col-xl-8 col-xxl-9 theiaStickySidebar">
                    <div class="card">
                        <div class="card-body">
                            <div id="events"></div>
                        </div>
                    </div>
                </div>
                <!-- /Event Calendar -->

                <!-- Event List -->
                <div class="col-xl-4 col-xxl-3 theiaStickySidebar">
                    <div class="d-flex align-items-center justify-content-between">
                        <h5 class="mb-3">Events</h5>
                        <div class="dropdown mb-3">
                            <a href="javascript:void(0);" class="btn btn-outline-light dropdown-toggle"
                                data-bs-toggle="dropdown">All Category
                            </a>
                            <ul class="dropdown-menu p-3">
                                <li>
                                    <a href="#" class="dropdown-item rounded-1 d-flex align-items-center">
                                        <i class="ti ti-circle-filled fs-8 text-warning me-2"></i>Celebration
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item rounded-1 d-flex align-items-center">
                                        <i class="ti ti-circle-filled fs-8 text-success me-2"></i>Training
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item rounded-1 d-flex align-items-center">
                                        <i class="ti ti-circle-filled fs-8 text-info me-2"></i>Meeting
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item rounded-1 d-flex align-items-center">
                                        <i class="ti ti-circle-filled fs-8 text-danger me-2"></i>Holidays
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item rounded-1 d-flex align-items-center">
                                        <i class="ti ti-circle-filled fs-8 text-pending me-2"></i>Camp
                                    </a>
                                </li>
                            </ul>
                        </div>	
                    </div>

                    <!-- Event Item -->
                    <div class="border-start border-info border-3 shadow-sm p-3 mb-3 bg-white">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <span class="avatar p-1 me-3 bg-primary-transparent flex-shrink-0">
                                <i class="ti ti-users-group text-info fs-20"></i>
                            </span>
                            <div class="flex-fill">
                                <h6 class="mb-1">Parents, Teacher Meet</h6>
                                <p class="fs-12"><i class="ti ti-calendar me-1"></i>15 July 2024</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="mb-0 fs-12"><i class="ti ti-clock me-1"></i>09:10AM - 10:50PM</p>
                            <div class="avatar-list-stacked avatar-group-sm">
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-01.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-07.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-02.jpg' %}" class="rounded" alt="img">
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /Event Item -->

                    <!-- Event Item -->
                    <div class="border-start border-danger border-3 shadow-sm p-3 mb-3 bg-white">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <span class="avatar p-1 me-2 bg-danger-transparent flex-shrink-0">
                                <i class="ti ti-vacuum-cleaner fs-24"></i>
                            </span>
                            <div class="flex-fill">
                                <h6 class="mb-1">Summer Vacation</h6>
                                <p class="fs-12"><i class="ti ti-calendar me-1"></i>07 July 2024 - 08 July 2024</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="fs-12 mb-0"><i class="ti ti-clock me-1"></i>09:10 AM - 10:50 PM</p>
                            <div class="avatar-list-stacked avatar-group-sm">
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-11.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-13.jpg' %}" class="rounded" alt="img">
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /Event Item -->

                    <!-- Event Item -->
                    <div class="border-start border-info border-3 shadow-sm p-3 mb-3 bg-white">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <span class="avatar p-1 me-2 bg-info-transparent flex-shrink-0">
                                <i class="ti ti-user-edit fs-20"></i>
                            </span>
                            <div class="flex-fill">
                                <h6 class="mb-1">Staff Meeting</h6>
                                <p class="fs-12"><i class="ti ti-calendar me-1"></i>10 July 2024</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="fs-12 mb-0"><i class="ti ti-clock me-1"></i>09:10AM - 10:50PM</p>
                            <div class="avatar-list-stacked avatar-group-sm">
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-05.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-06.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-07.jpg' %}" class="rounded" alt="img">
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /Event Item -->

                    <!-- Event Item -->
                    <div class="border-start border-secondary border-3 shadow-sm p-3 mb-3 bg-white">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <span class="avatar p-1 me-2 bg-secondary-transparent flex-shrink-0">
                                <i class="ti ti-campfire fs-20"></i>
                            </span>
                            <div class="flex-fill">
                                <h6 class="mb-1">Admission Camp</h6>
                                <p class="fs-12"><i class="ti ti-calendar me-1"></i>10 July 2024</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="fs-12 mb-0"><i class="ti ti-clock me-1"></i>09:10AM - 10:50PM</p>
                            <div class="avatar-list-stacked avatar-group-sm">
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-04.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-05.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/parents/parent-10.jpg' %}" class="rounded" alt="img">
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /Event Item -->							

                    <!-- Event Item -->
                    <div class="border-start border-success border-3 shadow-sm p-3 mb-4 bg-white">
                        <div class="d-flex align-items-center mb-3 pb-3 border-bottom">
                            <span class="avatar p-1 me-2 bg-success-transparent flex-shrink-0">
                                <i class="ti ti-clipboard-heart fs-20"></i>
                            </span>
                            <div class="flex-fill">
                                <h6 class="mb-1">Activity Training</h6>
                                <p class="fs-12"><i class="ti ti-calendar me-1"></i>26 July 2024</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <p class="fs-12 mb-0"><i class="ti ti-clock me-1"></i>09:10AM - 10:50PM</p>
                            <div class="avatar-list-stacked avatar-group-sm">
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/teachers/teacher-02.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/teachers/teacher-05.jpg' %}" class="rounded" alt="img">
                                </span>
                                <span class="avatar border-0">
                                    <img src="{% static 'assets/img/teachers/teacher-06.jpg' %}" class="rounded" alt="img">
                                </span>
                            </div>
                        </div>
                    </div>
                    <!-- /Event Item -->

                </div>
                <!-- /Event List -->

            </div>

        </div>
    </div>
    <!-- /Page Wrapper -->

    <!-- Add Event -->
    <div class="modal fade" id="add_event">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">New Event</h4>
                    <button type="button" class="btn-close custom-btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="ti ti-x"></i>
                    </button>
                </div>					
                <form action="events">
                    <div class="modal-body">		
                        <div class="row">
                            <div class="col-md-12">
                                <div>
                                    <label class="form-label">Event For</label>
                                    <div class="d-flex align-items-center flex-wrap">
                                        <div class="form-check me-3 mb-3">
                                            <input class="form-check-input" type="radio" name="event" id="all" checked="">
                                            <label class="form-check-label" for="all">
                                                All
                                            </label>
                                        </div>
                                        <div class="form-check me-3 mb-3">
                                            <input class="form-check-input" type="radio" name="event" id="students">
                                            <label class="form-check-label" for="students">
                                                Students
                                            </label>
                                        </div>
                                        <div class="form-check me-3 mb-3">
                                            <input class="form-check-input" type="radio" name="event" id="staffs">
                                            <label class="form-check-label" for="staffs">
                                                Staffs
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="all-content" id="all-student">
                                    <div class="mb-3">
                                        <label class="form-label">Classes</label>
                                        <select class="select">
                                            <option>All Classes</option>
                                            <option>I</option>
                                            <option>II</option>
                                            <option>III</option>
                                            <option>IV</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Sections</label>
                                        <select class="select">
                                            <option>All Sections</option>
                                            <option>A</option>
                                            <option>B</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="all-content" id="all-staffs">
                                    <div class="mb-3">
                                        <div class="bg-light-500 p-3 pb-2 rounded">
                                            <label class="form-label">Role</label>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox">Admin
                                                    </div>
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox" checked>Teacher
                                                    </div>
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox">Driver
                                                    </div>										
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox">Accountant
                                                    </div>
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox">Librarian
                                                    </div>
                                                    <div class="form-check form-check-sm mb-2">
                                                        <input class="form-check-input" type="checkbox">Receptionist
                                                    </div>											
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">All Teachers</label>
                                        <select class="select">
                                            <option>Select</option>
                                            <option>I</option>
                                            <option>II</option>
                                            <option>III</option>
                                            <option>IV</option>
                                        </select>
                                    </div>
                                </div>
                            </div>			
                            <div class="mb-3">
                                <label class="form-label">Event Title</label>
                                <input type="text" class="form-control" placeholder="Enter Title">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Event Category</label>
                                <select class="select">
                                    <option>Select</option>
                                    <option>Celebration</option>
                                    <option>Training</option>
                                    <option>Meeting</option>
                                    <option>Holidays</option>
                                </select>
                            </div>						
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Start Date</label>
                                    <div class="date-pic">
                                        <input type="text" class="form-control datetimepicker" placeholder="15 May 2024">
                                        <span class="cal-icon"><i class="ti ti-calendar"></i></span>
                                    </div>
                                </div>											
                            </div>									
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">End Date</label>
                                    <div class="date-pic">
                                        <input type="text" class="form-control datetimepicker" placeholder="21 May 2024">
                                        <span class="cal-icon"><i class="ti ti-calendar"></i></span>
                                    </div>
                                </div>											
                            </div>								
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Start Time</label>
                                    <div class="date-pic">
                                        <input type="text" class="form-control timepicker" placeholder="09:10 AM">
                                        <span class="cal-icon"><i class="ti ti-clock"></i></span>
                                    </div>
                                </div>											
                            </div>							
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">End Time</label>
                                    <div class="date-pic">
                                        <input type="text" class="form-control timepicker" placeholder="12:50 PM">
                                        <span class="cal-icon"><i class="ti ti-clock"></i></span>
                                    </div>
                                </div>											
                            </div>
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <div class="bg-light p-3 pb-2 rounded">
                                        <div class="mb-3">
                                            <label class="form-label">Attachment</label>
                                            <p>Upload size of 4MB, Accepted Format PDF</p>
                                        </div>
                                        <div class="d-flex align-items-center flex-wrap">
                                            <div class="btn btn-primary drag-upload-btn mb-2 me-2">
                                                <i class="ti ti-file-upload me-1"></i>Upload
                                                <input type="file" class="form-control image_sign" multiple="">
                                            </div>
                                            <p class="mb-2">Fees_Structure.pdf</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-0">
                                    <label class="form-label">Message</label>
                                    <textarea class="form-control" rows="4">Meeting with Staffs on the Quality Improvement s and completion of syllabus before the August,  enhance the students health issue</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Add Event -->	

    <!-- Event Details -->
    <div class="modal fade" id="eventModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border shadow-lg">
                <div class="modal-header justify-content-between">
                    <span class="d-inline-flex align-items-center"><i class="ti ti-circle-filled fs-8 me-1 text-info"></i>Meeting</span>
                    <div class="d-flex align-items-center">
                        <a href="#" class="me-1 fs-18"><i class="ti ti-edit-circle"></i></a>
                        <a href="#" class="me-1 fs-18"><i class="ti ti-trash-x"></i></a>
                        <a href="#" class="fs-18" data-bs-dismiss="modal"><i class="ti ti-x"></i></a>
                    </div>
                </div>
                <div class="modal-body pb-0">
                    <div class="d-flex align-items-center mb-3">
                        <span class="avatar avatar-xl bg-primary-transparent me-3 flex-shrink-0">
                            <i class="ti ti-users-group fs-30"></i>
                        </span>
                        <div>
                            <h3 id="eventTitle" class="mb-1"></h3>
                            <div class="d-flex align-items-center flex-wrap">
                                <p class="me-3 mb-0"><i class="ti ti-calendar me-1"></i>10 July 2024</p>
                                <p><i class="ti ti-calendar me-1"></i>09:10AM - 10:50PM</p>
                            </div>
                        </div>
                    </div>
                    <div class="bg-light-400 p-3 rounded mb-3">
                        <p>Meeting with Staffs on the Quality Improvement s and completion of syllabus before the August,  enhance the students health issue</p>
                    </div>
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div class="avatar-list-stacked avatar-group-sm d-flex mb-3">
                            <span class="avatar">
                                <img src="{% static 'assets/img/teachers/teacher-01.jpg' %}" alt="img">
                            </span>
                            <span class="avatar">
                                <img src="{% static 'assets/img/teachers/teacher-02.jpg' %}" alt="img">
                            </span>
                            <span class="avatar">
                                <img src="{% static 'assets/img/teachers/teacher-03.jpg' %}" alt="img">
                            </span>
                            <a class="avatar bg-white text-default" href="javascript:void(0);">
                                +67
                            </a>
                        </div>
                        <div class="mb-3">
                            <p class="mb-1">Event For</p>
                            <h6>All Classes,  All Sections</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Event Details -->
{% endblock content %}