@extends('template')

@section('content')
    <div class=" pt-5 inter">
        <section class="mt-3 w-100">
            <div class=" center">
                <h1 class="fw-bold text-white text-center" style="z-index:20;position:absolute;">Organisasi Kepemudaan</h1>
                <img style="z-index:10;position:relative;filter: url(#colorFilter);" class="w-100 image-org"
                    src="{{ asset('assets/images/bg/Organisasi.png') }}" alt="">
            </div>
        </section>
        <section class="container">
            <div class="wrapper-wrap ">
                @foreach ($organisasi as $item)
                    <div class="text-green m-2 mb-5 card h-100 d-flex shadow  "
                        style="border-radius:20px!important;align-items:center;">

                        <img class="news-photo rounded center" src="{{ asset('images/' . $item->photo) }}" alt=""
                            style="border-top-left-radius: 20px!important;border-top-right-radius: 20px!important;">
                        <h5 class="text-green-dark  text-center mt-3"style="width:300px;justify-content:center;">
                            {{ $item->organisasi }}</h5>
                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-geo-alt m-2"></i>
                            <p class="text-green mb-0"style="width:300px;font-size:15px;">{{ $item->alamat }}</p>
                        </div>
                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-people m-2"></i>
                            <p class="text-green mb-0 "style="width:300px;font-size:15px;">Jenis Organisasi:
                                {{ $item->jenis_keanggotaan == '' ? 'Organisasi Pemuda' : $item->jenis_keanggotaan }}</p>
                        </div>
                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-person m-2"></i>
                            <p class="text-green mb-0"style="width:300px;font-size:15px;">Ketua : {{ $item->ketua }}</p>
                        </div>
                        <div class="row center">
                            <i style="font-size: 18px" class="bi bi-calendar2-week m-3"></i>
                            <p class="text-green mb-0"style="width:300px;font-size:15px;">Periode {{ $item->periode }}</p>
                        </div>

                        <a href="{{ route('detail', Crypt::encryptString($item->id)) }}"
                            class="detail card-footer w-100  card-custom center ">
                            <h6 class="mb-0 m-2"><i class="bi bi-search m-3"></i>Info Selengkapnya</h6>
                        </a>




                    </div>
                @endforeach

            </div>
        </section>
        <div class="center">

            {{ $organisasi->links() }}
        </div>

    </div>
    <svg id="svg">
        <defs>
            <filter id="colorFilter">
                <feColorMatrix color-interpolation-filters="sRGB" type="matrix"
                    values="0.03 0   0   0   0
                        0   0.41  0   0   0
                        0   0   0.23  0   0
                        0   0   0   1   0 " />
            </filter>
        </defs>
    </svg>
@endsection