@extends('layouts.site')

@section('content')
    @include('frontend.common.breadcrumb')

    <section class="governing-body-section py-5" x-data="{ openModal: false, member: {} }">
        <div class="container">
            {{-- <div class="mb-5">
            <div class="d-flex align-items-center gap-3 mb-3">
                <span class="exec-header-tag fs-4">Chairman & Vice Chairman</span>
                <div class="exec-header-rule"></div>
            </div>
        </div> --}}

            @if ($ourTeams->isNotEmpty())
                <div class="members-grid-wrap">
                    @foreach ($ourTeams as $member)
                        <div class="member-card">
                            {{-- Photo --}}
                            <div class="member-photo">
                                <img src="{{ asset('storage/' . $member->image) }}" alt="{{ $member->name }}">
                                <span class="member-serial">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                            </div>

                            {{-- Info --}}
                            <div class="member-info">
                                <span class="member-designation">{{ $member->designation }}</span>
                                <h4>{{ $member->name }}</h4>
                                <div class="member-divider"></div>

                                {{-- Short Bio --}}
                                <p class="member-bio text-justify">
                                    {{ Str::limit($member->message, 120) }}
                                </p>

                                @if (trim(strip_tags($member->message ?? '')) !== '')
                                    <div class="d-flex flex-wrap gap-2 justify-content-center align-items-center mt-3">
                                        {{-- Read More Button --}}

                                        <button type="button" class="btn btn-sm btn-success rounded-pill px-3 me-2"
                                            @click="openModal = true; member = @js([
                                                    'name' => $member->name,
                                                    'designation' => $member->designation,
                                                    'bio' => $member->message,
                                                    'image' => asset('storage/' . $member->image),
                                                    'email' => $member->email,
                                                    'linkedin' => $member->linkedin,
                                                    'twitter' => $member->twitter,
                                                    'instagram' => $member->instagram,
                                                    'facebook' => $member->facebook,
                                                ])">
                                            Read More
                                        </button>

                                        @if ($member->linkedin)
                                            <a href="{{ $member->linkedin }}" class="contact-link"><i
                                                    class="bi bi-linkedin"></i></a>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="col-12 text-center py-5">
                    <i class="bi bi-people fs-1 text-secondary"></i>
                    <h4 class="mt-3">No Team Members Found</h4>
                    <p class="text-muted">There are no team members available at the moment.</p>
                </div>
            @endif
        </div>

        {{-- --- MODAL SECTION --- --}}
        <div class="modal-backdrop-custom" x-show="openModal" x-transition.opacity @click.away="openModal = false"
            style="display: none;">
            <div class="modal-dialog-custom" x-show="openModal" x-transition.scale.90>
                <div class="modal-content-custom">
                    <button class="close-btn" @click="openModal = false">&times;</button>
                    <div class="row g-0 flex-column flex-md-row">
                        <div class="col-md-5">
                            <img :src="member.image" class="img-fluid modal-img" alt="">
                        </div>
                        <div class="col-md-7">
                            <div class="p-4 modal-content-body">
                                <span class="text-success fw-bold small text-uppercase" x-text="member.designation"></span>
                                <h3 class="fw-bold mb-2 h4" x-text="member.name"></h3>
                                <div class="bg-success mb-3" style="height: 3px; width: 40px;"></div>

                                <div class="modal-bio-text text-justify lh-lg" x-text="member.bio"></div>

                                <div class="mt-4 d-flex flex-wrap gap-2">
                                    <template x-if="member.facebook">
                                        <a :href="member.facebook" target="_blank"
                                            class="btn btn-outline-success rounded-pill px-4 btn-sm">
                                            <i class="bi bi-facebook me-2"></i>Facebook
                                        </a>
                                    </template>
                                    <template x-if="member.linkedin">
                                        <a :href="member.linkedin" target="_blank"
                                            class="btn btn-outline-primary rounded-pill px-4 btn-sm">
                                            <i class="bi bi-linkedin me-2"></i>LinkedIn
                                        </a>
                                    </template>
                                    <template x-if="member.twitter">
                                        <a :href="member.twitter" target="_blank"
                                            class="btn btn-outline-primary rounded-pill px-4 btn-sm">
                                            <i class="bi bi-twitter-x me-2"></i>Twitter
                                        </a>
                                    </template>
                                    <template x-if="member.instagram">
                                        <a :href="member.instagram" target="_blank"
                                            class="btn btn-outline-primary rounded-pill px-4 btn-sm">
                                            <i class="bi bi-instagram me-2"></i>Instagram
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        /* Modal Background Overlay */
        .modal-backdrop-custom {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
            padding: 20px;
        }

        /* Modal Container */
        /* .modal-dialog-custom {
            max-width: 950px;
            width: 100%;
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            margin-top: 50px;
        } */
        .modal-dialog-custom {
            max-width: 1000px;
            width: 100%;
            max-height: 90vh;
            /* 👈 main fix */
            overflow-y: auto;
            /* 👈 scroll inside modal */
            background: #fff;
            border-radius: 20px;
            position: relative;
        }

        .modal-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            min-height: 350px;
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            background: #f8fafc;
            border: none;
            font-size: 30px;
            cursor: pointer;
            color: #64748b;
            z-index: 10;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.3s;
        }

        .close-btn:hover {
            background: #fee2e2;
            color: #dc2626;
        }

        .modal-bio-text {
            font-size: 15px;
            color: #475569;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 10px;
        }

        /* Scrollbar for long bio */
        .modal-bio-text::-webkit-scrollbar {
            width: 4px;
        }

        .modal-bio-text::-webkit-scrollbar-thumb {
            background: #198754;
            border-radius: 10px;
        }

        .text-justify {
            text-align: justify;
            text-justify: inter-word;
        }

        @media (max-width: 767px) {
            .modal-img {
                width: 100%;
                height: auto;
                max-height: 300px;
                /* Mobile-e image khub boro hobe na */
                object-fit: cover;
                border-bottom: 3px solid #198754;
            }

            .modal-dialog-custom {
                margin-top: 10px;
                /* Close button-er niche jayga rakhar jonno */
            }
        }
    </style>

@endsection