@extends('layouts.webpage.main_two')

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

@section('content')

 <!-- Top Header -->

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


    <div data-aos="fade-up">
        <section class="sas">
            <div class="container py-5">

                @if(!empty($safety->safety_img))
                    @php
                        $images = json_decode($safety->safety_img, true);
                    @endphp

                    @if(is_array($images))
                        <div class="row text-center">
                            @foreach($images as $img)
                                <div class="col-md-3 mb-3">
                                    <img class="img-fluid" src="{{ asset('uploads/safety/core/' . $img) }}" alt="Safety Image">
                                </div>
                            @endforeach
                        </div>
                    @endif
                @else
                    <p class="text-center text-muted">No safety images found.</p>
                @endif

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

    <div data-aos="fade-up">
        <section class="sas">
            <div class="container py-5">
                <div class="row align-items-center">

                    <!-- Left Image -->
                    <div class="col-md-6 text-center">
                        @if(!empty($certificates->image))
                            <img class="img-fluid" 
                                src="{{ asset('uploads/certificates/' . $certificates->image) }}" 
                                alt="Certificate Image">
                        @else
                            <img class="img-fluid" src="{{ asset('assets/img/default-cert.png') }}" alt="Default Image">
                        @endif
                    </div>

                    <!-- Right Text -->
                    <div class="col-md-6">
                        <h2 class="main-title">
                            {{ $certificates->title ?? 'Certified for Safety – OHSAS 18001 Compliant' }}
                        </h2>
                        <p class="main-para">
                            {{ $certificates->description ?? 'Meking Buildtec proudly holds the OHSAS 18001 certification, reflecting our unwavering commitment to occupational health and safety. This globally recognized standard ensures that our work environments meet stringent safety protocols, reducing risks and fostering a culture of care and responsibility across every project site.' }}
                        </p>
                    </div>

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

        @if($cf_quality && !empty($cf_quality->cf_quality_img))
            @php
                // Decode JSON or unserialize the stored image list
                $images = json_decode($cf_quality->cf_quality_img, true);
            @endphp

            <div data-aos="fade-up">
                <section class="control">
                    <div class="container text-center py-5">
                        <h2 class="main-title">{{ $cf_quality->title ?? 'Certified Quality Control' }}</h2>
                        <p class="main-para">{{ $cf_quality->subtitle ?? 'ISO 9001 & OHSAS Certified Quality' }}</p>

                        <div class="row">
                            @foreach($images as $index => $image)
                                <div class="col-lg-4 col-md-6 mb-3">
                                    <img class="img-fluid rounded-3 w-100"
                                        src="{{ asset( $image) }}"
                                        alt="Quality Image {{ $index + 1 }}">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </section>
            </div>
        @endif


@endsection