@extends('layouts.webpage.main_two')

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

@section('content')

 <!-- Top Header -->

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

    <div data-aos="fade-up">
        <section class="value">
            <div class="container-fluid text-center py-5">
                <h2 class="main-title">Our Valued Clients</h2>
                <p class="main-para">
                    Our journey is built on strong partnerships. We take pride in collaborating with
                    companies across sectors like cement, steel, infrastructure, logistics, and more — delivering
                    reliable and innovative steel building solutions every time.
                </p>
                <div class="client">
                    <div class="owl-carousel owl-theme our py-5">
                        @if($clients->isNotEmpty())
                            @foreach($clients as $client)
                                <div class="item">
                                    <img src="{{ asset('uploads/clients/' . $client->client_logo) }}" 
                                        alt="{{ $client->client_name ?? 'Client Logo' }}" 
                                        class="img-fluid client-logo">
                                </div>
                            @endforeach
                        @else
                            <p class="text-muted">No client logos available at the moment.</p>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>



    <div data-aos="fade-up">
        <section class="say">
            <div class="container text-center say-inner">
                <h2 class="main-title">What Our Clients Say</h2>
                <p class="main-para">
                    From project planning to execution, our clients consistently recognize us for our
                    dedication, speed, and structural excellence.
                </p>

                <div class="owl-carousel owl-theme test py-5">
                    @if($reviews->isNotEmpty())
                        @foreach($reviews as $review)
                            <div class="item">
                                <div class="testimonial-card">
                                    <div class="stars mb-2">
                                        @for($i = 0; $i < ($review->rating ?? 5); $i++)
                                            <i class="bi bi-star-fill"></i>
                                        @endfor
                                    </div>

                                    <p class="main-para">
                                        {{ $review->review_text }}
                                    </p>

                                    <div class="d-flex align-items-center justify-content-center gap-2 text-start">
                                        @if(!empty($review->company_logo))
                                            <div>
                                                <img src="{{ asset('uploads/reviews/' . $review->company_logo) }}" 
                                                    alt="{{ $review->client_name }}" 
                                                    style="width: 60px; height: 60px; object-fit: contain;">
                                            </div>
                                        @endif
                                        <div>
                                            <h6>{{ $review->client_name }}</h6>
                                            <small>{{ $review->designation ?? '' }}</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <p class="text-muted">No testimonials available yet.</p>
                    @endif
                </div>
            </div>
        </section>
    </div>

@endsection