
    <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">
            <button class="btn guestBtn d-flex gap-2 align-items-center" id="backBtn"><img
                    src="<?php echo base_url(); ?>assets/images/arowleft.svg" alt="" width="15px"> Back</button>
            <div class="row">
                <div class="col-md-8 my-2">
                    <h3 class="fmon fw-bold"> <i class="fa fa-edit"></i> Edit User</h3>
                </div>
                <div class="col-md-4 my-2 d-flex justify-content-end">
                    <?php if($userinfo['approved']==true){?>
                    <button class="btn btn-deny" id="disable-button" data-bs-toggle="modal"
                        data-bs-target="#statusModal" onclick="disableUser()">Disable User</button>
                    <?php }else{?>
                        <button class="btn btn-approv" id="enable-button" data-bs-toggle="modal"
                        data-bs-target="#statusModal" onclick="enableUser()">Enable User</button>
                    <?php }?>
                </div>
                <!-- Bootstrap Modal -->
                <div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalLabel">User Status</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body" id="modalBody">
                                <!-- Dynamic Content Here -->
                            </div>
                            <div class="modal-footer">
                            <a href="" class="btn btn-primary" id="confirmActionBtn">Save Changes</a>

                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-body">
<h1>Ali</h1>
                <?php 
                // echo "<pre>";
                // echo $id;
                // print_r($userinfo);
                // echo "</pre>";     
                
                $key="";
                if($userinfo['userType']=="owner"){
                 $key="owner";
                 $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"==",$id);
                }
                if($userinfo['userType']=="tenant"){
                    $key="tenant";
                    $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"==",$id);
                   }
                   if($userinfo['userType']=="cohost"){
                    $key="cohost";
                    $houseinfo=$this->common->readdatafromcollectionwhereclause("units",$key,"array-contains",$id);
                   }


               
                $documentId = array_key_first($houseinfo); // "872410e8166e46f09ddc"
                $documentData = $houseinfo[$documentId];   // The inner array

//                exit; 
                ?>

                <form method="POST" action="<?php echo base_url('site/edituser/'.$id); ?>">
                    <div class="row">
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Email </label>
                            <input type="email"  id="email" class="form-control FormInput"
                                value="<?php echo $userinfo['email']; ?>" readonly>
                        </div>
                        <div class="col-md-6"></div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Identification Type </label>
                            <select name="identityType" id="identityType" class="form-select Formselet"
                                >
                                <option value="National ID Card"  
                                <?php if($userinfo['identityType']=="National ID Card"){?> selected <?php }?>>
                                    National ID Card
                                </option>
                                <option value="Passport" 
                                <?php if($userinfo['identityType']=="Passport"){?> selected <?php }?>>
                                    Passport
                                </option>
                                <option value="DriverLicense" 
                                <?php if($userinfo['identityType']=="DriverLicense"){?> selected <?php }?>>
                                    Driver\'s License
                                </option>
          
                            </select>
                        </div>

                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Identification </label>
                            <input type="text" name="officialId" id="officialId" class="form-control FormInput"
                                value="<?php echo $userinfo['officialId']; ?>" >
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> First Name </label>
                            <input type="text" name="firstName" id="firstName" class="form-control FormInput"
                                value="<?php echo $userinfo['firstName']; ?>" >
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> First Last Name</label>
                            <input type="text" name="lastName" id="lastName"
                                class="form-control FormInput" value="<?php echo $userinfo['lastName']; ?>" readonly>
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> Second Last Name </label>
                            <input type="text" name="seondLastName" id="seondLastName" class="form-control FormInput"
                                value="<?php echo $userinfo['seondLastName']; ?>" >
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label"> Type of User </label>
                            <select name="userType" id="userType" class="form-select Formselet" disabled>
                     <option value="owner" <?php if($userinfo['userType']=="owner"){?> selected <?php }?>>
                                    Owner
                                </option>
                                <option value="tenant" <?php if($userinfo['userType']=="tenant"){?> selected   <?php }?>>
                                    Tenant
                                </option>
                                <option value="cohost" <?php if($userinfo['userType']=="cohost"){?> selected <?php }?>>
                                    Co-Host
                                </option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="row h-100">
                                <div class="col-md-6 align-self-center" id="privileges_section">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <p class="mb-0">Admin privileges</p>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="adminPrivileges"
                                            name="adminPrivileges" <?php echo isset($userinfo['adminPrivileges']) && $userinfo['adminPrivileges'] ? 'checked' : ''; ?> >
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 align-self-center" id="finance_section">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <p class="mb-0">Disable finances</p>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="disableFinances" name="fidisableFinancesnance"
                                                <?php echo isset($userinfo['disableFinances']) && $userinfo['disableFinances'] ? 'checked' : ''; ?> disabled>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Unit </label>
                            <input type="text" class="form-control FormInput" id="unit" placeholder="Unit" 
                                value=" <?php echo $documentData['unit']; ?>" readonly>
                            <ul id="houseNumberList" class="list-group mt-2"></ul>
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Zone/Floor</label>
                            <input type="text" class="form-control FormInput" id="zone" placeholder="Zone/Floor"
                                 value="<?php echo $documentData['zone']; ?>" readonly>
                            <ul id="zoneList" class="list-group mt-2"></ul>
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Primary Phone #</label>
                            <input type="text" name="phone" id="phone" class="form-control FormInput"
                                value="<?php echo $userinfo['phone']; ?>" >
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Additional Phone #</label>
                            <input type="text" name="additionalPhone" id="additionalPhone"
                                class="form-control FormInput" value="<?php echo $userinfo['additionalPhone']; ?>" readonly>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 my-2 d-flex justify-content-center">
                            <button type="button" id="editButton" class="btn btn-approv py-2 px-5">Edit</button>
                            <button type="submit" id="saveButton" class="btn addBtn py-2 px-5 ms-2 d-none">Save</button>
                        </div>
                    </div>
                </form>
                <!-- button for attahmnts -->



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

    </main>
    <!--end main wrapper-->

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editButton = document.getElementById('editButton');
            const saveButton = document.getElementById('saveButton');
            const form = document.querySelector('form');
            const inputs = form.querySelectorAll('input:not([type="hidden"]), select');
            
            // Function to toggle edit mode
            function toggleEditMode(isEditable) {
                inputs.forEach(input => {
                    if (input.id === 'email' || input.id === 'unit' || input.id === 'zone' || 
                        input.id === 'userType' || input.id === 'lastName') {
                        // These fields should always remain readonly
                        return;
                    }
                    if (isEditable) {
                        input.removeAttribute('readonly');
                        input.removeAttribute('disabled');
                    } else {
                        input.setAttribute('readonly', 'readonly');
                        input.setAttribute('disabled', 'disabled');
                    }
                });
                
                if (isEditable) {
                    editButton.classList.add('d-none');
                    saveButton.classList.remove('d-none');
                } else {
                    editButton.classList.remove('d-none');
                    saveButton.classList.add('d-none');
                }
            }
            
            // Edit button click handler
            editButton.addEventListener('click', function(e) {
                e.preventDefault();
                toggleEditMode(true);
            });
            
            // Save button click handler
            saveButton.addEventListener('click', function(e) {
                e.preventDefault();
                
                // Basic validation
                let isValid = true;
                const requiredFields = ['firstName', 'lastName', 'phone', 'officialId'];
                
                requiredFields.forEach(field => {
                    const input = document.getElementById(field);
                    if (!input.value.trim()) {
                        isValid = false;
                        input.classList.add('is-invalid');
                    } else {
                        input.classList.remove('is-invalid');
                    }
                });
                
                if (isValid) {
                    form.submit();
                } else {
                    alert('Please fill in all required fields');
                }
            });
        });

        // Handle user status (enable/disable)
        function disableUser() {
            document.getElementById('modalBody').innerHTML = 'Are you sure you want to disable this user?';
            // Add logic to handle user disable
            document.getElementById('confirmActionBtn').href = '<?php echo base_url('site/disableuser/'.$id); ?>';
        }

        function enableUser() {
            document.getElementById('modalBody').innerHTML = 'Are you sure you want to enable this user?';
            // Add logic to handle user enable
            document.getElementById('confirmActionBtn').href = '<?php echo base_url('site/enableuser/'.$id); ?>';
        }
    </script>

