<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>Request meeting || PayOnline || Online Payroll and HR Software HTML Template</title>
    <!-- mobile responsive meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" sizes="57x57" href="images/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="images/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="images/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="images/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="images/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="images/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="images/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="images/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
    <link rel="manifest" href="images/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="images/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">


    <!-- depdency stylesheet -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i%7CCovered+By+Your+Grace" rel="stylesheet">


    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/hover-min.css">
    <link rel="stylesheet" type="text/css" href="plugins/payonline-icon/style.css">
    <link rel="stylesheet" type="text/css" href="plugins/bands-icon/style.css">
    <link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="css/owl.theme.default.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.min.css">
    
    

    <!-- main template stylesheet -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>

<div class="page-wrapper">

    <div class="preloader"></div><!-- /.preloader -->
    
    <?php include 'header.html'; ?>

    <div class="inner-banner text-center">
        <div class="container">
            <ul class="breadcrumb">
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <span>Request a meeting</span>
                </li>
            </ul><!-- /.breadcrumb -->
            <h1> Reuqest a Meeting</h1>
        </div><!-- /.container -->
    </div><!-- /.inner-banner -->

    <section class="meeting-form-wrapper sec-pad">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 d-flex">
                    <div class="meeting-form-content my-auto">
                        <div class="sec-title">
                            <span>Request a meeting</span>
                            <h2>Let’s meet with our expert <br> team members</h2>
                        </div><!-- /.sec-title -->
                        <div class="single-form-step">
                            <div class="count-box">
                                <div class="inner-box">
                                    01
                                </div><!-- /.inner-box -->
                            </div><!-- /.count-box -->
                            <div class="text-box">
                                <h3>Fill out the Form</h3>
                                <p>Provide us with a bit of information so that we can follow up with you. If you’re a current client, just enter your client code so we can zero in your details.</p>
                            </div><!-- /.text-box -->
                        </div><!-- /.single-form-step -->
                        <div class="single-form-step">
                            <div class="count-box">
                                <div class="inner-box">
                                    02
                                </div><!-- /.inner-box -->
                            </div><!-- /.count-box -->
                            <div class="text-box">
                                <h3>What's Next?</h3>
                                <p>One of our best team members will reach out to schedule a meeting at a time that is very convenient for you.</p>
                            </div><!-- /.text-box -->
                        </div><!-- /.single-form-step -->
                        <div class="single-form-step">
                            <div class="count-box">
                                <div class="inner-box">
                                    03
                                </div><!-- /.inner-box -->
                            </div><!-- /.count-box -->
                            <div class="text-box">
                                <h3>What all is Covered?</h3>
                                <p>We’ll find out more about your challenges and show you how Payonline’s HR and payroll software can help you overcome them.</p>
                            </div><!-- /.text-box -->
                        </div><!-- /.single-form-step -->
                    </div><!-- /.meeting-form-content -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6">
                    <form id="meeting-form" class="meeting-form contact-form-vaidated">
                        <div class="row">
                            <div class="col-md-12">
                                <input type="text" name="company_name" placeholder="Company name">
                            </div><!-- /.col-md-12 -->
                            <div class="col-md-12">                            
                                <input type="text" name="client_code" placeholder="Client code">
                            </div><!-- /.col-md-12 -->
                            <div class="col-md-6">                            
                                <input type="text" name="fname" placeholder="First name">
                            </div><!-- /.col-md-12 -->
                            <div class="col-md-6">                            
                                <input type="text" name="lname" placeholder="Last name">
                            </div><!-- /.col-md-6 -->
                            <div class="col-md-12">                            
                                <input type="text" name="role" placeholder="Your role with company">
                            </div><!-- /.col-md-6 -->
                            <div class="col-md-12">                            
                                <input type="text" name="email" placeholder="Email address">
                            </div><!-- /.col-md-12 -->
                            <div class="col-md-6">                            
                                <input type="text" name="zip" placeholder="Zip code">
                            </div><!-- /.col-md-6 -->
                            <div class="col-md-6">                            
                                <input type="text" name="phone" placeholder="Phone Number">
                            </div><!-- /.col-md-6 -->
                            <div class="col-md-12">                            
                                <textarea name="message" placeholder="Comment or questions"></textarea>
                            </div><!-- /.col-md-12 -->
                            <div class="col-md-12">
                                <div class="btn-box">
                                    <button type="submit" class="thm-btn">Request a free demo</button>
                                    <span class="btn-tag-line">Start the conversation<i class="payonline-icon-share"></i></span>
                                </div><!-- /.btn-box -->
                            </div><!-- /.col-md-12 -->
                        </div><!-- /.row -->
                    </form><!-- /.meeting-form -->
                    <div class="result"></div><!-- /.result -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.meeting-form-wrapper -->

    <section class="video-box-three sec-pad request-metting-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="video-box-content">
                        <div class="sec-title">
                            <span>payroll & HR services</span>
                            <h2>One platform for all your HR <br> management needs</h2>
                        </div><!-- /.sec-title -->
                        <p>Manage everything related to your people from onboarding to retirement from one cloud based HR solution. Give employees access to their payroll, benefits, and retirement plans from their mobile device.</p>
                        <div class="btn-box">
                            <a href="#" class="thm-btn">Learn More</a><!--
                            --><a href="https://www.youtube.com/watch?v=mUhcFs6v-Xw" class="video-popup"><i class="fa fa-play hvr-pulse"></i>Watch Video</a>
                        </div><!-- /.btn-box -->
                    </div><!-- /.video-box-content -->
                </div><!-- /.col-lg-6 -->
                <div class="col-lg-6 d-flex">
                    <div class="mocup-box my-auto">
                        <img src="images/mockup-1-3.png" alt="Awesome Image"/>
                    </div><!-- /.mocup-box -->
                </div><!-- /.col-lg-6 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.video-box-three -->



    <section class="testimonials-style-four sec-pad">
        <div class="container">
            <!--Slider-->
            <ul class="slider">
                <li class="slide-item">
                    <div class="single-testimonial-four">
                        <p>"Every time I turn around, there's something else that this system can do that I can learn about and just makes my life easier, makes it more convenient for my staff."</p>
                        <h3>- Julie Judge</h3>
                        <span>owner</span>
                    </div><!-- /.single-testimonial-four -->
                </li>
                <li class="slide-item">
                    <div class="single-testimonial-four">
                        <p>"Every time I turn around, there's something else that this system can do that I can learn about and just makes my life easier, makes it more convenient for my staff."</p>
                        <h3>- Julie Judge</h3>
                        <span>owner</span>
                    </div><!-- /.single-testimonial-four -->
                </li>
                <li class="slide-item">
                    <div class="single-testimonial-four">
                        <p>"Every time I turn around, there's something else that this system can do that I can learn about and just makes my life easier, makes it more convenient for my staff."</p>
                        <h3>- Julie Judge</h3>
                        <span>owner</span>
                    </div><!-- /.single-testimonial-four -->
                </li>
            </ul>
            <!--Custom-Pager-->
            <div class="testi-pager text-center" id="testi-pager-2">                
                <a href="#" class="pager-item active" data-slide-index="0">
                    <div class="testi-thumb"><img src="images/testi4-1.jpg" alt="Awesome Image"/></div>
                </a><!--
                --><a href="#" class="pager-item" data-slide-index="1">
                    <div class="testi-thumb"><img src="images/testi4-2.jpg" alt="Awesome Image"/></div>
                </a><!--
                --><a href="#" class="pager-item" data-slide-index="2">
                    <div class="testi-thumb"><img src="images/testi4-3.jpg" alt="Awesome Image"/></div>
                </a> 
            </div>
        </div><!-- /.container -->
    </section><!-- /.testimonials-style-four -->

    <footer class="site-footer">
        <div class="upper-footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 d-flex">
                        <div class="footer-widget my-auto">
                            <a href="index-2.html"><img src="images/logo-1-1.png" alt="Awesome Image"/></a>
                        </div><!-- /.footer-widget -->
                    </div><!-- /.col-lg-2 -->
                    <div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 d-flex">
                        <div class="footer-widget links-widget my-auto links-widget-one">
                            <div class="title-box">
                                <h3>Services</h3>
                            </div><!-- /.title-box -->
                            <ul class="link-lists">
                                <li><a href="#">Talent Acquisition</a></li>
                                <li><a href="#">Time and Labor Management</a></li>
                                <li><a href="#">Payroll</a></li>
                                <li><a href="#">Talent Management</a></li>
                                <li><a href="#">HR Management</a></li>
                            </ul>
                        </div><!-- /.footer-widget -->
                    </div><!-- /.col-lg-3 -->
                    <div class="col-lg-2 col-md-6 col-sm-12 col-xs-12 d-flex">
                        <div class="footer-widget links-widget my-auto">
                            <div class="title-box">
                                <h3>Explore</h3>
                            </div><!-- /.title-box -->
                            <ul class="link-lists">
                                <li><a href="#">Careers</a></li>
                                <li><a href="#">Locations</a></li>
                                <li><a href="#">Investors</a></li>
                                <li><a href="#">Press Room</a></li>
                                <li><a href="#">Contact Us</a></li>
                            </ul>
                        </div><!-- /.footer-widget -->
                    </div><!-- /.col-lg-2 -->
                    <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12 d-flex">
                        <div class="footer-widget my-auto">
                            <div class="btn-box">
                                <a href="#" class="thm-btn">Request a meeting</a>
                                <span class="btn-tag-line">Try a better way <i class="payonline-icon-share"></i></span>
                            </div><!-- /.btn-box -->
                            <div class="social">
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-linkedin"></i></a>
                                <a href="#"><i class="fa fa-youtube-play"></i></a>
                            </div><!-- /.social -->
                        </div><!-- /.footer-widget -->
                    </div><!-- /.col-lg-5 -->
                </div><!-- /.row -->
            </div><!-- /.container -->
        </div><!-- /.upper-footer -->
        <div class="bottom-footer">
            <div class="container">
                <p>&copy; Copyright 2025 by <a href="http://themeforest.net/user/template_path" target="_blank">Template Path</a></p>
            </div><!-- /.container -->
        </div><!-- /.bottom-footer -->
    </footer><!-- /.site-footer -->


</div><!-- /.page-wrapper -->

<section class="hidden-sidebar side-navigation">
    <span class="close-button side-navigation-close-btn fa fa-close"></span><!-- /.close-button -->
    <div class="sidebar-content">
        <img src="images/hidden-bar-image-1-1.jpg" alt="Awesome Image"/>
        <p>Prefer speaking with a human to filling out a form? Call our corporate office and we will connect you with a team member <br> who can help.</p>
        <p class="contact-info"><i class="fa fa-phone"></i>2800 666 999</p><!-- /.contact-info -->
        <a href="#" class="download-btn one"><i class="fa fa-file-pdf-o"></i> Looking for your W-2?</a>
        <a href="#" class="download-btn two"><i class="fa fa-building-o"></i> Payonline Sales Offices</a>
    </div><!-- /.sidebar-content -->
</section><!-- /.hidden-sidebar -->

<div class="search_area zoom-anim-dialog mfp-hide" id="test-search">
    <div class="search_box_inner">
        <div class="input-box">
            <input type="text" class="form-control" placeholder="Search for...">
            <span class="input-box-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span>
        </div>
    </div>
</div>


<a href="#" data-target="html" class="scroll-to-target scroll-to-top"><i class="fa fa-long-arrow-up"></i></a>
<!-- /.scroll-to-top -->


<script src="js/jquery.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>

<!-- Meeting Form JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const meetingForm = document.getElementById('meeting-form');
    const resultDiv = document.querySelector('.result');

    meetingForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Show loading state
        const submitBtn = meetingForm.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Submitting...';
        submitBtn.disabled = true;

        // Get form data
        const formData = new FormData(meetingForm);
        
        // Submit to PHP handler
        fetch('meeting_request_handler.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Save to admin panel localStorage
                saveToAdminPanel(data.data);
                
                // Show success message
                showNotification('success', data.message);
                
                // Reset form
                meetingForm.reset();
                
                // Update admin panel notification count
                updateAdminNotifications();
            } else {
                // Show error message
                showNotification('error', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showNotification('error', 'An error occurred. Please try again.');
        })
        .finally(() => {
            // Restore button state
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });

    function saveToAdminPanel(meetingData) {
        // Get existing data from localStorage
        let adminData = JSON.parse(localStorage.getItem('payonline_admin_data') || '{}');
        
        // Initialize meeting requests array if it doesn't exist
        if (!adminData.meeting_requests) {
            adminData.meeting_requests = [];
        }
        
        // Add new meeting request
        adminData.meeting_requests.unshift(meetingData);
        
        // Save back to localStorage
        localStorage.setItem('payonline_admin_data', JSON.stringify(adminData));
        
        console.log('Meeting request saved to admin panel:', meetingData);
    }

    function showNotification(type, message) {
        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle';
        
        const notification = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas ${icon}"></i> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        resultDiv.innerHTML = notification;
        
        // Auto-hide after 5 seconds
        setTimeout(() => {
            const alert = resultDiv.querySelector('.alert');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    }

    function updateAdminNotifications() {
        // This function can be used to trigger admin panel updates
        // In a real application, you might use WebSocket or Server-Sent Events
        console.log('Admin panel notification updated');
    }
});
</script>

</body>

<!-- Mirrored from ashik.templatepath.net/payonline-preview-files/request-metting.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 18 Jul 2023 11:15:14 GMT -->

<!-- Mirrored from z.commonsupport.com/html/payonline/request-metting.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 30 Jan 2026 09:04:08 GMT -->
</html>