@extends('users.user-dashboard')

@section('content')

@if($banner)
<div class="inner-banner" style="background-image: url('{{ asset($banner->image) }}')">
       

    <div class="about-us-hero-content">
        <div class="about-us-hero-text">
            <h1 class="fw-bold" >{{$banner->title}}</h1>
        </div>
    </div>
</div>
@endif
<!-- About Us Content Section -->
{{-- <div class="about-us-content py-lg-5 py-3">
    <div class="container">
        <div class="row">
            @if ($groups->count() > 0 && $groups[0]->aboutUsEntries->count() > 0)
                @php
                    $firstItem = $groups[0]->aboutUsEntries->first();
                @endphp
                <div class="col-lg-12 about-location pb-lg-5 pb-3">
                    <h1>{{ $firstItem->title }}</h1>
                    <p>{!! $firstItem->description !!}</p>
                    @if ($firstItem->image)
                        <img src="{{ asset($firstItem->image) }}" alt="About Us Image" class="img-fluid mt-3 mb-3" style="max-width: 100%;">
                    @endif
                </div>
            @endif
        </div>

        <div class="row g-lg-5 g-3">
            @foreach ($groups as $group)
                @foreach ($group->aboutUsEntries->skip(1) as $entry)
                    <div class="col-lg-5">
                        <div class="about-us-content-img">
                            <img src="{{ asset($entry->image) }}" alt="{{ $entry->title }}" class="img-fluid">
                        </div>
                    </div>
                    <div class="col-lg-7 d-flex align-items-center">
                        <div class="about-us-content-text">
                            <h3>{{ $entry->title }}</h3>
                            <p>{!! $entry->description !!}</p>
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    </div>
</div> --}}
<!-- About Us Content Section -->
<div class="about-us-content py-lg-5 py-4 bg-light">
    <div class="container">
        @if ($groups->count() > 0 && $groups[0]->aboutUsEntries->count() > 0)
            @php $firstItem = $groups[0]->aboutUsEntries->first(); @endphp
            <div class="row justify-content-center text-center mb-5">
                <div class="col-lg-10">
                    <h1 class="display-6 fw-bold">{{ $firstItem->title }}</h1>
                    <p class="lead">{!! $firstItem->description !!}</p>
                    @if ($firstItem->image)
                        <img src="{{ asset($firstItem->image) }}" alt="About Us Image" class="img-fluid rounded shadow-sm mt-4" style="max-height: 400px; object-fit: cover;">
                    @endif
                </div>
            </div>
        @endif

      <div class="row g-lg-5 g-3 justify-content-center">
            @foreach ($groups as $group)
                @foreach ($group->aboutUsEntries->skip(1) as $entry)
                    <div class="col-lg-4">
                        <div class="about-us-content-img">
                            <img src="{{ asset($entry->image) }}" alt="{{ $entry->title }}" class="img-fluid">
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <div class="about-us-content-text">
                            <h3>{{ $entry->title }}</h3>
                            <p>{!! $entry->description !!}</p>
                        </div>
                    </div>
                @endforeach
            @endforeach
        </div>
    </div>
</div>

@endsection
