@extends('template')

@section('content')
    <style>
        .card {
            /* color: #000; */
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-bottom: 20px;
        }

        .card .td-left {
            color: #888;
        }

        .card .td-right {
            padding-right: 10px;
        }

        .th-text {
            color: #000;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .td-text {
            color: #0B4238;
            font-family: Open Sans;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .alert-text {
            color: #000;
            font-size: 12px;
            font-weight: 510;
        }

        .alert-kecil-1 {
            height: 20px;
            width: 80px;
            margin: 0;
            padding: 0;
        }

        .sarana {
            text-align: center;
            line-height: 80px;
            width: 80px;
            font-size: 32px;
            margin: 0;
            padding: 0;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="card-title">
                <div class="d-flex justify-content-between">
                    <div class="p-2">
                        <h4 class="text-dark"><b>Organisasi Kepemudaan</b></h4>
                    </div>
                    <div class="ml-auto p-2" style="right: 10px;">
                        <a href="#" class="btn btn-success">Semua Data</a>
                    </div>
                </div>
            </div>
            <table class="table table-sm open-sans">
                <thead>
                    <tr class="table-success th-text">
                        <th class="text-center" scope="col">NO.</th>
                        <th scope="col">Nama Organisasi</th>
                        <th scope="col" class="text-center">TERBENTUK</th>
                        <th scope="col" class="text-center">STATUS</th>
                        <th scope="col" class="text-center">KETERANGAN</th>
                        <th scope="col" class="text-center"></th>
                    </tr>
                </thead>
                <tbody>
                                        @foreach ($example as $a)
                        <tr class="table-secondary">
                            <th scope="row" class="th-text text-center">
                                {{-- {{ $loop->iteration + ($instansis->currentPage() - 1) * $instansis->perPage() }} --}}
                                {{ $a[0] }}
                            </th>
                            <td class="th-text">{{ $a[1] }}</td>
                            <td class="th-text">
                                <center>
                                    {{ $a[2] }}
                                </center>
                            </td>
                            <td class="text-center">
                                @if ($a[3] == 'Aktif')
                                    <button class="td-text alert alert-success alert-kecil-1"
                                        style="color: #0B4238;">{{ $a[3] }}</button>
                                @else
                                    <button class="td-text alert alert-danger alert-kecil-1"
                                        style="color: #0B4238;">{{ $a[3] }}</button>
                                @endif
                            </td>
                            <td class="text-center">{{ '-' }}</td>
                            <td class="text-center">
                                <a href="/admin/lihat-data/{{ $a[5] }}" class="fst-italic open-sans td-lihat-data"
                                    style="color: #3F8664;" title="Lihat Data">
                                    Lihat Data>>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <div class="card-title">
                        <div class="d-flex justify-content-between">
                            <div class="p-2">
                                <h4 class="text-dark"><b>Komunitas Kepemudaan</b></h4>
                            </div>
                            <div class="ml-auto p-2" style="right: 10px;">
                                <a href="#" class="btn btn-success">Semua Data</a>
                            </div>
                        </div>
                    </div>
                    <table class="table table-sm open-sans">
                        <thead>
                            <tr class="table-success th-text">
                                <th class="text-center" scope="col">NO.</th>
                                <th scope="col">Nama</th>
                                <th scope="col" class="text-center"></th>
                            </tr>
                        </thead>
                        <tbody>
                                                        @foreach ($example as $a)
                                <tr class="table-secondary">
                                    <th scope="row" class="th-text text-center">
                                        {{-- {{ $loop->iteration + ($instansis->currentPage() - 1) * $instansis->perPage() }} --}}
                                        {{ $a[0] }}
                                    </th>
                                    <td class="th-text">{{ $a[1] }}</td>
                                    <td class="text-center">
                                        <a href="/admin/lihat-data/{{ $a[2] }}"
                                            class="fst-italic open-sans td-lihat-data" style="color: #3F8664;"
                                            title="Lihat Data">
                                            Lihat Data>>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <div class="card-title">
                        <div class="p-2">
                            <h4 class="text-dark"><b>Sarana dan Prasarana</b></h4>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between">
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn sarana text-light" style="background: #5aa73f"><i
                                        class="bi bi-building"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Gedung Latihan</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn sarana text-light" style="background: #6b99ba"><i
                                        class="bi bi-file-earmark-richtext"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>E-Book</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn sarana text-light" style="background: #ee7390"><i
                                        class="bi bi-journals"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Operasional</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn sarana text-light" style="background: #966896"><i
                                        class="bi bi-house-gear"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Fasilitas Lainnya</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection