 <!--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 Security Officer</h3>
                </div>
                <div class="col-md-4 my-2 d-flex justify-content-end">
                    <button class="btn btn-deny" id="disable-button" data-bs-toggle="modal"
                        data-bs-target="#statusModal" onclick="disableUser()">Disable User</button>
                    <button class="btn btn-approv d-none" id="enable-button" data-bs-toggle="modal"
                        data-bs-target="#statusModal" onclick="enableUser()">Enable User</button>
                </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">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-body">



                <form>
                    <div class="row">
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Email </label>
                            <input type="email" name="email" id="email" class="form-control FormInput"
                                value="user@example.com" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="" class="form-label"> Company</label>
                            <select name="company" id="company" class="form-select Formselet" disabled>
                                <option value="#" selected>VGS</option>
                            </select>
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Identification Type </label>
                            <select name="type_identification" id="type_identification" class="form-select Formselet"
                                disabled>
                                <option value="#" selected>Passport</option>
                            </select>
                        </div>

                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Identification </label>
                            <input type="text" name="identification" id="identification" class="form-control FormInput"
                                value="12345678" readonly>
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> First Name </label>
                            <input type="text" name="first_name" id="first_name" class="form-control FormInput"
                                value="John" readonly>
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> Last Name </label>
                            <input type="text" name="first_last_name" id="first_last_name"
                                class="form-control FormInput" value="Doe" readonly>
                        </div>
                        <div class="col-md-4 my-2">
                            <label for="" class="form-label"> Second Last Name </label>
                            <input type="text" name="sec_last_name" id="sec_last_name" class="form-control FormInput"
                                value="Smith" readonly>
                        </div>
                        <div class="col-md-12 my-2">
                            <label for="" class="form-label"> Type of User </label>
                            <select name="user_type" id="user_type" class="form-select Formselet" disabled>
                                <option value="owner" selected>Owner</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="admin_privileges"
                                                name="admin_privileges" disabled>
                                        </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="finance" name="finance"
                                                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" name="unit"
                                oninput="filterHouseNumbers()" value="101" 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"
                                name="zone" oninput="filterZone()" value="102" 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="primary_phone" id="primary_phone" class="form-control FormInput"
                                value="+123456789" readonly>
                        </div>
                        <div class="col-md-6 my-2">
                            <label for="" class="form-label">Additional Phone #</label>
                            <input type="text" name="additional_phone" id="additional_phone"
                                class="form-control FormInput" value="+987654321" 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-->
