{{> header}}
<title>Profile</title>
{{!-- <div class="alert-success">{{success}}</div>
<div class="alert-danger">{{error}}</div> --}}
<section class="content">
    <div class="container-fluid">
        <div class="row pb-2 pr-2 pl-2">
            <div class="col-md-12">
                <div class="card card-primary card-outline mt-3">
                    {{!-- <div class="card-header" style="background-color: white; color:#4D6C1F;"> --}}
                    <div class="card-header" style="background-color: white; color:#4B0F77;">
                        <h4><b>ADMIN PROFILE</b></h4>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-primary card-outline">
                    <div class="card-body box-profile">
                        <div class="text-center">
                            <img class="img-fluid" src="/{{userExists.profilePicture}}" alt="Profile picture"
                                onerror="this.onerror=null;this.src='/admin/images/dummy.png'">
                        </div><br>
                        <ul class="list-group list-group-unbordered mb-3">
                            <li class="list-group-item">
                                <b>Name</b>
                                <p class="float-right">
                                    {{userExists.name}}
                                </p>
                            </li>
                            <li class="list-group-item">
                                <b>Email</b>
                                <p class="float-right">
                                    {{userExists.email}}
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body" style="display: block;">
                        <form action="/admin/v1/updateprofile/{{userExists._id}}" method="post"
                            enctype="multipart/form-data" id="updateProfileForm">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>Full Name</label>
                                        <input type="text" class="form-control" name="name" id="update-name" required
                                            maxlength="30" minlength="3" value="{{userExists.name}}"
                                            oninput="validateNameInput(this)">
                                    </div>

                                    <script>
                                        function validateNameInput(input) {
                                            // Allow only letters, spaces, and numbers
                                            input.value = input.value.replace(/[^a-zA-Z\s]/g, '');
                                        }
                                    </script>

                                    <div class="col-md-12">
                                        <label>Email</label>
                                        <input type="text" class="form-control" name="email" maxlength="40"
                                            value="{{userExists.email}}" oninput="validateEmail(this)">
                                        <small id="emailError" style="color: red; display: none;">Please enter a valid
                                            email.</small>
                                    </div>
                                </div>
                                {{!-- <div class="row">
                                    <div class="col-md-12">
                                        <label>Phone Number</label>
                                        <input type="number" id="update-mobile" class="form-control" name="phone"
                                            title="Please enter valid numbers"
                                            oninput="this.value=this.value.replace(/[]/g,'');"
                                            value="{{userExists.phone}}">
                                    </div>
                                    <div id="phone-error-message" style="color: red; display: none;">Enter a valid
                                        10-digit mobile number</div>
                                </div> --}}

                                <div class="col-md-12">
                                    <label>Profile Picture</label>
                                    <input type="file" class="form-control" name="profilePicture" id="profilePicture"
                                        accept="image/jpeg,image/jpg,image/png">
                                    <small id="charCount">Recommended dimensions: 512x512 px</small>
                                    <div id="error-message" style="color: red; display: none;">Recommended
                                        dimensions are 512x512 height and width only.</div>
                                </div>
                                <div class="col-md-12">
                                    <label>Change Password</label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="Enter Password"
                                            pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#.])[A-Za-z\d@$!%*?&#.]{8,}$"
                                            title="Password must be at least 8 characters, include uppercase, lowercase, number, and special character."
                                            >
                                        <button type="button" class="btn btn-primary"
                                            onclick="togglePasswordVisibility('password', this)"
                                            style="background-color: aliceblue; color:black">
                                            <i class="fa fa-eye" id="toggleEye"></i>
                                        </button>
                                    </div>
                                    <p id="passwordP" style="color:red !important;"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="isAdmin" value="admin">
                            </div>
                            <button type="submit" id="updateButton"
                                class="btn btn-warning col-md-4 offset-md-4 btn-block d-flex justify-content-center">Update</button>
                            <div id="statusMessage" style="color: green; text-align: center; display: none;">
                            </div>
                    </div>
                    </form>

                    <script>
                        document.getElementById('updateProfileForm').addEventListener('submit', function (e) {
                            const updateButton = document.getElementById('updateButton');
                            const statusMessage = document.getElementById('statusMessage');

                            let nameField = document.getElementById('update-name');
                            nameField.value = nameField.value.trim(); //trim the name before storing;

                            // Disable the button
                            updateButton.disabled = true;
                            updateButton.textContent = 'Updating...';

                            // Show the status message
                            statusMessage.style.display = 'block';

                            // Re-enable the button and hide the message after 2 seconds
                            setTimeout(() => {
                                updateButton.disabled = false;
                                updateButton.textContent = 'Update';
                                statusMessage.style.display = 'none';
                            }, 2000);
                        });
                    </script>

                </div>
            </div>
        </div>
    </div>
    </div>
</section>

<script>
    const pictureInput = document.getElementById('profilePicture');

    //image validation
    function fileValidation(element) {
        element.addEventListener("change", function () {
            const file = this.files[0];
            if (file) {
                const validTypes = ["image/jpeg", "image/png", "image/webp", "image/jpg"];

                if (!validTypes.includes(file.type)) {
                    alert("Only image format is acceptable.");
                    this.value = "";
                } else {
                    console.log("Valid image selected:", file.name);
                }
            }
        });
    }

    fileValidation(pictureInput)
</script>

<script>
    function togglePasswordVisibility(inputId, toggleButton) {
        const input = document.getElementById(inputId);
        const icon = toggleButton.querySelector("i");

        if (input.type === "password") {
            input.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        } else {
            input.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        }
    }
</script>
<script>
    const form = document.getElementById('updateProfileForm')
    const initialFormData = new FormData(form);
    let isChanged = false;
    let isValidEmail;
    let isValidMobile;
    let isValidFile = true;
    function validateEmail(input) {

        input.value = input.value.toLowerCase();

        const emailRegex = /^[a-zA-Z0-9]+[a-zA-Z0-9._%+-]*@(?:(?!-)[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9](?<!-)\.)+[a-zA-Z]{2,}$/;
        const errorElement = document.getElementById('emailError');

        if (!emailRegex.test(input.value)) {
            errorElement.style.display = 'block';
            isValidEmail = false;
            document.getElementById('updateButton').disabled = true;
        } else {
            errorElement.style.display = 'none';
            isValidEmail = true;
            document.getElementById('updateButton').disabled = false;
        }

    }


    function isValidMobileNumber(mobile) {
        const mobileRegex = /^[6-9]\d{9}$/;
        return mobileRegex.test(mobile);
    }

    document.getElementById('update-mobile').addEventListener('input', function () {
        const mobile = this.value.trim();
        const errorMsg = document.getElementById('phone-error-message');

        if (isValidMobileNumber(mobile)) {
            errorMsg.style.display = 'none';
            isValidMobile = true;
            //document.getElementById('updateButton').disabled = false;
        } else {
            errorMsg.style.display = 'block';
            errorMsg.textContent = "Enter a valid 10-digit mobile number";
            isValidMobile = false;
            //document.getElementById('updateButton').disabled = true;
        }
    })

    /* document.getElementById('profilePicture').addEventListener('change', function (event) {
         var file = event.target.files[0];
         var errorMessage = document.getElementById('error-message');
         var form = document.querySelector('form');// Select your form element, if any
         var allowedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
         // If the user hasn't selected a file, clear any error message
         if (!file) {
             errorMessage.style.display = 'none';
             return;
         }
         console.log("File type:", file.type);
         if (!allowedTypes.includes(file.type)) {
             errorMessage.innerText = "Only JPG, JPEG, and PNG formats are allowed.";
             errorMessage.style.display = 'block';
             event.target.value = ''; // Reset file input
             return;
         }
 
         var img = new Image();
         img.onload = function () {
             // Check if the image dimensions are 512x512
             if (img.width === 512 && img.height === 512) {
                 errorMessage.style.display = 'none';
                 // Optionally, you can enable a submit button or allow further actions
                 //form.querySelector('button[type="submit"]').disabled = false;  // Enable submit button
                 isValidFile = true;
             } else {
                 errorMessage.style.display = 'block';
                 // Disable submit button or any action until dimensions are correct
                 //form.querySelector('button[type="submit"]').disabled = true;  // Disable submit button
                 isValidFile = false;
             }
         };
 
         // Read the file as a URL and set it to the img element for validation
         img.src = URL.createObjectURL(file);
     });*/

    form.addEventListener("input", () => {
        if (/^[a-zA-Z0-9]+[a-zA-Z0-9._%+-]*@(?:(?!-)[a-zA-Z][a-zA-Z0-9-]*[a-zA-Z0-9](?<!-)\.)+[a-zA-Z]{2,}$/.test(form.elements.email.value) && isValidMobileNumber(form.elements.phone.value)) {
            isValidEmail = true;
            isValidMobile = true;
        }
        const currentFormData = new FormData(form);
        for (let [key, value] of currentFormData.entries()) {
            if (value !== initialFormData.get(key)) {
                isChanged = true;
                //document.getElementById('updateButton').disabled = false;
                break;
            }
        }
        if (isChanged && isValidEmail && isValidFile) {
            document.getElementById('updateButton').disabled = false;
        }
        else {
            document.getElementById('updateButton').disabled = true;
        };
    })
</script>
{{> footer}}