    <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
        <ul class="nav nav-pills mb-3 renceTab" id="pills-tab" role="tablist">
            
            <li class="nav-item" role="presentation">
                <a href="Javascript:;" class="nav-link active abba_tab_checker_for_summary" data-id="staff" id="pills-staff-tab" data-bs-toggle="pill" data-bs-target="#pills-staff" type="button" role="tab" aria-controls="pills-staff" aria-selected="true"><i class="fa fa-user"></i> Staff</a>
            </li>
            
            <li class="nav-item border border-2" role="presentation">
                <button class="nav-link" data-id="staff-attendance" id="pills-staff-attendance-tab" data-bs-toggle="pill" data-bs-target="#pills-staff-attendance" type="button" role="tab" aria-controls="pills-staff-attendance" aria-selected="true"><i class="fa fa-list-alt"></i> Attendance</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-staff" role="tabpanel" aria-labelledby="pills-staff-tab">

                <div class="row g-2">
                    <div class="col-10"></div>
                    <div class="col-2">
                        <button type="button" id="pros-create-staff" style="float: right;" data-bs-toggle="modal"
                            data-bs-target="#pros-invitestaff-usertype" class="btn btn-sm btn-primary">Create
                            Staff</button>
                    </div>
                </div><br>





                <div class="row g-2">
                    <div class="col-md-12 col-lg-2 ">
                        <form>
                            <div class="mb-3">
                                <input type="text" id="pros-searchstaff" class="form-control form-control-sm"
                                    placeholder="Search staff" aria-describedby="emailText">
                            </div>
                        </form>
                    </div>

                    

                    <div class="col-md-12 col-lg-2">
                        <select style="color: #666666;" class="form-select form-select-sm" id="pros_display_staff_type"
                            aria-label=".form-select-sm example">
                            <option value="NULL" selected>Select staff type</option>
                            <option value="0">Academic Staff</option>
                            <option value="1">Non Academic Staff</option>
                        </select>
                    </div>

                    <div class="col-md-12 col-lg-2">
                        <select style="color: #666666;" class="form-select form-select-sm"
                            aria-label=".form-select-sm example" id="pros_display_staff_status">
                            <option value="NULL">Select Status</option>
                            <option value="1">Active</option>
                            <option value="2">Blocked</option>
                        </select>
                    </div>


                    <div class="col-md-1 col-lg-1">
                        <select class="form-select form-select-sm"
                            style="border:none;border-bottom:2px solid #007ffb;font-size:13px;cursor:pointer;width:70%;background: transparent;text-align: center;padding-right: 10px;"
                            id="pros_increase_staff_per_page">

                            <option value="12" selected>12</option>
                            <option value="60">60</option>
                            <option value="120">120</option>
                            <option value="360">360</option>
                            <option value="720">720</option>
                            <option value="1080">1080</option>
                        </select>
                    </div>

                    <div class="col-md-12 col-lg-2">
                        <button type="button"
                            style="font-size: 12px;border:1px solid #007bff;background-color:#fff;color:#007bff;"
                            class="btn btn-sm fw-normal" id="pros_get_staff_on_click"><i
                                class="fas fa-circle-notch"></i> Load filter</button>
                    </div>





                </div>


                <div align="center" class="mt-2 no-results-image" style="display: none;"><img
                        src="../../assets/images/adminImg/err.png" style="width:15%;" />
                    <p class="pt-2 fs-6 text-secondary">We couldn\'t find any record.</p>
                </div>
                <div id="pros-loadstaff" class="pros-loadstaffclass">

                </div>


                <div align="center" style="margin-top: 30px;" id="pros-staffpaginationcont">

                </div>
            </div>
            <div class="tab-pane fade" id="pills-staff-attendance" role="tabpanel" aria-labelledby="pills-staff-attendance-tab">
                
                <div class="row g-2">
                    <div class="col-10"></div>
                    <div class="col-2">
                        <button type="button" style="float: right;font-size:13px;" data-bs-toggle="modal" data-bs-target="#abba_set_attendance_config_Modal" class="btn btn-sm btn-primary">
                            <i class="fas fa-cog"></i> Attendance Config.</button>
                    </div>
                </div><br>
                
                <div class="row g-2 mt-2">
                    
                    <div class="col-md-12 col-lg-2">
                        <select style="color: #666666;" class="form-select form-select-sm"
                            aria-label=".form-select-sm example" id="abba_display_attendance_session">
                            <option value="NULL">Select Session</option>
                            <?php

                                $abba_sql_session = ("SELECT * FROM `session` ORDER BY sessionName DESC");
                                $abba_result_session = mysqli_query($link, $abba_sql_session);
                                $abba_row_session = mysqli_fetch_assoc($abba_result_session);
                                $abba_row_cnt_session = mysqli_num_rows($abba_result_session);
    
                                if ($abba_row_cnt_session > 0) {
                                    do {
                                        if ($abba_row_session['sessionStatus'] == '1') {
                                            $abba_selected_session = 'selected';
                                        } else {
                                            $abba_selected_session = '';
                                        }
                                        echo '<option value="' . $abba_row_session['sessionName'] . '" ' . $abba_selected_session . '>' . $abba_row_session['sessionName'] . '</option>';
    
                                    } while ($abba_row_session = mysqli_fetch_assoc($abba_result_session));
                                } else {
                                    echo '<option value="0">No Records Found</option>';
                                }
                            ?>
                        </select>
                    </div>
                    <div class="col-md-12 col-lg-2">
                        <select style="color: #666666;" class="form-select form-select-sm"
                            aria-label=".form-select-sm example" id="abba_display_attendance_term">
                            <option value="NULL">Select Term</option>
                        </select>
                    </div>

                    <div class="col-md-12 col-lg-2">
                        <select style="color: #666666;" class="form-select form-select-sm" id="abba_staff_type"
                            aria-label=".form-select-sm example">
                            <option value="NULL" selected>Select staff type</option>
                            <option value="0">Academic Staff</option>
                            <option value="1">Non Academic Staff</option>
                        </select>
                    </div>

                    <div class="col-12 col-sm-4">
                        
                    </div>

                    <div class="col-md-12 col-lg-2" align="right">
                        <button type="button" style="font-size: 12px;border:1px solid #007bff;background-color:#fff;color:#007bff;" class="btn btn-sm fw-normal" id="abba_get_attendance_record">Load filter</button>
                    </div>

                </div>
                
                
                <div style="background-color:#fff;padding: 35px 35px 35px 35px;margin-top:15px;">
                    <div class="table-responsive">
                        <div class="abba_display_attendance_records">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <!-- INVITE STAFF MODAL-->
    <div class="modal fade" id="pros-invitestaff-usertype" style="background-color: rgba(0, 0, 0, 0.9); z-index: 1050;"
        tabindex="-1" aria-labelledby="pros-invitestaff-usertypeLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg pros-invitestaff-usertype-dialog"
            style="height:80vh;margin: 1.75rem auto;color: rgb(56, 58, 63);">

            <div class="modal-content" style="border:none;width: 100%;border-radius: 5px;">
                <div class="modal-header" style="border:none;">
                    <!-- <h5 class="modal-title"  id="invitestaff-usertype">Modal title</h5>-->
                    <u style="color:blue;font-size:13px;text-decoration:underline;cursor:pointer;display:none"
                        id="invitestaff-backbtn"><i class="fa fa-arrow-left"></i> Back</u>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>

                <div class="modal-body" style="padding:6% 8%;">

                    <!-- ======usertype conatiner end here===== -->
                    <div class="row" id="selectuser-typecontainer" style="display:none;">

                        <div class="col-12" align="center">
                            <h5 class=" schoolheading " style="line-height: 35px;">choose your choise of user below
                            </h5><br><br>
                        </div>



                        <div class="col-sm-6 mb-3">

                            <div class="card generalclass-usertype" style="cursor:pointer;" data-id="3">

                                <div class="card-body"
                                    style="border:none;border:1px solid #007bff;border-radius:5px;height:60px;">

                                    <div class="radio-group">
                                        <input type="radio" style="cursor:pointer;" class="with-gap usertypecheck"
                                            id="admin" value="admin" name="usertype">
                                        <label class="ml-1" for="admin"
                                            style="font-weight:600;cursor:pointer;">Admin</label>
                                        <!-- <input type="radio" style="flex:left;" class="defaultlang english with-gap englishclick"  value="english" id="radio-btn" name="radio-btn"> -->
                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="col-sm-6 mb-3">

                            <div class="card generalclass-usertype" style="cursor:pointer;" data-id="2">

                                <div class="card-body"
                                    style="border:none;border:1px solid #007bff;border-radius:5px;height:60px;">

                                    <div class="radio-group">
                                        <input type="radio" style="cursor:pointer;" class="with-gap usertypecheck"
                                            value="schoolhead" id="personalassist" name="usertype">
                                        <label class="ml-1" for="personalassist"
                                            style="font-weight:600;cursor:pointer;">School Head</label>
                                    </div>
                                    <!-- <small style="font-size:10px;">
                                                                A school admin is the person in charge of managing the administrative tasks of a school
                                                            </small> -->
                                </div>

                            </div>

                        </div>



                       
                        <div class="col-sm-6 mb-3">

                            <div class="card generalclass-usertype" style="cursor:pointer;" data-id="4">

                                <div class="card-body"
                                    style="border:none;border:1px solid #007bff;border-radius:5px;height:60px;">

                                    <div class="radio-group">
                                        <input type="radio" style="cursor:pointer;" class="with-gap usertypecheck"
                                            id="teacher" value="teacher" name="usertype">
                                        <label class="ml-1" for="teacher"
                                            style="font-weight:600;cursor:pointer;">Teacher</label>

                                    </div>
                                </div>

                            </div>

                        </div>


                        <div class="col-sm-6 mb-3">
                            <div class="card generalclass-usertype" style="cursor:pointer;" data-id="5">

                                <div class="card-body"
                                    style="border:none;border:1px solid #007bff;border-radius:5px;height:60px;">

                                    <div class="radio-group">
                                        <input type="radio" style="cursor:pointer;" class="with-gap usertypecheck"
                                            id="nonteaching" value="nonteaching" name="usertype">
                                        <label class="ml-1" for="teacher"
                                            style="font-weight:600;cursor:pointer;">Non-teaching</label>

                                    </div>
                                </div>

                            </div>
                        </div>

                        

                        <div class="col-sm-12 mb-3">
                            <div class="card generalclass-usertype" style="cursor:pointer;" data-id="1">
                                <div class="card-body" style="border:none;border:1px solid #007bff;border-radius:5px;height:60px;">
                                    

                                    <div class="radio-group">

                                        <input type="radio" style="cursor:pointer;" class="with-gap usertypecheck"
                                            value="Senior executive/Board member" id="seniorexecutive" name="usertype">

                                        <label for="seniorexecutive" style="font-weight:600;cursor:pointer;">Senior
                                            executive/Board member</label>

                                    </div>

                                </div>

                            </div>

                        </div>




                        <div class="col-sm-12 mb-3">
                            <button type="button" id="getschoolusertypebtn"
                                style="background-color:#007bff;cursor:pointer;width:100%;"
                                class="btn btn-lg text-light">Proceed <i class="fa fa-long-arrow-right"></i></button>
                        </div>
                    </div>
                    <!-- ======usertype conatiner end here===== -->

                    <!-- ======getstaff-forinsert conatiner end here===== -->
                    <div id="getstaff-forinsert-container" style="display:none;">

                        <div class="row">

                            <div class="col-12" align="center">
                                <h5 class=" schoolheading " style="line-height: 35px;">choose to either create staff or
                                    invite</h5>
                                <br><br>

                            </div>

                            <div class="col-12">
                                <span id="pros-watchtutorial"
                                    style="color:blue;font-size:13px;text-decoration:underline;cursor:pointer;float:right;"><i
                                        class=" fa fa-play-circle" style="font-size:20px;"></i> Watch tutorial </span>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-6 mb-3">

                                <div class="card stafflink-card " data-id="1" style="cursor:pointer;">

                                    <!-- Card content for box 1 -->
                                    <div class="card-body bringformlinkinvite"
                                        style="border:none;border:1px solid #007bff;border-radius:5px;height:120px;">

                                        <div class="radio-group">

                                            <input type="radio" style="cursor:pointer;"
                                                class="with-gap inviteuser-create  bringformlink" id="invitelink"
                                                value="Invite Staff" name="inviteuser-link">
                                            <label class="ml-1 mb-2" for="invitelink"
                                                style="font-weight:600;cursor:pointer;" id="pros-invitetitle">Invite Staff</label>

                                        </div>

                                        <p>By clicking on invite staff, this means you want to send an invite link to a
                                            staff for registration. </p>
                                    </div>

                                </div>

                            </div>

                            <div class="col-md-6 mb-3">

                                <div class="card stafflink-card " data-id="2" style="cursor:pointer;">

                                    <div class="card-body bringformlinkcreate"
                                        style="border:none;border:1px solid #007bff;border-radius:5px;;height:120px;">

                                        <div class="radio-group">

                                            <input type="radio" style="cursor:pointer;"
                                                class="with-gap inviteuser-create bringformlink" id="createstaff"
                                                value="Create staff" name="inviteuser-link">
                                            <label class="ml-1 mb-2" for="createstaff"
                                                style="font-weight:600;cursor:pointer;" id="pros-createtitle">Create staff</label>

                                        </div>

                                        <p>By clicking on craete staff, this means you want to create the staff by
                                            filling the form your self. </p>
                                    </div>

                                </div><br>
                                
                            </div>

                            <div class="col-sm-12 mb-3" id="displaystaffemail" style="display:none;">

                                <div class="pros-geneclass-label"
                                    style="margin-right:11rem;margin-left:2%;text-transform: uppercase;font-weight: 700;display: block;font-size: 0.9em;">
                                    <label for="schoolName">Staff email<span
                                            style="color:red;margin-right:2.5rem;">*</span></label>
                                </div>

                                <div class="pros-flexi-input-affix-wrapper-invitemail staffemail-invitelink">

                                    <input type="email" class="pros-flexi-input" id="staffemail-invite"
                                        placeholder="Enter your staff's email" style="width:70%;">
                                </div>

                                <!-- appending email for staff invitation here -->
                                <div id="pros-display-appendstaff-email"></div>
                                <!-- appending email for staff invitation end here -->

                                <br>
                                <span class="circle-icon" id="pros-addstaff-email-invite"
                                    style="color:#007bff;font-size:12px;cursor:pointer;float:right;">
                                    Add Staff <i class="fa fa-plus"></i>
                                </span>
                                <input type="hidden" id="pros-appendinput-ivite-email">

                            </div>

                            <div class="col-sm-12 mb-3" id="staff-form" style="display:none;">

                                <div class="row">

                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper " style="margin-right:11rem;"><label
                                                for="schoolName"> First name<span style="color:red;">*</span></label>
                                        </div>
                                        <div class="pros-flexi-input-affix-wrapper-invitemail stafffnamecont">
                                            <input type="text" class="pros-flexi-input" id="staff-fname"
                                                placeholder="Enter your staff's first name" style="width:80%;">
                                        </div>&nbsp;&nbsp;
                                    </div>


                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper" style="margin-right:11rem;"><label
                                                for="schoolName"> Last Name<span style="color:red;">*</span></label>
                                        </div>
                                        <div class="pros-flexi-input-affix-wrapper-invitemail stafff-lastnamecont">
                                            <input type="text" class="pros-flexi-input" id="staff-lname"
                                                placeholder="Enter your staff's last name" style="width:80%;">
                                        </div>&nbsp;&nbsp;
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper" style="margin-right:11rem;"><label
                                                for="schoolName"> Email<span style="color:red;">*</span></label></div>
                                        <div class="pros-flexi-input-affix-wrapper-invitemail stafff-emailcont">
                                            <input type="text" class="pros-flexi-input" id="staff-email"
                                                placeholder="Enter your staff's email" style="width:80%;">
                                        </div>&nbsp;&nbsp;
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper" style="margin-right:11rem;"><label
                                                for="schoolName"> Phone<span style="color:red;">*</span></label></div>
                                        <div class="pros-flexi-input-affix-wrapper-invitemail staffnumbercont">
                                            <input type="number" name="staffphone" class="pros-flexi-input "
                                                id="staffnumber" placeholder="e:g XXXX-XXX-XXXX"
                                                style="width:85%;margin-left:4%;">
                                        </div>&nbsp;&nbsp;
                                    </div>


                                    
                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper" style="margin-right:11rem;"><label
                                                for="schoolName"> Date of birth<span style="color:red;">*</span></label></div>
                                        <div class="pros-flexi-input-affix-wrapper-invitemail stafff-dobcont">
                                            <input type="date" class="pros-flexi-input" id="pros-staff-dob"
                                                placeholder="Enter your staff's email" style="width:80%;">
                                        </div>&nbsp;&nbsp;
                                    </div>


                                    <div class="col-sm-6">
                                        <div class="pros-flexi-label-wrapper" style="margin-right:11rem;"><label
                                                for="schoolName"> Gender<span style="color:red;">*</span></label></div>
                                    <div class="pros-flexi-input-affix-wrapper-invitemail stafff-gendercont">
                                       <select class="pros-flexi-input" id="prosstaffgender"  style="width:80%;">
                                      
                                            <option value="0">Select Gender</option>
                                            <option  value="Male">Male</option>
                                            <option  value="Female">Female</option>
                                        </select>
                                    </div>
                                    </div>
                                </div>


                            </div>

                            <div class="col-sm-12 mb-3">
                                <button type="button" id="getschoolinvitebtn"
                                    style="background-color:#007bff;cursor:pointer;width:100%;"
                                    class="btn btn-block btn-lg text-light">Submit <i
                                        class="fa fa-long-arrow-right"></i></button>
                            </div>

                        </div>
                    </div>
                    <!-- ======getstaff-forinsert conatiner end here===== -->



                    <!-- ======display menu conatiner for admin and pa===== -->
                    <div class="row" id="pros-displayadminmenuset" style="display:none;">

                    </div>
                    <!-- ======display menu conatiner for admin and pa===== -->
                </div>

                <input type="hidden" id="getusertypeinvite"><!-- store staff id here -->

                <input type="hidden" id="prosmenucontent">
                <!-- <input type="hidden" id="pros-dispaly-mainmenu">
                <input type="hidden" id="pros-dispaly-submenu">
                <input type="hidden" id="pros-dispaly-menustatus"> -->

                <div class="modal-footer" style="border:none;">
                </div>

            </div>
        </div>
    </div>
    <!--INVITE STAFF MODAL END-->




    <!--change staff role-->
    <div class="modal fade" id="pros-changestaffrole" style="background-color: rgba(0, 0, 0, 0.9); z-index: 1050;"
        tabindex="-1" aria-labelledby="pros-invitestaff-usertypeLabel" aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable "
            style="margin: 1.75rem auto;color: rgb(56, 58, 63);">

            <div class="modal-content"
                style="border:none;border-radius: 5px;background-color:rgb(245, 245, 247);">
                <div class="modal-header" style="border:none;">
                    <h5 class="modal-title" id="invitestaff-usertype">Change staff role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body" style="padding:3% 5%;">
                    <div id="loadChangeRoleForm"></div>
                </div>

                <div class="modal-footer" style="border:none;">
                </div>

            </div>
        </div>
    </div>
    <!--change staff role-->





    <!--delete staff modal -->
    <div class="modal fade" id="pros-deltestaffmodal-modal" style="background-color: rgba(0, 0, 0, 0.9); z-index: 1050;"
        tabindex="-1" role="dialog" aria-labelledby="pros-deltestaffmodal-modalLabel" aria-hidden="true">
        <div class="modal-dialog " style="height:80vh;margin: 1.75rem auto;color: rgb(56, 58, 63);" role="document">
            <div class="modal-content">
                <div class="modal-header" style="border:none;">
                    <h5 class="modal-title" style="font-weight:600;font-size:15px;" id="deleteschool-modalLabel">
                        Delete staff</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="displayschooldel-onboarding">
                    <input type="hidden" id="pros-storegetstaffIDdel">
                    <p style="font-weight:400;font-size:15px;">want to delete staff?
                    </p>

                    <span style="color:red;font-weight:600;">
                        Note: This action is irreversible. Are you sure you want to delete?
                    </span>



                </div>
                <div class="modal-footer" style="border:none;">
                    <button type="button" class="btn btn-secondary " data-bs-dismiss="modal"
                        aria-label="Close">Cancel</button>
                    <button type="button" class="btn btn-danger " id="staffconfirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>
    <!--delete staff modal -->



    <div class="row justify-content-center">
        <div class="container-fluid mt-3 mb-3">
            <div class="picture-container">
                <div class="image-error"></div>
                <!-- Image Modal -->
                <div id="pros-uploadstaffimage" class="modal" role="dialog">
                    <div class="modal-dialog modal-md">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="invitestaff-usertype">Upload Image</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>

                            </div>
                            <div class="modal-body">
                                <div class="row justify-content-center">
                                    <div class="col-sm-12 col-md-12 col-lg-12 p-2">
                                        <input type="hidden" id="prosgetstaffID-formimage">
                                        <div id="image_demo"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-12">
                                        <button class="btn btn-success btn-sm crop_image"> submit </button>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary " data-bs-dismiss="modal"
                                    aria-label="Close">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!--  -->
            </div>
        </div>
    </div>
    
    <!-- atendance config -->
    <div class="modal fade modalshow modalfade" id="abba_set_attendance_config_Modal" tabindex="-1"
        aria-labelledby="abba_set_attendance_config_ModalLabel" aria-hidden="true">
        <div class="modal-dialog dialogcontent modal-dialog-scrollable" style="border-top-left-radius: 20px; width: 100%;">
            <div class="modal-content modalcontent" style="background-color:#ffffff; ">
    
                <div class="modal-header">
                    <h5 class="modal-title text-primary">
                        <i class="fa fa-list-alt"></i> Attendance Configuration
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div style="position: fixed; margin-left: -10px; margin-top: -30px;">
                        
                    </div>
                    <!-- Navbar pills -->
                    <div class="row">
                        <div class="col-sm-12">
                            <!-- Nav tabs -->
                            <div class="col-sm-12">
                                <span style="font-size:12px; font-weight:500;">Generate Campus QR-Code and Pin Campus Location</span>
                                <div class="card">
                                    <form class="ps-3 pe-3 pt-3 pb-0">
                                        <div class="row">
                                            
                                            <span style="font-size:12px; font-weight:500;"><i class="fas fa-magic"></i> Generate Campus QR-Code</span>
                                            <div class="card qr-code-div">
                                                <form class="ps-3 pe-3 pt-3 pb-0">
                                                    <div class="row p-3">
                                                        <div class="col-12 col-sm-12" align="right">
                                                            <button type="button" style="font-size: 12px;border:1px solid #007bff;background-color:#fff;color:#007bff;" class="btn btn-sm fw-normal abba_generate_qr_code"><i class="fas fa-magic"></i> Generate QR-Code</button>
                                                        </div>
                                                        <div class="col-12 col-sm-12 p-4">
                                                            <div class="text-center" id="qr-code-preloader">
    
                                                            </div>
                                                            <div class="text-center qr-code-display">
    
                                                                <span style="font-weight:600;font-size:20px;cursor:pointer;" class="abba_generate_qr_code">Generate QR-Code</span>
                                                            </div>
                                                        </div>
                                                        <div class="qr-code-print" id="printContent" style="display: none; text-align: center;">
                                                            
                                                        </div>
                                                        <div class="col-12 col-sm-12" align="right">
                                                            <button type="button" style="font-size: 12px;border:1px solid #007bff;background-color:#fff;color:#007bff;" class="btn btn-sm fw-normal printQRCodeBtn"><i class="fas fa-print"></i> Print QR-Code</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            
                                            <!-- Hidden iframe for printing -->
                                            <iframe id="printFrame" style="display: none;"></iframe>
                                            
                                            <span style="font-size:12px; font-weight:500;margin-top:15px;"><i class="fas fa-location-arrow"></i> Pin Campus Location</span>
                                            <div class="card mb-3 pin_loc_div">
                                                <form class="ps-3 pe-3 pt-3 pb-0">
                                                    <div class="row p-3">
                                                        <div class="col-12 col-sm-12" align="right">
                                                            <button type="button" style="font-size: 12px;border:1px solid #007bff;background-color:#fff;color:#007bff;" class="btn btn-sm fw-normal abba_pin_location"><i class="fas fa-location-arrow"></i> Pin Location</button>
                                                        </div>
                                                        <div class="col-12 col-sm-12 p-4">
                                                            <div class="text-center" id="pin-location-preloader">
    
                                                            </div>
                                                            <div class="text-center pin-location-display">
    
                                                                <span style="font-weight:600;font-size:20px;cursor:pointer;" class="abba_generate_qr_code show_pinned_location">Pin Campus Location</span>
                                                            </div>
                                                            <input type="hidden" class="abba_longitude">
                                                            <input type="hidden" class="abba_latitude">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                
                                <div class="mt-4">
                                    <span style="font-size:12px; font-weight:500;">Clock in and clock out time and penalty.</span>
                                    <div class="card">
                                        <form class="ps-3 pe-3 pt-4 pb-0">
                                            <div class="row">
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group abba_local-forms">
                                                        <label>Clock In Time.<span style="color:orangered;">*</span> </label>
                                                        <input class="form-control" type="time" placeholder="Clock In Time" id="abba_get_clock_in_time">
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group abba_local-forms">
                                                        <label>Clock In Penalty.<span style="color:orangered;">*</span> </label>
                                                        <input class="form-control" type="number" placeholder="Clock In Penalty" id="abba_get_clock_in_penalty">
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group abba_local-forms">
                                                        <label>Clock Out Time.<span style="color:orangered;">*</span> </label>
                                                        <input class="form-control" type="time" placeholder="Clock Out Time" id="abba_get_clock_out_time">
                                                    </div>
                                                </div>
                                                <div class="col-12 col-sm-6">
                                                    <div class="form-group abba_local-forms">
                                                        <label>Clock Out Penalty.<span style="color:orangered;">*</span> </label>
                                                        <input class="form-control" type="number" placeholder="Clock Out Penalty" id="abba_get_clock_out_penalty">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Navbar pills -->
                </div>
                <div class="modal-footer" id="change_create_btn">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"><i class="fas fa-times"> Close</i></button>
                    <button type="button" class="btn btn-primary btn-sm abba_proceed_set_attendance_config"> 
                        <i class="fas fa-save"></i> Save Changes</i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    
    
    <!-- atendance config -->
    <div class="modal fade" id="staticBackdropattend" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropattendLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" style="border-radius: 40px;">
            <div class="modal-content">
                <div class="modal-header">
                    
                    <h5 class="modal-title text-primary">
                        <i class="fa fa-list-alt"></i> Attendance History
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body abba_dis_staff_atten_his">
                    
                </div>
                <div class="modal-footer" id="change_create_btn">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal"><i class="fas fa-times"> Close</i></button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModalimageview" tabindex="-1" aria-labelledby="exampleModalimageviewLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body">
                    <img src="" class="attendance_img" width="100%" height="auto" style="transform: rotate(90deg);">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>