@extends('template')
@section('title', $title)
@section('content')
    <style>
        .wrap {
            word-wrap: break-word;
        }

        .numberCircle {
            border-radius: 50%;
            width: 36px;
            height: 36px;
            padding: 10px;

            background: #3F8664;
            color: white;
            text-align: center;

            font: 14px Arial, sans-serif;
        }

        .dot {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: inline-block;
        }

        .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;
        }

        /* calender */
        #calendar {
            margin: 0 auto;
            font-size: 10px;
        }

        .fc-content-skeleton>table>thead>tr>td {
            text-align: center;
        }

        .fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
            float: none;
        }


        .fc-toolbar h2 {
            font-size: 12px;
            white-space: normal !important;
        }

        /* click +2 more for popup */
        .fc-more-cell a {
            display: block;
            width: 100%;
            margin: 1px auto 0 auto;
            border-radius: 3px;
            background: grey;
            color: transparent;
            overflow: hidden;
            height: 4px;
        }

        .fc {
            text-align: center !important;
        }

        .fc td,
        .fc th {
            border-style: none !important;
        }


        .fc-view-month .fc-event,
        .fc-view-agendaWeek .fc-event,
        .fc-content {
            font-size: 0;
            overflow: hidden;
            height: 2px;
        }

        .fc-view-agendaWeek .fc-event-vert {
            font-size: 0;
            overflow: hidden;
            width: 2px !important;
        }

        .fc-agenda-axis {
            width: 20px !important;
            font-size: .7em;
        }

        .fc-button-content {
            padding: 0;
        }
    </style>
    <div class="row">
        <div class="col-lg-5 col-md-12">
            <div class="card">
                <div class="card-body">
                    <br>
                    <h4><b>Selamat Datang, {{ Auth::user()->name }}</b></h4>
                    <p>Anda Menggunakan akun dengan hak akses, {{ Auth::user()->role }}</p>
                </div>
            </div>
            @if (Auth::user()->role == 'Admin')
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="mt-2">
                                    <div class="d-flex justify-content-between">
                                        <div class="p-2" style="font-size: 13px"><b>Jumlah Pengguna</b></div>
                                        <div class="ml-auto p-1">
                                            <span class="dot bg-success"></span>
                                        </div>
                                    </div>
                                    <span class="p-2"> <b style="font-size: 30px;">{{ $pengguna }}</b> </span><br>
                                    <span class="p-2"> <b style="font-size: 20px;">...</b> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="mt-2">
                                    <div class="d-flex justify-content-between">
                                        <div class="p-2" style="font-size: 13px"><b>Kelengkapan Data</b></div>
                                        <div class="ml-auto p-1">
                                            <span class="dot bg-warning"></span>
                                        </div>
                                    </div>
                                    <span class="p-2"> <b style="font-size: 30px;">{{ $kelengkapan_data }}</b>
                                    </span><br>
                                    <span class="p-2"> <b style="font-size: 20px;">...</b> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
        @if (Auth::user()->role == 'Admin')
            <div class="col-lg-7 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-6 col-md-12 p-2 mt-2 mb-2">
                                <div id='calendar' class="fc-time"></div>
                            </div>
                            <div class="col-lg-6 col-md-12 p-1">
                                <div class="d-flex justify-content-between">
                                    <div class="p-2" style="font-size: 16px"><b>Kalendar Agenda</b></div>
                                    <div class="ml-auto p-2">
                                        <a href="/kalender" class="text-success" style="font-size: 12px;">Lihat Semua</a>
                                    </div>
                                </div>
                                @foreach ($kalender as $a)
                                    <div class="row border rounded w-100 m-1 p-2">
                                        <div class="col-2">
                                            <div class="numberCircle">
                                                {{ date('d', strtotime($a->start_event)) }}
                                            </div>
                                        </div>
                                        <div class="col-10 wrap mt-2 text-success" style="font-size: 12px;">
                                            {{ $a->title }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
    @if (Auth::user()->role == 'Admin')
        <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>Tabel Kelengkapan Data Pengguna</b></h4>
                        </div>
                        <div class="ml-auto p-2" style="right: 10px;">
                            <a href="/user" 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">Username</th>
                            <th scope="col" class="text-center">Data</th>
                            <th scope="col" class="text-center">STATUS DOKUMEN</th>
                            <th scope="col" class="text-center">KETERANGAN</th>
                            <th scope="col" class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                                                @foreach ($instansis as $instansi)
                            <tr class="table-secondary">
                                <th scope="row" class="th-text text-center">
                                    {{ $loop->iteration + ($instansis->currentPage() - 1) * $instansis->perPage() }}</th>
                                <td class="th-text">{{ $instansi->user->name }}</td>
                                <td class="th-text">
                                    <center>
                                        {{-- {{ $example[2] }} --}}
                                        {{ 'Belum Melengkapi Data Pengguna' }}
                                    </center>
                                </td>
                                <td class="text-center">
                                    <button class="td-text alert alert-success alert-kecil-1"
                                        style="color: #0B4238;">{{ strtoupper('Ada') }}</button>
                                </td>
                                <td class="text-center">{{ '-' }}</td>
                                <td class="text-center">
                                    <a href="/admin/lihat-data/{{ $instansi->id }}"
                                        class="fst-italic open-sans td-lihat-data" style="color: #3F8664;"
                                        title="Lihat Data">
                                        Lihat Data>>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
    <script>
        @section('jquery')
            var calendar = $('#calendar').fullCalendar({
                editable: true,
                header: {
                    left: 'prev',
                    center: 'title',
                    right: 'next'
                },
                defaultView: 'month',
                showNonCurrentDates: false,
                fixedWeekCount: false,
                contentHeight: "auto",
                handleWindowResize: true,
                themeSystem: 'bootstrap3',
                events: {
                    url: '/kalender?kalender=kalender',
                    color: '#3F8664',
                    textColor: '#3F8664',
                },
            });
        @endsection
    </script>
@endsection