@extends('layouts.app')

@section('content')

<div class="pengguna-page">

    {{-- =====================================================
         HEADER
    ====================================================== --}}

    <div class="page-header">

        <div>

            <h3 class="page-title">
                <i class="bi bi-people me-2"></i>
                Manajemen Pengguna
            </h3>

            <p class="page-subtitle">
                Kelola data pengguna dan hak akses sistem.
            </p>

        </div>

        <a
            href="{{ route('pengguna.create') }}"
            class="btn btn-primary">

            <i class="bi bi-person-plus me-1"></i>

            Tambah Pengguna

        </a>

    </div>


    {{-- =====================================================
         SUCCESS MESSAGE
    ====================================================== --}}

    @if(session('success'))

        <div class="alert alert-success alert-dismissible fade show">

            <i class="bi bi-check-circle me-2"></i>

            {{ session('success') }}

            <button
                type="button"
                class="btn-close"
                data-bs-dismiss="alert">
            </button>

        </div>

    @endif


    {{-- =====================================================
         CARD
    ====================================================== --}}

    <div class="card pengguna-card shadow-sm border-0">

        <div class="card-header bg-primary text-white">

            <div class="d-flex align-items-center">

                <i class="bi bi-person-lines-fill me-2"></i>

                <strong>
                    Data Pengguna
                </strong>

            </div>

        </div>


        <div class="card-body">


            {{-- =================================================
                 TABLE
            ================================================== --}}

            <div class="table-responsive pengguna-table-wrapper">

                <table class="table table-bordered table-hover align-middle pengguna-table">

                    <thead class="table-dark">

                        <tr>

                            <th width="60">
                                No
                            </th>

                            <th>
                                Nama
                            </th>

                            <th>
                                Username
                            </th>

                            <th>
                                Email
                            </th>

                            <th>
                                Role
                            </th>

                            <th width="180">
                                Aksi
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        @forelse($users as $index => $user)

                        <tr>

                            {{-- NO --}}

                            <td class="text-center">

                                {{ $index + 1 }}

                            </td>


                            {{-- NAMA --}}

                            <td>

                                <div class="user-name">

                                    <div class="user-icon">

                                        <i class="bi bi-person"></i>

                                    </div>

                                    <span>

                                        {{ $user->nama }}

                                    </span>

                                </div>

                            </td>


                            {{-- USERNAME --}}

                            <td>

                                {{ $user->username }}

                            </td>


                            {{-- EMAIL --}}

                            <td>

                                {{ $user->email }}

                            </td>


                            {{-- ROLE --}}

                            <td>

                                @if($user->role == 'admin')

                                    <span class="badge bg-danger role-badge">

                                        <i class="bi bi-shield-lock me-1"></i>

                                        Admin

                                    </span>

                                @elseif($user->role == 'staff_lab')

                                    <span class="badge bg-primary role-badge">

                                        <i class="bi bi-person-workspace me-1"></i>

                                        Staff Laboratorium

                                    </span>

                                @elseif($user->role == 'dosen_mahasiswa')

                                    <span class="badge bg-success role-badge">

                                        <i class="bi bi-person-check me-1"></i>

                                        Dosen / Mahasiswa

                                    </span>

                                @else

                                    <span class="badge bg-secondary role-badge">

                                        {{ $user->role }}

                                    </span>

                                @endif

                            </td>


                            {{-- AKSI --}}

                            <td>

                                <div class="action-buttons">

                                    <a
                                        href="{{ route('pengguna.edit',$user->id) }}"
                                        class="btn btn-warning btn-sm">

                                        <i class="bi bi-pencil-square"></i>

                                        Edit

                                    </a>


                                    <form
                                        action="{{ route('pengguna.destroy',$user->id) }}"
                                        method="POST"
                                        class="d-inline"
                                        onsubmit="return confirm('Yakin ingin menghapus pengguna ini?')">

                                        @csrf

                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="btn btn-danger btn-sm">

                                            <i class="bi bi-trash"></i>

                                            Hapus

                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>


                        @empty

                        <tr>

                            <td
                                colspan="6"
                                class="text-center py-4">

                                <div class="empty-data">

                                    <i class="bi bi-person-x"></i>

                                    <p>
                                        Belum ada data pengguna.
                                    </p>

                                </div>

                            </td>

                        </tr>

                        @endforelse

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


{{-- =====================================================
     CSS RESPONSIVE
====================================================== --}}

<style>

/* =====================================================
   PAGE
===================================================== */

.pengguna-page {

    width: 100%;

    max-width: 100%;

}


/* =====================================================
   HEADER
===================================================== */

.page-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 20px;

}


.page-title {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

}


.page-subtitle {

    margin: 5px 0 0;

    font-size: 13px;

    color: #6c757d;

}


.page-header .btn {

    white-space: nowrap;

}


/* =====================================================
   CARD
===================================================== */

.pengguna-card {

    width: 100%;

    border-radius: 10px;

    overflow: hidden;

}


.pengguna-card .card-header {

    padding: 14px 18px;

}


.pengguna-card .card-body {

    padding: 20px;

}


/* =====================================================
   TABLE WRAPPER
===================================================== */

.pengguna-table-wrapper {

    width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}


/*
|--------------------------------------------------------------------------
| Penting
|--------------------------------------------------------------------------
|
| Minimum width membuat tabel tetap terbaca.
| Jika layar HP terlalu kecil, yang bergeser
| hanya tabelnya.
|
*/

.pengguna-table {

    min-width: 850px;

    margin-bottom: 0;

}


/* =====================================================
   TABLE
===================================================== */

.pengguna-table th {

    white-space: nowrap;

    font-size: 13px;

    padding: 12px;

}


.pengguna-table td {

    font-size: 13px;

    padding: 12px;

}


/* =====================================================
   USER
===================================================== */

.user-name {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 160px;

}


.user-icon {

    width: 34px;

    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    background: #e9f2ff;

    color: #0d6efd;

    display: flex;

    align-items: center;

    justify-content: center;

}


.user-icon i {

    font-size: 15px;

}


/* =====================================================
   ROLE
===================================================== */

.role-badge {

    padding: 7px 9px;

    font-size: 11px;

    white-space: nowrap;

}


/* =====================================================
   ACTION
===================================================== */

.action-buttons {

    display: flex;

    align-items: center;

    gap: 5px;

    white-space: nowrap;

}


.action-buttons .btn {

    font-size: 12px;

}


/* =====================================================
   EMPTY DATA
===================================================== */

.empty-data {

    padding: 20px;

    color: #6c757d;

}


.empty-data i {

    display: block;

    font-size: 40px;

    margin-bottom: 10px;

}


.empty-data p {

    margin: 0;

    font-size: 13px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991.98px) {

    .page-title {

        font-size: 21px;

    }


    .pengguna-card .card-body {

        padding: 15px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767.98px) {

    .page-header {

        flex-direction: column;

        align-items: stretch;

        gap: 12px;

    }


    .page-title {

        font-size: 20px;

    }


    .page-subtitle {

        font-size: 12px;

        line-height: 1.5;

    }


    .page-header .btn {

        width: 100%;

    }


    .pengguna-card {

        border-radius: 8px;

    }


    .pengguna-card .card-header {

        padding: 12px 14px;

        font-size: 14px;

    }


    .pengguna-card .card-body {

        padding: 12px;

    }


    /*
    |--------------------------------------------------------------------------
    | Tabel tetap lebar.
    | Hanya area tabel yang dapat digeser.
    |--------------------------------------------------------------------------
    */

    .pengguna-table {

        min-width: 800px;

    }

}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 575.98px) {

    .page-title {

        font-size: 18px;

    }


    .pengguna-card .card-body {

        padding: 10px;

    }


    .pengguna-table {

        min-width: 780px;

    }


    .pengguna-table th,
    .pengguna-table td {

        font-size: 12px;

        padding: 9px;

    }


    .user-name {

        min-width: 140px;

    }


    .role-badge {

        font-size: 10px;

    }

}

</style>

@endsection