- var page_Title = 'Tasks';
- var form_validation       = true;
- var theme_customizer      = true;
- var form_validation_custom= true;
- var bs_select             = true;
- var date_picker           = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var select_dt             = true;
- var datatable             = true;
- var tooltip               = true;
- var page_datatable        = true;
- var bookmark_page         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Tasks
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Apps
                    li.breadcrumb-item.active Tasks
          // Container-fluid starts
          .container.main-tasks
            .email-wrap.bookmark-wrap
              .grid.grid-cols-12.gap-3.main-bookmark
                div(class="col-span-3 xxl:col-span-12 box-col-6")
                  .md-sidebar
                    a.btn.btn-primary.md-sidebar-toggle.text-white(href='#!') task filter
                    .md-sidebar-aside.job-left-aside
                      .email-left-aside
                        .card
                          .card-body.custom-scrollbar
                            .email-app-sidebar.left-bookmark.task-sidebar
                              .common-flex.items-center
                                .media-size-email
                                  img.rounded-full(src='../assets/images/user/user.png', alt='')
                                .grow
                                  h6 WILLIAM C. JENNINGS
                                  p william@jourrapide.com
                              ul.nav.main-menu(role='tablist')
                                li.nav-item
                                  button.badge-light-primary.btn-block.btn-mail.w-full.flex.items-center(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal')
                                    i.me-2(data-feather='check-circle')
                                    |  New Task
                                li 
                                  form.grid.grid-cols-12.gap-4.needs-validation(novalidate='')
                                    div(class="col-span-12")
                                      label.form-label Task Status
                                      select.form-select(aria-label='task status')
                                        option(value='1' selected) Pending
                                        option(value='2') In Progress
                                        option(value='3') On Hold
                                        option(value='4') Completed
                                    div(class="col-span-12") 
                                      label.form-label Task Importance
                                      select.form-select(aria-label='task importance')
                                        option(value='1' selected) Low
                                        option(value='2') Medium
                                        option(value='3') High
                                    div(class="col-span-12") 
                                      label.form-label(for='validationTextarea') Task Due Date
                                      input.datepicker-here.form-control(type='text', data-language='en', placeholder='Date')
                                li 
                                  .grid.grid-cols-12.task-stats.gap-3
                                    div(class="col-span-12")
                                      .common-align.justify-start
                                        .bg-primary
                                          i.fa-solid.fa-list-check
                                        div 
                                          span.c-o-light Today's Tasks
                                          h4 20
                                    div(class="col-span-12")
                                      .common-align.justify-start
                                        .bg-primary
                                          i.fa-solid.fa-hourglass-half
                                        div 
                                          span.c-o-light Incomplete Tasks
                                          h4 45
                                    div(class="col-span-12")
                                      .common-align.justify-start
                                        .bg-primary
                                          i.fa-regular.fa-clock
                                        div 
                                          span.c-o-light Today's Focus Time
                                          h4 8:45
                div(class="col-span-9 xxl:col-span-12 box-col-12")
                  .card.heading-space
                    .card-header.card-no-border
                      .header-top
                        h5 Tasks
                    .card-body.px-0.pt-0.common-task-table
                      .overflow-x-auto.custom-scrollbar
                        table.table#main-task-table
                          thead 
                            tr
                              th  
                              th Task Name
                              th(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") Task Details
                              th Due Date
                              th Assign To
                              th(class="[@media(max-width:768px)]:!min-w-[98px]") Status
                              th Importance
                          tbody 
                            tr 
                              td
                              td Plan Office Events
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Organize company events and team-building activities
                              td 22 Jan,2025
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Marley Ford')
                                      img.common-circle(src="../assets/images/dashboard-11/user/10.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Gray Curran')
                                      img.common-circle(src="../assets/images/dashboard-11/user/9.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Yarrow  Wix') 
                                      .common-circle.bg-lighter-info Y
                              td 
                                span.badge.badge-light-primary In Progress
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Payroll processing
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Pay employees appropriately after doing the calculations
                              td 02 Feb,2020
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Marley Ford')
                                      img.common-circle(src="../assets/images/dashboard-11/user/3.jpg", alt="user")
                              td 
                                span.badge.badge-light-warning Pending
                              td 
                                button.btn.badge-light-danger High
                            tr 
                              td
                              td Client Information
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden")
                                span  Update and confirm the client's contact details
                              td 11 Aug,2019
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Alexis Taylor')
                                    img.common-circle(src="../assets/images/dashboard/user/10.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Andrew Price')
                                    img.common-circle(src="../assets/images/dashboard/user/11.jpg", alt="user")
                              td 
                                span.badge.badge-light-secondary On Hold
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Handle Social Media
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden")
                                span  Keep an eye on and update the company's social media accounts
                              td 20 Nov,2021
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Sarah Wilson')
                                    img.common-circle(src="../assets/images/dashboard-11/user/7.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jessica Anderson')
                                    img.common-circle(src="../assets/images/dashboard-11/user/8.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Emily Park') 
                                    .common-circle.bg-lighter-warning E
                              td 
                                span.badge.badge-light-success Completed
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Market Analysis
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Compile and evaluate market trends for the industry.
                              td 09 Dec,2018
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Levine Raven')
                                    img.common-circle(src="../assets/images/dashboard-11/user/2.jpg", alt="user")
                              td 
                                span.badge.badge-light-success Completed
                              td 
                                button.btn.badge-light-danger High
                            tr 
                              td
                              td Monitor Inventory
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Track and reorder office supplies as needed
                              td 18 Mar,2022
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Davis Jone')
                                    img.common-circle(src="../assets/images/dashboard-11/user/12.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jessica Anderson')
                                      img.common-circle(src="../assets/images/dashboard-9/user/2.png", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Dashiell Wolfe')
                                      img.common-circle(src="../assets/images/dashboard-9/user/5.png", alt="user")
                              td 
                                span.badge.badge-light-secondary On Hold
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Create Monthly Reports
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Compile and evaluate performance data on a monthly basis.
                              td 25 Dec,2021
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jasper Nightingale')
                                    img.common-circle(src="../assets/images/dashboard/user/4.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Seraphina Evergreen') 
                                    .common-circle.bg-lighter-primary S
                              td 
                                span.badge.badge-light-primary In Progress
                              td 
                                button.btn.badge-light-danger High
                            tr 
                              td
                              td Data Restore
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Plan and carry out data backup operations.
                              td 14 Feb,2022
                              td 
                                ul.common-f-start
                                 li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Thomas Jones')
                                    img.common-circle(src="../assets/images/dashboard-9/user/1.png", alt="user")
                              td 
                                span.badge.badge-light-warning Pending
                              td 
                                button.btn.badge-light-danger High
                            tr 
                              td
                              td Monitoring Performance
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Analyse and improve system performance measures.
                              td 25 Apr,2019
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Karen Jones') 
                                    .common-circle.bg-lighter-dark K
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Elizabeth Williams')
                                    img.common-circle(src="../assets/images/dashboard-9/user/3.png", alt="user")
                              td 
                                span.badge.badge-light-secondary On Hold
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Technical Assistance
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Assist with technical questions and problems.
                              td 06 Nov,2020
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Caleb Rivera')
                                    img.common-circle(src="../assets/images/dashboard/user/12.jpg", alt="user")
                              td 
                                span.badge.badge-light-success Completed
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Upgrades to Hardware
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Set up and install fresh hardware parts.
                              td 12 Feb,2018
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Sarah Wilson')
                                    img.common-circle(src="../assets/images/dashboard-11/user/2.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Karen Moore') 
                                    .common-circle.bg-lighter-warning K
                              td 
                                span.badge.badge-light-primary In Progress
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Response to Incidents
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Respond to and fix situations involving IT security
                              td 18 Feb,2022
                              td 
                                ul.common-f-start
                                    li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Linda Brown') 
                                      .common-circle.bg-lighter-danger L
                                    li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jessica Anderson')
                                      img.common-circle(src="../assets/images/dashboard-11/user/8.jpg", alt="user") 
                              td 
                                span.badge.badge-light-secondary On Hold
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Email Configuration
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Create and manage email accounts
                              td 20 Apr,2017
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jenny Wilson')
                                    img.common-circle(src="../assets/images/dashboard/user/2.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Olivia Gor')
                                    img.common-circle(src="../assets/images/dashboard/user/13.jpg", alt="user")
                              td 
                                span.badge.badge-light-primary In Progress
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Optimizing Performance
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Optimize system and application performance
                              td 11 Sep,2019
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Marley Ford')
                                    img.common-circle(src="../assets/images/dashboard-11/user/10.jpg", alt="user")
                              td 
                                span.badge.badge-light-warning Pending
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Security Evaluation
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Make sure your security audit is complete
                              td 18 Apr,2023
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Daxton Creed')
                                    .common-circle.bg-lighter-primary D
                              td 
                                span.badge.badge-light-secondary On Hold
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Upkeep of Servers
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Carry out regular upgrades and server checks
                              td 25 Oct,2020
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Gray Curran')
                                    img.common-circle(src="../assets/images/dashboard-11/user/9.jpg", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Yarrow  Wix') 
                                    .common-circle.bg-lighter-info Y
                              td 
                                span.badge.badge-light-warning Pending
                              td 
                                button.btn.badge-light-primary Low
                            tr 
                              td
                              td Data Transfer
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Securely transfer data across systems
                              td 28 Mar,2022
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Atlas Stone')
                                    img.common-circle(src="../assets/images/user/12.png", alt="user")
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Oceana Meridian')
                                    img.common-circle(src="../assets/images/user/10.jpg", alt="user")
                              td 
                                span.badge.badge-light-success Completed
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Cloud Based Integration
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Connect services to cloud computing environments
                              td 05 Jun,2023
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jett Maverick')
                                    .common-circle.bg-lighter-primary J
                              td 
                                span.badge.badge-light-success Completed
                              td 
                                button.btn.badge-light-warning Medium
                            tr 
                              td
                              td Disaster Recovery
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span Create and evaluate backup strategies.
                              td 20 Feb,2018
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Xander Wilde')
                                    .common-circle.bg-lighter-secondary X
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Charles Rodriguez')
                                      img.common-circle(src="../assets/images/dashboard-11/user/5.jpg", alt="user")
                              td 
                                span.badge.badge-light-warning Pending
                              td 
                                button.btn.badge-light-danger High
                            tr 
                              td
                              td System Records
                              td(class="[@media(max-width:1485px)_and_(min-width:1200px)]:hidden") 
                                span System and procedure documentation is recommended
                              td 29 Dec,2022
                              td 
                                ul.common-f-start
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Zenith Nova')
                                    .common-circle.bg-lighter-info Z
                                  li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Sarah Hernandez')
                                      img.common-circle(src="../assets/images/dashboard-11/user/6.jpg", alt="user")
                              td 
                                span.badge.badge-light-primary In Progress
                              td 
                                button.btn.badge-light-primary Low
            // New task modal                                       
            #exampleModal.modal.fade.modal-bookmark(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
              .modal-dialog.modal-lg(role='document')
                .modal-content.custom-input
                  .modal-header
                    h5#exampleModalLabel.modal-title Add Task
                    button.btn-close(type='button', data-bs-dismiss='modal', aria-label='Close')
                  .modal-body
                    form.form-bookmark#bookmark-form.needs-validation(novalidate='')
                      .grid.grid-cols-12.card-gap
                        div(class="col-span-12 mb-3")
                          label.form-label(for='task-title') Task Name
                          input#task-title.form-control(type='text', required='', autocomplete='off' placeholder="Enter your task name")
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                            | Please enter a task name.
                        div(class="col-span-12 mb-3")
                          label.form-label(for='validationTextarea') Task Details
                          textarea#validationTextarea.form-control(placeholder='Enter your task details...' autocomplete='off' required='')   
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                            | Please enter a description.
                        div(class="col-span-6 md:col-span-12 mb-3")
                          label.form-label(for='validationTextarea') Task Due Date
                          input.datepicker-here.form-control(type='text', data-language='en', placeholder='Date' required)
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                            | Please select a task due date.
                        div(class="col-span-6 md:col-span-12 mb-3")
                          label.form-label(for='validationTextarea') Task Due Time
                          select.form-control
                            option 7:00 am
                            option 7:30 am
                            option 8:00 am
                            option 8:30 am
                            option 9:00 am
                            option 9:30 am
                            option 10:00 am
                            option 10:30 am
                            option 11:00 am
                            option 11:30 am
                            option 12:00 pm
                            option 12:30 pm
                            option 1:00 pm
                            option 2:00 pm
                            option 3:00 pm
                            option 4:00 pm
                            option 5:00 pm
                            option 6:00 pm
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                            | Please select a task due date.
                        div(class="col-span-12 mb-3")
                          label.form-label Assign To
                          select.selectpicker.search-picker(multiple='' aria-label='assign to' data-live-search='true' required)
                            option(value='1') Gabriela Wright
                            option(value='2') Chase Russo
                            option(value='3') Ryland House
                            option(value='4') Fabian Leonard
                            option(value='5') Layne Hayden
                            option(value='6') Clare Truong
                            option(value='7') Shiloh Turner
                            option(value='8') Miller Dickerson
                            option(value='9') Jaylee Rios
                            option(value='10') Anna Sandoval
                            option(value='11') Gracie Ryan
                            option(value='12') Zayne Olson
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                              | Please select your assign user.
                        div(class="col-span-6 md:col-span-12 mb-3")
                          label.form-label(for="validationSelectStatus") Task Status
                          select#validationSelectStatus.form-select(required)
                            option(value='' disabled selected) Select Status
                            option(value='1') Pending
                            option(value='2') In Progress
                            option(value='3') On Hold
                            option(value='4') Completed
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                              | Please select your task status.
                        div(class="col-span-6 md:col-span-12 mb-3")
                          label.form-label(for="validationSelectImportance") Task Importance
                          select#validationSelectImportance.form-select(required)
                            option(value='' disabled selected) Select Importance
                            option(value='1') Low
                            option(value='2') Medium
                            option(value='3') High
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                              | Please select your task importance.
                        div(class="col-span-12")
                          label.form-label(for='formFileMultiple') Attach Files
                          input#formFileMultiple.form-control(type='file' multiple='' required='')
                          .valid-feedback
                            | Looks good!
                          .invalid-feedback
                            | Please select your files.
                      input#index_var(type='hidden', value='6' )
                      button#Bookmark.btn.btn-secondary.me-2.text-white(onclick='submitBookMark()', type='submit') Save
                      button.btn.btn-primary.text-white(type='button', data-bs-dismiss='modal') Cancel
          // Container-fluid Ends .
        include ../../components/footer        
    include ../../components/footer-files
