$(document).ready(function(){
console.log('foo');
	// document.addEventListener("DOMContentLoaded", function () {
	    // const phoneInput = document.querySelector("#newUserPhone");

	    // const iti = window.intlTelInput(phoneInput, {
	    //     initialCountry: "gh",         
	    //     onlyCountries: ["gh"],        
	    //     nationalMode: false,
	    //     utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
	    // });

	    // Optional: validate before form submit
	    // $("#newUserForm").on("submit", function (evt) {
	    //     if (!iti.isValidNumber()) {
	    //         evt.preventDefault();
	    //         $("#newUserErrorArea")
	    //             .removeClass("d-none")
	    //             .text("Please enter a valid Ghana phone number.");
	    //     }
	    // });
	// });

	$('#addUserModal').on('shown.bs.modal', function () {
	    const phoneInput = document.querySelector("#phone");
	    window.intlTelInput(phoneInput, {
	        initialCountry: "gh",
	        onlyCountries: ["gh"],
	        nationalMode: false,
	        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
	    });
	});



	var selectedValue = $("input[name='user_type']:checked").val();
	const $dropdown = $("#uaPostionAdd");
	    
	    const optionsMap = {
	        district_user: [
	        	"PPD Head", "Works Head",  "MIS",
	        	"PPD Staff", "Works Staff", 
	        	"Devt Planning Officer",
	        	"MCE", "DCE",
	        	"Urban Roads Department Head",
	        	"District Fire Officer",
	        	"District Disaster Prevention Department",
	        	"Head of District Health Department",
	        	"Representative of the Lands Commission",
	        	"Representative of the Environmental Protection Agency",
	        	"Rep from Traditional Council",
	        	"Chairman of the Works Sub Committee",
	        	"Chairman of Development Sub Planning Committee",
	        	"Nominated Elected Assembly Memebers"
	        ],
	        national_luspa: ["Director", "IT Head", "Staff"],
	        regional_luspa: ["Director", "Staff"]
			
	    };
	    $dropdown.empty();
        $dropdown.append('<option value="">-- Select an option --</option>');

        if (optionsMap['district_user']) {
            $.each(optionsMap['district_user'], function(index, value) {
                $dropdown.append($("<option></option>").attr("value", value.toLowerCase()).text(value));
            });
        }

	$("input[name='user_type']").change(function() {
	    var userValue = $(this).val();   
   		if (userValue == 'district_user') {
   			$('#regionID').prop('disabled', false);
   			$('#districtID').prop('disabled', false);

   		}
   		if (userValue == 'national_luspa') {
   			$('#regionID').prop('disabled', true);
   			$('#districtID').prop('disabled', true);

   		}
   		if (userValue == 'regional_luspa') {
   			$('#districtID').prop('disabled', true);
   			$('#regionID').prop('disabled', false);

   		}

        $dropdown.empty();
        $dropdown.append('<option value="">-- Select an option --</option>');

        if (optionsMap[userValue]) {
            $.each(optionsMap[userValue], function(index, value) {
                $dropdown.append($("<option></option>")
                    .attr("value", value.toLowerCase())
                    .text(value));
            });
        }

	});

	

	$('#editAllowedApps').select2({
		dropdownParent: $('#editUserModal'),
		placeholder : "Select options, multiple allowed"
	});

	$('#allowedApps').select2({
		dropdownParent: $('#addUserModal'),
		placeholder : "Select options, multiple allowed"
	});

	$('#inputPermissions').select2({
		dropdownParent: $('#editUserModal'),
		placeholder : "Select options, multiple allowed"
	});

	$('.editUserBtn').click(function(evnt){
		evnt.preventDefault();
		var selectedUserId = $(this).siblings('.userIdinput').val();

		const formData = new FormData();
		formData.append('user_id', selectedUserId);

		$.ajax({
		    url: base_url + '/users/edit/' + selectedUserId,
		    type: 'GET',
		    processData: false,
		    contentType: false,
		    headers: {
		        'X-Requested-With': 'XMLHttpRequest',
		        'crossDomain': false
		    },
		    beforeSend: function() {
		    	$('#editSuccessArea').text("");
				$('#editErrorArea').text("Please wait ... loading user details!!");
		  	},
		    success: function(data) {
		    	$('#editErrorArea').text('');
		    	var jason = data.data;
		        if(data.success == true){
		        	var allowedAppsArray = [];
	            	if (jason['allowed_apps']) {
	              		allowedAppsArray = jason['allowed_apps'].split(",");
	            	}
			      	$('#editFullName').val(jason['full_name']);
		          	$('#editEmail').val(jason['email']);
		          	$('#editUsername').val(jason['username']);
		          	$('#editGender').val(jason['gender']);
		          	$('#editTitle').val(jason['title']);
		          	$('#editUaPostion').val(jason['ua_position']);
		          	$('#editPhone').val(jason['phone']);
		          	$('#editAllowedApps').val(allowedAppsArray).trigger('change');
		          	$('#editRegionID').val(jason['region_id']);
		          	$('#editDistrictId').val(jason['district_id']);
		          	$('#editUaPostion').val(jason['ua_position']);
		          	$('#editGender').val(jason['gender']);  
		          	$("input[name='user_id']").val(jason.user_id);       
		          	          
	          }
	          //$('#editUserModal').modal('show');
		    },
		    error: function(xhr, status, error) {
		        console.error('Error:', error);
		        $('#errorArea').text(error);
				$('#errorArea').text(error);
		    }
		});

	});



	$('.viewUserBtn').click(function(evnt){
		evnt.preventDefault();
		var selectedUserId = $(this).siblings('.userIdinput').val();

		const formData = new FormData();
		formData.append('user_id', selectedUserId);

		$.ajax({
		    url: base_url + '/users/' + selectedUserId,
		    type: 'GET',
		    processData: false,
		    contentType: false,
		    beforeSend: function() {
		    	$('#viewSuccessArea').text("");
				$('#viewErrorArea').text("Please wait ... loading user details!");
		  	},
		    success: function(data) {
		    	var jason = data.data;
		        if(data.success == true){
		        	var allowedAppsArray = [];
	            	if (jason['allowed_apps']) {
	              		allowedAppsArray = jason['allowed_apps'].split(",");
	            	}
	            	console.log(jason['full_name']);
			      	$('#viewFullName').val(jason['full_name']);
		          	$('#viewEmail').val(jason['email']);
		          	$('#viewUsername').val(jason['username']);
		          	$('#viewGender').val(jason['gender']);
		          	$('#viewTitle').val(jason['title']);
		          	$('#viewUaPostion').val(jason['ua_position']);
		          	$('#viewPhone').val(jason['phone']);
		          	$('#viewAllowedApps').val(allowedAppsArray).trigger('change');
		          	$('#viewRegionID').val(jason['region_id']);
		          	$('#viewDistrictId').val(jason['district_id']);
		          	$('#viewUaPostion').val(jason['ua_position']);
		          	$('#viewGender').val(jason['gender']);  
		          	$("input[name='user_id']").val(jason.ua_id);       
		          	          
	          }
	          //$('#editUserModal').modal('show');
		    },
		    error: function(xhr, status, error) {
		        console.error('Error:', error);
		        $('#errorArea').text(error);
				$('#errorArea').text(error);
		    }
		});

	});

	$("#newUserFormXX").submit(function(evt){
		evt.preventDefault();
		$('#newUserSuccessArea').addClass('d-none');
		$('#newUserErrorsArea').removeClass('d-none');
		var formData = new FormData($(this)[0]);

		$.ajax({
		    url: base_url + '/users',
		    type: 'POST',
		    data: formData,
		    processData: false,
		    contentType: false,
		    beforeSend: function() {
		  		$('#newUserSuccessArea').text("");
				$('#newUserSuccessArea').text("Please wait ... user creation in progress!");
		  	},
		    success: function(data) {
		    	console.log(data);
		        if (data['success'] == true) {
			        $('#newUserSuccessArea').removeClass('d-none');
		        	$('#newUserErrorsArea').addClass('d-none');
		        	
					$('#newUserSuccessArea').text("");
					$('#newUserSuccessArea').text("User successfully created!");
					$.alert({
	                    title: 'Alert!',
	                    content: 'User successfully created!',
	                });
					setTimeout(function() {
			            location.reload(); // Reloads the current page
			        }, 2000);
				}
				else{
					$('#newUserSuccessArea').addClass('d-none');
		        	$('#newUserErrorsArea').removeClass('d-none');
					$('#newUserErrorsArea').text("");
					$('#newUserErrorsArea').text(data['msg']);
					$.alert({
	                    title: 'Alert!',
	                    content: data['msg'],
	                });
				}
		    },
		    error: function(xhr, status, error) {
		        console.error('Error:', error);
		        $('#newUserSuccessArea').text(error);
				$('#newUserSuccessArea').text(error);
		    }
		});
	});

	$("#newUserForm").on("submit", function (evt) {
	    evt.preventDefault();

	    const $successArea = $("#newUserSuccessArea");
	    const $errorArea = $("#newUserErrorArea"); // corrected selector
	    const formData = new FormData(this);

	    // Example validation rules
	    const username = $("#username").val().trim();
	    const email = $("#email").val().trim();
	    const fullName = $("#fullName").val().trim();

	    let errors = [];

	    if (!fullName) {
	        errors.push("Full name is required.");
	    }
	    if (!username) {
	        errors.push("Username is required.");
	    }
	    if (!email) {
	        errors.push("Email is required.");
	    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
	        errors.push("Invalid email format.");
	    }

	    if (errors.length > 0) {
	        $successArea.addClass("d-none").text("");
	        $errorArea.removeClass("d-none").html(errors.join("<br>"));
	        return; // Stop submission if validation fails
	    }

	    // Reset messages
	    $successArea.addClass("d-none").text("");
	    $errorArea.addClass("d-none").text("");

	    $.ajax({
	        url: base_url + "/users",
	        type: "POST",
	        data: formData,
	        processData: false,
	        contentType: false,
	        beforeSend: function () {
	            $successArea.removeClass("d-none").text("Please wait ... user creation in progress!");
	        },
	        success: function (data) {
	            if (data.success) {
	                $successArea.removeClass("d-none").text("User successfully created!");
	                $errorArea.addClass("d-none");

	                $.alert({
	                    title: "Success",
	                    content: "User successfully created!",
	                });

	                setTimeout(() => location.reload(), 2000);
	            } else {
	                $successArea.addClass("d-none");
	                $errorArea.removeClass("d-none").text(data.msg || "An error occurred.");

	                $.alert({
	                    title: "Error",
	                    content: data.msg || "An error occurred.",
	                });
	            }
	        },
	        error: function (xhr, status, error) {
	            $successArea.addClass("d-none");
	            $errorArea.removeClass("d-none").text("Request failed: " + error);

	            $.alert({
	                title: "Error",
	                content: "Request failed: " + error,
	            });
	        },
	    });
	});




	$("#editUserForm").submit(function(evt){
		evt.preventDefault();
		$('#successArea').addClass('d-none');
		$('#errorsArea').removeClass('d-none');
		var formData = new FormData($(this)[0]);
		$.ajax({
		    url: base_url + '/userupdate',
		    type: 'POST',
		    data: formData,
		    dataType: 'json', 
		    processData: false,
		    contentType: false,
		    beforeSend: function() {
		  		// $('#updateBtn').addClass('d-none');
					// $('#uodateProgressBtn').removeClass('d-none');
					// $('#updateResultsDiv').removeClass('d-none');
					// $('#updateResultsParagraph').text("Processing Please wait ...");
		  	},
		    success: function(data) {
		        console.log(data);
		        console.log(data['success']);
		        if (data['success'] == true) {
		        	$('#editSuccessArea').removeClass('d-none');
		        	$('#editErrorArea').addClass('d-none');
					$('#editSuccessArea').text("");
					$('#editSuccessArea').text("User successfully details updated!");	
					$.alert({
	                    title: 'Alert!',
	                    content: 'User successfully details updated!!',
	                });
		        }
		        else{
		        	$('#editErrorArea').removeClass('d-none');
					$('#editErrorArea').text(data['msg']);
					$.alert({
	                    title: 'Alert!',
	                    content: data['msg'],
	                });
		        }
		    },
		    error: function(xhr, status, error) {
		        console.error('Error:', error);
		       	$('#editErrorArea').removeClass('d-none');
				$('#editErrorArea').text(error);
				// location.reload();
				$.alert({
                    title: 'Alert!',
                    content: error,
                });
		    }
		});
	});

	$('#regionID').change(function(){
	      var options = $('#districtID');
	      var region_id = $('#regionID').val();	      
	      // $.get( base_url + '/admin/districts/' + region_id, function (data) {
	      //     $('#districtID').empty();
	      //     $.each(data['districts'], function(id, row) {
	      //         $('#districtID').append($("<option />").val(row.districtid).text(row.district_name));
	      //     });
	      // });
	      	$.ajax({
			    url: base_url + '/admin/districts/' + region_id,
			    type: 'GET',
			    headers: {
			        'X-Requested-With': 'XMLHttpRequest',
			        'crossDomain': false
			    },
			    success: function(data) {
			        // console.log('Success:', data);
			        $.each(data['districts'], function(id, row) {
			        	// console.log(row);
			            $('#districtID').append($("<option />").val(row.districtid).text(row.district_name));
			        });
			    },
			    error: function(xhr, status, error) {
			        console.error('Error:', error);
			    }
			});
	});
});