@extends('template')
@section('title', $title)
@push('style')
    <style>
        .pagetitle #header-text {
            font-family: "Open Sans", sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: black
        }

        .card .instansi {
            /* color: #000; */
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-bottom: 20px;
        }

        .card .tr-top {
            height: 40px;
        }

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

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

        .instansi {
            display: flex;
        }

        .col {
            flex: 1;
            border-right: 1px solid #888;
            padding-right: 10px;
        }

        .col:last-child {
            border-right: none;
        }

        .alert {
            padding-top: 10;
            padding-bottom: 0;
        }

        .alert-judul {
            color: #000;
            font-size: 14px;
            font-weight: 600;
            margin: 0;
        }

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

        .card .card-body .table-sm {
            margin-top: 20px;
        }

        .card .card-body table thead {
            margin-bottom: 120px;
        }

        .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-kecil-1 {
            height: 20px;
            width: 40px;
            margin: 0;
            padding: 0;
        }

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

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

        .alert-kecil-4 {
            height: 20px;
            width: 110px;
            margin: 0;
            padding: 0;
        }

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

        .td-lihat-data {
            font-size: 12px;
            font-weight: 600;
        }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="pagetitle col-9">
            <p id="header-text" class="open-sans">KRITERIA PENGUMPULAN DATA DAN INFORMASI PANJI-PANJI KEBERHASILAN PEMBANGUNAN
                KEPEMUDAAN KAB/KOTA SE KALIMANTAN TIMUR TAHUN 2022</p>
        </div>
    </div>
    <section>
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <h6 class="card-title" style="color: black">Informasi Instansi</h6>
                    <a href="/instansi/{{ $instansi->id }}/edit" class="btn btn-success btn-sm"
                        style="display: inline-block; height: 30px; margin-top: 30px;">
                        <i class="ri-edit-2-line" title="Edit"></i> Edit
                    </a>
                </div>
                <div class="row instansi">
                    <div class="col">
                        <table>
                            <tr class="tr-top">
                                <td class="td-left">Kabupaten / Kota</td>
                                <td class="td-margin"></td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->kota }}</td>
                            </tr>
                            <tr>
                                <td class="td-left">Nama Instansi</td>
                                <td class="td-margin"></td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->nama_instansi }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col">
                        <table class="mx-auto">
                            <tr class="tr-top">
                                <td class="td-left">Nama Kepala Dinas</td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->kepala_dinas }}</td>
                            </tr>
                            <tr>
                                <td class="td-left">Alamat Kantor</td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->alamat }}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col">
                        <table class="mx-auto">
                            <tr class="tr-top">
                                <td class="td-left">Telepon / Fax</td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->no }}</td>
                            </tr>
                            <tr>
                                <td class="td-left">Email Kantor</td>
                                <td class="td-right">:</td>
                                <td>{{ $instansi->email }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <hr>
                @if (
                    $instansi->kota ||
                        $instansi->nama_instansi ||
                        $instansi->kepala_dinas ||
                        $instansi->alamat ||
                        $instansi->no ||
                        $instansi->email)
                    <div class="alert alert-danger alert-dismissible fade show " role="alert">
                        <p class="alert-judul open-sans">Petunjuk Pengisian :</p>
                        <p class="alert-text open-sans">Lengkapilah data dan informasi setiap pertanyaan, maupun pernyataan
                            untuk kelengkapan data perkembangan pembangunan kepemudaan di kab/kota selama kurun waktu 1
                            Tahun.</p>
                    </div>
                    <!-- Small tables -->
                    <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">URAIAN ASPEK DAN INDIKATOR</th>
                                <th scope="col" class="text-center">STATUS DOKUMEN</th>
                                <th scope="col" class="text-center">DOKUMEN TERLAMPIR</th>
                                <th scope="col" class="text-center">KETERANGAN</th>
                                <th scope="col" class="text-center">AKSI</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($masters as $master)
                                <tr class="table-secondary">
                                    <th scope="row" class="th-text text-center">
                                        {{ $loop->iteration + ($masters->currentPage() - 1) * $masters->perPage() }}</th>
                                    <td class="th-text">{{ strtoupper($master->uraian) }}</td>
                                    <td class="text-center mx-auto">
                                        @if ($master->status == 'Ada')
                                            <button class="td-text alert alert-success alert-kecil-1"
                                                style="color: #0B4238;">{{ strtoupper($master->status) }}</button>
                                        @elseif ($master->status == 'Tidak Ada')
                                            <button class="td-text alert alert-danger alert-kecil-2"
                                                style="color: #0B4238;">{{ strtoupper($master->status) }}</button>
                                        @elseif ($master->status == 'Pending')
                                            <button class="td-text alert alert-warning fst-italic alert-kecil-3"
                                                style="color: #0B4238;">{{ strtoupper($master->status) }}</button>
                                        @elseif ($master->status == 'Proses Editing')
                                            <button class="td-text alert alert-info alert-kecil-4"
                                                style="color: #0B4238;">{{ strtoupper($master->status) }}</button>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <button class="td-text alert alert-light alert-dokumen"
                                            style="color: #0B4238;">{{ strtoupper($master->dokumen) }}</button>
                                    </td>
                                    <td class="text-center">{{ $master->keterangan }}</td>
                                    <td class="text-center">
                                        <a href="/input-data/lihat-data/{{ $master->id }}/{{ Auth::user()->id }}"
                                            class="fst-italic open-sans td-lihat-data" style="color: #3F8664;"
                                            title="Lihat Data">
                                            Lihat Data>>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
                <!-- End small tables -->
            </div>
        </div>
    </section>
@endsection