@extends('template')

@section('content')
    <style>
        .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;
        }

        .sarana {
            text-align: center;
            line-height: 80px;
            width: 80px;
            font-size: 32px;
            margin: 0;
            padding: 0;
        }
    </style>
    <div class="row">
        <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 text-light sarana" style="background: #7fb3ff"><i
                                        class="bi bi-building"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Kemitraan</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn text-light sarana" style="background: #7fb3ff"><i
                                        class="ri-group-line"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Karir</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn text-light sarana" style="background: #7fb3ff"><i
                                        class="bi bi-journals"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Sumber Daya</span>
                            </div>
                        </div>
                        <div class="p-1 m-auto">
                            <div class="text-center">
                                <a href="" class="btn text-light sarana" style="background: #7fb3ff"><i
                                        class="bi bi-house-gear"></i></a>
                            </div>
                            <div class="text-center mt-2">
                                <span>Berita</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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>Data Wirausaha Muda</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">Usaha</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">{{ $a[2] }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="p-2" style="font-size: 16px"><b>Roadshow Kewirausahaan</b></div>
                        <div class="ml-auto p-2">
                            <a href="#" class="text-success" style="font-size: 12px;">Lihat Semua</a>
                        </div>
                    </div>
                                        @foreach ($data as $a)
                        <div class="d-flex border rounded w-100 m-1 p-2">
                            <div class="p-2">
                                <div class="numberCircle">
                                    <img class="rounded-circle" width="40" alt="avatar1"
                                        src="{{ asset('logo/user.png') }}" />
                                </div>
                            </div>
                            <div class="p-2 wrap text-success mt-2" style="font-size: 14px;">
                                <b>{{ $a }}</b>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="p-2" style="font-size: 16px"><b>Sertifikasi</b></div>
                        <div class="ml-auto p-2">
                            <a href="#" class="text-success" style="font-size: 12px;">Lihat Semua</a>
                        </div>
                    </div>
                                        @foreach ($data as $a)
                        <div class="d-flex border rounded w-100 m-1 p-2">
                            <div class="p-2">
                                <div class="numberCircle">
                                    <img class="rounded-circle" width="40" alt="avatar1"
                                        src="{{ asset('logo/user.png') }}" />
                                </div>
                            </div>
                            <div class="p-2 wrap text-success mt-2" style="font-size: 14px;">
                                <b>{{ $a }}</b>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div class="p-2" style="font-size: 16px"><b>Pelatihan</b></div>
                        <div class="ml-auto p-2">
                            <a href="#" class="text-success" style="font-size: 12px;">Lihat Semua</a>
                        </div>
                    </div>
                                        @foreach ($data as $a)
                        <div class="d-flex border rounded w-100 m-1 p-2">
                            <div class="p-2">
                                <div class="numberCircle">
                                    <img class="rounded-circle" width="40" alt="avatar1"
                                        src="{{ asset('logo/user.png') }}" />
                                </div>
                            </div>
                            <div class="p-2 wrap text-success mt-2" style="font-size: 14px;">
                                <b>{{ $a }}</b>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection