<?php
/*
 * cass_register_shortcode_member_courses_list_subscribed - - Shortcode for member courses list subscribed
 *
 * This shortcode is used to display the member courses list subscribed
 */

 
add_action('init', 'cass_register_shortcode_member_courses_list_subscribed');

function cass_register_shortcode_member_courses_list_subscribed()
{
  add_shortcode('cass_member_courses_list_subscribed', 'cass_shortcode_member_courses_list_subscribed');
}

function cass_shortcode_member_courses_list_subscribed()
{
  if (is_user_logged_in()) {
    return "
       <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css'>

        <script>
            window.adminPostUrl =" . json_encode(esc_attr(admin_url('admin-post.php'))) . ";
            window.siteUrl =" . json_encode(get_site_url()) . ";
            window.userID = " . json_encode(get_current_user_id()) . ";
        </script>
        

  <div class='cass-box-center'>
    <div id='cass_member_crouses_list_subscribed'>
    <div class='pure-form'>
        <input type='text' id='search' v-model='search' placeholder='Rechercher par nom' class='pure-input'>
        <input type='checkbox' id='checkbox' v-model='limitCourse' />
        <label for='checkbox'>Limiter aux 25 courses récentes</label>
        
        </div>
        </br>
        <h4 aligne='center' hidden class='shortcode-title' id='shortcodeTitleEmpty'>Vous n'êtes inscrit à aucune course</h4>
        <p><b><i>*Vous pouvez gérer votre inscription dans les informations de la course</i></b></p>
        
        <template>
            <div id='progress-bar-container' class='progress-bar-container'>
            <div id='progress-bar' class='progress-bar'>
                <div class='progress-bar-value'></div>
            </div>
          </div>
          
          
          <div hidden class='cards-container' id='member-courses-list-mobile'>
              <div class='card' v-for='(race, index) in filteredRaces' :key='race.IDRace_user'>
                <div class='card-header'>
                  <span class='card-title'>Course #{{ index + 1 }}</span>
                </div>
                <div class='card-body'>
                  <p><strong>Nom :</strong> {{ ReadGlobal(race.name, true) }}</p>
                  <p><strong>Début :</strong> {{ getDateFormated(race.start, false) }}</p>
                  <p><strong>Fin :</strong> {{ getDateFormated(race.end, false) }}</p>
                  <p><strong>Inscription :</strong> {{ getStateText(race.race_user_state) }}</p>
                  <p><strong>Niveau :</strong> {{ race.level }}</p>
                  <p><strong>Groupe :</strong> {{ race.groupName }}</p>
                  <div class='card-actions'>
                    <button class='pure-button pure-button-primary' @click='loadInfoCourse(race)'>Information</button>              
                  </div>
                </div>
              </div>
            </div>
          
          
          <div class='table-responsive'>
           <table hidden class='cass-table' id='member-courses-list'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Nom</th>
                        <th>Début</th>
                        <th>Fin</th>
                        <th>Inscription</th>
                        <th>Niveau</th>
                        <th>Group</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                <tr v-for='(race, index) in filteredRaces' :key='race.IDRace_user'>
                <td>{{ index + 1 }}</td>
                <td>{{ ReadGlobal(race.name,true) }}</td>   
                <td>{{ getDateFormated(race.start,false) }}</td>
                <td>{{ getDateFormated(race.end,false) }}</td>
                <td>{{ getStateText(race.race_user_state) }}</td>
                   
                <td>{{ race.level }}</td>
                <td>{{ race.groupName }}</td>
                
                <td>
                <button class='pure-button pure-button-primary' @click='loadInfoCourse(race)'>Information</button>

                <!--<button v-if='race.race_user_state <= 2 && isRaceInProgress(race.start)' class='pure-button pure-button-primary' @click='showReasonModal(race)' data-bs-toggle='modal' data-bs-target='#modalUnscription'>Annuler</button>-->
            </td>
            </tr>
            
                </tbody>
            </table>
            <div id=memberCancelCourse v-if=cancelCourseVisible>
                <h4>{{ cancelCourseName }}</h4>
                <!-- Form for cancellation goes here -->
            </div>
            <div id=memberInfoCourse v-if=infoCourseVisible>
                <h4>{{ infoCourseName }}</h4>
                <!-- Display course information here -->
            </div>
            </div>
        </template>
    </div>
</div>
</div>
";

  } else {
    return "<h3 align='center'>Vous devez être connecté pour accéder à cette page.</h3>";
  }

}