@include('frontend.layouts.master')
@php
    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443 ? 'https://' : 'http://';
    $CurPageURL = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    $url = $CurPageURL;
    // dd($_SERVER['REQUEST_URI']);
    // dd($url);
    
    $pageBanner = \App\Models\PageSlider::banner($url);
    
@endphp
<!-- ... banner start ... -->
@if (!empty($pageBanner))
    <div class="c-banner hero_management"
        style="background-image:url({{ $pageBanner ? $pageBanner->page_banner : '/frontend/assets/images/team_bg.png' }});">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">
                    <div class="c-banner-content">
                        @if ($pageBanner->top_heading)
                            <div class="d-flex align-items-center">
                                <div class="line"></div>
                                <span class="text-white hero_subtitle ps-2">{{ $pageBanner->top_heading }}</span>
                            </div>
                        @endif
                        <h1 class="c-banner-title fw-light f-xl raleway-font">
                            {{ $pageBanner->title }}
                        </h1>
                        @if ($pageBanner->description)
                            <p class="text-white w-50">
                                {{ $pageBanner->description }}
                            </p>
                        @endif
                        <nav class="mt-2" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">
                                    {{ $pageBanner->title }}
                                </li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
<!-- ... banner end ... -->
<!-- ... main start ... -->
<main class="main">
    <!---... main section start here-->
    @if (!empty($members) && $members->count() > 0)
        <div class="section">
            <div class="container">
                <div class="container-fluid">
                    <div class="row">
                        @foreach ($members as $key => $member)
                            <div class="col-lg-4 pb-4">
                                <div class="common_shawdow_1" data-bs-toggle="modal"
                                    data-bs-target="#exampleModal_{{ $key }}">
                                    <div class="commom_img">
                                        <img src="{{ asset($member->profile_img) }}">
                                    </div>
                                    <div class="commom_text pt-3 text-center">
                                        <h4 class="fw-bold fs-5 pb-2">{{ $member->name }}</h4>
                                        <h6 class="common_color">{{ $member->designation }}</h6>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        {{-- <div class="section">
            <div class="container">
                <div class="container-fluid">
                    <div class="row">
                        @foreach ($members as $key => $member)
                            <div class="col-lg-4 pb-4">
                                <div class="user_rapper common_shawdow"
                                    style="background-image:url({{ asset($member->profile_img) }}),linear-gradient(black, white); min-height: auto;">
                                    <div class="card_outer_content">
                                        <div class="emptybox"></div>
                                        <span class="hero_subtitle_box box_margin ps-5">{{ $member->designation }}
                                        </span>
                                        <h1 class="card_tittle pt-2 pb-2">
                                            {{ $member->name }} <br />
                                        </h1>
                                        <p class="hero_subtitle_ pb-3 two-line-text"
                                            id="description_{{ $key }}">
                                            {{ $member->description }}
                                        </p>
                                        <div class="d-flex">
                                            <a data-parent="description_{{ $key }}"
                                                class="new_box_btn card_toggle_btn">Read more</a><i
                                                class="bi bi-caret-right-fill common_color"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div> --}}
    @endif
    <!---... main section end here-->

    @include('frontend.layouts.footerbar')

    <script>
        const btns = document.querySelectorAll(".card_toggle_btn")
        btns.forEach(element => {
            element.addEventListener("click", () => {
                const elm = element.dataset.parent
                const findElement = document.querySelector(`#${elm}`)
                findElement.classList.toggle("two-line-text")
                element.textContent = element.textContent === "Read more" ? "Read Less" : "Read more"
            })
        });
    </script>
    @foreach ($members as $key => $member)
        <div class="modal fade" id="exampleModal_{{ $key }}" tabindex="-1"
            aria-labelledby="exampleModalLabel_{{ $key }}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="p-3">
                        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="img">
                                    <img src="{{ asset($member->profile_img) }}" width="100%">
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="commom_text ">
                                    <h2 class="fw-bold fs-5 pb-2">{{ $member->name }}
                                    </h2>
                                    <h6 class="common_color">{{ $member->designation }}
                                    </h6>
                                    <p class="hero_subtitle_ m-0 pt-2">{{ $member->description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach