<?php require APP_ROOT . '/Views/includes/header.php';?>
<!-- template Header -->

<!-- Main Content HomePage Index -->
<main class=" main-color container-fluid">
        <!-- section 1 -->
        <section class="container">
            <div class="row">
                <div class="col-12 text-end">
                    <div class="d-flex align-items-center vh-100 p-5">
                        <div class="col-12 text-white text-center">
                            <p>Hello, I am</p>
                            <p class="fs-60 fw-bolder">Martin Nganga Njoroge</p>
                            <p class="pb-4">And i like to craft solid and scalable mobile and web apps with great user experiences.</p>
                            <a class="a-resume text-decoration-none text-white" href="">Resume</a>
                        </div>
                    </div>
            </div>
        </section>
        <!-- section 2 -->
        <section class="container">
            <div class="row text-white p-5">
                <div class="col-xs-12 col-md-6 text-white">
                    <p class="h3">About Me</p>
                    <p>
                        My name is Martin Nganga Njoroge, a software developer by profession and i like to code.
                        My interest in software development began after completion school when i started practicing
                        making mobile apps and writing my first hello world app and seeing it running on my phone. It
                        was amazing &#128576; &#128576; .
                        over the years i picked up one or two software development domains mainly web development and
                        mobile apps development.
                        <br><br>
                        Some of the technologies i have worked on recently include:
                    </p>
                    <ul>
                        <li>React Js</li>
                        <li>Cock pit CMS</li>
                        <LI>Php</LI>
                        <li>Jquery</li>
                        <li>Spring Boot</li>
                    </ul>
                </div>
                <div class="col-xs-12 col-md-6">
                    <img class="dude" src="<?php echo URL_ROOT; ?>/img/static/martin.jpg" alt="">
                </div>
            </div>
        </section>
        <!-- note worthy projects -->
        <section class="container">
            <div class="row px-5">
                <div class="col-12">
                    <h2 class="d-flex align-items-center position-relative title">Some Things I’ve Built</h2>
                </div>
                <div class="col-xs-12 col-md-4 d-flex align-items-stretch">
                    <div class="card text-white portfolio-div p-3">
                        <div class="folder">
                            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-folder">
                                <title>Folder</title>
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
                                </path>
                            </svg>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="h5">Portfolio Website</p>
                            <p>This is my cv portfolio website</p>
                            <p class="mt-auto ">PHP, Jquery, Bootstrap, Html, Cockpit Cms</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4 d-flex align-items-stretch">
                    <div class="card text-white portfolio-div p-3">
                        <div class="folder">
                            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-folder">
                                <title>Folder</title>
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
                                </path>
                            </svg>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="h5">Nimali Africa</p>
                            <p>This is a hotel company website in Tanzania. Link: <a
                                    href="https://nimaliafrica.com">Nimali Africa</a></p>
                            <p class="mt-auto ">PHP, Jquery, Bootstrap, Html, Cockpit Cms</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4 d-flex align-items-stretch">
                    <div class="card text-white portfolio-div p-3">
                        <div class="folder">
                            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-folder">
                                <title>Folder</title>
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
                                </path>
                            </svg>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="h5">Outsource Technique Limited</p>
                            <p>This is a Electrical company website in Kenya. Link: <a
                                    href="https://otl.co.ke">Otl </a></p>
                            <p class="mt-auto ">PHP, Jquery, Bootstrap, Html, Cockpit Cms</p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <h5 class="d-flex align-items-center position-relative my-3">Things Am working on currently</h4>
                </div>
                <div class="col-xs-12 col-md-4 d-flex align-items-stretch">
                    <div class="card text-white portfolio-div p-3">
                        <div class="folder">
                            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-folder">
                                <title>Folder</title>
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
                                </path>
                            </svg>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="h5">An Sms App</p>
                            <p>An android app that sends sms from website to a mobile phone number</p>
                            <p class="mt-auto ">Android java, PHP</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-4 d-flex align-items-stretch">
                    <div class="card text-white portfolio-div p-3">
                        <div class="folder">
                            <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24" fill="none"
                                stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                                class="feather feather-folder">
                                <title>Folder</title>
                                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z">
                                </path>
                            </svg>
                        </div>
                        <div class="card-body d-flex flex-column">
                            <p class="h5">Milk card</p>
                            <p>A online app that helps farmers digitize there milk records. Link: <a
                                    href="https://milkcardsms.com">Milk Card</a></p>
                            <p class="mt-auto ">PHP, Bootstrap</p>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <h5 class="d-flex align-items-center position-relative my-3">Other Staff i like to do</h4>
                </div>
                <div class="col-12 d-flex align-items-stretch">
                    <div class="text-white">
                        <div class="d-flex flex-column">
                            <p class="h5">Create Cartoon Images</p>
                            <div class="row">
                                <div class="col-xs-12 col-md-2">
                                    <img class="photoshop" src="<?php echo URL_ROOT; ?>/img/static/main.jpg" alt="">
                                </div>
                                <div class="col-xs-12 col-md-2">
                                    <img class="photoshop" src="<?php echo URL_ROOT; ?>/img/static/cartoon.jpg" alt="">
                                </div>
                                <div class="col-xs-12 col-md-3">
                                    <img class="photoshop" src="<?php echo URL_ROOT; ?>/img/static/cartoon1.jpg" alt="">
                                </div>
                                <div class="col-xs-12 col-md-5 px-5">
                                    <img class="photoshop" src="<?php echo URL_ROOT; ?>/img/static/cartoon2.jpg" alt="">
                                </div>
                            </div>
                            <p class="mt-auto text-center">Adobe Photoshop</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Contact Me -->
        <section class="container">
            <div class="row d-flex align-items-center vh-100">
                <div class="col-12 text-white">
                    <p class="fs-40 text-center fw-bold">Send me a message!</p>
                    <p class="text-center">Got a question or just want to say hello? Go ahead.</p>
                    <form class="w-100 p-5" id="send-message" method="POST">
                        <div class="row">
                            <div class="co-xs-12 col-md-6">
                                <div class="input-group d-flex position-relative flex-column w-100 p-3">
                                    <label for="full-name" class="form-label">Full Names</label>
                                    <input type="text" class="input-contact" id="full-name"
                                        aria-describedby="emailHelp" />
                                        <small id="error-full-name" class="error"></small>
                                </div>
                            </div>
                            <div class="co-xs-12 col-md-6">
                                <div class="input-group d-flex position-relative flex-column w-100 p-3">
                                    <label for="email" class="form-label">Email address</label>
                                    <input type="email" class="input-contact" id="user-email" aria-describedby="emailHelp" />
                                    <small id="error-user-email" class="error"></small>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="input-group d-flex position-relative flex-column w-100 p-3">
                                    <label for="text-message" class="form-label">Message</label>
                                    <textarea type="text" class="input-contact" id="text-message"
                                        aria-describedby="emailHelp"></textarea>
                                        <small id="error-text-message" class="error"></small>
                                </div>
                            </div>
                            <div class="col-12 d-flex justify-content-center">
                                <button type="submit" class="col-md-2 my-3 my-md-0 py-2 rounded-3 btn text-white poppins-b submit-btn" name="send-message">
                                    <div id="spinner-msg" class="spinner-border spinner-border-sm text-light" role="status"></div>
                                    <i id="icon-lightning" class="pe-2 bi bi-lightning-charge-fill"></i>Send Message</button>
                            </div>
                        </div>



                    </form>
                </div>
            </div>
        </section>
        <!-- section built by -->
        <section class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-center text-white">Designed and built by Martin Nganga Njoroge</p>
                </div>
            </div>
        </section>
    </main>
<!-- Main Content HomePage Index End -->

<script>
    $(document).ready(function(){
        $('#spinner-msg').hide();
    //send message form
    $("#send-message").submit(function(e) {
        e.preventDefault();
        message();
    });
});

function message(){
    var name = $('#full-name').val();
    var email = $('#user-email').val();
    var message = $('#text-message').val();

    $('#error-full-name,  #error-user-email, #error-text-message').html(" ");
    $('#full-name, #user-email, #text-message').removeAttr('style');

    if(name != '' && email != '' && message != ''){

        $('#spinner-msg').show();

        $.ajax({
            method: "POST",
            url: "/portfolio/homepage/sendMessage",
            data: {
                name: name,
                email: email,
                message: message
            },
            success: function(data){
                console.log(data);
                data = $.parseJSON(data);

                if(data.success == 0){
                    if(data.name_err == "error-name"){
                        $('#error-full-name').html("*Enter your full name");
                    }
                    if(data.email_err == "error-email"){
                        $('#error-user-email').html("*Enter your email address");
                    }
                    if(data.message_err == "error-message"){
                        $('#error-text-message').html("*Enter your message");
                    }
                    $('#spinner-msg').hide();
                }
                else if(data.success == 1){

                    $('#send-firstname, #send-last, #send-phone, #send-email, #send-msg').val('');

                    Swal.fire({
                        position: 'top-end',
                        icon: 'success',
                        title: 'Your message has been sent i will reply in the shortest time possible \n Thank You!',
                        showConfirmButton: false,
                        timer: 3000
                    });

                    $('#spinner-msg').hide();
                }
            },
            complete: function(data){
            //console.log(data)
            $('#spinner-msg').hide();
            },
            error: function(xhr, status, error) {
                console.log("XMLHttpRequest: "+xhr+"\nStatus: "+status+"\nRequest Error: "+error);
                console.log(data)
                $('#spinner-msg').hide();
            }
        });

    }
    else{
        if(name == ''){
            $('#error-full-name').html("*Enter your full name");
        }
        if(email == ''){
            $('#error-user-email').html("*Enter an email address");
        }
        if(message == ''){
            $('#error-text-message').html("*Enter your message");
        }
    }
}
</script>

<!-- template Footer -->
<?php require APP_ROOT . '/Views/includes/footer.php';?>
<!-- template Footer -->