<!DOCTYPE html>
<html lang="en">

<head>
  <title> EMSO - Permit App </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- ------ Meta Contents Start ----------------------------- -->
  <meta name="description" content="" />
  <meta name="keywords" content="">
  <meta name="copyright" content="">
  <!-- ------ Meta Contents End ----------------------------- -->

  <?php include 'includes/header.php'; ?>  
  <?php include 'includes/main-menu.php'; ?>
  

  <!-- ........... Page-Event-Calendar Start ..................  -->
  <section class="page-main-wrapper adjust-with-header">
    <div class="custom-container">

      <div class="mainFlexWrapper">
        <!-------------- Start Main-Wrapper-Body-container ---------------->
        <div class="body-container my-container menu-wrapper-container active"> 

          <!-------- Start Profile-head --->
          <?php include 'includes/profile-head.php'; ?>
          <!-------- End Profile-head ----->

          <!-------- Start body-content-area-wrap --->
          <div class="body-content-area-wrap">
            <!-- <div class="head">
              <h3 class="title">Event Calendar</h3>              
            </div> -->

            <!-- ======== TAB-MENU START-HERE =================== -->
            <ul class="nav nav-tabs event-calendar  mt-2" 
                id="payment-tab" role="tablist">                        
              <li class="nav-item" role="presentation">
                <button class="nav-link active " 
                        id="EC-wrapper-tab" 
                        data-bs-toggle="tab" data-bs-target="#EC-wrapper" 
                        type="button" role="tab" 
                        aria-controls="EC-wrapper" aria-selected="true">Event Calendar
                </button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" 
                        id="EC-table-wrapper-tab" 
                        data-bs-toggle="tab" data-bs-target="#EC-table-wrapper" 
                        type="button" role="tab" 
                        aria-controls="EC-table-wrapper" aria-selected="false">Event Table
                </button>
              </li>
              
            </ul>
            <!-- ======== TAB-MENU END-HERE =================== -->


            <!-- ======== TAB-CONTTENT-WRAPPER START-HERE =================== -->
            <div class="tab-content" id="payment-tab-content-wrapper">

              <!-- =====Tab-content 01 start ============= -->
              <div class="tab-pane fade show active " id="EC-wrapper" role="tabpanel" aria-labelledby="EC-wrapper">
                <div class="event-calendar-wrapper">

                                <div class="calendar-wrapper">
                                    <div id='calendar'></div>
                                </div>

                                <div class="event-add-wrap">
                                    <div class="head">
                                      <h3 class="title">Event List</h3>              
                                    </div>
                                    <ul class="event-list-cards">                
                                      <li>                             
                                        <div class="content-wrap item-status pending">
                                          <div class="item-des ">
                                            <figure class="icon img-status "> <img src="images/icon-event.svg" alt=""> </figure>
                                            <a href="event-details.php">
                                              <figcaption class="text-wrap">
                                                <h4 class="item-title"> ABC Competition </h4>
                                                <ul class="date-wrap">
                                                  <li>
                                                    <span class="label">Start Date :</span>
                                                    <span class="value">10 Apr 2026</span>
                                                  </li>
                                                  <li>
                                                    <span class="label">End Date :</span>
                                                    <span class="value">10 May 2026</span>
                                                  </li>
                                                </ul>

                                                <ul class="detail-item">
                                                  <li>
                                                    <div class="label">Competition Category : </div>
                                                    <div class="value">Moto</div>
                                                  </li>
                                                  <li>
                                                    <div class="label">Competition Status  : </div>
                                                    <div class="value">Moto club </div>
                                                    <!-- <div class="subline">
                                                      Club event – <p class="price">1653,75 AED <span>(including VAT) </span></p> 
                                                    </div> -->
                                                  </li>            
                                                </ul>

                                              </figcaption>
                                            </a>
                                          </div>
                                        </div>
                                        <!-- <div class="action-wrap">                          
                                          <span class="status-chip pending"> Pending</span>
                                        </div> -->                                
                                      </li>  
                                      
                                      <li>               
                                        <div class="content-wrap item-status approved">
                                          <div class="item-des">
                                            <figure class="icon img-status "> <img src="images/icon-event.svg" alt=""> </figure>
                                            <a href="">
                                              <figcaption class="text-wrap">
                                                <h4 class="item-title"> Competition Name </h4>
                                                <ul class="date-wrap">
                                                  <li>
                                                    <span class="label">Start Date :</span>
                                                    <span class="value">10 Jun 2026</span>
                                                  </li>
                                                  <li>
                                                    <span class="label">End Date :</span>
                                                    <span class="value">10 Jun 2026</span>
                                                  </li>
                                                </ul>

                                                <ul class="detail-item">
                                                  <li>
                                                    <div class="label">Competition Category : </div>
                                                    <div class="value">Moto</div>
                                                  </li>
                                                  <li>
                                                    <div class="label">Competition Status  : </div>
                                                    <div class="value">Moto club </div>
                                                    <!-- <div class="subline">
                                                      Club event – <p class="price">1653,75 AED <span>(including VAT) </span></p> 
                                                    </div> -->
                                                  </li>            
                                                </ul>
                                              </figcaption>
                                            </a>
                                          </div>
                                        </div>
                                        <!-- <div class="action-wrap">                          
                                          <span class="status-chip pending"> Pending</span>
                                        </div> -->
                                      </li>
                                    </ul>
                                </div>              
                            </div>
              </div>

              <!-- =====Tab-content 02 start ============= -->
              <div class="tab-pane fade" id="EC-table-wrapper" role="tabpanel" aria-labelledby="EC-table-wrapper">
                <!-------- event-table-data-wrapper Start --->
                <div class="event-table-data-wrapper ">
                  <!-- <div class="head">
                    <h3 class="title">Event List</h3>              
                  </div> -->
                 

                  <!-- =======event Table Start ===== -->
                  <div class="event-table-wrapper zeroMarginPadding">                   

                    <div class="table-responsive">
                      <table class="table table-bordered align-middle event-table">
                        <thead class="table-dark">
                          <tr>
                            <th>Event Name</th>
                             <th>Competition category</th>
                            <th>Competition status</th>
                           
                            <th>Venue</th>                        
                            <!-- <th>--</th>  -->
                            <th>Start Date - End Date</th> 
                            <th></th>
                            
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                           <td>ABC Company</td>
                            <td>Moto</td>
                            <td>Club </td>
                           
                            <!-- <td>--</td> -->
                            <td>Al Ain Raceway</td>
                            <td class="date"> <div class="wrap"><img src="images/icon-calendar.svg" alt=""> 10/04/2026 - 10/05/2026 </div></td>

                            <td></td>
                            
                            
                            
                          </tr>

                          <tr>
                            <td>ABC Group</td>                        
                            <td>Auto</td>
                            <td>National </td>
                            <!-- <td>--</td> -->
                            <td>Al Ain Raceway</td>
                            <td class="date"> <div class="wrap"><img src="images/icon-calendar.svg" alt=""> 10/04/2026 - 10/05/2026 </div></td>

                            <td></td>
                            
                            
                            
                          </tr>

                          <tr>
                            <td>ABC Company</td>
                            <td>Moto </td>
                            <td>Karting</td>
                            <!-- <td>--</td> -->
                            <td>Al Forsan Kart Circuit</td>
                            <td class="date"> <div class="wrap"><img src="images/icon-calendar.svg" alt=""> 10/04/2026 - 10/05/2026 </div></td>

                            <td></td>
                            
                            
                            
                          </tr>

                          <tr>
                            <td>ABC Technologies</td>                        
                            <td>E-sports</td>
                            <td>Club</td>
                            <!-- <td>--</td> -->
                            <td>Yas Marina Circuit</td>
                            <td class="date"> <div class="wrap"><img src="images/icon-calendar.svg" alt=""> 10/04/2026 - 10/05/2026 </div></td>
                            
                            
                            
                          </tr>

                          <tr>
                            <td>ABC Co-orporates</td>                        
                            <td>Moto</td>
                            <td>National</td>
                            <!-- <td>--</td> -->
                            <td>Jebel Ali Motocross Track</td>
                            <td class="date"> <div class="wrap"><img src="images/icon-calendar.svg" alt=""> 10/04/2026 - 10/05/2026 </div></td>
                            
                            
                            
                          </tr>

                          <!-- Add more rows as needed -->
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- =======event Table End ===== -->
                </div>              
                <!-------- event-table-data-wrapper End --->
              </div>

            </div>














            

            


          </div>
          <!-------- End body-content-area-wrap --->
          
        </div>
        <!-------------- End Main-Wrapper-Body-container ---------------->
      </div>

    </div> 
  </section>
  <!-- ........... Page-Event-Calendar End .................. -->

     <!-- Add modal -->
    <div class="modal fade edit-form" id="form" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header border-bottom-0">
                  <h5 class="modal-title" id="modal-title">Add Event</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>

           
                     
                <form id="myForm" class="modal-content-area-wrapper custom-form input-bg-white">                  
                    <div class="modal-body common-form-wrapper">
                      <div class="alert alert-danger form-group row-full " role="alert" id="danger-alert" style="display: none;">
                          End date should be greater than start date.
                        </div>
                      <div class="form-group row-full">
                          <label for="event-title">Event name <span class="text-danger">*</span></label>
                          <input type="text" class="form-control" id="event-title" placeholder="Enter event name" required>
                      </div>
                      <div class="form-group row-half">
                          <label for="start-date">Start date <span class="text-danger">*</span></label>
                          <input type="date" class="form-control" id="start-date" placeholder="start-date" required>
                      </div>
                      <div class="form-group row-half">
                          <label for="end-date">End date - <small class="text-muted">Optional</small></label>
                          <input type="date" class="form-control" id="end-date" placeholder="end-date">
                      </div>
                      <div class="form-group row-half">
                          <label for="event-color">Color</label>
                          <input type="color" class="form-control" id="event-color" value="#3788d8">
                        </div>
                    </div>
                    <div class="modal-footer border-top-0 d-flex justify-content-center">
                      <button type="submit" class="btn btn-success theme-btn" id="submit-button"> Submit</button> 
                    </div>                
                </form>               
          </div>
      </div>
    </div>

    <!-- Delete Modal -->
    <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal-title" aria-hidden="true">
      <div class="modal-dialog modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="delete-modal-title">Confirm Deletion</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body text-center" id="delete-modal-body">
            Are you sure you want to delete the event?
          </div>
          <div class="modal-footer border-0">
              <button type="button" class="btn btn-secondary rounded-sm" data-dismiss="modal" id="cancel-button">Cancel</button>
            <button type="button" class="btn btn-danger rounded-lg" id="delete-button">Delete</button>
          </div>
        </div>
      </div>
    </div>

     <!-- Event Details modal -->
    <div class="modal fade event-details" id="eventDetails" tabindex="-1" aria-labelledby="eventDetails" aria-hidden="true">
      <div class="modal-dialog modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header border-bottom-0">
                  <h5 class="modal-title" id="modal-title">Event Details</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>

              <div class="modal-body">
                  <div class="alert alert-danger " role="alert" id="danger-alert" style="display: none;">
                      End date should be greater than start date.
                    </div>
                  <div class="form-group">
                      <label for="event-title">Event name <span class="text-danger">*</span></label>
                      <input type="text" class="form-control" id="event-title" placeholder="Enter event name" required>
                  </div>
                  <div class="form-group">
                      <label for="start-date">Start date <span class="text-danger">*</span></label>
                      <input type="date" class="form-control" id="start-date" placeholder="start-date" required>
                  </div>
                  <div class="form-group">
                      <label for="end-date">End date - <small class="text-muted">Optional</small></label>
                      <input type="date" class="form-control" id="end-date" placeholder="end-date">
                  </div>
                  <div class="form-group">
                      <label for="event-color">Color</label>
                      <input type="color" class="form-control" id="event-color" value="#3788d8">
                    </div>
              </div>              
              <div class="modal-footer border-top-0 d-flex justify-content-center">
                <button type="submit" class="btn btn-success theme-btn" id="submit-button">Submit</button>
              </div>
          </div>
      </div>
    </div>




  


  <?php include 'includes/footer.php'; ?>
       
