  <!-- Modal Custom Settings-->
            <div class="modal fade right" id="Settingmodal" tabindex="-1"  aria-hidden="true">
                <div class="modal-dialog  modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Custom Settings</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body custom_setting">
                            <!-- Settings: Color -->
                            <div class="setting-theme pb-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-color-bucket fs-4 me-2 text-primary"></i>Template Color Settings</h6>
                                <ul class="list-unstyled row row-cols-3 g-2 choose-skin mb-2 mt-2">
                                    <li data-theme="indigo"><div class="indigo"></div></li>
                                    <li data-theme="tradewind"><div class="tradewind"></div></li>
                                    <li data-theme="monalisa"><div class="monalisa"></div></li>
                                    <li data-theme="mist" class="active"><div class="mist"></div></li>
                                    <li data-theme="cyan"><div class="cyan"></div></li>
                                    <li data-theme="green"><div class="green"></div></li>
                                    <li data-theme="orange"><div class="orange"></div></li>
                                    <li data-theme="blush"><div class="blush"></div></li>
                                    <li data-theme="red"><div class="red"></div></li>
                                </ul>
                            </div>
                            <!-- Settings: Template dynamics -->
                            <div class="dynamic-block py-3">
                                <ul class="list-unstyled choose-skin mb-2 mt-1">
                                    <li data-theme="dynamic"><div class="dynamic"><i class="icofont-paint me-2"></i> Click to Dyanmic Setting</div></li>
                                </ul>
                                <div class="dt-setting">
                                    <ul class="list-group list-unstyled mt-1">
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label>Primary Color</label>
                                            <button id="primaryColorPicker" class="btn bg-primary avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label>Secondary Color</label>
                                            <button id="secondaryColorPicker" class="btn bg-secondary avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 1</label>
                                            <button id="chartColorPicker1" class="btn chart-color1 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 2</label>
                                            <button id="chartColorPicker2" class="btn chart-color2 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 3</label>
                                            <button id="chartColorPicker3" class="btn chart-color3 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 4</label>
                                            <button id="chartColorPicker4" class="btn chart-color4 avatar xs border-0 rounded-0"></button>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2">
                                            <label class="text-muted">Chart Color 5</label>
                                            <button id="chartColorPicker5" class="btn chart-color5 avatar xs border-0 rounded-0"></button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <!-- Settings: Font -->
                            <div class="setting-font py-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-font fs-4 me-2 text-primary"></i> Font Settings</h6>
                                <ul class="list-group font_setting mt-1">
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-poppins" value="font-poppins">
                                            <label class="form-check-label" for="font-poppins">
                                                Poppins Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-opensans" value="font-opensans">
                                            <label class="form-check-label" for="font-opensans">
                                                Open Sans Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-montserrat" value="font-montserrat">
                                            <label class="form-check-label" for="font-montserrat">
                                                Montserrat Google Font
                                            </label>
                                        </div>
                                    </li>
                                    <li class="list-group-item py-1 px-2">
                                        <div class="form-check mb-0">
                                            <input class="form-check-input" type="radio" name="font" id="font-Plex" value="font-Plex" checked="">
                                            <label class="form-check-label" for="font-Plex">
                                                Plex Google Font
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <!-- Settings: Light/dark -->
                            <div class="setting-mode py-3">
                                <h6 class="card-title mb-2 fs-6 d-flex align-items-center"><i class="icofont-layout fs-4 me-2 text-primary"></i>Contrast Layout</h6>
                                <ul class="list-group list-unstyled mb-0 mt-1">
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-switch mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-switch">
                                            <label class="form-check-label" for="theme-switch">Enable Dark Mode!</label>
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-high-contrast mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-high-contrast">
                                            <label class="form-check-label" for="theme-high-contrast">Enable High Contrast</label>
                                        </div>
                                    </li>
                                    <li class="list-group-item d-flex align-items-center py-1 px-2">
                                        <div class="form-check form-switch theme-rtl mb-0">
                                            <input class="form-check-input" type="checkbox" id="theme-rtl">
                                            <label class="form-check-label" for="theme-rtl">Enable RTL Mode!</label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-start">
                            <button type="button" class="btn btn-white border lift" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary lift">Save Changes</button>
                        </div>
                    </div>
                </div>
            </div>

            

        </div>

    </div> 

   
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
                    aria-expanded="true" aria-controls="collapseOne">
                    <i class="icofont-question-circle"></i><span>Help Center</span><i class="fa-solid fa-angle-down"></i>
                </button>
            </h2>

            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
                data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <p>Need help? Search our help center for answers or start a conversation:</p>
                    <form action="#" class="help_form">
                        <div class="enter-name">
                            <label for="fname">Your Name:</label><br>
                            <input type="text" class="fname" name="fname" placeholder="Full Name..." required="">
                        </div>

                        <div class="enter-email">
                            <label for="email">Enter Your Email:</label>
                            <input type="email" class="email" name="email" placeholder="Enter Email..." required>
                        </div>

                        <div>
                            <label for="w3review">Ask Help For You:</label>

                            <textarea class="content-textarea"
                                placeholder="If you need help, write about it...."></textarea>
                        </div>
                        <input type="submit" name="submit_help" class="submit_help" style="display: none;">
                    </form>

                    <div style="display: none;" class="successfully-content">
                        <div class="successfully-text">
                            <a href="#"><i class="icofont-ui-check"></i></a>
                            <p>Your help request sent successfully..!!</p>
                        </div>
                    </div>

                     <a class="forward-msg" href="javascript:void(0);" onclick="call_help_fn()"><i class="fas fa-paper-plane"></i> Send</a>
                </div>
            </div>
        </div>
    </div>
    <style>
        #accordionExample {
            position: fixed;
            max-width: 330px;
            width: 100%;
            bottom: 0;
            right: 0;
            z-index: 99;
        }
            .accordion-button {
                padding: 8px 10px;
            }

            button.accordion-button.collapsed {
                position: fixed;
                bottom: 0;
                max-width: 400px;
                width: 100%;
                background-color: #cea254;
            }

            button.accordion-button.collapsed:focus {
                box-shadow: none;
            }

            .accordion-header i.icofont-question-circle {
                color: #fff;
                margin-right: 10px;
                font-size: 24px;
            }

            .accordion-header span {
                color: #fff;
                font-size: 20px;
            }

            .accordion-button:not(.collapsed) {
                color: #0c63e4;
                background-color: #cea254;
                box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
            }

            input.fname {
                width: 100%;
                padding: 8px 10px;
                border-radius: 5px;
                border: 1px solid #1212;
            }

            .accordion-body {
                padding: 15px 20px;
            }

            .accordion-body label {
                font-size: 16px;
                padding: 10px 0 0;
            }

            input.email {
                padding: 8px 10px;
                width: 100%;
                border: 1px solid #1212;
                border-radius: 5px;
            }

            .enter-email {
                margin: 10px 0;
            }

            textarea.content-textarea {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid #1212;
                border-radius: 5px;
            }

            .accordion-button::after {
                flex-shrink: 0;
                width: 1.25rem;
                height: 1.25rem;
                margin-left: auto;
                content: "";
                background-image: none !important;
            }

            button.accordion-button.collapsed {
                position: relative;
            }

            .accordion-header i.fa-solid.fa-angle-down {
                position: absolute;
                right: 20px;
                color: #fff;
            }

            button.accordion-button.collapsed i.fa-solid.fa-angle-down {
                transform: rotateX(360deg);
            }

            button.accordion-button i.fa-solid.fa-angle-down {
                transform: rotateX(182deg);
            }

            .accordion-body p {
                font-size: 18px;
                margin-bottom: 5px;
            }

            a.forward-msg {
                padding: 5px 40px;
                margin-top: 10px;
                display: inline-block;
                background-color: #cea254;
                color: #fff;
                font-size: 18px;
                border: 1px solid #cea254;
                border-radius: 4px;
                transition: all 0.4s ease-in-out;
            }

            a.forward-msg:hover {
                background-color: #fff;
                color: #cea254;
            }
            .accordion-body .successfully-content p {
                display: block;
                font-size: 23px;
                line-height: 30px;
                text-align: center;
                margin-top: 10px;
                color: #fff;
            }
            .successfully-content {
                width: 288px;
                height: 274px;
                padding: 10px 5px;
                background: #cea254;
                margin-bottom: 5px;
            }
            .successfully-text a i {
                font-size: 20px;
                justify-content: center;
                display: flex;
                align-items: center;
                color: #fff;
                background: #163339;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                margin: 0 auto;
            }
            .successfully-text {
                display: block;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                margin: 0 auto;
                text-align: center;
                left: 0;
                right: 0;
            }
    </style>

  
    <!-- Jquery Core Js -->
    <script src="<?= $site_url; ?>dist/assets/bundles/libscripts.bundle.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> -->



    <!-- Plugin Js-->
    <script src="<?= $site_url; ?>dist/assets/bundles/dataTables.bundle.js"></script>
    <script src="<?= $site_url; ?>assets/bundles/apexcharts.bundle.js"></script>
   <!--  <script src="<?= $site_url; ?>assets/plugin/light-gallery/js/lightgallery.js"></script> -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.0/lightgallery.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

   <?php 
    if(isset($_POST['help_name']) &&  !empty($_POST['help_name'])){
        $get_admin_user = mysqli_fetch_assoc(mysqli_query($conn,"select * from db_users WHERE type='admin'"));

        mysqli_query($conn, "INSERT INTO db_help_center(name,email,description,date_time) VALUES('".$_POST['help_name']."', '".$_POST['help_email']."', '".$_POST['help_text']."','".date("Y-m-d H:i:s")."')");
        if(!empty($get_admin_user)){
            $uname = $_POST['help_name'];
            $title = "Help Request is generated by ".$uname;

            mysqli_query($conn,"INSERT INTO db_user_activity(title,created_by,to_user_id,date_time) VALUES('$title', '".$_SESSION['loggedin_user']."','".$get_admin_user['id']."','".date("Y-m-d H:i:s")."')");
            
            $headers  = 'MIME-Version: 1.0' . "\r\n";
            $headers .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
            $msg = "<b>Name :</b> $uname<br> <b>Email :</b> ".$_POST['help_email']."<br> <b>Description :</b> ".$_POST['help_text'];
            mail($get_admin_user['email'],'Help Request Generated',$msg,$headers);
            send_zoho_mail($get_admin_user['email'],'Help Request Generated',$msg);

        }
    }
   ?>

    <!-- Jquery Page Js -->
    <script src="<?= $site_url; ?>js/template.js?"></script>
    <script>
        function call_help_fn(){
             let valid_help = true;
          $('.help_form [required]').each(function() {
            if ($(this).is(':invalid') || !$(this).val()) valid_help = false;
          })
          if (!valid_help){
             $('.submit_help').click();
          } else {
            var help_name   = $(".help_form .fname").val();
            var help_email  = $(".help_form .email").val();
            var help_text    = $(".help_form textarea").val();
                $.ajax({
                    type:"post",
                    url:window.location.pathname,
                    data:{help_name:help_name,help_email:help_email, help_text:help_text},
                    success:function(res){
                        $(".help_form").hide();
                        $(".successfully-content").show();
                    }
                });
          }
        }
        // project data table
        $(document).ready(function() {
            $('#myProjectTable')
            .addClass( 'nowrap' )
            .dataTable( {
                responsive: true,
                columnDefs: [
                    { targets: [-1, -3], className: 'dt-body-right' }
                ]
            });
          if(jQuery("a.ms-link.active").length){
                jQuery("a.ms-link.active").closest(".sub-menu").addClass("show");
            }
        });
    </script>

    
</body>

</html>
