@extends('app')

@section('content')
    <div class="container-fluid px-4">

        <div class="page-header mt-2">
            <h1 class="page-title">
                Data Pengguna
                <span>Manajemen pengguna sistem</span>
            </h1>

            <a href="{{ route('admin.users.create') }}" class="btn-action btn-act-green">
                <i class="fas fa-plus"></i> Tambah User
            </a>
        </div>

        {{-- Breadcrumb --}}
        <div class="breadcrumb-wrap mb-4">
            <a href="{{ route('admin.dashboard') }}">Dashboard</a>
            <i class="fas fa-chevron-right"></i>
            <span>Users</span>
        </div>

        @if (session('success'))
            <div class="comp-alert comp-alert-success mb-4">
                {{ session('success') }}
            </div>
        @endif

        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-users"></i>
                Daftar Pengguna
                <span class="comp-count-badge ms-2">{{ $users->count() }} data</span>
            </div>

            <div class="card-body p-0">
                <div class="stock-table-wrap px-2 pt-2">
                    <table class="table-stok w-100" id="datatablesSimple">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Alamat</th>
                                <th width="18%">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $item)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $item->name }}</td>
                                    <td>{{ $item->email }}</td>
                                    <td>{{ ucfirst($item->role) }}</td>
                                    <td>{{ $item->alamat }}</td>
                                    <td>
                                        <div class="d-flex gap-1">

                                            <div class="d-flex gap-1">
                                                <a href="{{ route('admin.users.edit', $item->id) }}"
                                                    class="comp-icon-btn comp-icon-btn-gold" title="Edit">
                                                    <i class="fas fa-edit"></i>
                                                </a>

                                                <button type="button" class="comp-icon-btn comp-icon-btn-gold btn-reset"
                                                    data-id="{{ $item->id }}" data-nama="{{ $item->name }}"
                                                    title="Reset Password">
                                                    <i class="fas fa-key"></i>
                                                </button>

                                                <button type="button" class="comp-icon-btn comp-icon-btn-red btn-delete"
                                                    data-id="{{ $item->id }}" data-nama="{{ $item->name }}"
                                                    title="Hapus">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-4">
                                        Data pengguna belum tersedia
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Reset Password Modal --}}
    <div class="comp-modal-overlay" id="resetModal">
        <div class="comp-modal">
            <div class="comp-modal-icon comp-modal-icon-gold">
                <i class="fas fa-key"></i>
            </div>
            <h3 class="comp-modal-title">Reset Password User</h3>
            <p class="comp-modal-msg">
                Password untuk user <strong id="resetUserName"></strong>
                akan direset ke default password.
                <br>
                <small>Password baru: <strong>password</strong></small>
            </p>
            <div class="comp-modal-footer">
                <button type="button" class="btn btn-secondary" id="closeResetModal">
                    Batal
                </button>
                <form id="resetForm" method="POST">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="btn-action btn-act-green">
                        <i class="fas fa-key me-1"></i> Reset Password
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Delete User Modal --}}
    <div class="comp-modal-overlay" id="deleteModal">
        <div class="comp-modal">
            <div class="comp-modal-icon comp-modal-icon-red">
                <i class="fas fa-trash-alt"></i>
            </div>
            <h3 class="comp-modal-title">Hapus Data User</h3>
            <p class="comp-modal-msg">
                Anda akan menghapus user
                <strong id="deleteUserName"></strong>.
                Tindakan ini tidak dapat dibatalkan.
            </p>
            <div class="comp-modal-footer">
                <button type="button" class="btn btn-secondary" id="closeDeleteModal">
                    Batal
                </button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-action btn-act-red">
                        <i class="fas fa-trash me-1"></i> Hapus Sekarang
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const resetModal = document.getElementById('resetModal');
            const deleteModal = document.getElementById('deleteModal');

            const resetForm = document.getElementById('resetForm');
            const deleteForm = document.getElementById('deleteForm');

            const resetUserName = document.getElementById('resetUserName');
            const deleteUserName = document.getElementById('deleteUserName');

            function openModal(modal) {
                modal.classList.add('comp-modal-open');
            }

            function closeModal(modal) {
                modal.classList.remove('comp-modal-open');
            }

            document.addEventListener('click', function(e) {

                // RESET PASSWORD
                const resetBtn = e.target.closest('.btn-reset');
                if (resetBtn) {
                    resetUserName.textContent = resetBtn.dataset.nama;

                    resetForm.action =
                        "{{ route('admin.users.reset-password', ':id') }}"
                        .replace(':id', resetBtn.dataset.id);

                    openModal(resetModal);
                    return;
                }

                // DELETE USER
                const deleteBtn = e.target.closest('.btn-delete');
                if (deleteBtn) {
                    deleteUserName.textContent = deleteBtn.dataset.nama;

                    deleteForm.action =
                        "{{ route('admin.users.destroy', ':id') }}"
                        .replace(':id', deleteBtn.dataset.id);

                    openModal(deleteModal);
                    return;
                }
            });

            document.getElementById('closeResetModal')
                .addEventListener('click', () => closeModal(resetModal));

            document.getElementById('closeDeleteModal')
                .addEventListener('click', () => closeModal(deleteModal));

            resetModal.addEventListener('click', function(e) {
                if (e.target === resetModal) closeModal(resetModal);
            });

            deleteModal.addEventListener('click', function(e) {
                if (e.target === deleteModal) closeModal(deleteModal);
            });

            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeModal(resetModal);
                    closeModal(deleteModal);
                }
            });
        });
    </script>
@endsection