@extends("layouts.master")
@section("title", "Board of Management")

@push("styles")
@endpush

@section("content")

    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('assets/img/inner/breadcrumb.jpg');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Board of Management</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li>
                        <a href="index.html">
                            Home
                        </a>
                    </li>
                    <li>
                        <i class="fa-solid fa-chevron-right"></i>
                    </li>
                    <li>
                        Board of Management
                    </li>
                </ul>
            </div>
        </div>
    </div>

    {{-- ============================================================
         Staff Grid (Packery layout) — Board of Management
         Inspired by https://codepen.io/max1128/pen/KgzMGr
         Restyled in brand navy (#293565) / orange (#FFA729).
         ============================================================ --}}
    <style>
        .bgi-staffgrid-section {
            padding: 100px 0;
            background: #f7f9fc;
        }

        .bgi-staffgrid {
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
        }

        .bgi-staffgrid:after {
            content: "";
            display: block;
            clear: both;
        }

        .bgi-staffgrid__item {
            position: relative;
            float: left;
            width: 100%;
            height: 275px;
            box-sizing: border-box;
            overflow: hidden;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top center;
            border: 2px solid #293565;
            text-decoration: none;
        }

        .bgi-staffgrid__item:nth-of-type(odd) {
            height: 330px;
        }

        .bgi-staffgrid__item:nth-of-type(3n + 5) {
            height: 247.5px;
        }

        .bgi-staffgrid__item:hover .bgi-staffgrid__item-title {
            transition: 0.5s;
            bottom: 0;
        }

        @media (min-width: 320px) {
            .bgi-staffgrid__item {
                width: 50%;
            }
        }

        @media (min-width: 768px) {
            .bgi-staffgrid__item {
                width: 25%;
            }
        }

        .bgi-staffgrid__item-title {
            transition: 0.5s;
            position: absolute;
            right: 0;
            bottom: -100%;
            left: 0;
            padding: 12px 10px;
            margin: 0;
            color: #ffffff;
            font-size: 14.5px;
            font-weight: 600;
            line-height: 1.3;
            text-align: center;
            border-top: 5px solid #FFA729;
            background-color: #293565;
        }

        .bgi-staffgrid__item-role {
            display: block;
            font-size: 12px;
            font-weight: 500;
            margin-top: 4px;
            color: #FFA729;
            letter-spacing: 0.4px;
        }

        .bgi-staffgrid__item-socials {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 8px;
        }

        .bgi-staffgrid__item-socials a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #ffffff;
            font-size: 12px;
            text-decoration: none;
            transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
        }

        .bgi-staffgrid__item-socials a:hover {
            background: #FFA729;
            color: #293565;
            transform: translateY(-2px);
        }

        .bgi-staffgrid__descriptor {
            position: absolute;
            left: 0;
            top: 275px;
            width: 100%;
            box-sizing: border-box;
            padding: 32px;
            color: #ffffff;
            background: #293565;
            border: 2px solid #293565;
            box-shadow: 0 12px 30px rgba(41, 53, 101, 0.18);
        }

        .bgi-staffgrid__descriptor h2 {
            color: #ffffff;
            font-size: 28px;
            font-weight: 700;
            margin: 0 0 12px;
            line-height: 1.2;
        }

        .bgi-staffgrid__descriptor h2 span {
            color: #FFA729;
        }

        .bgi-staffgrid__descriptor p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 14.5px;
            line-height: 1.7;
            margin: 0 0 10px;
        }

        .bgi-staffgrid__descriptor p:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 768px) {
            .bgi-staffgrid__descriptor {
                left: 25%;
                width: 50%;
            }
        }

        @media (max-width: 767px) {
            .bgi-staffgrid__descriptor {
                position: relative;
                left: 0;
                top: 0;
                margin-bottom: 24px;
            }
        }

        .bgi-staffgrid-heading {
            text-align: center;
            margin-bottom: 50px;
        }

        .bgi-staffgrid-heading h6 {
            color: #FFA729;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .bgi-staffgrid-heading h2 {
            color: #293565;
            font-weight: 700;
        }
    </style>

    <section class="bgi-staffgrid-section">
        <div class="container">
            <div class="bgi-staffgrid-heading">
                <h6 class="wow fadeInUp">Our Leadership</h6>
                <h2 class="wow fadeInUp" data-wow-delay=".2s">The Current Board of Management</h2>
            </div>

            <div class="bgi-staffgrid">
                <div class="bgi-staffgrid__descriptor">
                    <p>
                        Our Board of Management brings together senior Chartered Corporate
                        Secretaries who steward the strategic direction of the Institute and
                        uphold the highest standards of corporate governance in Sri Lanka.
                    </p>
                    <p>
                        Together, they champion professional development, ethics, and best
                        practice across the corporate community, guiding ICCSSL's mission
                        to shape the next generation of governance professionals.
                    </p>
                </div>

                @php
                    // Fallback static list (used if DB data is not available yet).
                    if (!isset($boardMembers) || collect($boardMembers)->isEmpty()) {
                        $boardMembers = collect([
                            [
                                "name" => "Mr. Zafraz Lameer ACCS",
                                "role" => "President",
                                "photo" => "board-01-zafraz-lameer.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Geredene Suares ACIS, ACCS",
                                "role" => "Deputy President",
                                "photo" => "board-02-geredene-suares.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Anuri Nandiweera ACCS",
                                "role" => "Vice President",
                                "photo" => "board-03-anuri-nandiweera.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Heshani Fernando ACCS",
                                "role" => "Secretary",
                                "photo" => "board-04-heshani-fernando.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Minoli Rodrigo ACCS",
                                "role" => "Assistant Secretary",
                                "photo" => "board-05-minoli-rodrigo.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Mr. Udara N Mutukumara ACCS",
                                "role" => "Treasurer",
                                "photo" => "board-06-udara-n-mutukumara.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Priyadarshana Wettasinghe ACCS",
                                "role" => "Assistant Treasurer",
                                "photo" => "board-07-priyadarshana-wettasinghe.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Nisha Najumudeen ACIS, ACCS",
                                "role" => "Member",
                                "photo" => "board-08-nisha-najumudeen.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Hemali Ellawala ACCS",
                                "role" => "Member",
                                "photo" => "board-09-hemali-ellawala.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Mr. S. Sudarshan ACIS, ACCS",
                                "role" => "Member",
                                "photo" => "board-10-s-sudarshan.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Helen De Silva ACIS, ACCS",
                                "role" => "Member",
                                "photo" => "board-11-helen-de-silva.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ],
                            [
                                "name" => "Ms. Arosha Berugoda ACCS",
                                "role" => "Member",
                                "photo" => "board-12-arosha-berugoda.jpg",
                                "facebook" => null,
                                "linkedin" => null,
                                "email" => null
                            ]
                        ]);
                    }
                @endphp

                @foreach ($boardMembers as $member)
                    @php
                        $name = is_array($member) ? $member["name"] ?? "" : $member->name ?? "";
                        $role = is_array($member) ? $member["role"] ?? "" : $member->role ?? "";
                        $photo = is_array($member) ? $member["photo"] ?? "" : $member->photo ?? "";
                        $facebook = is_array($member) ? $member["facebook"] ?? null : $member->facebook ?? null;
                        $linkedin = is_array($member) ? $member["linkedin"] ?? null : $member->linkedin ?? null;
                        $email = is_array($member) ? $member["email"] ?? null : $member->email ?? null;

                        // Photo can be either a filename (legacy seed) or a public-disk path (Filament upload).
                        if ($photo && \Illuminate\Support\Str::startsWith($photo, ["http://", "https://", "/"])) {
                            $photoUrl = $photo;
                        } elseif ($photo && \Illuminate\Support\Str::contains($photo, "/")) {
                            $photoUrl = asset("storage/" . ltrim($photo, "/"));
                        } else {
                            $photoUrl = asset("assets/img/home-1/team/" . $photo);
                        }
                    @endphp

                    <a class="bgi-staffgrid__item" href="javascript:void(0)"
                        style="background-image: url('{{ $photoUrl }}')">
                        <h3 class="bgi-staffgrid__item-title">
                            {{ $name }}
                            @if ($role)
                                <span class="bgi-staffgrid__item-role">{{ $role }}</span>
                            @endif

                            @if ($facebook || $linkedin || $email)
                                <span class="bgi-staffgrid__item-socials">
                                    @if ($facebook)
                                        <a href="{{ $facebook }}" target="_blank" rel="noopener" aria-label="Facebook"
                                            onclick="event.stopPropagation();">
                                            <i class="fa-brands fa-facebook-f"></i>
                                        </a>
                                    @endif
                                    @if ($linkedin)
                                        <a href="{{ $linkedin }}" target="_blank" rel="noopener" aria-label="LinkedIn"
                                            onclick="event.stopPropagation();">
                                            <i class="fa-brands fa-linkedin-in"></i>
                                        </a>
                                    @endif
                                    @if ($email)
                                        <a href="mailto:{{ $email }}" aria-label="Email"
                                            onclick="event.stopPropagation();">
                                            <i class="fa-solid fa-envelope"></i>
                                        </a>
                                    @endif
                                </span>
                            @endif
                        </h3>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Packery + imagesLoaded for the staff grid --}}
    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
    <script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
    <script>
        (function() {
            function initStaffGrid() {
                var grid = document.querySelector('.bgi-staffgrid');
                if (!grid || typeof Packery === 'undefined') return;

                var pckry = new Packery(grid, {
                    itemSelector: '.bgi-staffgrid__item',
                    stamp: '.bgi-staffgrid__descriptor',
                    percentPosition: true,
                    transitionDuration: '0.4s'
                });

                if (typeof imagesLoaded !== 'undefined') {
                    imagesLoaded(grid, function() {
                        pckry.layout();
                    });
                }

                window.addEventListener('resize', function() {
                    pckry.layout();
                });
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initStaffGrid);
            } else {
                initStaffGrid();
            }
        })();
    </script>
<!-- End of Board of Management Section -->


@endsection