@extends('frontend.layouts.app')
@section('title', 'Expertise')
@section('content')
<section class="banner-sec inner-banner">
    <img src="{{ !empty($innerpage_detail['banner_image']) ? 'storage/' . $innerpage_detail['banner_image'] : asset('frontend/images/area-prac-banner.jpg')}}" alt="">
    <div class="banner-content">
        <div class="container">
            <div class="banner-text">
                <h1>{{$innerpage_detail['banner_title']}}</h1>
                <ul class="brdcm">
                    <li>Home</li>
                    <li>Areas of Practice</li>
                </ul>
            </div>
        </div>
    </div>
</section>


<section class="area-of-prac common-padd area-of-prac-page ">
    <div class="partical">
        <img src="{{asset('frontend/images/partical3.png')}}" alt="">
    </div>
    @if ($expertise->isNotEmpty())
    <div class="container">
        <div class="content-box-top">
            <div class="left-head-sec center-heading">
                <h2>AREAS OF PRACTICE</h2>
            </div>
            <!-- <p>At our firm, we offer specialized legal services across a range of complex and evolving practice areas. From NRI tax advisory and estate matters to the enforcement of intellectual property rights, our team provides clear, strategic guidance tailored to each client’s needs. We combine deep domain expertise with a commitment to achieving the best outcomes.</p> -->
        </div>

        <div class="area-of-prac-wraper">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <div class="row">
                        @foreach ( $expertise as $e)
                        @php
                        $htmlContent = $e['description'];
                        $words = explode(' ', strip_tags($htmlContent)); // remove HTML tags for accurate count
                        $summary = implode(' ', array_slice($words, 0, 40));
                        $showReadMore = count($words) > 40;
                        @endphp
                        <div class="col-lg-4 col-md-6">
                            <div class="sngl-box">
                                <div class="content-box">
                                    <h4>{{ $e['name'] }}</h4>
                                    {!! $summary !!}
                                    @if ($showReadMore)
                                    ... <a href="javascript:void(0)"  onclick="showModal('{{ addslashes($e['name']) }}', '{{ addslashes($e['description']) }}')" class=" text-primary" ><strong>read more</strong></a>
                                    @endif
                                </div>
                                <div class="image-box">
                                    <div class="banner-iocn">
                                        <img src="{{ !empty($e['icon']) ? $e['icon'] : asset('backend/assets/img/icon_placeholder.svg') }}" alt="">
                                    </div>
                                    <div class="image-box-wraper">
                                        <img src="{{ !empty($e['bg_image']) ? 'storage/' . $e['bg_image'] : asset('backend/assets/img/image_placeholder.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>

                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
</section>






<section class="team-sec common-padd">
    <div class="partical">
        <img src="{{asset('frontend/images/partical3.png')}}" alt="" />
    </div>
    @if ($teams->isNotEmpty())
    <div class="container">
        <div class="left-head-sec center-heading">
            <h2>OUR TEAM</h2>
        </div>
        <div class="team-sec-wraper">
            <div class="swiper team-slider">
                <div class="swiper-wrapper">
                    @foreach ( $teams as $member)
                    <div class="swiper-slide">
                        <div class="flip-card">
                            <div class="flip-card-inner">
                                <!-- Front Side -->
                                <div class="flip-card-front">
                                    <div class="sngl-box">
                                        <div class="image-box-content">
                                            <div class="image-box">
                                                <img src="{{!empty($member['image']) ? 'storage/' .$member['image']  : asset('frontend/images/placeholder.png')}}" alt="" />
                                                <!-- <div class="media-team">
                                                    <ul>
                                                        <li>
                                                            <a href=""><img src="{{asset('frontend/images/media1.svg')}}" alt="" /></a>
                                                        </li>
                                                        <li>
                                                            <a href=""><img src="{{asset('frontend/images/media2.svg')}}" alt="" /></a>
                                                        </li>
                                                        <li>
                                                            <a href=""><img src="{{asset('frontend/images/media3.svg')}}" alt="" /></a>
                                                        </li>
                                                    </ul>
                                                </div> -->
                                            </div>
                                            <div class="content-box">
                                                <h4>{{$member['name']}}</h4>
                                                <h6>{{$member['designation']}}</h6>
                                            </div>
                                        </div>
                                        <!-- <div class="btm-sec">
                                            <a href="" class="linebtn">
                                                Read More
                                                <span><img src="{{asset('frontend/images/arrow-yellow.svg')}}" /></span>
                                            </a>
                                        </div> -->
                                    </div>
                                </div>

                                <!-- Back Side -->
                                <div class="flip-card-back">
                                    <div class="sngl-box">
                                        <div class="content-box">
                                            {!! $member['summary'] !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
                @if (count($teams) > 3)
                <div class="swiper-team-next"><img src="{{asset('frontend/images/slider-arrow-2.svg')}}" alt="" /></div>
                <div class="swiper-team-prev"><img src="{{asset('frontend/images/slider-arrow-1.svg')}}" alt="" /></div>
                @endif
            </div>
        </div>
    </div>

    @endif
</section>

<div class="area-prc-modal">
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-heading">ABCE</h4>
                    <div class="box-content">
                       sdmahsjida
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        function showModal(heading, description){
            console.log('yes');
            $('#exampleModal .modal-heading').html(heading);
            $('#exampleModal .box-content').html(description);
            $('#exampleModal').modal('show');
        }
    </script>

@endpush