<?php 
include('dist/db.php');

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

        mysqli_query($conn, "INSERT INTO db_contact_submission(name,email,description,date_time) VALUES('".$_POST['fname']." ".$_POST['lname']."', '".$_POST['email']."', '".$_POST['msg']."','".date("Y-m-d H:i:s")."')");
        echo "INSERT INTO db_contact_submission(name,email,description,date_time) VALUES('".$_POST['fname']." ".$_POST['lname']."', '".$_POST['email']."', '".$_POST['msg']."','".date("Y-m-d H:i:s")."')";
        if(!empty($get_admin_user)){
            $uname = $_POST['fname']." ".$_POST['lname'];
            $title = "Contacted from home page with this name ".$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['email']."<br> <b>Description :</b> ".$_POST['msg'];
           
            mail($get_admin_user['email'],'Help Request Generated',$msg,$headers);
            send_zoho_mail($get_admin_user['email'],'Contacted from home page.',$msg);

        }
        die();
    }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timesheet Home Page</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon-->

    <!-- Link Css  -->
    <link rel="stylesheet" href="<?= $site_url; ?>assets/css/style.css?<?= time(); ?>">
    <link rel="stylesheet" href="<?= $site_url; ?>assets/css/timetracker.style.min.css">

     <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font AWesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
    <style type="text/css">
        form.contact-form label.error {
            display: block;
            color: red;
            font-size: 14px;
        }
        .contact-input.error {
            margin-bottom: 0;
            line-height: normal;
        }
        .popup__content .close {
            cursor: pointer;
        }
    </style>

</head>

<!-- <style type="text/css">
    /* Business App Css Start */
    section.business-section {
    margin: 60px 0;
    background: #f6f7f8;
    padding: 50px 0 20px;
}
section.business-section .row {
    align-items: center;
}
.rich_img img {
    max-width: 700px;
    width: 100%;
}

.business-txt{
    text-align: center;
}

.business-txt h2 {
    color: #212529;
    font-size: 42px;
    font-weight: 800;
    line-height: 48px;
    max-width: 800px;
    margin: 0 auto 30px;
}
.business-txt p {
    font-size: 18px;
    color: #636b83;
    line-height: 30px;
}
.richtext h3 {
    color: #212529;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: unset;
    line-height: 32px;
    margin: 0 0 24px;
    text-align: left;
}
.richtext ul {
    color: #636b83;
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    margin: 0 0 32px;
    list-style-type: none;
    padding: 0 0 0 48px;
    position: relative;
}
.richtext li {
    margin: 0 0 16px;
    text-align: left;
}
.richtext li:before {
    color: #cea254;
    content: "•";
    display: block;
    left: 0px;
    position: absolute;
    font-size: 30px;
}
/* Business App Css End */

@media (max-width:767px){
    .business-txt h2 {
        font-size: 28px !important;
        line-height: 39px !important;
        margin: 0 auto 15px !important;
    }
    section.business-section {
        padding: 50px 17px 50px !important;
        margin-bottom: 48px !important;
    }
    section.business-section .col-6 {
        width: 100% !important;
        padding: 0px !important;
    }
    .richtext h3 {
        font-size: 23px;
        line-height: 32px;
        margin: 0 0 10px;
    }
    .richtext ul {
        font-size: 17px;
        line-height: 30px;
        margin: 0 0 15px;
        padding: 0 0 0 24px;
    }
    .richtext li {
        margin: 0 0 10px;
    }
    section.anything-wrapper {
        padding: 45px 0 0px !important;
    }
}

@media (max-width:991px) {
    .col-6.bussiness_col {
    order: 2;
    width: 100%;
    flex: 0 0 100%;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    }

    .col-6.bussiness_col_in {
    order: 1;
    flex: 0 0 100%;
    width: 100%;
    text-align: center;
    margin: 20px 0;
    }
    .richtext {
    max-width: 50%;
    }
    .richtext:nth-child(3) {
    max-width: 100%;
    width: 100%;
    }
}


</style> -->

<body>

    <!-- NavBar Start Here -->
    <header>
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="<?= $site_url; ?>assets/images/landing-img/favicon-1.png" alt="">Timesheethub</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-link" href="#features">FEATURES</a>
                        <a class="nav-link" href="#faq">FAQ</a>
                        <a class="log_in_button" href="<?= $site_url; ?>login.php">Log In</a>
                        <a class="sign_in_button" href="<?= $site_url; ?>register.php">Sign Up</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <!-- NavBar End -->


    <section class="hero-section">
        <div class="container">
            <div class="row">
                <div class="col-5">
                    <div class="first-header">
                        <h2>Empower your Team with Timesheethub</h2>
                        <p>Timesheethub streamlines your team work so you can focus on what matters</p>
                    </div>

                    <div class="btn_holder">
                        <a class="start_btn" href="/register.php">Get Started</a>
                        <!-- <a class="free_demo" href="#">Free Demo</a> -->
                    </div>
                </div>

                <div class="col-7">
                    <div class="home-heading_img">
                        <img src="<?= $site_url; ?>assets/images/landing-img/banner.svg" alt="">
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--Hero Section END-->

    <!--Time Management Section START Here-->
    <section class="time_management_section">
        <h2>Track Time With Timesheethub</h2>

        <div class="container">
            <div class="row">
                <div class="col-4">
                    <div class="box_content">
                        <i class="far fa-clock"></i>
                        <h3>Timesheethub</h3>
                        <p>Track time you spend on activities, see where your time goes, and improve your time
                            management skills.</p>
                        <!-- <a href="#">Learn More </a>
                        <img src="<?= $site_url; ?>assets/images/landing-img/right-aerrow.svg" alt=""> -->
                    </div>
                </div>

                <div class="col-4">
                    <div class="box_content">
                        <i class="fas fa-sack-dollar"></i>
                        <h3>Billing</h3>
                        <p>We need to bill our clients with flexible hourly rates.</p>
                        <!-- <a href="#">Learn More </a>
                        <img src="<?= $site_url; ?>assets/images/landing-img/right-aerrow.svg" alt=""> -->
                    </div>
                </div>

                <div class="col-4">
                    <div class="box_content">
                        <i class="fas fa-users"></i>
                        <h3>Managed team</h3>
                        <p>Team management involves teamwork, communication, objective setting and performance
                            appraisals.</p>
                        <!-- <a href="#">Learn More </a>
                        <img src="<?= $site_url; ?>assets/images/landing-img/right-aerrow.svg" alt=""> -->
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--Time Management Section END-->

    <!-- Client Work Section Start -->
    <section class="working-section">

        <div class="work-content">
            <h2>Some numbers we are proud of..</h2>
        </div>

        <div class="container">

            <div class="row">
                <div class="col-3">
                    <div class="client-work">
                        <i class="fa fa-briefcase" aria-hidden="true"></i>
                        <h3>6</h3>
                        <p>+Years of Experience</p>
                    </div>
                </div>

                <div class="col-3">
                    <div class="client-work">
                        <i class="fa fa-smile" aria-hidden="true"></i>
                        <h3>500</h3>
                        <p>+Users</p>
                    </div>
                </div>

                <div class="col-3">
                    <div class="client-work">
                        <i class="fa fa-paper-plane" aria-hidden="true"></i>
                        <h3>30</h3>
                        <p>+ Projects Delivered</p>
                    </div>
                </div>

                <div class="col-3">
                    <div class="client-work">
                        <i class="fa-solid fa-handshake" aria-hidden="true"></i>
                        <h3>100</h3>
                        <p>+Meetings</p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- Client Work Section End -->

    <section class="anything-wrapper" id="features">
       <div class="container">
        <div class="anything-conatent">
           <div class="anything-title">
               <h2>A universal platform for running anything</h2>
               <p>From a powerful timesheethub to project management, task managment. Everything is fully customizable and can be turned on and off for the whole company or specific users.</p>
           </div>
           <div class="anything-inner">
               <a href="javascript:void(0);"><i class="icofont-calendar"></i>Weekly Submission</a>
               <a href="javascript:void(0);"><i class="icofont-tasks"></i>Task Managment</a>
               <a href="javascript:void(0);"><i class="fa-regular fa-clock"></i>Project Managment</a>
               <a href="javascript:void(0);"><i class="icofont-user-alt-5"></i>User Managment</a>
               <!-- <a href="#"><i class="icofont-sand-clock"></i>Deadline Per Task</a> -->
               <a href="javascript:void(0);"><i class="icofont-ui-calendar"></i>Weekly Report</a>
               <a href="javascript:void(0);"><i class="fa-regular fa-clock"></i>Report in CSV</a>
               <a href="javascript:void(0);"><i class="icofont-file-pdf"></i>Report in PDF</a>
               <!-- <a href="#"><i class="fa-regular fa-clock"></i>Bulk Time Entries</a> -->
               <a href="javascript:void(0);"><i class="icofont-ui-copy"></i>Copy Week Data</a>
               <a href="javascript:void(0);"><i class="fa-regular fa-clock"></i>Easy to Use</a>
            
            
           </div>
           <!-- <a class="btn-anything" href="#">See all features</a> -->
           </div>
       </div>
   </section>

     <!-- Business App section Start Here  -->

    <section class="business-section">
        <div class="container">
            <div class="business-txt">
                <h2>Why choose Timesheethub as your timesheet software?</h2>
                <p>Timesheethub modern timesheet software can replace messy Excel templates, inaccurate paper time cards, and manual tracking systems. Over 40,000 customers choose Timesheet because our top priority is the accuracy of time tracking data combined with proven productivity features, including screenshots and idle timeouts.</p>
            </div>

            <div class="row">
                <div class="col-6 bussiness_col">
                    <div class="richtext">
                        <h3>Accurate timesheetshub</h3>

                        <ul>
                            <li>Daily and weekly timesheethub views</li>
                        </ul>
                    </div>

                    <div class="richtext">
                        <h3>Timesheethub approvals</h3>

                        <ul>
                            <li>Per-user timekeeping settings</li>
                            <li>Automated approval workflows</li>
                            <li>Lockable time to avoid late changes</li>
                        </ul>
                    </div>


                </div>

                <div class="col-6 bussiness_col_in">
                    <div class="rich_img">
                        <img src="<?= $site_url; ?>assets/images/landing-img/pf-s73-eve-set-14-mockup.png">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Business App section End -->

   <section class="faq-wrapper" id="faq">
       <div class="container">
           <div class="faq-content">
               <h2>Things worth knowing about using a Timesheethub</h2>
               <div class="faq-inner">
                   <div class="accordion" id="accordion1">
                    <div class="accordion-item">
                        <h4 class="accordion-header" id="heading2">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
                            What is Timesheethub?
                          </button>
                        </h4>
                        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion1">
                          <div class="accordion-body">
                            A timesheethub is a record of hours worked by each individual on different projects. Timesheets can be paper copies, digital records, or created automatically by time tracking software.
                          </div>
                        </div>
                      </div>
                      <div class="accordion-item">
                        <h4 class="accordion-header" id="heading1">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
                           How does using a Timesheethub improve productivity?
                          </button>
                        </h4>
                        <div id="collapse1" class="accordion-collapse collapse" aria-labelledby="heading1" data-bs-parent="#accordion1">
                          <div class="accordion-body">
                            This self-analysis will motivate both you and your employees to do better and avoid any unnecessary and unproductive actions like those well-known “fast and easy” 5-minute jobs many of us are often asked to do. Employees who track time can note how much these extra jobs actually take up their day and be able to make better decisions on whether it’s worth interrupting their workflow.
                          </div>
                        </div>
                      </div>

                        <!-- <div class="accordion-item">
                        <h4 class="accordion-header" id="heading2">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
                            Can implementing DeskTime prevent burnout?
                          </button>
                        </h4>
                        <div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordion1">
                          <div class="accordion-body">
                            Yes! Using a time tracker can help highlight overachievers and spot team members who are struggling or might need some extra help. This is a great way to catch and prevent burnout, as well as rethink resource distribution.
                          </div>
                        </div>
                      </div> -->

                      <div class="accordion-item">
                        <h4 class="accordion-header" id="heading3">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
                            Is my team's privacy safe when using a Timesheethub?
                          </button>
                        </h4>
                        <div id="collapse3" class="accordion-collapse collapse" aria-labelledby="heading3" data-bs-parent="#accordion1">
                          <div class="accordion-body">
                           We take data security seriously at Timesheet. Our servers are hosted in a highly secured data center and we ensure that our application is always up to date with the latest security patches. Our data-center is also GDPR compliant and all our plans include SSL encryption to keep your data safe.
                          </div>
                        </div>
                      </div>

                       <!-- <div class="accordion-item">
                        <h4 class="accordion-header" id="heading4">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="true" aria-controls="collapse4">
                            How to communicate using a time tracker with your team?
                          </button>
                        </h4>
                        <div id="collapse4" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#accordion1">
                          <div class="accordion-body">
                           You have to remember that using time trackers is a two-way street of communication, so it’s best to lead by example. Yes, it gives managers an overview of what their employees are doing during the workday, but it’s also a tool to help employees show their progress and ask for help if needed. Be transparent and honest about implementing a time tracker and take the time to show its benefits. For example, DeskTime lets you set break reminders, encourage private time, and eliminate overworking so your team members feel rested, valued, and safe.
                          </div>
                        </div>
                      </div> -->
                    </div>
               </div>
           </div>
       </div>
   </section>

    <!-- Integrations-Info Section Start Here -->
    <section class="integrations-section" style="display: none;">
        <div class="container">
            <div class="text">
                <h2>Integrate time tracker tool with 50+ popular services</h2>
                <p>Timesheethub with dozens of services, which lets you measure progress and activity in any tool you use.
                </p>

                <div class="link-button">
                    <a class="btn btn-primary" href="#">Start Free Trial</a>

                    <a class="link-more" href="#">Explore All Integrations </a>
                    <img src="assets/img/right-aerrow.svg" alt="">
                </div>

            </div>

            <div class="row">
                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/integration-excel.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/logo-integration-gsuite.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/integration-gdocs.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/integration-jira.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/integration-msoffice.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/logo-integration-trello.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/logo-integration-gkeep.svg" alt=""></a>
                    </div>
                </div>

                <div class="col-2">
                    <div class="list">
                        <a href="#"><img src="<?= $site_url; ?>assets/images/landing-img/logo-integration-asana.svg" alt=""></a>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- Integrations-Info Section End -->


    <!-- Testimonials Scetion Start Here -->
    <section class="testimonials-section">
        <div class="container">
            <div class="testimonials-contents">
                <h2>Do you have any question?</h2>
                <p>It's always nice to have someone to talk to when facing new software. Get in touch and we'll try our
                    best to help you out.</p>
                    <button class="myBtn" href="#">Contact Us</button>
                <!-- <a href="#">Contact Us</a> -->
                <section class="popup">
                    <div class="popup__content">
                        <div class="close"><i class="fas fa-times"></i></div>
                        <form class="contact-form" action="#">
                            <h2>Contact Us</h2>
                            <p>Feel Free to contact us any time. We will get back to you as soon as we can!.</p>
                            <p class="sc-msg" style="display:none;color:green;">We received your contact request. We will get back to you shortly.</p>

                            <input type="text" class="contact-input" name="fname" placeholder="Your First Name..." required>

                            <input type="text" class="contact-input" name="lname" placeholder="Your Last Name..." required>

                            <input type="email" class="contact-input" name="email" placeholder="Your Email Address..." required>

                            <textarea class="contact-input" placeholder="Message..." name="msg"></textarea>

                            <button>Send<i class="fas fa-paper-plane"></i></button>
                            <div class="spinner-border float-right" role="status" style="display: none;position: fixed;top: 45%;right: 50%;z-index: 999999;">
                                    <span class="sr-only">Loading...</span>
                                </div>
                        </form>
                    </div>
                </section>
            </div>
        </div>
    </section>
    <!-- Testimonials Scetion End -->

    <!-- Footer Section Start Here -->
    <footer class="footer-section">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <div class="footer-tagline">
                        <a href="#"> <img src="<?= $site_url; ?>assets/images/landing-img/favicon-2.svg"> Timesheethub</a>
                        <p>The world's leading time tracker and timesheethub software for teams</p>
                    </div>
                    <div class="footer-link">
                        <a href="<?= $site_url; ?>register.php">Sign Up</a>
                        <a href="<?= $site_url; ?>login.php">Log In</a>
                    </div>
                </div>

                <div class="col-6">
                    <div class="footer-product">
                        <p>PRODUCT</p>
                        <a href="#features">Features</a>
                        <a href="#faq">FAQ</a>
                       <!--  <a href="#">Pricing</a>
                        <a href="#">API</a> -->
                    </div>
                </div>

            </div>

            <div class="footer-copyright d-flex justify-content-between flex-wrap gap-3">
                <p>Copyright © Timesheethub 2023</p>
                <p><img src="<?= $site_url; ?>assets/images/payment-gateways.png"></p>
            </div>
        </div>
    </footer>
    <!-- Footer Section End -->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            $('.client-work h3').each(function () {
                $(this).prop('Counter', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 4000,
                    easing: 'swing',
                    step: function (now) {
                        $(this).text(Math.ceil(now));
                    }
                });
            });
        });
        $(function() {
  
          $("form.contact-form").validate({
            // Specify validation rules
            rules: {
              fname: "required",
              lname: "required",
              email: {
                required: true,
                email: true
              },
              msg:"required"
            },
            // Specify validation error messages
            messages: {
              firstname: "Please enter your firstname.",
              lastname: "Please enter your lastname.",
              msg: "Please add some description.",
              email: "Please enter a valid email address."
            },
            submitHandler: function(form) {
                let myform = document.querySelector("form.contact-form");
                let fd = new FormData(myform);
                $(".spinner-border").show();
                $.ajax({
                    type:"post",
                    url:window.location.path,
                    data: fd,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $(".spinner-border").hide();
                        $(".sc-msg").show();
                        $("form.contact-form")[0].reset();
                        

                    }
                })
              //form.submit();
            }
          });
        });

         $("button.myBtn").click(function () {
            $(".popup").fadeIn(500);
            document.body.style.overflow = 'hidden';
        });
        $(".close").click(function () {
            $(".popup").fadeOut(500);
            document.body.style.overflow = 'auto';
        });
        window.onclick = function(event) {
          if ($(event.target).closest(".popup__content").length == 0 && $(event.target).closest(".myBtn").length == 0) {
            $(".popup").fadeOut(500);
            document.body.style.overflow = 'auto';
          }
        }

    </script>


</body>

</html>