@extends('admin.layout')

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

@section('card_icon')
    <i class="bi bi-people-fill" style="font-size:16px;color:var(--header-bg)"></i>
@endsection

@section('content')
    <div style="background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,0.04)">
        <div style="padding:12px 16px;border-bottom:1px solid #f1f1f1;font-weight:700;background:#fafafa;display:flex;align-items:center;gap:8px">
            @hasSection('card_icon')
                <span class="card-icon">@yield('card_icon')</span>
            @endif
            <span class="card-title">@yield('card_title', 'Pengguna')</span>
        </div>
        <div class="card-body" style="padding:16px">
            <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
                <div>
                    <h1 style="margin:0 0 8px 0">Daftar Pengguna</h1>
                    <p style="margin:0 0 0 0">Kelola pengguna: tambah, hapus, dan lihat informasi tentang pengguna.</p>
                </div>
                <div>
                    <a href="{{ url('/admin/users/create') }}" class="btn-add-user" style="background:#28a745;color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;display:inline-block">Tambah pengguna</a>
                </div>
            </div>

            <table style="width:100%;border-collapse:collapse">
                <thead>
                    <tr style="text-align:left;border-bottom:1px solid #eaeaea">
                        <th style="padding:8px">No.Urut</th>
                        <th style="padding:8px">Username</th>
                        <th style="padding:8px">Nama</th>
                        <th style="padding:8px">Email</th>
                        <th style="padding:8px">Role</th>
                        <th style="padding:8px">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $u)
                        <tr style="border-bottom:1px solid #f4f4f4">
                            <td style="padding:8px">{{ $loop->iteration }}</td>
                            <td style="padding:8px">{{ $u->username }}</td>
                            <td style="padding:8px">{{ $u->name }}</td>
                            <td style="padding:8px">{{ $u->email }}</td>
                            <td style="padding:8px">{{ $u->role }}</td>
                            <td style="padding:8px">
                                <a href="{{ route('admin.users.edit', $u->id) }}" class="open-edit" data-id="{{ $u->id }}" title="Edit" style="margin-right:8px;text-decoration:none;display:inline-flex;align-items:center">
                                        <span class="action-icon action-edit">
                                            <i class="bi bi-pencil-fill" style="font-size:14px;line-height:1"></i>
                                        </span>
                                </a>
                                <form action="{{ route('admin.users.destroy', $u->id) }}" method="POST" class="confirm-delete" style="display:inline-block;margin:0">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" title="Hapus" style="background:transparent;border:none;padding:0;cursor:pointer">
                                        <span class="action-icon action-delete">
                                            <i class="bi bi-trash-fill" style="font-size:14px;line-height:1"></i>
                                        </span>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding:12px">Tidak ada pengguna.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <!-- Create User Modal -->
            <div id="createUserModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:720px;width:92%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left;position:relative">
                    <button id="closeCreateModal" style="position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666">&times;</button>
                    <h3 style="margin:0 0 8px 0;font-size:1.05rem"><i class="bi bi-person-plus" style="margin-right:8px;color:#28a745"></i>Tambah pengguna</h3>
                    <div id="createModalContent">Memuat...</div>
                </div>
            </div>

            <!-- Create Success Modal -->
            <div id="createSuccessModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left">
                    <h3 style="margin:0 0 8px 0">Sukses</h3>
                    <p id="createSuccessMessage">Pengguna berhasil dibuat.</p>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
                        <button id="createSuccessOk" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    // Open create modal via AJAX
                    var addBtn = document.querySelector('.btn-add-user');
                    var modal = document.getElementById('createUserModal');
                    var content = document.getElementById('createModalContent');
                    if (addBtn && modal && content) {
                        addBtn.addEventListener('click', function (e) {
                            e.preventDefault();
                            content.innerHTML = 'Memuat...';
                            modal.style.display = 'flex';
                            fetch(addBtn.getAttribute('href'), {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                                .then(function (r) { return r.text(); })
                                        .then(function (html) { 
                                            content.innerHTML = html; 
                                            // wire cancel button inside fetched form
                                            var cancel = document.getElementById('cancelCreateUser');
                                            if (cancel) cancel.addEventListener('click', function () { modal.style.display = 'none'; content.innerHTML=''; });

                                            // wire form submit to use AJAX
                                            var form = content.querySelector('form');
                                            if (form) {
                                                form.addEventListener('submit', function (ev) {
                                                    ev.preventDefault();
                                                    var fd = new FormData(form);
                                                    fetch(form.getAttribute('action'), {
                                                        method: 'POST',
                                                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                                                        body: fd
                                                    }).then(function (r) {
                                                        return r.json().catch(function () { return { success: false }; });
                                                    }).then(function (data) {
                                                        if (data && data.success) {
                                                            // close modal and show success
                                                            modal.style.display = 'none';
                                                            content.innerHTML = '';
                                                            var successModal = document.getElementById('createSuccessModal');
                                                            var msg = document.getElementById('createSuccessMessage');
                                                            if (msg && data.message) msg.textContent = data.message;
                                                            if (successModal) successModal.style.display = 'flex';

                                                            // insert new row into users table (prepend)
                                                            try {
                                                                var tbody = document.querySelector('table tbody');
                                                                if (tbody && data.user) {
                                                                    var tr = document.createElement('tr');
                                                                    tr.style.borderBottom = '1px solid #f4f4f4';
                                                                    tr.innerHTML = '<td style="padding:8px">-</td>' +
                                                                        '<td style="padding:8px">' + (data.user.username||'') + '</td>' +
                                                                        '<td style="padding:8px">' + (data.user.name||'') + '</td>' +
                                                                        '<td style="padding:8px">' + (data.user.email||'') + '</td>' +
                                                                        '<td style="padding:8px">' + (data.user.role||'') + '</td>' +
                                                                        '<td style="padding:8px">' +
                                                                            '<a href="#" title="Edit" style="margin-right:8px;text-decoration:none;display:inline-flex;align-items:center">' +
                                                                                '<span class="action-icon action-edit"><i class="bi bi-pencil-fill" style="font-size:14px;line-height:1"></i></span>' +
                                                                            '</a>' +
                                                                            '<a href="#" title="Hapus" style="text-decoration:none;display:inline-flex;align-items:center">' +
                                                                                '<span class="action-icon action-delete"><i class="bi bi-trash-fill" style="font-size:14px;line-height:1"></i></span>' +
                                                                            '</a>' +
                                                                        '</td>';
                                                                    tbody.insertBefore(tr, tbody.firstChild);
                                                                }
                                                            } catch (err) {}
                                                        } else {
                                                            // simple error handling: show returned message or fallback
                                                            var htmlErr = (data && data.message) ? data.message : 'Gagal menyimpan.';
                                                            content.innerHTML = '<div style="color:#b00;padding:8px;border:1px solid #f5c6cb;background:#fff0f0;border-radius:6px">'+htmlErr+'</div>' + content.innerHTML;
                                                        }
                                                    }).catch(function () {
                                                        content.innerHTML = '<div style="color:#b00;padding:8px;border:1px solid #f5c6cb;background:#fff0f0;border-radius:6px">Gagal menyimpan.</div>' + content.innerHTML;
                                                    });
                                                });
                                            }
                                        }).catch(function () { content.innerHTML = 'Gagal memuat form.'; });
                        });
                    }

                    var closeBtn = document.getElementById('closeCreateModal');
                    if (closeBtn) closeBtn.addEventListener('click', function () { modal.style.display = 'none'; content.innerHTML=''; });
                    if (modal) modal.addEventListener('click', function (e) { if (e.target === modal) { modal.style.display='none'; content.innerHTML=''; } });

                    // success modal ok
                    var successOk = document.getElementById('createSuccessOk');
                    var successModal = document.getElementById('createSuccessModal');
                    if (successOk && successModal) successOk.addEventListener('click', function () { successModal.style.display = 'none'; });
                });
            </script>

            <!-- Edit User Modal (loaded via AJAX) -->
            <div id="editUserModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:720px;width:92%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left;position:relative">
                    <button id="closeEditModal" style="position:absolute;right:12px;top:12px;border:none;background:transparent;font-size:18px;cursor:pointer;color:#666">&times;</button>
                    <h3 style="margin:0 0 8px 0;font-size:1.05rem"><i class="bi bi-pencil" style="margin-right:8px;color:#28a745"></i>Edit Pengguna</h3>
                    <div id="editModalContent">Memuat...</div>
                </div>
            </div>

            <!-- Edit Success Modal -->
            <div id="editSuccessModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:9999">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left">
                    <h3 style="margin:0 0 8px 0">Sukses</h3>
                    <p id="editSuccessMessage">Perubahan pengguna disimpan.</p>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
                        <button id="editSuccessOk" style="background:var(--header-bg);color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                    </div>
                </div>
            </div>

            <!-- Delete Confirmation Modal (custom, stylable) -->
            <div id="confirmDeleteModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;z-index:10000">
                <div style="background:#fff;padding:18px;border-radius:8px;max-width:420px;width:90%;box-shadow:0 6px 18px rgba(0,0,0,0.12);text-align:left">
                    <h3 style="margin:0 0 8px 0">Konfirmasi Hapus</h3>
                    <p id="confirmDeleteMessage">Apakah Anda yakin ingin menghapus item ini?</p>
                    <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:12px">
                        <button id="confirmDeleteCancel" style="background:#fff;border:1px solid #e9ecef;padding:8px 12px;border-radius:6px;cursor:pointer">Batal</button>
                        <button id="confirmDeleteOk" style="background:#dc3545;color:#fff;padding:8px 12px;border-radius:6px;border:none;cursor:pointer">OK</button>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    function closeEdit() {
                        var m = document.getElementById('editUserModal');
                        if (m) m.style.display = 'none';
                        var c = document.getElementById('editModalContent');
                        if (c) c.innerHTML = '';
                    }

                    document.body.addEventListener('click', function (e) {
                        var t = e.target.closest && e.target.closest('.open-edit');
                        if (!t) return;
                        e.preventDefault();
                        var href = t.getAttribute('href');
                        var modal = document.getElementById('editUserModal');
                        var content = document.getElementById('editModalContent');
                        if (!modal || !content) return;
                        content.innerHTML = 'Memuat...';
                        modal.style.display = 'flex';
                        fetch(href, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                            .then(function (r) { return r.text(); })
                            .then(function (html) {
                                try {
                                    var parser = new DOMParser();
                                    var doc = parser.parseFromString(html, 'text/html');
                                    var form = doc.querySelector('form');
                                    if (form) {
                                        content.innerHTML = form.outerHTML;

                                        // wire cancel and submit handlers for injected form
                                        try {
                                            var insertedForm = content.querySelector('form');
                                            if (insertedForm) {
                                                var cancelBtn = insertedForm.querySelector('#cancelEditUser');
                                                if (cancelBtn) cancelBtn.addEventListener('click', function () { var m = document.getElementById('editUserModal'); if (m) m.style.display = 'none'; content.innerHTML = ''; });

                                                insertedForm.addEventListener('submit', function (ev) {
                                                    ev.preventDefault();
                                                    var fd = new FormData(insertedForm);
                                                    fetch(insertedForm.getAttribute('action'), {
                                                        method: 'POST',
                                                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                                                        body: fd
                                                    }).then(function (r) { return r.json().catch(function () { return { success: false }; }); })
                                                    .then(function (data) {
                                                        if (data && data.success) {
                                                            var modal = document.getElementById('editUserModal');
                                                            if (modal) modal.style.display = 'none';
                                                            var successModal = document.getElementById('editSuccessModal');
                                                            var msg = document.getElementById('editSuccessMessage');
                                                            if (msg && data.message) msg.textContent = data.message;
                                                            if (successModal) successModal.style.display = 'flex';
                                                        } else {
                                                            alert((data && data.message) ? data.message : 'Gagal memperbarui pengguna.');
                                                        }
                                                    }).catch(function () { alert('Gagal memperbarui pengguna.'); });
                                                });
                                            }
                                        } catch (err) {}
                                    } else {
                                        content.innerHTML = html;
                                    }
                                } catch (err) {
                                    content.innerHTML = html;
                                }
                            }).catch(function () {
                                content.innerHTML = 'Gagal memuat form.';
                            });
                    });

                    var closeBtn = document.getElementById('closeEditModal');
                    if (closeBtn) closeBtn.addEventListener('click', closeEdit);
                    var modalOverlay = document.getElementById('editUserModal');
                    if (modalOverlay) modalOverlay.addEventListener('click', function (e) { if (e.target === modalOverlay) closeEdit(); });
                });
                // wire success modal OK to reload page and delete confirmation modal handlers
                document.addEventListener('DOMContentLoaded', function () {
                    var ok = document.getElementById('editSuccessOk');
                    var sm = document.getElementById('editSuccessModal');
                    if (ok && sm) ok.addEventListener('click', function () { sm.style.display = 'none'; try { window.location.reload(); } catch (e) {} });

                    // Delete confirmation modal logic
                    var confirmModal = document.getElementById('confirmDeleteModal');
                    var confirmMsg = document.getElementById('confirmDeleteMessage');
                    var btnOk = document.getElementById('confirmDeleteOk');
                    var btnCancel = document.getElementById('confirmDeleteCancel');
                    var pendingForm = null;

                    // delegate submit for forms with class 'confirm-delete'
                    document.body.addEventListener('submit', function (e) {
                        var f = e.target;
                        if (f && f.classList && f.classList.contains('confirm-delete')) {
                            e.preventDefault();
                            pendingForm = f;
                            // customize message if data attribute provided
                            var msg = f.getAttribute('data-confirm-message') || 'Hapus pengguna ini?';
                            if (confirmMsg) confirmMsg.textContent = msg;
                            if (confirmModal) confirmModal.style.display = 'flex';
                        }
                    }, true);

                    if (btnCancel) btnCancel.addEventListener('click', function () { if (confirmModal) confirmModal.style.display = 'none'; pendingForm = null; });
                    if (btnOk) btnOk.addEventListener('click', function () { if (pendingForm) { try { pendingForm.submit(); } catch (err) { } } if (confirmModal) confirmModal.style.display = 'none'; pendingForm = null; });
                });
            </script>
            <div style="margin-top:12px;display:flex;gap:8px;justify-content:center;align-items:center">
                @if($users->onFirstPage())
                    <span style="background:#fff;border:1px solid #eaeaea;padding:8px 12px;border-radius:4px;color:#999">Prev</span>
                @else
                    <a href="{{ route('admin.users.index', ['page' => $users->currentPage() - 1]) }}" style="background:#fff;border:1px solid #eaeaea;padding:8px 12px;border-radius:4px;color:#333;text-decoration:none">Prev</a>
                @endif

                <span style="display:inline-block;padding:8px 12px;border-radius:4px;background:#28a745;color:#fff;border:1px solid #28a745">{{ $users->currentPage() }} / {{ $users->lastPage() }}</span>

                @if($users->hasMorePages())
                    <a href="{{ route('admin.users.index', ['page' => $users->currentPage() + 1]) }}" style="background:#fff;border:1px solid #eaeaea;padding:8px 12px;border-radius:4px;color:#333;text-decoration:none">Next</a>
                @else
                    <span style="background:#fff;border:1px solid #eaeaea;padding:8px 12px;border-radius:4px;color:#999">Next</span>
                @endif
            </div>
            
        </div>
    </div>
@endsection