@extends('layouts.app')

@section('title', 'Manajemen User')

@section('content')
    <div class="container py-4">
        <div class="row mb-4 align-items-end" data-aos="fade-down">
            <div class="col-md-8">
                <span
                    class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-2 fw-bold tracking-wide">USER
                    MANAGEMENT</span>
                <h3 class="fw-bolder mb-1">Manajemen Pengguna Sistem</h3>
                <p class="text-muted mb-0">Tambah, atur akses, dan kelola seluruh akun karyawan di SIPENSA.</p>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <a href="{{ route('dashboard.users.create') }}"
                    class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm hover-lift">
                    <i class="bi bi-person-plus-fill me-2"></i>Tambah User Baru
                </a>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-4 border-start border-success border-5 mb-4"
                role="alert" data-aos="fade-in">
                <i class="bi bi-check-circle-fill fs-5 text-success me-2"></i> <span
                    class="fw-medium">{{ session('success') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm rounded-4 border-start border-danger border-5 mb-4"
                role="alert" data-aos="fade-in">
                <i class="bi bi-exclamation-triangle-fill fs-5 text-danger me-2"></i> <span
                    class="fw-medium">{{ session('error') }}</span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card border-0 shadow-sm rounded-4 overflow-hidden" data-aos="fade-up" data-aos-delay="100">
            <div
                class="card-header bg-white border-bottom pt-4 pb-3 px-4 d-flex justify-content-between align-items-center">
                <h6 class="fw-bolder text-dark mb-0"><i class="bi bi-people text-primary me-2"></i>Daftar Akun Terdaftar
                </h6>
                <span class="badge bg-light text-dark border px-3 py-2 rounded-pill shadow-sm">{{ count($users) }}
                    Pengguna</span>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="text-uppercase text-secondary fw-bold small py-3 ps-4">Profil Karyawan</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3">Role / Hak Akses</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3">Tanggal Terdaftar</th>
                                <th class="text-uppercase text-secondary fw-bold small py-3 pe-4 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                <tr class="hover-lift-subtle" style="transition: all 0.2s;">
                                    <td class="ps-4 py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex justify-content-center align-items-center me-3 shadow-sm"
                                                style="width: 45px; height: 45px;">
                                                <span
                                                    class="fw-bold fs-5">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
                                            </div>
                                            <div>
                                                <h6 class="fw-bold text-dark mb-0">{{ $user->name }}</h6>
                                                <small class="text-muted"><i
                                                        class="bi bi-envelope me-1"></i>{{ $user->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="py-3">
                                        @php
                                            $roleName = $user->roles->pluck('name')->first() ?? 'Tidak ada';
                                            $badgeColor = match (strtolower($roleName)) {
                                                'admin' => 'danger',
                                                'sales' => 'primary',
                                                'marketing' => 'warning text-dark',
                                                'pic' => 'success',
                                                default => 'secondary',
                                            };
                                        @endphp
                                        <span
                                            class="badge bg-{{ $badgeColor }} rounded-pill px-3 py-2 shadow-sm text-uppercase"
                                            style="letter-spacing: 0.5px; font-size: 0.7rem;">
                                            <i class="bi bi-shield-lock-fill me-1"></i> {{ $roleName }}
                                        </span>
                                    </td>
                                    <td class="py-3 text-secondary">
                                        <i class="bi bi-calendar3 me-1 small"></i> {{ $user->created_at->format('d M Y') }}
                                    </td>
                                    <td class="pe-4 py-3 text-center">
                                        <div class="d-inline-flex gap-2">
                                            <a href="{{ route('dashboard.users.edit', $user->id) }}"
                                                class="btn btn-sm btn-light text-primary rounded-circle shadow-sm"
                                                style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;"
                                                data-bs-toggle="tooltip" title="Edit Data">
                                                <i class="bi bi-pencil-fill"></i>
                                            </a>
                                            <form action="{{ route('dashboard.users.destroy', $user->id) }}" method="POST"
                                                class="d-inline m-0 p-0"
                                                onsubmit="return confirm('Yakin ingin menghapus user ini secara permanen?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit"
                                                    class="btn btn-sm btn-light text-danger rounded-circle shadow-sm hover-lift"
                                                    style="width: 35px; height: 35px; display: flex; align-items: center; justify-content: center;"
                                                    data-bs-toggle="tooltip"
                                                    title="{{ $user->id === auth()->id() ? 'Anda tidak bisa menghapus diri sendiri' : 'Hapus User' }}"
                                                    {{ $user->id === auth()->id() ? 'disabled' : '' }}>
                                                    <i class="bi bi-trash3-fill"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        });
    </script>
@endsection