@extends('layouts.app')
<style>
    .modal-contents {
        background: #dedede;
    }

    .modal-body p {
        color: #0a1f2e;
    }

    .modal-header {
        border-bottom: 1px solid #b9b9b9;
    }

    button.close:hover {
        background-color: #bbbbbb;
    }

    /* profile page popup */

    section .profilepopup {
        max-width: 1000px;
        margin:20px;
        width: 100%;
        margin: auto;
        display: block;
    }

    section .profilepopup .row {
        padding: 20px;
        background: #dedede;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        margin: 0%;
        padding: 20px;
        /* align-items: center; */
    }

    section .profilepopup .row .col-md-4 {
        margin: 0%;
        padding: 20px;
    }

    section .profilepopup .row .col-md-4 .image {
        width: 100%;
        background: #8d8d8d;
    }

    section .profilepopup .row .col-md-4 .image img {
        width: 100%;
        height: auto;
    }

    section .profilepopup .row h2 {
        font-size: 16px;
        font-family: 'Mukta', sans-serif;
        color: #08b7b3 !important;
        background: none;
        margin: 0%;
        margin-bottom: 5px;
    }

    section .profilepopup .row p {
        color: #0a1f2e;
        background: none;
        font-size: 14px;
        font-family: 'Mukta', sans-serif;
    }

    section .profilepopup .row .col-md-8 {
        padding: 20px;
        margin-bottom: 20px;
    }

    h4#name {
        margin-bottom: 12px;
    }

    .modal-dialog {
    pointer-events:auto !important;
}

    #name,
    #position {
        padding: 0px;
    }


    #name,
    #position,
    #skills,
    #qualifications,
    #core-competence, 
    #external-qualifications {
        color: #0a1f2e;
    }

    h6#description {
        font-weight: 100;
        color: #0a1f2e;
        width: 80%;
        padding: 0px;
        margin: 0px;
    }

    section .profilepopup .row .col-md-12 ul {
        padding: 20px;
    }

    section .profilepopup .row .col-md-12 ul li {
        font-family: 'Mukta', sans-serif;
        margin: 0%;
        padding: 0%;
        color: #0a1f2e;
    }

    section .profilepopup .row .col-md-12 {
        margin: 0px;
        padding-left: 20px;
    }

    section .profilepopup .row .col-md-6 {
        font-family: 'Mukta', sans-serif;
        padding-top: 0px;
        color: #fff;
    }

    .profile {
        text-align: center;
        font-size: 12px;
        padding: 0px;
        margin: 0px;
        padding-top: 50px;
    }

    .profile .row {
        max-width: 1250px;
        padding: 0%;
        margin: 0%;
        margin: auto;
    }

    .profile .row .col-lg-4 {
        height: 320px;
        padding: 20px;
    }

    .modal-button-group {
        margin: 20px 0;
        color: #0a1f2e;
    }

    .modal-button-group .socials {}

    .modal-button-group .fa-facebook-square,
    .modal-button-group .fa-linkedin,
    .modal-button-group .fa-envelope {
        color: #0a1f2e;
        font-size: 30px;
    }

    .modal-button-group .button-actions {
        background-color: #08b7b3;
        padding: 10px;
        border-radius: 5px;
    }

    .profile h5 {
        color: #08b7b3 !important;
    }


    .closeModal {
        background-color: #0a1f2e;
        color: #fff;
        border: none;
        padding: 8px;
    }
</style>
@section('content')
    <div class="page-blue">
        <div class="about-banner contact-banner bg-image"
            style="background-image: url({{ asset('images/our-leadership/cover.png') }});">
        </div>
        <div class="page-title-container">
            <h4>OUR LEADERSHIP</h4>
            <span class="text-primary">Reinvigorating our Leadership Style</span>
        </div>
    </div>

    <div class="container landing-section">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="">
                    <h3 class="text-center">Building the Road to Triumph</h3>
                    <p class="text-justify">Phoenix Beverages Group's Board upholds the highest standards of governance and ethical conduct,
                        aligned with Mauritius' Corporate Governance Code. We foster a culture of integrity, encouraging all stakeholders to embrace ethical excellence.
                    </p>

                </div>
            </div>
        </div>

    </div>


    <div class="main-section py-6 px-3">
        <div class="container">
            <div class="our-leadership">
                <div class="container">
                    <ul class="nav nav-pills d-flex flex-column flex-sm-row">
                        <li class="nav-item">
                            <a class="nav-link active" id="tab1-link" href="#tab1" data-bs-toggle="pill">Board of Directors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="tab2-link" href="#tab2" data-bs-toggle="pill">Management Team</a>
                        </li>
                    </ul>
                </div>
                

                <div class="tab-content mt-3">
                    <div id="tab1" class="tab-pane fade show active">
                        <!-- First row with a single image centered -->
                        <div class="row mb-4">
                            <div class="col-lg-4 col-md-6 offset-lg-4 offset-md-3 px-1">
                                <div class="our-leadership-card">
                                    <img src="{{ $directors->first()['image'] }}" alt="{{ $directors->first()['name'] }}" />
                                    <div class="card-overlay ">
                                        <div class="add-menu">
                                            <div class="menu-icon">&plus;</div>
                                        </div>
                                        <div class="menu-content">
                                            <p class="our-leadership-header">{{ $directors->first()['name'] }}</p>
                                            <span class="details">{{ $directors->first()['position'] }}</span>
                                        </div>
                                    </div>
                                    <div class="card-details">
                                        <div class="leadership-header">
                                            <div class="leadership-logo">
                                                <img src="{{ $directors->first()['image'] }}"
                                                    alt="{{ $directors->first()['name'] }}" />
                                            </div>
                                            <div class="close-details">&#x2715;</div>
                                        </div>
                                        <div class="our-leadership-details-content">
                                            <h5>{{ $directors->first()['name'] }}</h5>
                                            <span>{{ $directors->first()['position'] }}</span>
                                            <p class="desc">{{ $directors->first()['description'] }}</p>
                                            <div class="read-more-link">
                                                <button type="button" class="btn btn-link my-2"
                                                    onclick="showInfoModal({{ json_encode($directors->first()) }})">
                                                    Read More <i class='fas fa-arrow-right'></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Remaining rows with 3 columns layout -->
                        <div class="row">
                            @foreach ($directors->slice(1) as $director)
                                <div class="col-lg-4 col-md-12 mb-4 px-2">
                                    <div class="our-leadership-card">
                                        <img src="{{ $director['image'] }}" alt="{{ $director['name'] }}" />
                                        <div class="card-overlay">
                                            <div class="add-menu">
                                                <div class="menu-icon">&plus;</div>
                                            </div>
                                            <div class="menu-content">
                                                <p class="our-leadership-header">{{ $director['name'] }}</p>
                                                <span class="details">{{ $director['position'] }}</span>
                                            </div>
                                        </div>
                                        <div class="card-details">
                                            <div class="leadership-header">
                                                <div class="leadership-logo">
                                                    <img src="{{ $director['image'] }}" alt="{{ $director['name'] }}" />
                                                </div>
                                                <div class="close-details">&#x2715;</div>
                                            </div>
                                            <div class="our-leadership-details-content">
                                                <h5>{{ $director['name'] }}</h5>
                                                <span>{{ $director['position'] }}</span>
                                                <p class="desc">{{ $director['description'] }}</p>
                                                <div class="read-more-link">
                                                    <button type="button" class="btn btn-link"
                                                        onclick="showInfoModal({{ json_encode($director) }})">
                                                        Read More <i class='fas fa-arrow-right'></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div id="tab2" class="tab-pane fade">
                        <div id="tab2" class="tab-pane fade show active">
                            <div class="row">
                                @foreach ($managements as $management)
                                    <div class="col-lg-4 col-md-12 mb-4 px-2">
                                        <div class="our-leadership-card">
                                            <img src="{{ $management['image'] }}" alt="{{ $management['name'] }}" />
                                            <div class="card-overlay">
                                                <div class="add-menu">
                                                    <div class="menu-icon">&plus;</div>
                                                </div>
                                                <div class="menu-content">
                                                    <p class="our-leadership-header">{{ $management['name'] }}</p>
                                                    <span class="details">{{ $management['position'] }}</span>
                                                </div>
                                            </div>
                                            <div class="card-details">
                                                <div class="leadership-header">
                                                    <div class="leadership-logo">
                                                        <img src="{{ $management['image'] }}"
                                                            alt="{{ $management['name'] }}" />
                                                    </div>
                                                    <div class="close-details">&#x2715;</div>
                                                </div>
                                                <div class="our-leadership-details-content">
                                                    <h5>{{ $management['name'] }}</h5>
                                                    <span>{{ $management['position'] }}</span>
                                                    <p class="desc">
                                                        {{ \Str::limit($management['description'], 100, '...') }}</p>
                                                    <div class="read-more-link">
                                                        <button type="button" class="btn btn-link"
                                                        @if($management['id'] == 9 || $management['id'] == 10)
                                                            onclick="showInfoModal({{ json_encode($management) }})"
                                                        @else
                                                            onclick="showManagementInfo({{ json_encode($management) }})"
                                                        @endif
                                                        >
                                                            Read More <i class='fas fa-arrow-right'></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>


            </div>

        </div>
    </div>


    <div class="container my-6 pb-6 text-center">
        <div class="my-slider mx-auto">
            <div class="my-slides messages">
                <div class="my-slide">
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <img src="{{ $directors->first()['image'] }}" alt="{{ $directors->first()['name'] }}" />
                        </div>
                        <div class="col-lg-6 col-md-12 message-content">
                            <h4>Chairman's Acknowledgements</h4>
                            <p>
                                I would like to extend my heartfelt thanks to my fellow
                                directors for their unwavering support and strategic insight
                                throughout the year. Their guidance has been instrumental in
                                navigating the challenges and seizing the opportunities that
                                have come our way. I also wish to express my appreciation to
                                the executives and management team, under the leadership
                                of our CEO, Bernard Theys and our COO/ CFO, Patrick Rivalland,
                                for their exemplary leadership and commitment to delivering
                                on our strategic objectives.
                                <br><br>
                                To our dedicated team, your hard work, resilience and passion
                                are the foundation of our success, and I am truly grateful for
                                your continued contribution. Lastly, I would like to thank
                                our valued stakeholders for their trust, collaboration, and
                                confidence in our vision.
                            </p>
                            <p>
                                <span>Arnaud Lagesse</span>
                                <br>
                                Chairman
                            </p>
                        </div>
                    </div>
                </div>

                <div class="my-slide messages">
                    <div class="row" style="margin: 0;padding:0;">
                        <div class="col-lg-6 col-md-12">
                            <img src="{{ $directors->where('id',12)->first()['image'] }}" alt="{{ $directors->where('id',11)->first()['name'] }}" />
                        </div>
                        <div class="col-lg-6 col-md-12 message-content">
                            <h4>CEO's Message</h4>
                            <p>
                                It is my great pleasure to warmly welcome you to our website and thank you for your interest in our company. We are a group of highly dynamic, creative and talented people, ready to go that extra mile to create premium value for our stakeholders.
                                <br><br>
                                The values we share are embodied in what goes on at Phoenix Beverages Group from day to day.
                                Our aim at Phoenix Beverages Group is to produce high standards products to meet our customers’ need.
                                At the same time, we take a stand to be in line with the eco-friendly and environmental goals for sound decision making and effective strategies to flow naturally from the give-and-take of daily business engagements.
                            </p>
                            <p>
                                <span>Bernard Theys</span>
                                <br>
                                CEO
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="controls">
                <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
                <button class="next" onclick="changeSlide(1)">&#10095;</button>
            </div>
        </div>
    </div>

    <section>
        <div class="modal fade" id="more-info" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div style="max-width: 1000px" class="modal-dialog">
                <div class="modal-contents">
                    <div class="profilepopup">
                        <div data-dismiss="modal" class="closeprofile"
                            style="
                                color: #fff;
                                background: #08b7b3;
                                width: 60px;
                                padding: 8px 5px;
                                text-align: center;
                                cursor: pointer;
                                float: right;
                                margin-left: -60px;
                                z-index: 100;
                                position: relative;
                            ">
                            X
                        </div>

                        <div id="mgt-info">
                            <div style="z-index: 0" class="row">
                                <div class="col-md-4">
                                    <div class="image">
                                        <img id="imageId" src="" alt="Arnaud LAGESSE" />
                                    </div>

                                </div>
                                <div class="col-md-8 text-justify">
                                    <div class="mt-3">
                                        <h4 id="name" style="margin-bottom: 12px;"></h4>
                                        <h6 id="position"></h6>
                                        <h6 id="description"></h6>
                                    </div>

                                </div>
                            </div>

                            <div class="row" style="padding: 0px 14px;">
                                <div class="col-md-12">
                                    <h2 style="color:#08b7b3;font-size:16px;">SKILLS & EXPERIENCE</h2>
                                    <p id="skills"></p>

                                    <h2 style="color:#08b7b3;font-size:16px;">QUALIFICATIONS & PROFESSIONAL DEVELOPMENT
                                    </h2>
                                    <ul id="qualifications"></ul>
                                </div>

                                <div class="col-md-12">

                                    <h2 style="color:#08b7b3;font-size:16px;">CORE COMPETENCES AND CONTRIBUTION</h2>
                                    <div id="core-competence"></div>
                                    {{-- <p style="color:#0a1f2e">
                                        Business & Finance, Deal Structuring, Strategic Business Development
                                    </p> --}}
                                    <h2 style="color:#08b7b3;font-size:16px;">
                                        EXTERNAL APPOINTMENTS IN BOTH LISTED AND NON-LISTED COMPANIES AS AT SEPTEMBER 2021
                                    </h2>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 pl-0" id="external-qualifications">

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-button-group" style="background: #dedede; padding:20px;">
                            <hr>
                            <div style="display:flex;justify-content:space-between">
                                <div class="socials">
                                    <span class="" style="margin-right: 20px;">Share</span>
                                    <span class="fa-brands fa-facebook-square"></span>&nbsp;
                                    <span class="fa-brands fa-linkedin"></span>&nbsp;
                                    <span class="fa fa-envelope"></span>
                                </div>
                                <div style="cursor: pointer" onclick="generatePdf('mgt-info')">
                                    <i class="fas fa-download button-actions" ></i>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section id="profile">
        <div class="profile">
            <div class="modal fade" id="managementInfo" tabindex="-1" aria-labelledby="mgtInfo" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-contents">
                        <div class="modal-header">
                            <img src="" alt="" id="modal-img" width="40px" height="40px"
                                style="object-fit: cover" />
                            <h5 class="modal-title" id="mgtName" class="text-dark"></h5>
                            <button type="button" class="closeModal" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <p class="text-justify" id="mgtDesc"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>




    <script>
        let currentShowingSlide = 0;
        const intervalTime = 20000;
        let autoSlideInterval;

        function showSlide(index) {
            const slides = document.querySelector('.my-slides');
            const totalSlides = document.querySelectorAll('.my-slide').length;

            if (index >= totalSlides) {
                currentShowingSlide = 0;
            } else if (index < 0) {
                currentShowingSlide = totalSlides - 1;
            } else {
                currentShowingSlide = index;
            }

            slides.style.transform = `translateX(-${currentShowingSlide * 100}%)`;
        }

        function changeSlide(direction) {
            showSlide(currentShowingSlide + direction);
        }


        function startAutoSlide() {
            autoSlideInterval = setInterval(() => {
                changeSlide(1);
            }, intervalTime);
        }

        function stopAutoSlide() {
            clearInterval(autoSlideInterval);
        }

        showSlide(currentShowingSlide);
        startAutoSlide();

        const slider = document.querySelector('.my-slider');
        slider.addEventListener('mouseover', stopAutoSlide);
        slider.addEventListener('mouseout', startAutoSlide);


        function showInfoModal(director) {
            tpj("#name").text(director.name);
            tpj("#position").text(director.position);
            tpj("#description").text(director.description);
            tpj("#imageId").attr('src', director.image);
            tpj("#skills").text(director.skills);
            tpj("#qualifications").empty();
            tpj("#core-competence").empty();
            tpj("#external-qualifications").empty();

            if (director.qualifications && Array.isArray(director.qualifications)) {
                director.qualifications.forEach(function(qualification) {
                    tpj("#qualifications").append(`<li>${qualification}</li>`);
                });
            }

            if (director.core_competence && Array.isArray(director.core_competence)) {
                director.core_competence.forEach(function(competence) {
                    tpj("#core-competence").append(`<p style="color: #0a1f2e;">${competence}</p>`);
                });
            }

            if (director.external_appointments && Array.isArray(director.external_appointments)) {
                director.external_appointments.forEach(function(appointment) {
                    tpj("#external-qualifications").append(`<p style="color: #0a1f2e;">${appointment}</p>`);
                });
            }

            tpj("#more-info").modal('show');

        }


        function showManagementInfo(management) {
            tpj("#modal-img").attr("src", management.image);
            tpj("#mgtName").text(management.name);
            tpj("#mgtDesc").text(management.description);

            tpj("#managementInfo").modal('show');

        }


        function generatePdf(id) {
            const element = document.getElementById(id).innerHTML;
            const styles = `
                 section .profilepopup {
                    max-width: 1000px;
                    margin: 20px;
                    width: 100%;
                    margin: auto;
                    display: block;
                }

                section .profilepopup .row {
                    padding: 20px;
                    background: #dedede;
                    position: relative;
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0%;
                    padding: 20px;
                    /* align-items: center; */
                }

                section .profilepopup .row .col-md-4 {
                    margin: 0%;
                    padding: 20px;
                }

                section .profilepopup .row .col-md-4 .image {
                    width: 100%;
                    background: #8d8d8d;
                }

                section .profilepopup .row .col-md-4 .image img {
                    width: 100%;
                    height: auto;
                }

                section .profilepopup .row h2 {
                    font-size: 16px;
                    font-family: 'Mukta', sans-serif;
                    color: #08b7b3 !important;
                    background: none;
                    margin: 0%;
                    margin-bottom: 5px;
                }

                section .profilepopup .row p {
                    color: #0a1f2e;
                    background: none;
                    font-size: 14px;
                    font-family: 'Mukta', sans-serif;
                }

                section .profilepopup .row .col-md-8 {
                    padding: 20px;
                    margin-bottom: 20px;
                }

                h4#name {
                    margin-bottom: 12px;
                }

                #name,
                #position{
                    padding:0px;
                }


                #name,
                #position,#skills,#qualifications, #core-competence, #external-qualifications {
                    color: #0a1f2e;
                }

                h6#description {
                    font-weight: 100;
                    color: #0a1f2e;
                    width: 80%;
                    padding: 0px;
                    margin: 0px;
                }

                section .profilepopup .row .col-md-12 ul {
                    padding: 20px;
                }

                section .profilepopup .row .col-md-12 ul li {
                    font-family: 'Mukta', sans-serif;
                    margin: 0%;
                    padding: 0%;
                    color: #0a1f2e;
                }

                section .profilepopup .row .col-md-12 {
                    margin: 0px;
                    padding-left: 20px;
                }

                section .profilepopup .row .col-md-6 {
                    font-family: 'Mukta', sans-serif;
                    padding-top: 0px;
                    color: #fff;
                }

                .profile {
                    text-align: center;
                    font-size: 12px;
                    padding: 0px;
                    margin: 0px;
                    padding-top: 50px;
                }

                .profile .row {
                    max-width: 1250px;
                    padding: 0%;
                    margin: 0%;
                    margin: auto;
                }

                .profile .row .col-lg-4 {
                    height: 320px;
                    padding: 20px;
                }

                .modal-button-group {
                    margin: 20px 0;
                    color: #0a1f2e;
                }

                .modal-button-group .socials {}

                .modal-button-group .fa-facebook-square,
                .modal-button-group .fa-linkedin,
                .modal-button-group .fa-envelope {
                    color: #0a1f2e;
                    font-size: 30px;
                }

                .modal-button-group .button-actions {
                    background-color: #08b7b3;
                    padding: 10px;
                    border-radius: 5px;
                }

                .profile h5 {
                    color: #08b7b3 !important;
                }

                .closeModal {
                    background-color: #0a1f2e;
                    color: #fff;
                    border: none;
                    padding: 8px;
                }
                        `;


            const fileName = tpj("#name").text();

            const opt = {
                margin: 1,
                filename: `${fileName}.pdf`,
                image: {
                    type: 'jpeg',
                    quality: 0.95
                },
                html2canvas: {
                    scale: 2
                },
                jsPDF: {
                    unit: 'in',
                    format: 'a4',
                    orientation: 'portrait'
                },
            };

            html2pdf().set(opt).from(element).save();
        }
    </script>

@stop