@extends('template')

@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">Pengguna</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 Pengguna</h6>
                    <a href="/user/create" class="btn btn-success btn-sm"
                        style="display: inline-block; height: 30px; margin-top: 30px;">
                        <i class="ri-edit-2-line" title="Tambah"></i> Tambah
                    </a>
                </div>
                <hr>
                <!-- 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">Nama</th>
                            <th scope="col" class="">Username</th>
                            <th scope="col" class="">Email</th>
                            <th scope="col" class="">Nama Instansi</th>
                            <th scope="col" class="text-center">AKSI</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $user)
                            <tr class="table-secondary">
                                <th scope="row" class="th-text text-center">
                                    {{ $loop->iteration + ($users->currentPage() - 1) * $users->perPage() }}</th>
                                <td class="th-text">{{ $user->user->name }}</td>
                                <td class="th-text">{{ $user->user->username }}</td>
                                <td class="th-text">{{ $user->user->email }}</td>
                                <td class="th-text">
                                    {{ $user->nama_instansi }}
                                </td>
                                <td class="text-center">
                                    {{-- <a href="{{ $user->id }}" target="_blank"
                                    class="border-0 btn btn-lg m-0 p-0" style="background: ; color: #077840">
                                    <i class="bi bi-download" title="Download"></i>
                                </a> --}}
                                    <a href="/admin/lihat-data/{{ $user->id }}"
                                        class="fst-italic open-sans td-lihat-data" style="color: #3F8664;"
                                        title="Lihat Data">
                                        Lihat Data>>
                                    </a>
                                    <a href="/user/{{ $user->user->id }}/edit" class="border-0 btn btn-lg mx-2 p-0"
                                        style="margin-top: 5px; color: #BE6700">
                                        <i class="bx bx-edit" title="Edit"></i>
                                    </a>
                                    <form action="/user/{{ $user->user->id }}" method="POST" class="d-inline">
                                        @method('delete')
                                        @csrf
                                        <button type="submit" class="border-0 text-danger btn btn-lg m-0 p-0"
                                            title="Hapus" id="btn-delete">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                <!-- End small tables -->
            </div>
        </div>
    </section>
@endsection