<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Contact || WorkSuite  || 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/WorkSuite -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">
    
    <!-- Modern Contact Form CSS -->
    <style>
        /* Modern Contact Form Styles */
        .sec-title .sub-title {
            color: #007bff;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            display: block;
            margin-bottom: 15px;
        }
        
        .sec-title .title-text {
            color: #6c757d;
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.6;
        }
        
        .contact-form-wrapper {
            max-width: 900px;
            margin: 0 auto;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .modern-contact-form {
            padding: 0;
        }
        
        /* Progress Bar */
        .form-progress-bar {
            display: flex;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 30px 20px;
            position: relative;
        }
        
        .progress-step {
            flex: 1;
            text-align: center;
            position: relative;
            color: rgba(255,255,255,0.6);
            transition: all 0.3s ease;
        }
        
        .progress-step.active {
            color: #fff;
        }
        
        .progress-step.completed {
            color: rgba(255,255,255,0.9);
        }
        
        .step-number {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            color: inherit;
            font-weight: 600;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .progress-step.active .step-number {
            background: #fff;
            color: #667eea;
            transform: scale(1.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .progress-step.completed .step-number {
            background: #28a745;
            color: #fff;
        }
        
        .step-title {
            display: block;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* Form Steps */
        .form-step {
            display: none;
            padding: 40px;
            animation: fadeInUp 0.5s ease;
        }
        
        .form-step.active {
            display: block;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .step-header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .step-header h3 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .step-header h3 i {
            color: #667eea;
            margin-right: 10px;
        }
        
        .step-header p {
            color: #6c757d;
            font-size: 16px;
        }
        
        /* Form Groups */
        .form-group {
            margin-bottom: 30px;
        }
        
        .form-label {
            display: flex;
            align-items: center;
            color: #495057;
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        .form-label i {
            color: #667eea;
            margin-right: 8px;
            width: 16px;
        }
        
        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 15px;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        
        .form-control:focus {
            border-color: #667eea;
            background: #fff;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            transform: translateY(-2px);
        }
        
        .form-helper {
            font-size: 12px;
            color: #6c757d;
            margin-top: 5px;
            font-style: italic;
        }
        
        /* Modern Select */
        .modern-select {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 20px;
            padding-right: 40px;
        }
        
        /* Modules Grid */
        .modules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        
        .module-card {
            position: relative;
        }
        
        .module-checkbox {
            display: none;
        }
        
        .module-label {
            display: flex;
            align-items: center;
            padding: 20px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: #f8f9fa;
        }
        
        .module-label:hover {
            border-color: #667eea;
            background: #fff;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
        }
        
        .module-checkbox:checked + .module-label {
            border-color: #667eea;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
        }
        
        .module-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #fff;
            font-size: 20px;
        }
        
        .module-info h4 {
            margin: 0 0 5px 0;
            color: #333;
            font-size: 16px;
            font-weight: 600;
        }
        
        .module-info p {
            margin: 0;
            color: #6c757d;
            font-size: 13px;
            line-height: 1.4;
        }
        
        /* Step Navigation */
        .step-navigation {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid #e9ecef;
        }
        
        .btn-prev-step, .btn-next-step, .btn-submit {
            padding: 12px 30px;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn-prev-step {
            background: #6c757d;
            color: #fff;
        }
        
        .btn-prev-step:hover {
            background: #5a6268;
            transform: translateX(-5px);
        }
        
        .btn-next-step {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        
        .btn-next-step:hover {
            transform: translateX(5px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }
        
        .btn-submit {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: #fff;
        }
        
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
        }
        
        /* Alert Styles */
        .alert {
            border-radius: 10px;
            border: none;
            padding: 15px 20px;
            margin-bottom: 20px;
        }
        
        .alert-info {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
            color: #17a2b8;
            border-left: 4px solid #17a2b8;
        }
        
        .alert-success {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%);
            color: #28a745;
            border-left: 4px solid #28a745;
        }
        
        .alert-danger {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(255, 154, 0, 0.1) 100%);
            color: #dc3545;
            border-left: 4px solid #dc3545;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .contact-form-wrapper {
                margin: 0 15px;
                border-radius: 15px;
            }
            
            .form-step {
                padding: 30px 20px;
            }
            
            .form-progress-bar {
                padding: 20px 10px;
            }
            
            .step-title {
                font-size: 12px;
            }
            
            .modules-grid {
                grid-template-columns: 1fr;
            }
            
            .step-navigation {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn-prev-step, .btn-next-step, .btn-submit {
                width: 100%;
            }
        }
        
        /* Loading Animation */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</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>Contact</span>
                </li>
            </ul><!-- /.breadcrumb -->
            <h1>Contact</h1>
        </div><!-- /.container -->
    </div><!-- /.inner-banner -->

    <section class="contact-page-infos sec-pad-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <div class="single-contact-page-info">
                        <div class="icon-box">
                            <i class="fa fa-map"></i>
                        </div><!-- /.icon-box -->
                        <p>Address Klagon Sakumono Ashiaman Road</p>
                    </div><!-- /.single-contact-page-info -->
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <div class="single-contact-page-info">
                        <div class="icon-box">
                            <i class="fa fa-phone"></i>
                        </div><!-- /.icon-box -->
                        <p>+233 558523404</p>
                        <br>
                        
                    </div><!-- /.single-contact-page-info -->
                </div><!-- /.col-lg-4 -->
                <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                    <div class="single-contact-page-info">
                        <div class="icon-box">
                            <i class="fa fa-envelope"></i>
                        </div><!-- /.icon-box -->
                        <p>Info@worksuitegh.com </p>
                        
                        <br>
                    </div><!-- /.single-contact-page-info -->
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.contact-page-infos -->


    <section class="contact-page-content sec-pad">
        <div class="container">
            <div class="sec-title text-center">
                <span class="sub-title">Get in Touch</span>
                <h2>Let's discuss how WorkSuite  can transform your HR management</h2>
                <p class="title-text">Fill out the form below and our experts will get back to you within 24 hours</p>
            </div><!-- /.sec-title -->
            
            <div class="contact-form-wrapper">
                <form action="contact_handler.php" method="POST" class="modern-contact-form" id="contactForm">
                    <div class="form-progress-bar">
                        <div class="progress-step active" data-step="1">
                            <span class="step-number">1</span>
                            <span class="step-title">Basic Info</span>
                        </div>
                        <div class="progress-step" data-step="2">
                            <span class="step-number">2</span>
                            <span class="step-title">Company Details</span>
                        </div>
                        <div class="progress-step" data-step="3">
                            <span class="step-number">3</span>
                            <span class="step-title">Requirements</span>
                        </div>
                    </div>

                    <!-- Step 1: Basic Information -->
                    <div class="form-step active" data-step="1">
                        <div class="step-header">
                            <h3><i class="fas fa-user"></i> Basic Information</h3>
                            <p>Tell us who you are</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-building"></i>
                                        Company Name
                                    </label>
                                    <input type="text" name="company" class="form-control" placeholder="Enter your company name" required>
                                    <div class="form-helper">Your organization's official name</div>
                                </div>
                            </div>
                            <div class="col-md-6">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-user-tie"></i>
                                        Contact Person Name
                                    </label>
                                    <input type="text" name="name" class="form-control" placeholder="Your full name" required>
                                    <div class="form-helper">Primary contact person</div>
                                </div>
                            </div>
                            <div class="col-md-6">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-envelope"></i>
                                        Email Address
                                    </label>
                                    <input type="email" name="email" class="form-control" placeholder="your.email@company.com" required>
                                    <div class="form-helper">We'll use this for correspondence</div>
                                </div>
                            </div>
                            <div class="col-md-6">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-phone"></i>
                                        Phone Number
                                    </label>
                                    <input type="tel" name="phone" class="form-control" placeholder="+1 (555) 123-4567">
                                    <div class="form-helper">Optional but recommended</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-navigation">
                            <button type="button" class="btn-next-step" onclick="nextStep(2)">
                                Next Step <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Step 2: Company Details -->
                    <div class="form-step" data-step="2">
                        <div class="step-header">
                            <h3><i class="fas fa-chart-line"></i> Company Details</h3>
                            <p>Help us understand your organization</p>
                        </div>
                        <div class="row">
                            <div class="col-md-6">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-users"></i>
                                        Number of Employees
                                    </label>
                                    <select class="form-control modern-select" name="employees" required>
                                        <option value="">Select company size</option>
                                        <option value="1-10">🏢 1-10 Employees (Startup)</option>
                                        <option value="11-50">🏢 11-50 Employees (Small Business)</option>
                                        <option value="51-100">🏢 51-100 Employees (Growing Business)</option>
                                        <option value="101-500">🏢 101-500 Employees (Medium Business)</option>
                                        <option value="501-1000">🏢 501-1000 Employees (Large Business)</option>
                                        <option value="1000+">🏢 1000+ Employees (Enterprise)</option>
                                    </select>
                                    <div class="form-helper">This helps us recommend the right solution</div>
                                </div>
                            </div>
                            <div class="col-md-6">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-rocket"></i>
                                        Selected Plan
                                    </label>
                                    <select class="form-control modern-select" name="selected_plan" required>
                                        <option value="">Choose your preferred plan</option>
                                        <option value="starter">🌱 Starter (Free/Open Source)</option>
                                        <option value="advanced">🚀 Advanced (Enterprise)</option>
                                    </select>
                                    <div class="form-helper">Select the plan that interests you</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-navigation">
                            <button type="button" class="btn-prev-step" onclick="prevStep(1)">
                                <i class="fas fa-arrow-left"></i> Previous
                            </button>
                            <button type="button" class="btn-next-step" onclick="nextStep(3)">
                                Next Step <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Step 3: Requirements -->
                    <div class="form-step" data-step="3">
                        <div class="step-header">
                            <h3><i class="fas fa-cogs"></i> Requirements</h3>
                            <p>Tell us about your HR needs</p>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-puzzle-piece"></i>
                                        Select Modules (Optional)
                                    </label>
                                    <div class="modules-grid">
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="recruitment" id="module_recruitment" class="module-checkbox">
                                            <label for="module_recruitment" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-user-plus"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Recruitment</h4>
                                                    <p>Streamline hiring process</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="onboarding" id="module_onboarding" class="module-checkbox">
                                            <label for="module_onboarding" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-graduation-cap"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Onboarding</h4>
                                                    <p>Welcome new hires smoothly</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="performance" id="module_performance" class="module-checkbox">
                                            <label for="module_performance" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-chart-bar"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Performance</h4>
                                                    <p>Track and manage performance</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="time_attendance" id="module_time_attendance" class="module-checkbox">
                                            <label for="module_time_attendance" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-clock"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Time & Attendance</h4>
                                                    <p>Monitor work hours</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="leave" id="module_leave" class="module-checkbox">
                                            <label for="module_leave" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-calendar-alt"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Leave Management</h4>
                                                    <p>Manage time off requests</p>
                                                </div>
                                            </label>
                                        </div>
                                        <div class="module-card">
                                            <input type="checkbox" name="modules[]" value="payroll" id="module_payroll" class="module-checkbox">
                                            <label for="module_payroll" class="module-label">
                                                <div class="module-icon">
                                                    <i class="fas fa-dollar-sign"></i>
                                                </div>
                                                <div class="module-info">
                                                    <h4>Payroll</h4>
                                                    <p>Process salaries efficiently</p>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12">                            
                                <div class="form-group">
                                    <label class="form-label">
                                        <i class="fas fa-comment-dots"></i>
                                        Additional Comments or Questions
                                    </label>
                                    <textarea name="message" class="form-control" rows="4" placeholder="Tell us more about your specific requirements, current challenges, or any questions you have about WorkSuite ..."></textarea>
                                    <div class="form-helper">Help us understand your specific needs better</div>
                                </div>
                            </div>
                        </div>
                        <div class="step-navigation">
                            <button type="button" class="btn-prev-step" onclick="prevStep(2)">
                                <i class="fas fa-arrow-left"></i> Previous
                            </button>
                            <button type="submit" class="btn-submit">
                                <i class="fas fa-paper-plane"></i> Submit Request
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="result"></div><!-- /.result -->
        </div><!-- /.container -->
    </section><!-- /.contact-page-content -->

    <div 
      class="google-map" 
      id="contact-google-map" 
      data-map-lat="40.712784" 
      data-map-lng="-74.005941"
      data-icon-path="images/marker-1-1.png"
      data-map-title="Brooklyn, New York, United Kingdom"
      data-map-zoom="13"
      data-markers='{
                "marker-1": [40.712784, -74.005941, "<h4>Main Office</h4><p>Babylon Branch , Lindenhurst, UK</p>"]
            }'>

     </div>
<?php include 'footer.html'; ?>


</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> WorkSuite  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>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBevTAR-V2fDy9gQsQn1xNHBPH2D36kck0"></script>
<!-- google map helper -->  
<script src="js/gmaps.js"></script>
<script src="js/map-helper.js"></script>

<!-- Contact Form Handler -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contactForm');
    const resultDiv = document.querySelector('.result');
    
    // Initialize form
    initializeForm();
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show loading message
            if (resultDiv) {
                resultDiv.innerHTML = '<div class="alert alert-info"><div class="loading"></div> Sending your request...</div>';
            }
            
            // Get form data
            const formData = new FormData(contactForm);
            
            // Submit via AJAX
            fetch('contact_handler.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Show success message
                    if (resultDiv) {
                        resultDiv.innerHTML = '<div class="alert alert-success"><i class="fas fa-check-circle"></i> ' + data.message + '</div>';
                    }
                    
                    // Save to admin panel localStorage (if admin panel is open)
                    saveToAdminPanel(data.data);
                    
                    // Reset form and go to first step
                    contactForm.reset();
                    goToStep(1);
                    
                    // Clear message after 5 seconds
                    setTimeout(() => {
                        if (resultDiv) {
                            resultDiv.innerHTML = '';
                        }
                    }, 5000);
                } else {
                    // Show error message
                    if (resultDiv) {
                        resultDiv.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> ' + data.message + '</div>';
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                if (resultDiv) {
                    resultDiv.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle"></i> An error occurred. Please try again.</div>';
                }
            });
        });
    }
    
    // Initialize form functionality
    function initializeForm() {
        // Add input animations
        const inputs = document.querySelectorAll('.form-control');
        inputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });
            
            input.addEventListener('blur', function() {
                if (!this.value) {
                    this.parentElement.classList.remove('focused');
                }
            });
            
            // Check if input has value on load
            if (input.value) {
                input.parentElement.classList.add('focused');
            }
        });
        
        // Add module card hover effects
        const moduleCards = document.querySelectorAll('.module-card');
        moduleCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px) scale(1.02)';
            });
            
            card.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });
    }
    
    // Function to save data to admin panel localStorage
    function saveToAdminPanel(contactData) {
        try {
            // Check if admin panel data manager is available
            if (window.opener && window.opener.dataManager) {
                // If opened from admin panel, use parent's data manager
                const quoteData = {
                    company: contactData.company || 'General Inquiry',
                    name: contactData.name,
                    job_title: contactData.job_title || 'Contact Form',
                    email: contactData.email,
                    phone: contactData.phone,
                    industry: 'general',
                    employees: contactData.employees || 'unknown',
                    country: 'Not specified',
                    selected_plan: contactData.selected_plan || 'general_inquiry',
                    modules: contactData.modules || [],
                    message: contactData.message,
                    status: 'pending'
                };
                
                window.opener.dataManager.addQuote(quoteData);
                console.log('Contact data saved to admin panel');
            } else if (window.dataManager) {
                // If data manager is available in current window
                const quoteData = {
                    company: contactData.company || 'General Inquiry',
                    name: contactData.name,
                    job_title: contactData.job_title || 'Contact Form',
                    email: contactData.email,
                    phone: contactData.phone,
                    industry: 'general',
                    employees: contactData.employees || 'unknown',
                    country: 'Not specified',
                    selected_plan: contactData.selected_plan || 'general_inquiry',
                    modules: contactData.modules || [],
                    message: contactData.message,
                    status: 'pending'
                };
                
                window.dataManager.addQuote(quoteData);
                console.log('Contact data saved to admin panel');
            }
        } catch (error) {
            console.log('Could not save to admin panel localStorage:', error);
        }
    }
});

// Step navigation functions
function goToStep(stepNumber) {
    // Hide all steps
    const allSteps = document.querySelectorAll('.form-step');
    allSteps.forEach(step => {
        step.classList.remove('active');
    });
    
    // Remove active class from all progress steps
    const allProgressSteps = document.querySelectorAll('.progress-step');
    allProgressSteps.forEach(step => {
        step.classList.remove('active');
        step.classList.remove('completed');
    });
    
    // Show target step
    const targetStep = document.querySelector(`.form-step[data-step="${stepNumber}"]`);
    if (targetStep) {
        targetStep.classList.add('active');
    }
    
    // Update progress bar
    for (let i = 1; i <= stepNumber; i++) {
        const progressStep = document.querySelector(`.progress-step[data-step="${i}"]`);
        if (progressStep) {
            if (i < stepNumber) {
                progressStep.classList.add('completed');
            } else {
                progressStep.classList.add('active');
            }
        }
    }
    
    // Scroll to top of form
    document.querySelector('.contact-form-wrapper').scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
    });
}

function nextStep(stepNumber) {
    // Validate current step before proceeding
    const currentStep = stepNumber - 1;
    const currentStepElement = document.querySelector(`.form-step[data-step="${currentStep}"]`);
    const requiredFields = currentStepElement.querySelectorAll('[required]');
    
    let isValid = true;
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.classList.add('is-invalid');
            isValid = false;
            
            // Remove error class on input
            field.addEventListener('input', function() {
                this.classList.remove('is-invalid');
            });
        } else {
            field.classList.remove('is-invalid');
        }
    });
    
    if (isValid) {
        goToStep(stepNumber);
    } else {
        // Show validation error
        showNotification('Please fill in all required fields before proceeding.', 'warning');
    }
}

function prevStep(stepNumber) {
    goToStep(stepNumber);
}

// Notification function
function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
    notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: 400px;';
    notification.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    document.body.appendChild(notification);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}

// Add CSS for validation states
const validationStyles = `
    <style>
    .form-control.is-invalid {
        border-color: #dc3545;
        background-color: #fff;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    
    .form-control.is-invalid:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }
    
    .module-checkbox:invalid + .module-label {
        border-color: #dc3545;
    }
    </style>
`;

document.head.insertAdjacentHTML('beforeend', validationStyles);
</script>

</body>

</html>