$(() => {

  DevExpress.config({
    //editorStylingMode: 'underlined',
    //labelMode: 'floating',
  });
  
    $('#soumettre').dxButton({
    stylingMode: 'contained',
    text: 'Soumettre la demande',
    type: 'success',
    onClick() {
		var myParam = location.search.split('DemandePK=')[1]
		window.location = 'demande_fin.php?DemandePK=' + myParam;
    },
  });
 var formDemande =  $('#form').dxForm({
    formData: demande,
    //labelMode: 'floating',
    width: '1000',
    onContentReady() {
        document.getElementById("NotePaiementTXT").innerHTML = "<i style='color: red'>* Des frais peuvent s'appliquer. Si tel est le cas, nous vous contacterons.</i><br>";
    },
    items: [
// ****************************************************************************************
// Identification
// ****************************************************************************************
{
      itemType: 'group',
      caption: 'Identification',
	colCount: 4,
      items: [{	
				colSpan: 2,
				dataField: 'DateDemande',
				label:{text: 'Date'},
				disabled: true,
				editorType: 'dxDateBox',
				editorOptions: {  
					displayFormat: "yyyy-MM-dd"  
				},
				validationRules: [{type: 'required', message: 'La date est obligatoire'}],
			}, {
				colSpan: 2,
				dataField: 'CodePermanent',
				disabled: false,
				label:{text: 'Code permanent (facultatif)'},
				editorOptions: { mask: 'AAAA00000000', maskRules: { X: /[01-9]/ },},
			}, {
				colSpan: 2,
				dataField: 'Nom',
				disabled: false,
				label:{text: 'Nom'},
				validationRules: [{type: 'required', message: 'Le nom est obligatoire'}],
			}, {
				colSpan: 2,
				dataField: 'Prenom',
				label:{text: 'Prénom'},
				disabled: false,
				validationRules: [{type: 'required', message: 'Le prénom est obligatoire'}],
			}, {
				colSpan: 4,
				dataField: 'Courriel',
				label:{text: 'Courriel'},
				disabled: false,
				validationRules: [{type: 'email', message: 'Vous devez saisir un courriel valide'}, {type: 'required', message: 'Le courriel est obligatoire'}],
			}, {
				colSpan: 2,
				dataField: 'DateNaissance',
				editorType: 'dxDateBox',
				disabled: false,
				editorOptions: {  
					displayFormat: "yyyy-MM-dd"  
				},
				label:{text: 'Date de naissance'},
				validationRules: [{type: 'required', message: 'La date de naissance est obligatoire'}],
			}, {
				colSpan: 2,
				dataField: 'Sexe',
				label:{text: 'Sexe'},
				editorType: 'dxSelectBox', 
				disabled: false,
				editorOptions: {
					items: Sexe,
					displayExpr: 'name',  
					valueExpr: 'id'  
				},
				validationRules: [{type: 'required', message: 'Le sexe est obligatoire'}],
			}, {
				colSpan: 3,
				dataField: 'Adresse',
				label:{text: 'Adresse actuelle'},
				disabled: false,
				validationRules: [{type: 'required', message: "L'adresse est obligatoire"}],
			}, {
				colSpan: 1,
				dataField: 'Appartement',
				label:{text: 'Appartement'},
				disabled: false,
			}, {
				colSpan: 2,
				dataField: 'Ville',
				label:{text: 'Ville'},
				disabled: false,
				validationRules: [{type: 'required', message: "La ville est obligatoire"}],
			}, {
				colSpan: 2,
				dataField: 'CodePostal',
				label:{text: 'Code postal'},
				disabled: false,
				editorOptions: { mask: 'A0A 0A0', maskRules: { X: /[01-9]/ },},
				validationRules: [{type: 'required', message: "Le code postal est obligatoire"}],
			}, {
				colSpan: 2,
				dataField: 'Telephone1',
				label:{text: 'Téléphone 1'},
				disabled: false,
				editorOptions: { maskRules: { X: /[01-9]/ },},
				validationRules: [{type: 'required', message: "Le téléphone est obligatoire"}],
			}, {
				colSpan: 2,
				dataField: 'Telephone2',
				label:{text: 'Téléphone 2'},
				disabled: false,
				editorOptions: { maskRules: { X: /[01-9]/ },},
			}, {
				colSpan: 4,
				dataField: 'NomPrenomPere',
				disabled: false,
				label:{text: 'Nom et prénom de votre mère'},
			}, {
				colSpan: 4,
				dataField: 'NomPrenomMere',
				disabled: false,
				label:{text: 'Nom et prénom de votre père'},
			}, {
				colSpan: 4,
				dataField: 'Organisme',
				disabled: false,
				label:{text: "Nom de l'organisme qui vous le demande"},
			}],
    },
// ****************************************************************************************
// Renseignement supplémentaire de l'élève
// ****************************************************************************************
{
      itemType: 'group',
      caption: "Renseignement supplémentaire de l'élève",
	colCount: 12,
      items: [{	
				colSpan: 7,
				dataField: 'EducationAdulte',
				disabled: false,
				label:{text: 'Éducation des adultes'},
				editorType: 'dxSelectBox', 
				editorOptions: {
					items: FGA,
					displayExpr: 'name',  
					valueExpr: 'id'  
				},
			},{	
				colSpan: 5,
				dataField: 'EducationAdulteAnnee',
				disabled: false,
				label:{text: 'Année'},
				editorOptions: { mask: 'X000', maskRules: { X: /[01-9]/ },},
			},{	
				colSpan: 7,
				dataField: 'FP',
				label:{text: 'Formation professionnelle'},
				editorType: 'dxSelectBox', 
				disabled: false,
				editorOptions: {
					items: FP,
					displayExpr: 'name',  
					valueExpr: 'id'  
				},
			},{	
				colSpan: 5,
				dataField: 'FPAnnee',
				label:{text: 'Année'},
				disabled: false,
				editorOptions: { mask: 'X000', maskRules: { X: /[01-9]/ },},
			},{	
				colSpan: 7,
				dataField: 'FGDernier',
				label:{text: 'Formation générale (secteur jeune)'},
				editorType: 'dxSelectBox', 
				disabled: false,
				editorOptions: {
					items: Secondaire,
					displayExpr: 'name',  
					valueExpr: 'id'  
				},
			},{	
				colSpan: 2,
				dataField: 'FGDernierAnnee',
				label:{text: 'Année'},
				disabled: false,
				editorOptions: { mask: 'X000', maskRules: { X: /[01-9]/ },},
			},{	
				colSpan: 3,
				dataField: 'FGDernierEcole',
				label:{text: 'Dernier niveau'},
				editorType: 'dxSelectBox', 
				disabled: false,
				editorOptions: {
					items: Niveau,
					displayExpr: 'name',  
					valueExpr: 'id'  
				},
			}],
    },
// ****************************************************************************************
// Besoin
// ****************************************************************************************
	{
      itemType: 'group',
      caption: "Besoins (Délai 24 à 48 heures ouvrables)",
		colCount: 12,
      items: [{	
				colSpan: 12,
				dataField: 'Bulletin',
				disabled: false,
				label:{text: 'Bulletin de la 6e année à secondaire 5'},
				editorType: 'dxCheckBox', 
			},{	
                colSpan: 12,
                dataField: 'NotePaiement',  
                visible: true,
                value: "AAA",
                label:{visible: false},
                template: function(data, itemElement) {  
                    $('<div id="NotePaiementTXT"/>').addClass('').appendTo(itemElement); 
                }
            }
			//,{	
			//	colSpan: 12,
			//	dataField: 'Urgent',
			//	disabled: false,
			//	label:{text: 'URGENT (24-48 heures ouvrables)'},
			//	editorType: 'dxCheckBox', 
			//}
],
    },
// ****************************************************************************************
// Paiement
// ****************************************************************************************
	{
      itemType: 'group',
      caption: "Paiement et livraison",
	colCount: 12,
	items: [{
		colSpan: 12,
		dataField: 'ModeEnvoiFK',
		editorType: 'dxRadioGroup',
		disabled: false,
		label:{text: 'Je désire recevoir mon document', location: 'top'},
		editorOptions: { dataSource: Statut, layout:'vertical', valueExpr: 'id', displayExpr: 'name' },
		validationRules: [{type: 'required', message: 'La date de naissance est obligatoire'}],
	},{	
		colSpan: 12,
		dataField: 'Remarque',
		label:{text: 'Remarques', location: 'top'},
		disabled: false,
		editorType: 'dxTextArea',
		editorOptions: {  height: 90,	},
	}
	
	
		, {
		itemType: 'button',
		colSpan: 6,
		horizontalAlignment: 'left',
		buttonOptions: {
			text: "Étape 2 -> Pièce d'identité",
			type: 'success',
			useSubmitBehavior: true,
			onClick: function () {
// ********************************************************************************************
// Envoi du formulaire
// ********************************************************************************************
			var result = formDemande.validate();  
			if (result.isValid) {  
                if ((formDemande.getEditor('EducationAdulte') && formDemande.getEditor('EducationAdulte').option('value') !== null) || 
                    (formDemande.getEditor('FP') && formDemande.getEditor('FP').option('value') !== null) || 
                    (formDemande.getEditor('FGDernier') && formDemande.getEditor('FGDernier').option('value') !== null)) {
                    event.preventDefault();
                    grecaptcha.ready(function() {
                        grecaptcha.execute('6LcSHPUjAAAAAOp90S2ol91Zo3TAjkwOFUl13Xxk', {action: 'create_comment'}).then(function(token) {
                            $.post('set_demande.php',
                            {                                            
                                CodePermanent : formDemande.getEditor('CodePermanent').option('value'),
                                Nom : formDemande.getEditor('Nom').option('value'),
                                Prenom : formDemande.getEditor('Prenom').option('value'),
                                Courriel : formDemande.getEditor('Courriel').option('value'),
                                DateNaissance : formDemande.getEditor('DateNaissance').option('text'),
                                Sexe : formDemande.getEditor('Sexe').option('value'),
                                Adresse : formDemande.getEditor('Adresse').option('value'),
                                Appartement : formDemande.getEditor('Appartement').option('value'),
                                Ville : formDemande.getEditor('Ville').option('value'),
                                CodePostal : formDemande.getEditor('CodePostal').option('value'),
                                Telephone1 : formDemande.getEditor('Telephone1').option('value'),
                                Telephone2 : formDemande.getEditor('Telephone2').option('value'),
                                NomPrenomPere : formDemande.getEditor('NomPrenomPere').option('value'),
                                NomPrenomMere : formDemande.getEditor('NomPrenomMere').option('value'),
                                Organisme : formDemande.getEditor('Organisme').option('value'),
                                EducationAdulte : formDemande.getEditor('EducationAdulte').option('value'),
                                EducationAdulteAnnee : formDemande.getEditor('EducationAdulteAnnee').option('value'),
                                FP : formDemande.getEditor('FP').option('value'),
                                FPAnnee : formDemande.getEditor('FPAnnee').option('value'),
                                FGDernier : formDemande.getEditor('FGDernier').option('value'),
                                FGDernierAnnee : formDemande.getEditor('FGDernierAnnee').option('value'),
                                FGDernierEcole : formDemande.getEditor('FGDernierEcole').option('value'),
                                Remarque : formDemande.getEditor('Remarque').option('value'),
                                ModeEnvoiFK : formDemande.getEditor('ModeEnvoiFK').option('value'),
                                Bulletin : formDemande.getEditor('Bulletin').option('value'),
                                // *************** D - Captcha 3.0 ***************
                                token: token,
                                // *************** F - Captcha 3.0 ***************
                                //Urgent : formDemande.getEditor('Urgent').option('value'),
                            },
                            function(data){
                                //alert(data.response);
                                if(data.success == 'true') { // Captcha 3.0
                                    window.location = 'demande_photo.php?DemandePK='+data.value;// Captcha 3.0
                                } else {
                                    alert('Une erreur est survenue');
                                }
                            });
                        });
                    });
                } else {
                    Msg_Message("danger", "Vous devez choisir le nom de votre dernière école fréquentée dans la section 'Renseignement supplémentaire de l'élève'");
                }  
            } else {
                Msg_Message("danger", "Vous devez remplir tous les champs obligatoire");
            }
			}
		},
    }
    	    
    ],
    }],
  }).dxForm("instance");;
});