@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.nav.about') }}</h1>
        </div>
    </section>

    @if ($about)
        <section class="vs-about-wrapper space">
            <div class="container">
                <div class="row flex-row-reverse align-items-center">
                    <div class="col-lg-6 mb-40 mb-lg-0">
                        <img src="{{ $about->secondary_image_path }}" loading="lazy" alt="{{ $about->title }}" class="w-100 about-img1">
                    </div>
                    <div class="col-lg-6 align-self-center">
                        <div class="about-content mb-2">
                            <span class="sec-subtitle text-theme1 h3 mb-2 mb-sm-0">{{ trans('site.nav.about') }}</span>
                            <h2 class="h1 mb-3">{{ $about->title }}</h2>
                            <div class="mb-4">{!! $about->description !!}</div>
                            @if ($about->details)
                                <div class="mb-4">{!! $about->details !!}</div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if ($settings)
        <hr class="custom-divider">
        <section class="vs-accordion-wrapper space-top space-md-bottom">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center">
                        <div class="section-title">
                            <span class="h3 text-theme1 sec-subtitle">{{ trans('site.nav.about') }}</span>
                            <h2 class="h1">{{ trans('site.about.vision_mission_title') }}</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @if ($settings->vision)
                        <div class="col-md-4">
                            <div class="contact__two-single-info">
                                <div class="contact__two-single-info-content">
                                    <h4>{{ trans('site.about.our_vision') }}</h4>
                                    <div class="vision-pargraph">
                                        <div class="read-more-text"><p>{{ $settings->vision }}</p></div>
                                        <button type="button" class="read-more-btn">{{ trans('site.about.read_more') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($settings->mission)
                        <div class="col-md-4">
                            <div class="contact__two-single-info">
                                <div class="contact__two-single-info-content">
                                    <h4>{{ trans('site.about.our_mission') }}</h4>
                                    <div class="vision-pargraph">
                                        <div class="read-more-text"><p>{{ $settings->mission }}</p></div>
                                        <button type="button" class="read-more-btn">{{ trans('site.about.read_more') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    @if ($settings->goals)
                        <div class="col-md-4">
                            <div class="contact__two-single-info">
                                <div class="contact__two-single-info-content">
                                    <h4>{{ trans('site.about.our_goals') }}</h4>
                                    <div class="vision-pargraph">
                                        <div class="read-more-text"><p>{{ $settings->goals }}</p></div>
                                        <button type="button" class="read-more-btn">{{ trans('site.about.read_more') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    @endif

    @if ($statistics->isNotEmpty())
        <hr class="custom-divider">
        <section class="vs-skill-wrapper pb-100">
            <div class="container">
                <div class="skill-wrap1 bg-white">
                    <div class="row justify-content-center justify-content-lg-between">
                        @php($statisticIcons = ['flaticon-discuss', 'flaticon-medical-equipment', 'flaticon-healthcare', 'fas fa-hospital-alt'])
                        @foreach ($statistics as $statistic)
                            <div class="col-md-3 col-6 mb-30">
                                <div class="d-xl-flex text-center text-xl-start skill-box">
                                    <span class="ripple-icon hover-style2 align-self-start mb-20 mb-xl-0 mr-20">
                                        @if ($statistic->icon_url)
                                            <img src="{{ $statistic->icon_url }}" alt="{{ $statistic->title }}" width="44" height="44" style="object-fit: contain" loading="lazy">
                                        @else
                                            <i class="{{ $statisticIcons[$loop->index % count($statisticIcons)] }}"></i>
                                        @endif
                                    </span>
                                    <div class="media-body">
                                        <h2 class="mt-n2 mb-0 text-theme1">{{ $statistic->number }}</h2>
                                        <p class="text-title fs-md fw-medium mt-1 mb-2">{{ $statistic->title }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

    <hr class="custom-divider">

    <!-- Why Choose Us -->
    @php($brandName = $siteData?->name ?? 'BST Clinics')
    <section class="vs-accordion-wrapper space-top space-md-bottom wow fadeInUp" data-wow-delay="0.3s">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7 text-center">
                    <h2 class="h1 mb-3">{!! str_replace(e($brandName), '<span class="text-theme1">' . e($brandName) . '</span>', e(trans('site.home.why_choose_title', ['name' => $brandName]))) !!}</h2>
                    <p class="mb-5 pch-fnt">{{ trans('site.home.why_choose_text', ['name' => $brandName]) }}</p>
                </div>
            </div>
            <div class="about-content">
                <div class="row pt-3">
                    @foreach ([
                        ['icon' => 'premium-care.png', 'key' => 'premium_care'],
                        ['icon' => 'digital.png', 'key' => 'digital_platform'],
                        ['icon' => 'care.png', 'key' => 'multi_specialty'],
                        ['icon' => 'location.png', 'key' => 'strategic_locations'],
                        ['icon' => 'hospital.png', 'key' => 'future_vision'],
                        ['icon' => 'users.png', 'key' => 'collaborative_physicians'],
                    ] as $feature)
                        <div class="col-sm-6">
                            <div class="d-flex mb-25">
                                <span class="text-theme1 mr-20"><img src="{{ asset('assets_web/img/'.$feature['icon']) }}" class="imgbac" alt="" loading="lazy"></span>
                                <div class="media-body">
                                    <h3 class="h4 mb-2 pb-1">{{ trans('site.why_choose.'.$feature['key'].'_title') }}</h3>
                                    <p class="mb-0 fs-xs">{{ trans('site.why_choose.'.$feature['key'].'_text') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

@endsection

@section('js')
    <script>
        document.querySelectorAll('.vision-pargraph').forEach(function (box) {
            var text = box.querySelector('.read-more-text');
            var button = box.querySelector('.read-more-btn');
            // Short texts fit without clamping, so they need no button.
            if (text.scrollHeight <= text.clientHeight + 2) {
                button.remove();
                return;
            }
            button.addEventListener('click', function () {
                var expanded = text.classList.toggle('expanded');
                button.textContent = expanded ? @json(trans('site.about.read_less')) : @json(trans('site.about.read_more'));
            });
        });
    </script>
@endsection