/*
 * cass_member_course_info - Shortcode for course info
 *
 * This shortcode is used to display the course info
 */

document.addEventListener('DOMContentLoaded', function () {
    var loader = document.getElementById('cass_shortcode_course_info');
    if (loader) {

        new Vue({
            el: "#cass_shortcode_course_info",
            data: {
                race: []
            },
                
            methods: {
                async getRaceData() {
                    const siteUrl = window.siteUrl;
                    const RaceID = window.RaceID;
                    const apiURL = `${siteUrl}/wp-json/wp-cass/v1/cass-race-list-element/${RaceID}`;

                    try {
                        const response = await axios.get(apiURL);
                        this.race = response.data[0];

                        if (response.data.length != 0) {
        
                            var materials;
                            var raceMaterialList = document.getElementById("raceMaterials");
                            raceMaterialList.innerHTML = 'Matériel requis : ';

                            if (this.race.materials != null) {
                                materials = this.race.materials.split(',');
                                materials.forEach(material => {
                                    raceMaterialList.innerHTML += '<b>' + ReadGlobal(material,false) + '</b>,';
                                });
                                raceMaterialList.innerHTML = raceMaterialList.innerHTML.slice(0, -1);
                            } else {
                                raceMaterialList.innerHTML = '';
                            }
                            
                         
                             if (this.race.descriptionMemberSubscribed == '') {
                                document.getElementById("raceDescriptionPublic").innerHTML = "Il n'y a aucune description membre pour cette course";
                            } else {
                                document.getElementById("raceDescriptionPublic").innerHTML = ReadGlobal(this.race.descriptionMemberSubscribed);
                            }

                            document.getElementById("raceInfo").removeAttribute("hidden");
                            document.getElementById('raceInfo').scrollIntoView();
                            document.getElementById("raceInfo").style.display = "block";
                            document.getElementById("racePlaceLocality").innerHTML = "La course se déroulera à <b>"+ReadGlobal(this.race.placeName,false)+"</b> (<b>"+this.race.placeLocality+"</b>)";
                            document.getElementById("raceName").innerHTML =ReadGlobal(this.race.name,false);
                            document.getElementById('raceStartEnd').innerHTML = "La course se déroulera du <b>"+getDateFormated(this.race.start,true)+"</b> au <b>"+getDateFormated(this.race.end,true)+"</b>";
                            document.getElementById("raceState").innerHTML = "Etat de la course : <b>"+ReadGlobal(getTextFromState(this.race.state),false)+"</b>";
                            
                            let deputyText =".";
                            if(this.race.nameDeputy !=null && this.race.nameDeputy !="") {
                                deputyText = " avec comme adjoint <b>"+ReadGlobal(this.race.nameDeputy,false)+"</b>.";
                            }
                            document.getElementById("raceRLDeputy").innerHTML = "La course est gérée (chef de course) par <b>"+ReadGlobal(this.race.nameRL,false)+"</b> "+ReadGlobal(deputyText,false)+"";
                            document.getElementById("raceTypeLevel").innerHTML = "Le type est <b>"+ReadGlobal(this.race.type,false)+"</b> d'un niveau <b>"+ReadGlobal(this.race.level,false)+"</b>";
                            document.getElementById("raceGroup").innerHTML = "Groupe : <b>"+ReadGlobal(this.race.group,false)+"</b>";

                            //Description public
                            if (this.race.descriptionPublic == '' || this.race.descriptionPublic == null) {
                                document.getElementById("raceDescriptionPublic").innerHTML = "Il n'y a aucune description pour cette course";
                            } else {
                                document.getElementById("raceDescriptionPublic").innerHTML = ReadGlobal(this.race.descriptionPublic);
                            }

                            //Description membre inscrit
                            if (document.getElementById("raceDescriptionMemberSubscribed") != null) {
                                if (this.race.descriptionMemberSubscribed == '' || this.race.descriptionMemberSubscribed == null) {
                                    document.getElementById("raceDescriptionMemberSubscribed").innerHTML = "Il n'y a aucune description pour cette course";
                                } else {
                                    document.getElementById("raceDescriptionMemberSubscribed").innerHTML = ReadGlobal(this.race.descriptionMemberSubscribed);
                                }
                            }
                         

                            let raceSubscriptionStartEndMeetingPlaceParticipiant="";
                            //Check inscription
                            var date = new Date();
                            var today = date.toISOString().slice(0, 19).replace("T", " ");
                            var subscriptionStart = this.race.subscriptionStart.toLocaleString();
                            var subscriptionEnd = this.race.subscriptionEnd.toLocaleString();

                            // Contrôle état de la course
                            
                            if(parseInt(this.race.subscriptionEnable) == 1) {
                                raceSubscriptionStartEndMeetingPlaceParticipiant = 'Les inscriptions sont ouvertes du <b>' + getDateFormated(this.race.subscriptionStart) + ' </b> au  <b>' + getDateFormated(this.race.subscriptionEnd) + '</b>.';
                            } else {
                                raceSubscriptionStartEndMeetingPlaceParticipiant = 'Les inscriptions sont ouvertes du <b>' + getDateFormated(this.race.subscriptionStart) + ' </b> au  <b>' + getDateFormated(this.race.subscriptionEnd) + '</b> (actuellement fermées).';
                         
                            }
                             
                            if (this.race.participantMin !== null && this.race.participantMin !== "" && this.race.participantMin !== 0) {
                                raceSubscriptionStartEndMeetingPlaceParticipiant += "<br>Le nombre de participant minimum est de <b>" + this.race.participantMin + "</b>.";
                            }
                            
                            if (this.race.participantMax !== null && this.race.participantMax !== "" && this.race.participantMax !== 0) {
                                raceSubscriptionStartEndMeetingPlaceParticipiant += "<br>Le nombre de participant maximum est de <b>" + this.race.participantMax + "</b>.";
                            }
                            
                            if (this.race.meetingPlaceName !== null && this.race.meetingPlaceName !== "") {
                                raceSubscriptionStartEndMeetingPlaceParticipiant += "<br>Le lieu de RDV est <b>" + this.race.meetingPlaceName + "</b>.";
                            }
                            

                            
                            document.getElementById("raceSubscriptionStartEndMeetingPlaceParticipiant").innerHTML = ReadGlobal(raceSubscriptionStartEndMeetingPlaceParticipiant,false);


                            document.getElementById("progress-bar-container").setAttribute("hidden", "true");

                          
                            
                        }

                    } catch (error) {
                        console.error('Erreur Axios :', error);
                    }
                },
     
            },
            created() {
                this.getRaceData();
               
            },
        });
    }
});
