@extends('Frontend.index')

@section('content')

{{-- Custom Style khusus halaman ini --}}
<style>

    
    /* Logo Brand Styling */
    .tp-brand-icon {
        filter: grayscale(100%);
        opacity: 0.5;
        transition: all 0.4s ease;
        padding: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tp-brand-icon:hover { filter: grayscale(0%); opacity: 1; transform: translateY(-5px); }

    /* Testimonial Card Grid */
    .testi-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 40px 30px;
        height: 100%;
        transition: all 0.3s ease;
        border: 1px solid #eee;
        position: relative;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    }
    .testi-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        border-color: #ff5e14; /* Ganti warna tema di sini */
    }
    .quote-icon {
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 40px;
        color: rgba(0,0,0,0.05);
    }
    .testi-avatar {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #fff;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .rating-stars i { color: #ffb800; font-size: 13px; }
    .testi-text { font-size: 16px; line-height: 1.7; color: #555; font-style: italic; }
    .client-name { font-size: 18px; font-weight: 700; margin-bottom: 2px; color: #222; }
    .client-job { font-size: 14px; color: #ff5e14; font-weight: 500; }
</style>

{{-- ===================== BREADCRUMB ===================== --}}
<section class="breadcrumb__area breadcrumb__pt-310 include-bg p-relative"
    style="background-image: url('/Frontend/img/breadcrum/CLIENT.png');">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12">
                <div class="breadcrumb__content p-relative z-index-1">
                    {{-- optional title --}}
                </div>
            </div>
        </div>
    </div>
</section>


{{-- ===================== BRAND SLIDER (Tetap Slide agar tidak terlalu panjang) ===================== --}}
<div class="tp-brand-slider-section pt-80 pb-80" style="background: #f8f9fa;">
    <div class="container">
        <div class="swiper-container brand-slider-active">
            <div class="swiper-wrapper align-items-center">
                @php
                $brands = [
                    '/Frontend/img/brand/logok2.png',
                    '/Frontend/img/brand/logo-jm.webp',
                    '/Frontend/img/brand/logo-pelnasindo.webp',
                    '/Frontend/img/brand/logo-immi.webp',
                    '/Frontend/img/brand/logo-psu.webp',
                    '/Frontend/img/brand/logo-uwi.webp',
                    '/Frontend/img/brand/logo-stesbn.webp',
                    '/Frontend/img/brand/logo-stipan.webp',
                    '/Frontend/img/brand/logo-stisip.webp',
                    '/Frontend/img/brand/logo-iaid.webp',
                    '/Frontend/img/brand/logo-ubs.webp',
                    '/Frontend/img/brand/logo-ppgi.webp',
                    '/Frontend/img/brand/logo-ppg.webp',
                    '/Frontend/img/brand/logo-stmik.webp',
                    '/Frontend/img/brand/logo-akbid.webp',
                    '/Frontend/img/brand/logo-akatel.webp',
                    '/Frontend/img/brand/logo-akatek.webp',
                    '/Frontend/img/brand/logo-sties.webp',
                    '/Frontend/img/brand/logo-stiebii.webp',
                    '/Frontend/img/brand/logo-niit.webp',
                    'https://patria-artha.info/images/logo/logo2.png',
                    'https://stembibandung.info/images/logo/logo2.png',
                    'https://stei-bcm.info/images/logo/logo2.png',
                    'https://stie-igi.info/images/logo/logo2.png',
                    'https://upri.info/images/logo/logo2.png',
                    'https://umiba.info/images/logo/logo2.png',
                    'https://kharisma-college.info/images/logo/logo2.png',
                    'https://uima.web.id/images/logo/header-uima.png',
                    'https://uhafiz.info/images/logo/logo2.png',
                    'https://itbmp.info/images/logo/logo2.png',
                    'https://steijogja.info/images/logo/logo2.png',
                    'https://universitas-boyolali.info/images/logo/logo2.png',
                    'https://unisfat.info/images/logo/logo2.png',
                    'https://undaris.info/images/logo/logo2.png',
                    'https://stieganesha.info/images/logo/logo2.png',
                    'https://unaki.info/images/logo/logo2.png',
                    'https://stikomprosia.info/images/logo/logo2.png',
                    'https://isif.info/images/logo/logo2.png',
                    'https://ibisa.info/images/logo/logo2.png',
                    'https://unpand.info/images/logo/logo2.png',
                    'https://upy.web.id/images/logo/logo2.png',
                    'https://iai-suryanithaher.info/images/logo/logo2.png',
                    'https://polnas.info/images/logo/header-polnas.png',
                    'https://runata.info/images/logo/logo2.png',
                    'https://stikomsemarang.info/images/logo/logo2.png',
                    'https://yarsipratama.info/images/logo/logo2.png',
                    'https://univbanten.info/images/logo/logo2.png',
                    'https://stembi-alaziziyah.info/images/logo/logo2.png',
                    'https://stitbustanululum.info/images/logo/logo2.png',
                    'https://institutsunandoe.info/images/logo/logo2.png',
                    'https://alamin-indramayu.info/images/logo/logo2.png',
                    'https://sttisonysugema.info/images/logo/logo2.png',
                    'https://stisipolcandradimuka.info/images/logo/logo2.png',
                    'https://iaipdkindramayu.info/images/logo/logo2.png',
                    'https://muliadarma.info/images/logo/logo2.png',
                    'https://stmikpgri-arungbinang.info/images/logo/logo2.png',
                    'https://universitaskepanjen.info/images/logo/logo2.png',
                    'https://institutbanten.info/images/logo/logo2.png',
                    'https://instidla.info/images/logo/logo2.png',
                    'https://staifatahillah.info/./images/logo/header-fatahillah.png',
                    'https://stikespembina.info/images/logo/logo2.png',
                    'https://stisipimambonjol.info/images/logo/logo2.png',
                    'https://akfarimambonjol.info/images/logo/logo2.png',
                    'https://stikosa-aws.info/images/logo/logo2.png',
                    'https://uisb.info/images/logo/logo2.png',
                    'https://inais.info/images/logo/logo2.png',
                    'https://digitechuniversity.info/images/logo/logo2.png',
                ];
                @endphp

                @foreach ($brands as $brand)
                    <div class="swiper-slide">
                        <div class="tp-brand-icon">
                            <img loading="lazy" src="{{ str_starts_with($brand, 'http') ? $brand : asset($brand) }}" 
                                 alt="Partner" style="max-height: 60px; width: auto;">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

{{-- ===================== TESTIMONIAL GRID ===================== --}}
<section class="testimonial-grid-area pt-120 pb-120" style="background: #fff;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="section-title text-center mb-60">
                    <span class="tp-subtitle" style="color: #ff5e14; font-weight: 600;">TESTIMONIAL</span>
                    <h2 class="tp-title" style="font-size: 36px; font-weight: 800;">Apa Kata Mereka Tentang Kami?</h2>
                </div>
            </div>
        </div>

        <div class="row g-4"> {{-- g-4 memberikan gap antar card --}}
            @forelse($dataTestimoni as $data)
                <div class="col-lg-4 col-md-6">
                    <div class="testi-card">
                        <i class="fas fa-quote-right quote-icon"></i>
                        
                        <div class="rating-stars mb-20">
                            @for ($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star {{ $i <= $data->rating ? '' : 'text-muted' }}"></i>
                            @endfor
                        </div>

                        <div class="testi-text mb-30">
                            <p>" {!! strip_tags($data->deskripsi) !!} "</p>
                        </div>

                        <div class="testi-author d-flex align-items-center">
                            <div class="mr-15">
                                <img class="testi-avatar" 
                                     src="{{ url('Frontend/img/testimonial/'.$data->image) }}" 
                                     alt="{{ $data->nama_testimoni }}">
                            </div>
                            <div>
                                <h4 class="client-name">{{ $data->nama_testimoni }}</h4>
                                <span class="client-job">{{ $data->jabatan }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center">
                    <p class="text-muted">Belum ada testimoni untuk ditampilkan.</p>
                </div>
            @endforelse
        </div>
    </div>
</section>

@endsection