@extends('web.layouts.app')

@section('content')
@push('css')
<meta name="description" content="
@foreach ($service->keywords as $keyword)
    {{ $keyword }} ,
@endforeach
">
@endpush
<!-- start heeder -->
@include('web.layouts.header')
<!-- end heeder -->


<!-- start app ====
        ===============================
        ================================
        ============== -- 
        -->

<main id="app">

    <section class="service-details">
        <div class="main-container">
            <div class="title-right">
                <h2> {{ $service->name }} </h2>
                <p> {{ $service->desc }} </p>
            </div>

            @foreach ($service->imagewithdesc as $image)

            <div class="sub-service-details">
                <div class="text-service-details">
                    <P> {{ $image->desc }} </P>
                </div>
                <div class="img-service-details">
                    <img src="{{ url($image->image) }}" alt="">
                </div>
            </div>

            @endforeach

       
            @if ($service->childs->isNotEmpty())
                
                <div class="title-right">
                    <h2> {{ awtTrans('خدمات فرعية') }}</h2>
                </div>

                <div class="subsidiary-services"> 
                    <div class="row"> 
                        @foreach ($service->childs as $child)
                            
                            <div class="col-lg-4">
                                <div class="sub-services-index" data-aos="fade-down-right" data-aos-easing="linear"
                                    data-aos-duration="700">
                                    <div class="img-services-index">
                                        <img src="{{ url($child->photo) }}" alt="">
                                    </div>

                                    <div class="text-services-index">
                                        <a href="{{ route('web.service' , $child->slug) }}">{{ $child->name }}</a>
                                    </div>
                                </div> 
                            </div>
                        @endforeach
                        
                    </div>
                </div>

            @endif
            
            <div class="title-right">
                <h2>{{ awtTrans('الأسئلة الشائعة') }} </h2>
            </div>

            <div class="question">

                @foreach ($questions as $question)

                <div class="sub-question">
                    <h2> {{ $question->ask }} <i class="bi bi-chevron-left"></i></h2>
                    <p>{{ $question->answer }}</p>
                </div>

                @endforeach

            </div>
            

        </div>
    </section>

</main>

<!-- end app ====
        =============================
        ==================================
        ==================== -->


@endsection
@push('js')
<script src="{{ url('web/backEnd/service.js') }}"></script>
@endpush