@extends('web.layouts.layout')

@section('content')

    <main class="mt-100">
        <!--about section-->
        <section class="about-section section_padding">
            <div class="container">
                <div class="row">
                    <div
                        class="col-md-6 col-sm-12 col-lg-6 col-xs-12 mt-5 wow clip-image-left"
                    >
                        <h2 class="fs-2 orange-color fw-bold" data-wow-delay="0.2s">
                            {{ $page->currentDescription->title ?? "" }}
                        </h2>
                        <div class="description-text">
                            {!! $page->currentDescription->description ?? "" !!}
                        </div>
                    </div>
                    <div class="col-md-6 col-sm-12 col-lg-6 col-xs-12 text-left">
                        <a class="about-img wow clip-image-right d-block" href="#">
                            <img
                                data-src="{{ getImage($page->image) }}"
                                src="{{ getImage($page->image) }}"
                                alt="{{ $title }}"
                                class="lazyload img_contain"
                            />
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- vision & mission-->
        <section class="vision-section section_padding">
            <div class="container">
                <div class="row">
                    @php
                        $pageDefaultImages = [
                            'assets/web/images/icons/vision.svg',
                            'assets/web/images/icons/message.svg',
                        ];
                        $parentClass = ['fadeInUp', 'fadeInDown'];
                    @endphp
                    @if(isset($pages) && $pages->isNotEmpty())
                        @foreach($pages as $page)
                            <div
                                class="col-md-6 col-lg-6 col-sm-12 col-xs-12 wow slow {{ $parentClass[$loop->index] ?? 'fadeInUp' }}">
                                <div class="card no-border box-shadow px-4 py-5">
                                    <div class="px-2 icon">
                                        <img
                                            data-src="{{ getImage($page->image, $pageDefaultImages[$loop->index] ?? null) }}"
                                            src="{{ getImage($page->image, $pageDefaultImages[$loop->index] ?? null) }}"
                                            class="lazyload img_contain"
                                            alt="{{ $page->title }}"
                                            width="58px"
                                            height="58px"
                                        />
                                    </div>
                                    <div class="card-body">
                                        <h2 class="card-title size-2 blue-color fw-bold">{{ $page->title }}</h2>
                                        <p class="card-text grey-text">
                                            {{ strip_tags($page->description) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>
    </main>

@endsection



@push('stack_scripts')
    <script>
        /*function toggleDescription() {
            const desc = document.querySelector('.description-text');
            const btn = document.querySelector('.read-more-btn');

            desc.classList.toggle('truncated-text');

            btn.innerHTML = desc.classList.contains('truncated-text')
                ? '<span>{{ __("main.read_more") }}</span>'
                : '<span>{{ __("main.show_less") }}</span>';
        }

        function checkTextTruncation() {
            const desc = document.querySelector('.description-text');
            const btn = document.querySelector('.read-more-btn');

            // Check if text is truncated
            // scrollHeight (total content height) vs clientHeight (visible height)
            const isTruncated = desc.scrollHeight > desc.clientHeight;

            // Only show button if text is truncated
            btn.style.display = isTruncated ? 'inline-block' : 'none';
        }

        // Initial check when page loads
        document.addEventListener('DOMContentLoaded', checkTextTruncation);

        // Re-check when window resizes
        window.addEventListener('resize', checkTextTruncation);*/
    </script>
    <script>
        /*$("#accordionProcess .accordion-button:not(:first)").addClass('collapsed');
        $('#accordionProcess .accordion-collapse:first').addClass('show');*/
    </script>
@endpush