@extends('frontend.layouts.app')
@section('content')
    <!-- Header Start -->
    <div class="container-fluid py-5 mb-5 page-header"
        style="background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{{ asset('uploads/bg-image/image.jpg') }}') center/cover no-repeat;">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class="display-3 text-white animated slideInDown">About Us</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb-item justify-content-center">
                            <li class="breadcrumb-item"><a class="text-white" href="{{ url('/') }}">Home</a></li>
                            <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                            <li class="breadcrumb-item text-white active" aria-current="page">About</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
    <div class="container-fluid pt-5 pb-2">
        <div class="container">
            <div class="row">

                 <div class="col-12">
                <div class="row">
                    @forelse ($wadaplaces as $place)
                        <div class="col-6 col-sm-6 col-md-4 col-lg-2 pb-1">
                            <div class="d-flex flex-column align-items-center border px-4 mb-4">
                                <h2 class="display-3 text-primary mb-3 counter" data-toggle="counter-up">
                                    {{ $place->total }}
                                </h2>
                                <h5 class="font-weight-bold mb-4">
                                    {{ $place->category->name ?? 'Unknown Category' }}
                                </h5>
                            </div>
                        </div>
                    @empty
                        <div class="col-12 text-center">
                            <p>No active places found.</p>
                        </div>
                    @endforelse
                </div>
            </div>
            </div>
        </div>
    </div>
    <!-- About Start -->
    <div class="container-xxl py-5">
        <div class="container">
            @if ($about)
                <div class="row g-5">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s" style="min-height: 400px;">
                        <div class="position-relative h-100">
                            <img class="img-fluid position-absolute w-100 h-100" src="{{ asset($about->image) }}"
                                alt="" style="object-fit: cover;">
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                        <h6 class="section-title bg-white text-start text-primary pe-3">About Us</h6>
                        <h1 class="mb-4">{{ $about->title }}</h1>
                        <p class="mb-4">{{ $about->description }}</p>

                    </div>
                </div>
            @else
                <p>No about information available.</p>
            @endif
        </div>
    </div>
    <!-- About End -->
    <!-- About End -->


  <!-- Team Start -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            <h1 class="mb-5">Ward Members</h1>
        </div>
        <div class="row g-4">
            @foreach ($wardmembers as $member)
                <div class="col-lg-3 col-md-6 wow fadeInUp mb-4" data-wow-delay="0.1s">
                    <div class="team-item bg-light h-100">
                        <div class="overflow-hidden">
                            <img class="img-fluid w-100" style="height: 300px; object-fit: cover;" src="{{ asset($member->image) }}" alt="">
                        </div>
                        <div class="position-relative d-flex justify-content-center" style="margin-top: -23px;">
                            <div class="bg-light d-flex justify-content-center pt-2 px-1">
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="text-center p-4">
                            <h5 class="mb-0">{{ $member->name }}</h5>
                            <small>{{ $member->position }}</small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Team End -->

<!-- Team Start -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            <h1 class="mb-5">Staff Members</h1>
        </div>
        <div class="row g-4">
            @foreach ($staffs as $member)
                <div class="col-lg-3 col-md-6 wow fadeInUp mb-4" data-wow-delay="0.1s">
                    <div class="team-item bg-light h-100">
                        <div class="overflow-hidden">
                            <img class="img-fluid w-100" style="height: 300px; object-fit: cover;" src="{{ asset($member->image) }}" alt="">
                        </div>
                        <div class="position-relative d-flex justify-content-center" style="margin-top: -23px;">
                            <div class="bg-light d-flex justify-content-center pt-2 px-1">
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-facebook-f"></i></a>
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-twitter"></i></a>
                                <a class="btn btn-sm-square btn-primary mx-1" href=""><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>
                        <div class="text-center p-4">
                            <h5 class="mb-0">{{ $member->name }}</h5>
                            <small class="nepali-input">{{ $member->positioned->name ?? '' }}</small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
<!-- Team End -->
@endsection