@extends('layouts.website-main-menu')

@section('content')
<!-- ##### Team Member Area Start ##### -->
<section style="background-color: #6c757d54;" class="team-area section-padding-100-0">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Section Heading -->
                <div class="section-heading text-center mb-100">
                    <div class="line"></div>
                    <p style="color:black;">Take look at</p>
                    <h2>The Executives</h2>
                </div>
            </div>
        </div>

        <div class="row">

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/the-board/mtshali.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Dr. M.K Mtshali</h5>
                        <h6>EXECUTIVE CHAIRMAN</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/executives/zukiswa-mtiya.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Ms. Zukiswa Mtiya</h5>
                        <h6>Company Secretary</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/executives/puleng-ntuli.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Ms. Puleng Ntuli</h5>
                        <h6>Chief Operations Officer</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/executives/makhosazana-boateng.jpg" alt="">
                        <div class="view-more">
                            <a class="view-more-btn" data-popup="popup4" href="#">+</a>
                        </div>
                    </div>
                    <div class="team-info">
                        <h5>Ms. Makhosazana Boateng</h5>
                        <h6>Chief Financial Officer</h6>
                    </div>
                </div>
                <!-- Popup HTML -->
                <div class="popup" id="popup4">
                    <div class="popup-content">
                        <span class="close-btn">&times;</span>
                        <h2>Profile of Makhosazana Boateng (ACCA)</h2>
                        <p>Makhosanaza Boateng is a professional, self-motivated qualified Chartered Certified
                            Accountant, with 16 years post article (completed articles in the Office of the Auditor-General).
                        </p>

                        <p>
                            My area of experience includes IFRS reporting, risk management, budgeting and forecasting,
                            ICT management and governance. I am competent to interact with and presenting to executives
                            as well as governance committees. I also have experience in company value creation and
                            possess a strong track record of client relationship building and people management. My
                            experience and skills have advanced by my involvement in various projects such as system
                            implementation, contract negotiation and project management, as a result I have successfully
                            managed to yield improved business performance which is to achieve solid impact with the
                            executive team and clients.
                        </p>

                        <p>
                            I have managed people from different backgrounds and skills sets for a couple of years and this
                            exposure has taught me that creating culture of inclusion and trust are a key element into
                            channeling a successful company environment. My professional approach and resolute
                            interpersonal skills have enabled me to operate in a dynamic and challenging working
                            environment.
                        </p>

                        <p>
                            I hold the following qualifications, Executive Development Programme (Wits Business School),
                            Post-Graduate Diploma in Accounting Sciences (UNISA) and a Bcom (Financial Accounting)
                            (University of Pretoria).
                        </p>

                        <p>
                            I am currently a director for Litelec Electrical and Lighting Suppliers (Pty) Ltd since September
                            2021. At KTVR Bus Services (Pty) Ltd, I am an Executive Director and Chief Financial Officer
                            from August 2021 and April 2021 respectively.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/executives/lerato.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Ms. Lerato Phume</h5>
                        <h6>Executive Head: Strategy & Risk</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/executives/mnisi.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Mr. Zwelibanzi Mnisi</h5>
                        <h6>Executive Head: Public Relations</h6>
                    </div>
                </div>
            </div>

            <!-- Single Team Member Area -->
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="single-team-member-area mb-100">
                    <div class="team-thumb">
                        <img src="main-website/img/team/senior/molotlegi-mokgatle.jpg" alt="">
                    </div>
                    <div class="team-info">
                        <h5>Mr. Molotlegi Mokgatle (Acting)</h5>
                        <h6>Executive Head: Human Resources</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Team Member Area End ##### -->

<!-- ##### Newsletter Area Start ###### -->
<section class="newsletter-area section-padding-100 bg-img jarallax" style="background-image: url(main-website/img/bg-img/6.jpg);">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-sm-10 col-lg-8">
                <div class="nl-content text-center">
                    <h2>Subscribe to our newsletter</h2>
                    <form action="#" method="post">
                        <input type="email" name="nl-email" id="nlemail" placeholder="Your e-mail">
                        <button type="submit">Subscribe</button>
                    </form>
                    <p>Curabitur elit turpis, maximus quis ullamcorper sed, maximus eu neque. Cras ultrices erat nec auctor blandit.</p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ##### Newsletter Area End ###### -->

<script>
    // Function to show popup
    function showPopup(popupId) {
        var popup = document.getElementById(popupId);
        popup.style.display = "block";
    }

    // Function to hide popup
    function hidePopup(popupId) {
        var popup = document.getElementById(popupId);
        popup.style.display = "none";
    }

    // Get all view-more buttons and attach click event
    var viewMoreBtns = document.querySelectorAll('.view-more-btn');
    viewMoreBtns.forEach(function(btn) {
        btn.onclick = function(event) {
            event.preventDefault(); // Prevent the default action (navigation)
            var popupId = this.getAttribute('data-popup');
            showPopup(popupId);
        }
    });

    // Get all close buttons and attach click event
    var closeBtns = document.querySelectorAll('.close-btn');
    closeBtns.forEach(function(btn) {
        btn.onclick = function() {
            var popup = this.closest('.popup');
            popup.style.display = "none";
        }
    });

    // Close popup when clicking outside of it
    window.onclick = function(event) {
        if (event.target.classList.contains('popup')) {
            event.target.style.display = "none";
        }
    }
</script>

@endsection