@extends('layouts.webpage.main_two')

@section('page-title', 'Gallery')

@section('content')

 
    <section class="hero-section about-ban" style="background-image: url('{{asset('uploads/page_gallery/gallery.png')}}')">
        <div class="hero-content about-inner">
            <h6 class="about-title"><img src="{{asset('assets/img/prod-banner.svg')}}">Gallery</h6>
            <h1 class=" fw-bold service-title">Gallery</h1>
            <!-- <a href="#" class="btn main-butn mt-4">View Projects</a> -->
        </div>
    </section>


        <section class="control">
            <div class="container text-center py-5">
          
                @foreach($galleries as $section)
                    @php 
                        $sectionTitle = str_replace('_', ' ', ucfirst($section->section_name));
                        $images = json_decode($section->images, true);
                    @endphp

                    @if(!empty($images))
                        <div class="my-5">
                            <h2 class="main-title">{{ $sectionTitle }}</h2>
                            <p class="main-para">
                                @if($section->section_name == 'engineering_motion')
                                    Where ideas become reality — captured with our people, processes, and purpose.
                                @elseif($section->section_name == 'industry_leaders')
                                    We build more than structures — we build strong, lasting relationships.
                                @else
                                    Explore the visual highlights from our {{ strtolower($sectionTitle) }} section.
                                @endif
                            </p>
                        </div>
                        
                        {{-- Section Layout --}}
                        <div class="row justify-content-center">
                              <div class="owl-carousel owl-theme gal py-5">
                            @foreach($images as $img)
                                <div class="gal-img">
                                    <img 
                                        src="{{ asset('uploads/page_gallery/' . $img) }}" 
                                        alt="{{ $sectionTitle }}" 
                                        class="img-fluid rounded shadow-sm gallery-dynamic-img"
                                        
                                    >
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-center text-muted">No images available for this section.</p>
                    @endif
                @endforeach
            </div>  
            </div>
        </section>



@endsection