@extends('front.layouts.app')

@section('content')

<style>

    .CL-client-title {
        color: #00b894; /* This is a shade of green similar to the one in your image */
        margin-bottom: 40px;
        text-align: center;
        font-size: 2.5rem;
        font-weight: bold;
    }

    .CL-client-logos {
        text-align: center;
        margin-bottom: 40px;
    }

    .CL-client-logos img {
        width: 100%;  /* Makes the image responsive */
        max-width: 400px;  /* Increased size */
        margin: 30px;  /* Increased margin */
        transition: transform 0.3s ease;
    }

    .CL-client-logos img:hover {
        transform: scale(1.1);
    }

    .CL-client-logos .CL-logo-container {
        display: inline-block;
        margin: 0 15px;
        border: 2px solid transparent;
        border-radius: 50%;
        padding: 15px; /* Increased padding for better spacing */
        transition: border-color 0.3s ease;
    }
</style>

@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="container py-5" dir="{{ $isArabic ? 'rtl' : 'ltr' }}">
    <h1 class="CL-client-title text-center mb-5 fw-bold display-5 text-success">
        {{ __('our_clients') }}
    </h1>

    <div class="row CL-client-logos g-4 justify-content-center">
        @forelse($clients as $client)
            <div class="col-6 col-sm-4 col-md-3 col-lg-2">
                <div class="CL-logo-container p-3 p-md-4 bg-white rounded-3 shadow-sm hover-shadow-lg transition-all">
                    <img
                        src="{{ $client->client_image ? asset($client->client_image) : asset('images/placeholder-logo.png') }}"
                        alt="{{ $isArabic ? ($client->client_title_ar ?? $client->client_title_en) : $client->client_title_en }}"
                        class="img-fluid w-100 h-auto"
                        loading="lazy"
                        style="max-height: 80px; object-fit: contain; filter: grayscale(100%); transition: 0.4s;"
                        onmouseover="this.style.filter='grayscale(0%)'"
                        onmouseout="this.style.filter='grayscale(100%)'">
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <p class="text-muted fs-4">{{ __('No client logos added yet.') }}</p>
            </div>
        @endforelse
    </div>
</div>

<style>
    .hover-shadow-lg {
        transition: all 0.3s ease;
    }
    .hover-shadow-lg:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
    }
    .CL-client-title {
        position: relative;
        padding-bottom: 15px;
    }
    .CL-client-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #a6ce39, #8fb339);
        border-radius: 2px;
    }
</style>

@endsection