@extends('web.layouts.layout')

@section('content')

    <main>
        <!-- Start section -->
        <section class="about_pg section">
            <div class="container">
                <div class="row justify-content-between align-items-center">
                    <div class="col-lg-6">
                        <div class="img_box col-lg-9 mx-auto">
                            <img src="{{ getImage($page->image) }}"
                                 class="secImg"
                                 alt="{{ $title }}"/>
                            <div class="stud_box">
                                <img src="{{asset('assets/web/images/icons/students.svg')}}" class="icon" alt=""/>
                                <div class="txt">
                                    <h2 class="counter fw-bold"> +2k </h2>
                                    <div class="p"> {{ __('main.student') }} </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="txt_box">
                            <h1 class="title fw-bold mb-4">
                                {{ $page->currentDescription->subtitle ?? "" }}
                                <img src="{{asset('assets/web/images/icons/title_shape_2.svg')}}" class="shape" alt="">
                            </h1>
                            <div class="p mb-5 description-text truncated-text">
                                {!! $page->currentDescription->description ?? "" !!}
                            </div>

                            <a href="javascript:void(0);"
                               class="butn primary_butn mt-5 read-more-btn"
                               onclick="toggleDescription()">
                                <span> {{ __('main.read_more') }} </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/web/images/vector-16.svg')}}" class="vector" alt=""/>
        </section>

        <!-- Start section -->
        <section class="faq_sec  section">
            <div class="container">
                <div class="inner">
                    <div class="row align-items-center">
                        <div class="col-lg-6">
                            <div class="">
                                <h3 class="fw-bold mb-5"> {{ __('faqs::faqs.questions_answers') }} </h3>
                                <div class="accordion-side">
                                    <div class="accordion" id="accordionProcess">
                                        @if($faqs->isNotEmpty())
                                            @foreach($faqs as $faq)
                                                <div class="accordion-item">
                                                    <div class="accordion-header">
                                                        <button class="accordion-button " type="button"
                                                                data-bs-toggle="collapse"
                                                                data-bs-target="#collapse_{{ $faq->id }}">
                                                            <span class="num"> {{ $loop->iteration }} </span>
                                                            <h3> {{ $faq->title }} </h3>
                                                        </button>
                                                    </div>
                                                    <div id="collapse_{{ $faq->id }}"
                                                         class="accordion-collapse collapse"
                                                         data-bs-parent="#accordionProcess">
                                                        <div class="accordion-body">
                                                            <div class="text">
                                                                {{ strip_tags($faq->description) }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <img src="{{asset('assets/web/images/faq-1.svg')}}" class="secImg" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="card_sec section">
            <div class="container">
                <div class="row">
                    @php
                        $pageDefaultImages = [
                            'assets/web/images/icons/about_card_1.svg',
                            'assets/web/images/icons/about_card_2.svg',
                            'assets/web/images/icons/about_card_3.svg',
                        ];
                    @endphp
                    @if($pages->isNotEmpty())
                        @foreach($pages as $page)
                            <div class="col-lg-4">
                                <div class="item">
                                    <img src="{{ getImage($page->image, $pageDefaultImages[$loop->index] ?? null) }}"
                                         class="icon mb-4"
                                         alt="{{ $page->title }}"/>
                                    <h5 class="title fw-bold mb-3"> {{ $page->title }} </h5>
                                    <div class="p">
                                        {{ strip_tags($page->description) }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </section>

        <section class="board_sec section ">
            <div class="container">
                <h1 class="title_w_shape  w-fit mx-auto text-center fw-bold mb-5">
                    {{ __('main.directors') }}
                    </h1>
                    <div class="row">
                        @foreach($directors as $director)
                            <div class="col-lg-3">
                                <div class="board_card">
                                    <div class="img_box">
                                        <img src="{{ getImage($director->image) }}" class="secImg" alt="{{ $director->currentDescription->name }}" />
                                        <button
                                            type="button"
                                            data-director="{{ $director }}"
                                            class="more_butn director_more_data">
                                            <img src="{{asset('assets/web/images/icons/right_arrow2.svg')}}" class="arrow" alt="" />
                                        </button>
{{--                                        <a class="more_butn" href="#" data-bs-toggle="modal" data-bs-target="#modal-director{{ $director->id }}" >--}}
{{--                                               <img src="{{asset('assets/web/images/icons/right_arrow2.svg')}}" class="arrow" alt="" />--}}
{{--                                        </a>--}}


                                    </div>
                                       <div class="card-body">
                                           <h5 class="name fs-4"> {{ $director->currentDescription->name }} </h5>
                                           <h6 class="job fs-5 "> {{ $director->currentDescription->job_title }}  </h6>
{{--                                           <div class="social_links d-flex mt-3">--}}
{{--                                                <a href="#"> <i class="fa-brands fa-linkedin-in"></i> </a>--}}
{{--                                                <a href="#"> <i class="fa-brands fa-x-twitter"></i> </a>--}}
{{--                                                <a href="#"> <i class="fa-brands fa-facebook-f"></i> </a>--}}
{{--                                                <a href="#"> <i class="fa-brands fa-google-plus-g"></i> </a>--}}
{{--                                            </div>--}}
                                        </div>
                                </div>
                            </div>

                        @endforeach
                    </div>
            </div>
        </section>
    </main>
    <div class="modal fade modal-director " id="modal-director" tabindex="-1" aria-labelledby="exampleModalLabel" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg ">
            <div class="modal-content p-lg-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="director-content">
                    <div class="row">
                        <div class="col-3">
                            <div class="pat">
                                <img src="{{asset('assets/web/images/pattern-2.jpg')}}" alt="" />
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="content pt-5">

                                <div class="img-content">
                                    <div class="img">
                                        <img src="" id="photo" class="secImg" alt="">
                                    </div>


                                </div>

                                <div class="title">
                                    <h5 class="subtitle fs-3 mt-4 color-primary " id="name">   </h5>
                                    <h2 class="fw-bold fs-5 mb-4 mt-3" id="job"> </h2>
                                </div>
                                <div class="info">
                                    <div class="text" id="description">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@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');

        $('.director_more_data').on('click', function () {
            let director = $(this).attr('data-director');
            let data = JSON.parse(director)
            $('#photo').attr('src',data.main_photo);
            $('#name').html(data.current_description.name);
            $('#job').html(data.current_description.job_title);
            $('#description').html(data.current_description.description)
            $('#modal-director').modal('show');
        });
    </script>
@endpush