@extends('front.layouts.master')
@section('content')




<main>
 <!-- slider Area Start-->
 <div class="slider-area ">
            <div class="single-slider hero-overly slider-height2 d-flex align-items-center" data-background="{{ asset('front_assets/assets/img/hero/about.jpg') }}">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-10 col-xl-8">
                            <div class="hero-cap hero-cap2 pt-120">
                                <h2>Engineering techniques & implementation</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="services-details-area">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="single-services section-padding2">
                            <div class="details-img mb-40">
                                <img src="/storage/app/public/{{ $page->banner }}" alt="">
                            </div>
                            <div class="details-caption">
                    <p>{{ $page->short_description }}</p>
                               <p>{!! $page->description !!}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        @php
$sub_child_pages=App\Models\Page::where('parent_id',$page->id)->where('status',1)->orderby('weight','asc')->get();
@endphp

@if(isset($sub_child_pages))
@if($sub_child_pages->count() > 0)

        <div class="services-area1 section-padding30">
            <div class="container">
                <!-- section tittle -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-tittle mb-55">
                            <div class="front-text">
                                <h2 class="">{{ $page->name }}</h2>
                            </div>
                            <span class="back-text">{{ $page->name }}</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                @foreach($sub_child_pages as $sub_child_page) 
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="single-service-cap mb-30">
                            <div class="service-img">
                                <img src="/storage/app/public/{{ $sub_child_page->banner }}" alt="">
                            </div>
                            <div class="service-cap">
                                <h4><a href="{{ route('subchild.page',$sub_child_page->slug) }}">{{ $sub_child_page->name }}</a></h4>
                                <p>{{ $sub_child_page->short_description }}</p>
                                <a href="{{ route('subchild.page',$sub_child_page->slug) }}" class="more-btn">Read More <i class="ti-plus"></i></a>
                            </div>
                            <div class="service-icon">
                                <img src="{{ asset('front_assets/assets/img/icon/services_icon1.png') }}" alt="">
                            </div>
                        </div>
                    </div>
                 @endforeach
               
                </div>
            </div>
        </div>

@endif
@endif







        </main>




@endsection