@extends('layouts.admin')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

    :root {
        --primary: #4f46e5;
        --primary-light: #eef2ff;
        --border: #e2e8f0;
        --text-dark: #1e293b;
        --text-muted: #64748b;
        --text-hint: #94a3b8;
    }

    body { font-family: 'Plus Jakarta Sans', sans-serif; }
    .page-wrapper { padding: 24px 20px 60px; }
    .page-header {
        display: flex; flex-wrap: wrap;
        justify-content: space-between; align-items: center;
        gap: 12px; margin-bottom: 24px;
    }
    .page-header h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 4px; }

    .card-table {
        background: #fff; border-radius: 16px;
        border: 1px solid var(--border);
        box-shadow: 0 1px 4px rgba(0,0,0,.04); overflow: hidden;
    }

    .tbl { width: 100%; margin: 0; border-collapse: collapse; }
    .tbl thead th {
        padding: 12px 18px; font-size: 11px; font-weight: 600;
        text-transform: uppercase; letter-spacing: .06em;
        color: var(--text-muted); background: #f8fafc;
        border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .tbl tbody td {
        padding: 14px 18px; border-bottom: 1px solid #f1f5f9; vertical-align: middle;
    }
    .tbl tbody tr:last-child td { border-bottom: none; }
    .tbl tbody tr:hover td { background: #fafbff; }
    .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .avatar { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }

    .badge-id {
        display: inline-block; background: var(--primary-light); color: var(--primary);
        padding: 4px 10px; border-radius: 6px;
        font-size: 12px; font-weight: 600; font-family: 'Courier New', monospace;
    }
    .badge-role {
        display: inline-block; padding: 4px 12px; border-radius: 20px;
        font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    }
    .badge-role.admin { background: #fee2e2; color: #dc2626; }
    .badge-role.guru  { background: #e0e7ff; color: #4338ca; }

    .btn-icon {
        width: 34px; height: 34px;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid var(--border); border-radius: 8px;
        background: #fff; color: var(--text-muted);
        cursor: pointer; transition: background .15s, transform .15s, color .15s;
    }
    .btn-icon:hover { background: #f8fafc; transform: translateY(-1px); }
    .btn-icon:hover .bi-pencil-square { color: #f59e0b; }
    .btn-icon:hover .bi-trash3-fill   { color: #ef4444; }

    .form-field {
        width: 100%; padding: 10px 14px;
        border: 1px solid var(--border); border-radius: 10px;
        background: #f8fafc; font-size: 14px; font-family: inherit;
        color: var(--text-dark); transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .form-field:focus {
        outline: none; background: #fff;
        border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1);
    }

    /* Field error state */
    .form-field.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239,68,68,.1);
    }
    .field-error {
        font-size: 12px; color: #ef4444;
        margin-top: 6px; display: flex; align-items: center; gap: 4px;
    }
    
    /* Indikator sukses untuk username */
    .field-success {
        font-size: 12px; color: #16a34a;
        margin-top: 6px; display: flex; align-items: center; gap: 4px;
    }

    .form-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }

    .modal-content { border: none; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

    .empty-state { text-align: center; padding: 56px 20px; color: var(--text-hint); }
    .empty-state i { font-size: 40px; display: block; margin-bottom: 12px; opacity: .3; }

    @media (max-width: 640px) {
        .page-header h3 { font-size: 18px; }
        .btn-add { width: 100%; justify-content: center; }
        .page-header { flex-direction: column; align-items: flex-start; }
    }

    /* ── PERBAIKAN: Tabel Card Stack untuk Mobile ── */
    @media (max-width: 768px) {
        .card-table { background: transparent; border: none; box-shadow: none; }
        .tbl thead { display: none; }
        .tbl tbody tr {
            display: block;
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 16px; /* Hapus margin kiri-kanan agar presisi */
            box-shadow: 0 1px 3px rgba(0,0,0,.03);
            background: #fff;
        }
        .tbl tbody tr:hover td { background: transparent; }
        .tbl tbody td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border: none;
            border-bottom: 1px solid #f1f5f9;
            font-size: 13px;
            gap: 12px;
        }
        .tbl tbody td:last-child { border-bottom: none; }
        
        /* Pengaturan label baris (ID Login, Email, Aksi) */
        .tbl tbody td::before {
            content: attr(data-label);
            font-size: 11px; font-weight: 700; color: var(--text-muted);
            text-transform: uppercase; letter-spacing: .04em;
            flex-shrink: 0; min-width: 70px;
        }
        
        /* Hapus padding Desktop */
        .tbl tbody td.ps-4, .tbl tbody td.pe-4 { padding-left: 16px !important; padding-right: 16px !important; }
        
        /* Kolom Pengguna (Foto & Nama) */
        .tbl tbody td[data-label="Pengguna"] {
            flex-direction: column; align-items: flex-start; gap: 8px;
            background: #f8fafc; border-radius: 12px 12px 0 0;
        }
        .tbl tbody td[data-label="Pengguna"]::before { display: none; }
        
        /* Cegah Flexbox meluber / overflow saat nama panjang */
        .tbl tbody td[data-label="Pengguna"] .d-flex {
            width: 100%; align-items: center;
        }
        .tbl tbody td[data-label="Pengguna"] .d-flex > div {
            flex: 1; min-width: 0; /* Penting: mencegah flex item menerobos lebar parent */
        }
        
        /* Teks otomatis membungkus / wrap jika kepanjangan */
        .tbl tbody td .fw-semibold {
            white-space: normal; word-break: break-word;
        }
        
        /* Penyesuaian Kolom Email & ID Login agar membungkus dengan baik */
        .tbl tbody td span, .tbl tbody td div { max-width: 100%; text-align: right; }
        .tbl tbody td[data-label="Email"] span,
        .tbl tbody td[data-label="ID Login"] span {
            word-break: break-all; font-size: 12px; text-align: right;
        }
        
        /* Kolom Aksi */
        .tbl tbody td[data-label="Aksi"] { justify-content: flex-end; }
        .tbl tbody td[data-label="Aksi"]::before { display: none; }
    }
</style>

<div class="container-fluid page-wrapper">
    <div class="row">
        <div class="col-12">

            {{-- Header --}}
            <div class="page-header">
                <div>
                    <h3>Manajemen Pengguna</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0" style="font-size:12px;">
                            <li class="breadcrumb-item">
                                <a href="#" class="text-decoration-none text-muted">Sistem</a>
                            </li>
                            <li class="breadcrumb-item active fw-semibold" style="color:var(--primary);">
                                Akses Pengguna
                            </li>
                        </ol>
                    </nav>
                </div>

                <button class="btn btn-primary rounded-pill px-4 fw-semibold btn-add"
                        style="font-size:14px;"
                        data-bs-toggle="modal"
                        data-bs-target="#modalTambahUser">
                    <i class="bi bi-person-plus-fill me-2"></i>Tambah Akun
                </button>
            </div>

            {{-- Table Card --}}
            <div class="card-table">
                <div class="table-responsive">
                    <table class="tbl">
                        <thead>
                            <tr>
                                <th class="ps-4">Pengguna</th>
                                <th>ID Login</th>
                                <th class="text-center">Hak Akses</th>
                                <th>Email</th>
                                <th class="text-end pe-4">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $u)
                            <tr>
                                <td class="ps-4" data-label="Pengguna">
                                    <div class="d-flex align-items-center gap-3">
                                        <img class="avatar"
                                             src="https://ui-avatars.com/api/?name={{ urlencode($u->name) }}&background={{ $u->role === 'admin' ? 'ef4444' : '6366f1' }}&color=fff&bold=true&size=80"
                                             alt="{{ $u->name }}">
                                        <div>
                                            <div class="fw-semibold" style="font-size:14px;">{{ $u->name }}</div>
                                            <div class="text-muted" style="font-size:11px;">
                                                Bergabung {{ $u->created_at->format('d M Y') }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td data-label="ID Login"><span class="badge-id">{{ $u->username }}</span></td>
                                <td class="text-center" data-label="Hak Akses">
                                    <span class="badge-role {{ $u->role }}">
                                        {{ $u->role === 'admin' ? 'Admin' : 'Guru' }}
                                    </span>
                                </td>
                                <td data-label="Email"><span style="font-size:13px;color:var(--text-muted);">{{ $u->email }}</span></td>
                                <td class="text-end pe-4" data-label="Aksi">
                                    <div class="d-flex justify-content-end gap-2">
                                        <button class="btn-icon"
                                                data-bs-toggle="modal"
                                                data-bs-target="#modalEdit{{ $u->id }}"
                                                title="Edit">
                                            <i class="bi bi-pencil-square"></i>
                                        </button>
                                        <form id="del-{{ $u->id }}"
                                              action="{{ route('admin.user.destroy', $u->id) }}"
                                              method="POST" class="d-inline">
                                            @csrf @method('DELETE')
                                            <button type="button" class="btn-icon"
                                                    onclick="confirmDelete('{{ $u->id }}', '{{ addslashes($u->name) }}')"
                                                    title="Hapus">
                                                <i class="bi bi-trash3-fill"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5">
                                    <div class="empty-state">
                                        <i class="bi bi-people"></i>
                                        <p class="mb-0" style="font-size:13px;">Belum ada pengguna terdaftar</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

{{-- ============================================================
     MODAL EDIT
============================================================= --}}
@foreach($users as $u)
<div class="modal fade" id="modalEdit{{ $u->id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down" style="max-width:460px;">
        <div class="modal-content">
            <div class="modal-header border-0 px-4 pt-4 pb-2">
                <h5 class="modal-title fw-bold">Edit Pengguna</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.user.update', $u->id) }}" method="POST">
                @csrf @method('PUT')
                <div class="modal-body px-4 py-3">

                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" name="name"
                               value="{{ old('name', $u->name) }}"
                               class="form-field" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" name="username"
                               value="{{ old('username', $u->username) }}"
                               class="form-field" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email"
                               value="{{ old('email', $u->email) }}"
                               class="form-field" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Hak Akses</label>
                        <select name="role" class="form-field">
                            <option value="guru"  {{ $u->role === 'guru'  ? 'selected' : '' }}>Guru</option>
                            <option value="admin" {{ $u->role === 'admin' ? 'selected' : '' }}>Admin</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Password Baru</label>
                        <input type="password" name="password" class="form-field"
                               placeholder="Kosongkan jika tidak diubah">
                        <div class="field-error" style="color:#94a3b8;">
                            <i class="bi bi-info-circle"></i> Minimal 5 karakter
                        </div>
                    </div>

                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-2">
                    <button type="button" class="btn btn-light rounded-pill px-4 fw-semibold"
                            data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-semibold">
                        Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

{{-- ============================================================
     MODAL TAMBAH
============================================================= --}}
<div class="modal fade" id="modalTambahUser" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-sm-down" style="max-width:460px;">
        <div class="modal-content">
            <div class="modal-header border-0 px-4 pt-4 pb-2">
                <h5 class="modal-title fw-bold">Tambah Akun Baru</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.user.store') }}" method="POST" id="formTambahUser">
                @csrf
                <div class="modal-body px-4 py-3">

                    <div class="mb-3">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" name="name" id="inp-name"
                               value="{{ old('name') }}"
                               class="form-field @error('name') is-invalid @enderror"
                               placeholder="Nama lengkap" required>
                        @error('name')
                            <div class="field-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" id="inp-username"
                               value="{{ old('username') }}"
                               class="form-field @error('username') is-invalid @enderror"
                               placeholder="ID untuk login" required>
                        <div id="username-hint"></div>
                        @error('username')
                            <div class="field-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" id="inp-email"
                               value="{{ old('email') }}"
                               class="form-field @error('email') is-invalid @enderror"
                               placeholder="email@gmail.com" required>
                        @error('email')
                            <div class="field-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Hak Akses</label>
                        <select name="role" class="form-field">
                            <option value="guru">Guru</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Password</label>
                        <input type="password" name="password"
                               class="form-field @error('password') is-invalid @enderror"
                               placeholder="Minimal 5 karakter" required>
                        @error('password')
                            <div class="field-error"><i class="bi bi-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-2">
                    <button type="button" class="btn btn-light rounded-pill px-4 fw-semibold"
                            data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary rounded-pill px-4 fw-semibold">
                        Daftarkan Akun
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const Toast = Swal.mixin({
    toast: true, position: 'top-end',
    showConfirmButton: false, timer: 3000, timerProgressBar: true,
    customClass: { popup: 'rounded-4 shadow-sm' }
});

@if(session('success'))
    Toast.fire({
        icon: 'success',
        title: @json(session('success'))
    });
@endif

@if(session('error'))
    Swal.fire({
        icon: 'error',
        title: 'Gagal!',
        text: @json(session('error')),
        confirmButtonColor: '#4f46e5',
        customClass: { popup: 'rounded-4', confirmButton: 'rounded-3 px-4' }
    });
@endif

@if($errors->any())
    Swal.fire({
        icon: 'warning',
        title: 'Ada kesalahan input!',
        html: `<div style="text-align:left;font-size:13px;line-height:2;">
            @foreach($errors->all() as $err)
                <div>• {{ $err }}</div>
            @endforeach
        </div>`,
        confirmButtonColor: '#4f46e5',
        customClass: { popup: 'rounded-4', confirmButton: 'rounded-3 px-4' }
    });

    document.addEventListener('DOMContentLoaded', function() {
        var modal = new bootstrap.Modal(document.getElementById('modalTambahUser'));
        modal.show();
    });
@endif

function confirmDelete(id, nama) {
    Swal.fire({
        title: 'Hapus akun ini?',
        html: `Akun <strong>${nama}</strong> akan dihapus secara permanen.`,
        icon: 'warning',
        showCancelButton: true,
        reverseButtons: true,
        confirmButtonColor: '#ef4444',
        cancelButtonColor: '#64748b',
        confirmButtonText: '<i class="bi bi-trash3-fill me-1"></i> Ya, Hapus',
        cancelButtonText: 'Batal',
        customClass: { popup: 'rounded-4', confirmButton: 'rounded-3', cancelButton: 'rounded-3' }
    }).then(r => {
        if (r.isConfirmed) {
            Swal.fire({
                title: 'Menghapus...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
            document.getElementById('del-' + id).submit();
        }
    });
}

const usernameInput = document.getElementById('inp-username');
if (usernameInput) {
    let debounceTimer;
    usernameInput.addEventListener('input', function() {
        clearTimeout(debounceTimer);
        const val = this.value.trim();
        const hint = document.getElementById('username-hint');
        
        if (val.length < 3) {
            hint.innerHTML = '';
            usernameInput.classList.remove('is-invalid');
            return;
        }

        debounceTimer = setTimeout(() => {
            fetch(`/admin/user/check-username?username=${encodeURIComponent(val)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.exists) {
                        usernameInput.classList.add('is-invalid');
                        if (hint) {
                            hint.className = 'field-error';
                            hint.innerHTML = '<i class="bi bi-exclamation-circle"></i> Username sudah digunakan';
                        }
                    } else {
                        usernameInput.classList.remove('is-invalid');
                        if (hint) {
                            hint.className = 'field-success';
                            hint.innerHTML = '<i class="bi bi-check-circle"></i> Username tersedia';
                        }
                    }
                })
                .catch(() => {});
        }, 400);
    });
}
</script>
@endsection