@extends('adminlte::page')

@section('title', 'Manajemen User | Smart Cendekia')

@section('plugins.Datatables', true)

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="text-dark font-weight-bold" style="font-family: 'Poppins', sans-serif;">Manajemen User</h1>
            <p class="text-muted small mb-0">Kelola akun pengguna, hak akses, dan kartu RFID.</p>
        </div>
        <ol class="breadcrumb bg-transparent p-0 mt-1">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">User</li>
        </ol>
    </div>
@stop

@section('content')
    <div class="card border-0 shadow-sm" style="border-radius: 15px;">
        
        <div class="card-header bg-white py-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h3 class="card-title font-weight-bold text-primary">
                    <i class="fas fa-users-cog mr-2"></i> Daftar Pengguna
                </h3>
                <div class="card-tools">
                    <a href="{{ route('users.create') }}" class="btn btn-primary btn-sm shadow-sm px-3 rounded-pill font-weight-bold">
                        <i class="fas fa-plus mr-1"></i> Tambah User
                    </a>
                </div>
            </div>

            <form action="{{ route('users.index') }}" method="GET" class="form-inline mt-2">
                <div class="d-flex w-100">
                    <select name="role" class="form-control form-control-sm mr-2 shadow-sm border-0 bg-light" 
                            style="width: 200px;" onchange="this.form.submit()">
                        <option value="">-- Semua Role --</option>
                        @foreach($roles as $key => $label)
                            <option value="{{ $key }}" {{ request('role') == $key ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    
                    <div class="input-group input-group-sm flex-grow-1">
                        <input type="text" name="search" class="form-control border-0 bg-light shadow-sm" 
                               placeholder="Cari Nama / Username / Scan Kartu RFID..." value="{{ request('search') }}">
                        <div class="input-group-append">
                            <button class="btn btn-light border-0 shadow-sm text-primary" type="submit">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-3">
                    <i class="fas fa-check-circle mr-2"></i> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif
            @if(session('error'))
                 <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-3">
                    <i class="fas fa-exclamation-circle mr-2"></i> {{ session('error') }}
                    <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                </div>
            @endif

            <table id="userTable" class="table table-hover align-middle w-100 dt-responsive nowrap">
                <thead class="bg-light text-uppercase text-muted text-xs font-weight-bold">
                    <tr>
                        <th width="5%" class="text-center">No</th>
                        <th width="25%">Pengguna</th>
                        <th width="15%">RFID (Kartu)</th>
                        <th width="15%">Role</th>
                        <th width="20%">Lembaga</th>
                        <th width="10%">Info</th>
                        <th width="10%" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td class="text-center text-muted font-weight-bold">
                                {{ $loop->iteration + ($users->currentPage() - 1) * $users->perPage() }}
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="symbol symbol-35px mr-3">
                                        <img src="https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=random&color=fff&size=100" 
                                             class="rounded-circle" width="35" height="35" alt="Avatar">
                                    </div>
                                    <div style="white-space: normal; word-break: break-word;">
                                        <span class="text-dark font-weight-bold d-block">{{ $user->name }}</span>
                                        <div class="d-flex flex-column">
                                            <span class="text-muted text-xs">{{ $user->email }}</span>
                                            <span class="text-muted text-xs">User: {{ $user->username }}</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            
                            <td>
                                @if($user->rfid_uid)
                                    <span class="badge badge-dark p-2" style="font-family: 'Courier New', monospace; letter-spacing: 1px;">
                                        <i class="fas fa-wifi text-xs mr-2"></i>{{ $user->rfid_uid }}
                                    </span>
                                @else
                                    <span class="badge badge-light text-muted border border-light">
                                        <i class="fas fa-minus-circle mr-1"></i> -
                                    </span>
                                @endif
                            </td>

                            <td>
                                @php
                                    $roleLabel = $user->role instanceof \App\Enums\UserRole ? $user->role->label() : ucwords(str_replace('_', ' ', $user->role));
                                    $badgeColor = $user->role instanceof \App\Enums\UserRole ? $user->role->color() : 'secondary';
                                @endphp
                                
                                <span class="badge badge-{{ $badgeColor }} px-3 py-2 rounded-pill text-xs font-weight-bold text-uppercase border border-{{ $badgeColor }}">
                                    {{ $roleLabel }}
                                </span>
                            </td>

                            <td>
                                @forelse($user->sekolahs as $sekolah)
                                    <span class="badge bg-light text-dark border mb-1" style="white-space: normal; text-align: left;">
                                        <i class="fas fa-building text-muted mr-1"></i> {{ $sekolah->nama_sekolah }}
                                    </span><br>
                                @empty
                                    <span class="text-muted text-xs font-italic">-- Global --</span>
                                @endforelse
                            </td>

                            <td>
                                @if($user->isSiswa() && $user->kelas)
                                    <span class="badge bg-light-success text-success font-weight-bold px-2 py-1 rounded">
                                        <i class="fas fa-user-graduate mr-1"></i> {{ $user->kelas->nama_kelas }}
                                    </span>
                                @elseif($user->kelas)
                                    <span class="badge bg-light-info text-info font-weight-bold px-2 py-1 rounded">
                                        <i class="fas fa-chalkboard-teacher mr-1"></i> Wali: {{ $user->kelas->nama_kelas }}
                                    </span>
                                @elseif($user->isOrangTua())
                                    <span class="badge bg-light-secondary text-secondary font-weight-bold px-2 py-1 rounded">
                                        <i class="fas fa-child mr-1"></i> {{ $user->anak->count() }} Anak
                                    </span>
                                @else
                                    <span class="text-muted text-xs font-italic">--</span>
                                @endif
                            </td>

                            <td class="text-center">
                                <div class="btn-group">
                                    <a href="{{ route('users.edit', $user->id) }}" class="btn btn-sm btn-light text-warning shadow-sm border" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    @if(auth()->id() !== $user->id)
                                        <button type="button" class="btn btn-sm btn-light text-danger shadow-sm border ml-1" 
                                                data-toggle="modal" data-target="#modalDelete-{{ $user->id }}" title="Hapus">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    @endif
                                </div>

                                @if(auth()->id() !== $user->id)
                                    <div class="modal fade" id="modalDelete-{{ $user->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content border-0 shadow-lg">
                                                <div class="modal-header bg-danger text-white">
                                                    <h5 class="modal-title font-weight-bold">Hapus Pengguna?</h5>
                                                    <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                                                </div>
                                                <div class="modal-body text-left bg-light">
                                                    <p class="mb-0">Yakin hapus user <strong>{{ $user->name }}</strong>?</p>
                                                    <p class="text-danger small mt-2 mb-0"><i class="fas fa-exclamation-triangle mr-1"></i> Permanen.</p>
                                                </div>
                                                <div class="modal-footer bg-white">
                                                    <button type="button" class="btn btn-link text-secondary" data-dismiss="modal">Batal</button>
                                                    <form action="{{ route('users.destroy', $user->id) }}" method="POST" class="d-inline">
                                                        @csrf @method('DELETE')
                                                        <button type="submit" class="btn btn-danger shadow-sm">Ya, Hapus</button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-5 text-muted">
                                <div class="d-flex flex-column align-items-center justify-content-center">
                                    <i class="fas fa-users fa-3x mb-3 opacity-50"></i>
                                    <p>Tidak ada user ditemukan.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="d-flex justify-content-center mt-4">
                {{ $users->withQueryString()->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
@stop

@push('css')
<style>
    .bg-light-primary { background-color: #e1f0ff; }
    .bg-light-success { background-color: #e8f5e9; }
    .bg-light-info { background-color: #e1f5fe; }
    .bg-light-secondary { background-color: #f8f9fa; }
    
    .text-primary { color: #3699ff !important; }
    
    /* FIX LEBAR TABEL: Memaksa tabel memenuhi container tanpa terpotong */
    table.dataTable { width: 100% !important; border-collapse: collapse !important; }
    
    .table thead th { border-bottom: 1px solid #ebedf3; background-color: #f8f9fa; color: #6c757d; }
    .table td { border-top: 1px solid #ebedf3; vertical-align: middle; }
    .table tbody tr:hover { background-color: #fafafa; }
</style>
@endpush

@push('js')
<script>
    $(document).ready(function() {
        $('#userTable').DataTable({
            "paging": false, 
            "lengthChange": false,
            "searching": false, 
            "ordering": true,
            "info": false,
            "autoWidth": false,
            "responsive": true, // Akan otomatis melipat kolom di layar kecil (Mobile)
            "columnDefs": [
                { "orderable": false, "targets": [6] } 
            ]
        });
    });
</script>
@endpush