@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>KENYA</div>
                                        <ul>
                                            <li>
                                                <div class="pulse-two">
                                                    <a href="https://africanoriginals.com/" target="_blank">
                                                        <b>AFRICAN ORIGINALS</b>
                                                    </a>
                                                </div>
                                                <ul>
                                                    <li>
                                                        <div><b>Local activities</b></div>
                                                        <ul>
                                                            <li>
                                                                <div>Bottling Plant for Spirits</div>
                                                            </li>

                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                    </div>
                </div>
            </div>
        </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">
                                    Phoenix Bev
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseTwenty" class="accordion-collapse collapse show"
                                aria-labelledby="panelsStayOpen-headingTwenty"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p> 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;">Learn more</a>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item white-accordion">
                            <h2 class="accordion-header" id="panelsStayOpen-headingEleven">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#panelsStayOpen-collapseEleven" aria-expanded="false"
                                    aria-controls="panelsStayOpen-collapseEleven">
                                    Edena
                                </button>
                            </h2>
                            <div id="panelsStayOpen-collapseEleven" class="accordion-collapse collapse"
                                aria-labelledby="panelsStayOpen-headingEleven"
                                data-bs-parent="#accordionPanelsStayOpenExample">
                                <div class="accordion-body">
                                    <p> 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-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>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">Learn more</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-collapseEleven') {
                document.querySelector('.operation-container').classList.add('bg-riviere-noire');
                document.querySelector('.operation-container').classList.remove('bg-phoenix',
                    'bg-grand-baie', 'bg-tribeca-mall');
            }
        });


        const accordions = document.querySelectorAll('.accordion-button');

        accordions.forEach(button => {
            button.addEventListener('click', function() {
                const collapseElement = this.nextElementSibling;

                if (collapseElement.style.maxHeight) {
                    // Accordion is collapsing
                    collapseElement.style.maxHeight = null;
                } else {
                    // Accordion is expanding
                    const activeCollapse = document.querySelector('.accordion-collapse.show');
                    if (activeCollapse && activeCollapse !== collapseElement) {
                        activeCollapse.style.maxHeight = null; // Collapse other panels
                    }
                    collapseElement.style.maxHeight = collapseElement.scrollHeight + 'px';
                }
            });
        });
    });
</script>