@extends('layouts.app')
<link rel="stylesheet" href="{{ URL::asset('layout/tree.css') }}">
<style>
    .pbg-accordion .white-accordion .accordion-button {
        background-color: white !important;
        font-size: 16px !important;
        color: black !important;
        font-weight: bold;
        box-shadow: none;
        padding: 0px !important;
    }

    .pbg-accordion .white-accordion .accordion-body p {
        color: black !important;
        font-weight: 400;
        font-size: 12px;
    }

    .pbg-accordion .white-accordion .accordion-body {
        border: none !important;
        margin: auto;
        width: 90%;
    }

    .white-accordion {
        background-color: white !important;
        font-size: 16px !important;
        color: black !important;
        font-weight: bold;
        box-shadow: none;
    }

    .operation-parent-container {
        position: relative;
        width: 100%;
        height: 100vh;
        padding-top: 60px;
    }

    .operation-container {
        background: url('images/operations-structure/phoenixbev_operations.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .bg-phoenix {
        background-image: url('images/images/operations-structure/phoenixbev_operations.png');
    }

    .bg-grand-baie {
        background-image: url('images/operations-structure/african_original_hero-brands.jpg');
    }

    .bg-riviere-noire {
        background-image: url('images/operations-structure/edena_operations.png');
    }

</style>
@section('content')
    <div class="page-blue">
        <div class="about-banner contact-banner bg-image"
            style="background-image: url({{ asset('images/cover-banners/operations-structure.png') }});">
        </div>
        <div class="page-title-container">
            <h4>OUR GROUP OPERATIONS STRUCTURE</h4>
            <span class="text-primary">Group Dynamics and Cohesiveness.</span>
        </div>
    </div>

    <div class="container landing-section">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="center">
                    <h4> A Hub of Excellence </h4>
                    <p>Throughout our journey, our group has successfully explored avenues for growth and continues
                        to see abundant opportunities ahead. As a market leader in the FMCG industry, we are expanding our
                        activities and driving innovation.
                    </p>
                </div>

            </div>
        </div>


        <div class="container-fluid my-6">
            <div class="row">
                <div class="col-12 lg-center-item md-overflow" style="overflow-x: auto">
                    <div>
                        <ul class="tree vertical">
                            <li>
                                <div class="d-flex justify-content-center" style="width: 30%">
                                    <img class="img-fluid w-50" srcset="{{ URL::asset('images/pbg-logo.png') }}"
                                        src="{{ URL::asset('images/pbg-logo.png') }}" alt="Phoenix Beverages Group" />
                                </div>
                                <ul>
                                    <li>
                                        <div>MAURITIUS</div>
                                        <ul>
                                            <li>
                                                <div class="pulse-two">
                                                    <a href="https://www.phoenixbev.mu" target="_blank">
                                                        <b>PHOENIXBEV</b>
                                                    </a>
                                                </div>
                                                <ul>
                                                    <li class="cascade">
                                                        <div><b>Local activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Brewery plant</div>
                                                            </li>
                                                            <li>
                                                                <div>Carbonated soft drinks plant</div>
                                                            </li>
                                                            <li>
                                                                <div>Stills plant</div>
                                                            </li>
                                                            <li>
                                                                <div>Sales & Distribution</div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="cascade">
                                                        <div><b>Other activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Imports</div>
                                                            </li>
                                                            <li>
                                                                <div>Exports</div>
                                                            </li>
                                                            <li>
                                                                <div>Recycling</div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <div>
                                                    PHOENIXBEV<br />RODRIGUES
                                                </div>
                                                <ul>
                                                    <li>
                                                        <div>Sales & Distribution</div>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div>REUNION</div>
                                        <ul>
                                            <li>
                                                <div class="pulse-two">
                                                    <a href="http://www.edena.re" target="_blank">
                                                        <b>EDENA SA</b>
                                                    </a>
                                                </div>
                                                <ul>
                                                    <li class="cascade">
                                                        <div><b>Local activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Bottling plant for spring water</div>
                                                            </li>
                                                            <li>
                                                                <div>Carbonated soft drinks plant</div>
                                                            </li>
                                                            <li>
                                                                <div>Imports</div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <div><b>Other activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Exports</div>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <div>PHOENIX REUNION SARL</div>
                                                <ul>
                                                    <li>
                                                        <div>Sales & Distribution</div>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div>SEYCHELLES</div>
                                        <ul>
                                            <li>
                                                <div class="pulse-two">
                                                    <a href="https://www.seybrew.com/" target="_blank">
                                                        <b>SEYBREW</b>
                                                    </a>
                                                </div>
                                                <ul>
                                                    <li>
                                                        <div><b>Local activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Brewery and Carbonated soft drink plant</div>
                                                            </li>

                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <p>Phoenix Beverages Limited holds a 34.66% shareholding in African Original - Kenya.</p>
        </div>

    </div>


    <div class="operation-parent-container">
        <div class="p-6 operation-container">
            <div class="row">
                <div class="col-md-8"></div>
                <div class="col-md-4">
                    <div class="accordion pbg-accordion" id="accordionPanelsStayOpenExample" style="margin-top:120px;">
                        <div class="accordion-item white-accordion">
                            <h2 class="accordion-header" id="panelsStayOpen-headingTwenty">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseTwenty" aria-expanded="true"
                                    aria-controls="panelsStayOpen-collapseTwenty">
                                    PhoenixBev
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseTwenty" class="accordion-collapse collapse show"
                                aria-labelledby="panelsStayOpen-headingTwenty"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p style="text-align: justify"> In 1953, our journey began with the signing of a bottling agreement with The
                                        Coca-Cola Company, marking the start of a path
                                        filled with challenges that taught us to listen to our customers, adapt to changing
                                        environments, and turn setbacks into opportunities.
                                        </br>Over the years, we have forged strong partnerships and expanded our operations
                                        locally and regionally, enabling us to brew, produce,
                                        bottle, and distribute a diverse portfolio of alcoholic and non-alcoholic beverages.
                                    </p>
                                    <a href="{{ route('phoenix-bev') }}" class="fw-bold text-dark"
                                        style="font-size: 12px;">Explore</a>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item white-accordion">
                            <h2 class="accordion-header" id="panelsStayOpen-headingEdena">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseEdena" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseEdena">
                                    Edena
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseEdena" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingEdena"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p style="text-align: justify"> Phoenix Beverages Group acquired Edena SA in 2016, strengthening its presence in
                                        both the still and sparkling water sectors.
                                    </p>
                                    <a href="{{ route('edena') }}" class="fw-bold text-dark" style="font-size: 12px;">Learn
                                        more</a>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item white-accordion">
                            <h2 class="accordion-header" id="panelsStayOpen-headingSeyBrew">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseSeyBrew" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseSeyBrew">
                                    SeyBrew
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseSeyBrew" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingSeyBrew"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p style="text-align: justify">Seychelles Breweries is a Diageo company of 160 team members who proudly brew award-winning beer,
                                        bottle top-quality soft drinks, and distribute the world's leading portfolio of premium spirits.
                                    </p>
                                    <a href="#" class="fw-bold text-dark" style="font-size: 12px;">Learn
                                        more</a>
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item white-accordion">
                            <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseTwo">
                                    African Originals
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingTwo"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p style="text-align: justify">Kenyan Originals was born from a desire to bring the authentic flavour of Africa to the world.
                                        Our journey began in Kenya, blending traditional recipes with innovative techniques to craft
                                        beverages that honor our heritage and ignite originality.
                                    </p>
                                    <p class="fw-bold">Explore</p>
                                </div>
                            </div>
                        </div>

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


@stop

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var accordion = document.getElementById('accordionPanelsStayOpenExample');

        accordion.addEventListener('shown.bs.collapse', function(event) {
            var target = event.target;
            console.log(target);
            if (target.id === 'panelsStayOpen-collapseTwenty') {
                document.querySelector('.operation-container').classList.add('bg-phoenix');
                document.querySelector('.operation-container').classList.remove('bg-grand-baie',
                    'bg-riviere-noire', 'bg-tribeca-mall');
            } else if (target.id === 'panelsStayOpen-collapseTwo') {
                document.querySelector('.operation-container').classList.add('bg-grand-baie');
                document.querySelector('.operation-container').classList.remove('bg-phoenix',
                    'bg-riviere-noire', 'bg-tribeca-mall');
            } else if (target.id === 'panelsStayOpen-collapseEdena') {
                document.querySelector('.operation-container').classList.add('bg-riviere-noire');
                document.querySelector('.operation-container').classList.remove('bg-phoenix',
                    'bg-grand-baie', 'bg-tribeca-mall');
            } else if (target.id === 'panelsStayOpen-collapseSeyBrew') {
                document.querySelector('.operation-container').classList.add('bg-riviere-noire');
                document.querySelector('.operation-container').classList.remove('bg-phoenix',
                    'bg-grand-baie', 'bg-tribeca-mall');
            }
        });

        // Handle hidden.bs.collapse event to reset background when all accordions are closed
        accordion.addEventListener('hidden.bs.collapse', function(event) {
            var target = event.target;
            // Check if any accordion is still open
            const openAccordions = document.querySelectorAll('.accordion-collapse.show');
            if (openAccordions.length === 0) {
                // Reset to default background when all accordions are closed
                document.querySelector('.operation-container').classList.remove('bg-phoenix',
                    'bg-grand-baie', 'bg-riviere-noire', 'bg-tribeca-mall');
            }
        });
    });
</script>
gi