@extends('web.layouts.container')
@section('content')
    <section class="about-pg section">
        <div class="container">
            <div class="box mb-5">
                <img src="{{asset($service->image)}}" alt="" class="sec-img serv_img"/>
            </div>
            <div class="text-box">
                <div class="head_box mb-5 col-lg-5 wow left_to_right_apperance no_scale">
                    <h1 class="title mb-4 color-secondary">
                        {{$service->name}}
                    </h1>
                </div>
                <div class="pt-4 col-lg-11">
                    <div class="content-box ps-0 mb-4 wow left_to_right_apperance no_scale service_details_container">
                        {!! $service->description !!}
                    </div>

                </div>
                <div class="row mt-5">
                    <div class="col-lg-4">
                        <div class="file_card wow fadeInUp">
                            <img src="{{asset('assets/web/images/icons/file.svg')}}" alt="" class="icon"/>
                            <h5 class="title text-center color-secondary">{{__('services.brochure')}}</h5>
                            <a download href="{{ $service->{'brochure_'.$lang} }}" class="butn white_butn" {{__('main.download')}}>
                                <img src="{{asset('assets/web/images/icons/pdf.svg')}}" alt="" class="icon_pdf"/> {{__('services.download_file')}}
                            </a>
                        </div>
                    </div>
                    @if(count($videos))
                        @foreach($videos as $vidKey => $video)
                            @if($loop->iteration == 1)
                                <div class="col-lg-12 mt-4 wow left_to_right_apperance">
                                    <div class="p-4 bg-light mb-4">
                                    <a href="#" data-vid="{{asset($video)}}" class="video_link" data-bs-toggle="modal" data-bs-target="#vidModal">
                                            <div class="media_card lg_card mb-0">
                                                <img src="{{asset($service->image ?? 'assets/web/images/about-bg-2.png')}}" alt="" class="sec-img"/>
                                                <div class="content">
                                                    <div class="icon color-primary mb-4"><i class="fa-regular fa-circle-play"></i></div>
                                                    <h2 class="title text-white">{{$videosTitles[$vidKey]}}</h2>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endif
                            @if($loop->even)
                                <div class="col-lg-3">
                                    <a href="#" data-vid="{{asset($video)}}" class="video_link" data-bs-toggle="modal" data-bs-target="#vidModal">
                                        <div class="media_card wow left_to_right_apperance">
                                            <img src="{{asset($service->image ?? 'assets/web/images/about-2.png')}}" alt="" class="sec-img"/>
                                            <div class="content">
                                                <div class="icon color-primary fs-1 mb-4"><i class="fa-regular fa-circle-play"></i></div>
                                            </div>
                                            <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$videosTitles[$vidKey]}}</h5>
                                        </div>
                                    </a>
                                </div>
                            @endif
                        @endforeach
                    @endif

                    @if(count($images))
                        @foreach($images as $imageKey => $image)
                            <div class="col-lg-3">
                                <a href="{{asset($image)}}" data-fancybox="images">
                                    <div class="media_card wow left_to_right_apperance">
                                        <img src="{{asset($image)}}" alt="" class="sec-img"/>
                                        <h5 class="card_title text-center bg-white zi-5 mb-0 pt-3">{{$imagesTitles[$imageKey]}}</h5>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
    <!-- Modal -->
    <div class="modal vidModal fade" id="vidModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <iframe width="100%" height="450" src=""></iframe>
                </div>

            </div>
        </div>
    </div>
    <section class="news-pg section bg-light">
        <div class="container">
            <div class="head_content col-lg-5 mb-5">
                <h1 class="title_br color-secondary text-capitalize mb-4"> {{__('services.another_services')}} </h1>
                <p class="det">
                    <small>{!! $page->description !!}</small>
                </p>
            </div>
            <div class="swiper-container news-swiper pb-2">
                <div class="swiper-wrapper pb-5">
                    @if(count($otherServices))
                        @foreach($otherServices as $otherService)
                            <div class="swiper-slide">
                                <div class="news_card">
                                    <div class="img-box">
                                        <img src="{{asset($otherService->image)}}" alt="" class="sec-img"/>
                                    </div>
                                    <div class="content">
                                        <h4 class="title color-secondary mb-3">
                                            {{$otherService->name}}
                                        </h4>
                                        <p class="det">
                                            {{wordLimit($otherService->description, 20)}}
                                        </p>
                                        <a href="{{route('service.show', [$otherService->id, $otherService->slug_text])}}" class="butn secondary_butn mt-4 wow fadeInUp">{{__('main.read_more')}}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
                <!-- Start arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')

    <script>
        $(document).ready(function () {
            $('.service_details_container p').addClass('det');

            $('.video_link').click(function () {
                $('.vidModal .modal-body iframe').attr('src', $(this).data('vid'))
            });

            $('.vidModal').on('hide.bs.modal', function () {
                $('.vidModal .modal-body iframe').attr('src', '')
            })
        })
    </script>

@endsection