@extends('layouts.parting')
@section('content')
    <section id="hero" class="heading-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="swiper hero shadow rounded-4">
                        <div class="swiper-wrapper">
                            @foreach ($sliders as $slider)
                                <div class="swiper-slide overflow-hidden ratio ratio-21x9">
                                    <img class="w-100 object-fit-cover" src="{{ asset('storage/slider/' . $slider->gambar) }}"
                                        alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="partner" class="mini-section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="swiper partner">
                        <div class="swiper-wrapper align-items-center">
                            @foreach ($kerjaSamaSliders as $item)
                                <div class="swiper-slide ratio ratio-21x9">
                                    <img class="object-fit-contain img-fluid"
                                        src="{{ asset('storage/slider/' . $item->gambar) }}" alt="">
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="target" class="auto-section">
        <div class="container-lg target">
            <div class="row row-gap-4">
                <div class="col-12 text-center">
                    <h1 class="text-primary fw-bold mb-lg-5">Tujuan AIMI</h1>
                </div>
                <div class="col-lg-4">
                    <div class="card shadow bg-main-to-bottom text-center py-4 h-100">
                        <i class="bi bi-grid-fill display-4 text-primary"></i>
                        <div class="card-body">
                            {!! html_entity_decode($konfigurasi->tujuan1) !!}
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card shadow bg-main-to-bottom text-center py-4 h-100">
                        <i class="bi bi-grid-fill display-4 text-primary"></i>
                        <div class="card-body">
                            {!! html_entity_decode($konfigurasi->tujuan2) !!}
                        </div>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="card shadow bg-main-to-bottom text-center py-4 h-100">
                        <i class="bi bi-grid-fill display-4 text-primary"></i>
                        <div class="card-body">
                            {!! html_entity_decode($konfigurasi->tujuan3) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="story" class="auto-section">
        <div class="container-lg story">
            <div class="row row-gap-4">
                <div class="col-lg-6">
                    <div class="ratio ratio-4x3">
                        <img class="avatar shadow" src="https://apindo.or.id/images/membership/testimonial-image.png"
                            alt="">
                    </div>
                </div>

                <div class="col-lg-6">
                    <h1 class="text-primary fw-bold mb-3">Sejarah singkat AIMI</h1>
                    {!! Str::limit(html_entity_decode($konfigurasi->sejarah), 535, '...') !!}
                    <a href="{{ route('client.tentang') }}" class="btn btn-outline btn-sm mt-4">
                        <span> Selengkapnya <i class="bi bi-arrow-right-short"></i> </span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="location" class="auto-section">
        <div class="container-lg location">
            <div class="row row-gap-4 location-frame">
                <div class="col-12 text-center">
                    <h1 class="text-primary fw-bold mb-lg-5">Lokasi Operasional</h1>
                </div>
                <div class="col-lg-4 d-flex flex-column gap-4 maps-items pb-4">
                    @foreach ($cabangs as $cabang)
                        <div class="card shadow bg-main-to-bottom p-4 maps-item" role="button"
                            data-maps="{{ $cabang->lokasi_gmaps }}">
                            <h4 class="text-primary fw-bold">{{ $cabang->nama }}</h4>
                            <div class="card-body px-0 py-2">
                                <p>{{ $cabang->lokasi }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="col-lg-8 maps position-relative">
                    <div class="rounded-4 overflow-hidden">
                        <iframe class="show-maps shadow"
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3951.456566461528!2d112.61200942607122!3d-7.951679879226391!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7882773414ff7f%3A0xca87e25a1de54ac6!2sFakultas%20Ekonomi%20dan%20Bisnis%20Universitas%20Brawijaya!5e0!3m2!1sid!2sid!4v1732265068497!5m2!1sid!2sid"
                            style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    <div class="position-absolute location-primary">
                        <div class="card shadow bg-main-to-top px-4 py-3 maps-item" role="button"
                            data-maps="{{ $pusat->lokasi_gmaps }}">
                            <h5 class="text-primary fw-bold">{{ $pusat->nama }}</h5>
                            <small class="mb-0">{{ $pusat->lokasi }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="cta" class="auto-section">
        <div class="container-lg cta">
            <div class="row justify-content-center bg-main-to-left rounded-4 py-5 shadow">
                <div class="col-lg-8 text-center">
                    <h3 class="text-primary fw-bold mb-5">Bergabunglah dengan AIMI untuk inovasi, kolaborasi, dan
                        kontribusi dalam manajemen Indonesia!</h3>
                    <a href="{{ route('register') }}" class="btn btn-outline btn-sm">
                        <span> Daftar Sekarang <i class="bi bi-arrow-right-short"></i> </span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="berita" class="auto-section">
        <div class="container-lg berita">
            <div class="row">
                <div class="col-12 text-center">
                    <h1 class="text-primary fw-bold mb-lg-5">Informasi Lainnya</h1>
                </div>
                @foreach ($berita as $item)
                    <div class="col-md-4">
                        <a href="{{ route('client.berita.read', ['slug' => $item->slug_berita]) }}" class="card h-100">
                            <div class="ratio ratio-16x9 overflow-hidden rounded-4">
                                <img class="object-fit-cover" src="{{ asset('storage/berita/' . $item->gambar) }}"
                                    alt="Berita">
                            </div>
                            <div class="card-body px-0">
                                <h4 class="fw-semibold">{{ $item->judul_berita }}</h4>
                                {!! Str::limit(html_entity_decode($item->isi_berita), 276, '...') !!}
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
    </section>
@endsection