@extends('layouts.app-admin')

@section('content')

    {{-- @include('layouts.includes.admin.navbar'); --}}

    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        User Management
                    </h2>
                    <div class="text-muted mt-1">Manage all users in the system</div>
                </div>
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <a href="{{ route('admin.users.create') }}" class="btn btn-primary d-none d-sm-inline-block">
                            <i class="ti ti-plus"></i>
                            Create new user
                        </a>
                        <a href="{{ route('admin.users.create') }}" class="btn btn-primary d-sm-none btn-icon">
                            <i class="ti ti-plus"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Users</h3>
                    <div class="card-actions">
                        <form action="{{ route('admin.users.index') }}" method="GET" class="d-flex gap-2">
                            <div class="input-group">
                                {{-- Filter Custom --}}
                                <select name="filter_custom" class="form-select">
                                    <option value="">-- Semua Status --</option>
                                    <option value="Verified">Verified</option>
                                    <option value="Unverified">Unverified</option>
                                    <option value="Email Verified">Email Verified</option>
                                    <option value="Email Unverified">Email Unverified</option>
                                </select>

                                {{-- Filter Role --}}
                                <select name="filter" class="form-select">
                                    <option value="">-- Semua Role --</option>
                                    @foreach ($roles as $role)
                                        {{-- sembunyikan Super Admin jika user login bukan Super Admin --}}
                                        @if ($role->name === 'Super Admin' && !auth()->user()->hasRole('Super Admin'))
                                            @continue
                                        @endif

                                        <option value="{{ $role->name }}"
                                            {{ request('filter') == $role->name ? 'selected' : '' }}>
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>


                                {{-- Search --}}
                                <input type="text" name="search" class="form-control" placeholder="Cari user..."
                                    value="{{ request('search') }}">

                                <button type="submit" class="btn btn-primary">
                                    <i class="ti ti-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card-body border-bottom py-3">
                    <div class="d-flex">
                        <div class="text-muted">
                            Show
                            <div class="mx-2 d-inline-block">
                                <form method="GET" action="{{ route('admin.users.index') }}">
                                    <input type="hidden" name="search" value="{{ request('search') }}">
                                    <select class="form-select form-select-sm" name="perPage" onchange="this.form.submit()">
                                        <option value="10" {{ request('perPage') == 10 ? 'selected' : '' }}>10</option>
                                        <option value="25" {{ request('perPage') == 25 ? 'selected' : '' }}>25</option>
                                        <option value="50" {{ request('perPage') == 50 ? 'selected' : '' }}>50</option>
                                        <option value="100" {{ request('perPage') == 100 ? 'selected' : '' }}>100
                                        </option>
                                    </select>
                                </form>
                            </div>
                            entries
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-vcenter card-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th class="w-1">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($users as $user)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="avatar me-2"
                                                style="background-image: url(https://ui-avatars.com/api/?name={{ urlencode($user->name) }}&background=e53935&color=fff)"></span>
                                            <div>
                                                <div class="font-weight-medium">{{ $user->name }}</div>
                                                {{-- <div class="text-muted">ID: {{ $user->id }}</div> --}}
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="ti ti-mail text-muted me-1"></i>
                                            <span class="email-copy" data-email="{{ $user->email }}"
                                                style="cursor: pointer;">
                                                {{ $user->email }}
                                            </span>
                                            @if ($user->email_verified_at != null)
                                                <svg class="ms-1 text-success" xmlns="http://www.w3.org/2000/svg"
                                                    width="14" height="14" fill="currentColor"
                                                    class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                                                    <path
                                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                                </svg>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        @foreach ($user->roles as $role)
                                            <span class="badge bg-primary-lt me-1 mb-1">{{ $role->name }}</span>
                                        @endforeach
                                    </td>

                                    <td>
                                        @if ($user->is_verified == 1)
                                            <span class="badge bg-success">Verified</span>
                                        @else
                                            <span class="badge bg-warning">Unverified</span>
                                        @endif
                                    </td>
                                    <td>{{ $user->created_at->format('M d, Y') }}</td>
                                    <td style="width: auto;">
                                        <div class="d-flex align-items-center gap-2">

                                            <div class="btn-list d-flex flex-nowrap gap-1">
                                                <a href="{{ route('admin.users.show', $user->id) }}"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="ti ti-eye"></i>
                                                </a>
                                                <a href="{{ route('admin.users.edit', $user->id) }}"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="ti ti-edit"></i>
                                                </a>
                                                <button class="btn btn-sm btn-outline-danger"
                                                    onclick="confirmDelete('{{ $user->id }}')">
                                                    <i class="ti ti-trash"></i>
                                                </button>
                                            </div>

                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-ghost-secondary" data-bs-toggle="dropdown">
                                                    <i class="ti ti-dots-vertical"></i>
                                                </button>

                                                <div class="dropdown-menu dropdown-menu-end">

                                                    <a href="javascript:void(0)" onclick="addRole('{{ $user->id }}')"
                                                        class="dropdown-item text-dark">
                                                        <svg class="me-2" xmlns="http://www.w3.org/2000/svg"
                                                            width="16" height="16" viewBox="0 0 24 24"
                                                            fill="none" stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="icon icon-tabler icons-tabler-outline icon-tabler-flag-plus">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                            <path
                                                                d="M14.433 15.315a4.978 4.978 0 0 1 -2.433 -1.315a5 5 0 0 0 -7 0v-9a5 5 0 0 1 7 0a5 5 0 0 0 7 0v7" />
                                                            <path d="M5 21v-7" />
                                                            <path d="M16 19h6" />
                                                            <path d="M19 16v6" />
                                                        </svg> Tambahkan Role
                                                    </a>

                                                    <form id="add-role-form-{{ $user->id }}"
                                                        action="{{ route('admin.roles.add', $user->id) }}" method="POST"
                                                        class="d-none">
                                                        @csrf
                                                        @method('PUT')
                                                    </form>

                                                    <a href="javascript:void(0)"
                                                        onclick="removeRole('{{ $user->id }}')"
                                                        class="dropdown-item text-danger">
                                                        <svg class="me-2" xmlns="http://www.w3.org/2000/svg"
                                                            width="16" height="16" viewBox="0 0 24 24"
                                                            fill="none" stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="icon icon-tabler icons-tabler-outline icon-tabler-flag-minus">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                            <path
                                                                d="M14.373 15.301a4.978 4.978 0 0 1 -2.373 -1.301a5 5 0 0 0 -7 0v-9a5 5 0 0 1 7 0a5 5 0 0 0 7 0v9" />
                                                            <path d="M5 21v-7" />
                                                            <path d="M16 19h6" />
                                                        </svg> Hapus Role
                                                    </a>

                                                    <form id="remove-role-form-{{ $user->id }}"
                                                        action="{{ route('admin.roles.remove', $user->id) }}"
                                                        method="POST" class="d-none">
                                                        @csrf
                                                        @method('PUT')
                                                    </form>



                                                    <a href="javascript:void(0)"
                                                        onclick="confirmVerifyMail('{{ $user->id }}', '{{ $user->email_verified_at ? 'verified' : 'unverified' }}')"
                                                        class="dropdown-item text-dark">


                                                        @if ($user->email_verified_at == null)
                                                            <svg class="me-2" xmlns="http://www.w3.org/2000/svg"
                                                                width="16" height="16" viewBox="0 0 24 24"
                                                                fill="none" stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="icon icon-tabler icons-tabler-outline icon-tabler-mail-check">
                                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                <path
                                                                    d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6" />
                                                                <path d="M3 7l9 6l9 -6" />
                                                                <path d="M15 19l2 2l4 -4" />
                                                            </svg>

                                                            Verify Email
                                                        @else
                                                            <svg class="me-2" xmlns="http://www.w3.org/2000/svg"
                                                                width="16" height="16" viewBox="0 0 24 24"
                                                                fill="none" stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="icon icon-tabler icons-tabler-outline icon-tabler-mail-x">
                                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                <path
                                                                    d="M13.5 19h-8.5a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v6" />
                                                                <path d="M3 7l9 6l9 -6" />
                                                                <path d="M22 22l-5 -5" />
                                                                <path d="M17 22l5 -5" />
                                                            </svg>

                                                            Unverify Email
                                                        @endif




                                                    </a>

                                                    <form id="verified-email-form-{{ $user->id }}"
                                                        action="{{ route('admin.email.verified', $user->id) }}"
                                                        method="POST" class="d-none">
                                                        @csrf
                                                        @method('PUT')
                                                    </form>

                                                    <a href="javascript:void(0)"
                                                        onclick="confirmVerified('{{ $user->id }}', '{{ $user->is_verified }}')"
                                                        class="dropdown-item text-dark">

                                                        @if ($user->is_verified == 0)
                                                            <i class="ti ti-check me-2"></i>
                                                        @else
                                                            <svg class="me-2" xmlns="http://www.w3.org/2000/svg"
                                                                width="16" height="16" viewBox="0 0 24 24"
                                                                fill="none" stroke="currentColor" stroke-width="2"
                                                                stroke-linecap="round" stroke-linejoin="round"
                                                                class="icon icon-tabler icons-tabler-outline icon-tabler-ban">
                                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                                                <path d="M5.7 5.7l12.6 12.6" />
                                                            </svg>
                                                        @endif

                                                        {{ $user->is_verified == 0 ? 'Verify User' : 'Unverify User' }}
                                                    </a>

                                                    <form id="verified-form-{{ $user->id }}"
                                                        action="{{ route('admin.users.verified', $user->id) }}"
                                                        method="POST" class="d-none">
                                                        @csrf
                                                        @method('PUT')
                                                    </form>

                                                </div>
                                            </div>

                                        </div>
                                    </td>

                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">No users found</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="w-100" style="height: 150px;"></div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <p class="m-0 text-muted">
                        Showing <span class="fw-bold">{{ $users->firstItem() ?? 0 }}</span>
                        to <span class="fw-bold">{{ $users->lastItem() ?? 0 }}</span>
                        of <span class="fw-bold">{{ $users->total() }}</span> entries
                    </p>
                    <div class="pagination-container">
                        {{ $users->onEachSide(1)->links('pagination.tabler') }}
                    </div>


                </div>
            </div>


        </div>

    </div>


    <!-- Modal Tambah/Hapus Role -->
    <div class="modal modal-blur fade" id="modal-role" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <form id="role-action-form" method="POST" action="">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h5 class="modal-title" id="modal-role-title">Kelola Role</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                        <div id="role-select-wrapper">
                            <label class="form-label">Pilih Role</label>
                            <select class="form-select" name="role_id" required>
                                <option value="">-- Pilih Role --</option>
                                @php
                                    $authRoles = Auth::user()->getRoleNames();
                                @endphp
                                @foreach ($roles as $role)
                                    @if ($authRoles->contains('Super Admin') || $role->name !== 'Super Admin')
                                        <option value="{{ $role->id }}">{{ $role->name }}</option>
                                    @endif
                                @endforeach
                            </select>

                        </div>
                        <p class="text-muted mt-2" id="role-modal-text"></p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary" id="role-modal-submit">Simpan</button>
                    </div>
                </form>

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

    <!-- Toast container -->
    <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 9999;"></div>

@endsection
@push('styles')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@section('scripts')
    <script>
        function confirmDelete(userId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This action cannot be undone!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Here you would submit a form or make an AJAX request
                    // For now, we'll just show a success message

                    fetch(`{{ url('/admin/users/') }}/${userId}`, {
                            method: "DELETE",
                            headers: {
                                "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute(
                                    "content"),
                                "Content-Type": "application/json"
                            }
                        })
                        .then(response => response.json())
                        .then(data => {

                            if (data.error) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: `${data.error}`,
                                    showConfirmButton: false,
                                });
                            }
                            if (data.success) {
                                Swal.fire({
                                    title: 'Deleted!',
                                    text: 'The user has been deleted.',
                                    icon: 'success',
                                    timer: 1000,
                                    showConfirmButton: false
                                }).then(() => {
                                    location.reload();
                                });
                            }

                        })
                        .catch(error => console.error("Error:", error));


                }
            });
        }


        function openRoleModal(userId, type) {
            let modalTitle = document.getElementById('modal-role-title');
            let modalText = document.getElementById('role-modal-text');
            let modalSubmit = document.getElementById('role-modal-submit');
            let form = document.getElementById('role-action-form');
            let wrapper = document.getElementById('role-select-wrapper');

            if (type === 'add') {
                modalTitle.innerText = "Tambahkan Role";
                modalText.innerText = "Silakan pilih role yang ingin ditambahkan untuk user ini.";
                modalSubmit.innerText = "Tambahkan";
                form.action = "/admin/users/" + userId + "/role/add"; // sesuaikan dengan route
                wrapper.style.display = "block"; // tampilkan select
            }

            if (type === 'remove') {
                modalTitle.innerText = "Hapus Role";
                modalText.innerText = "Apakah Anda yakin ingin menghapus role dari user ini?";
                modalSubmit.innerText = "Hapus";
                form.action = "/admin/users/" + userId + "/role/remove"; // sesuaikan dengan route
                wrapper.style.display = "block"; // tidak perlu select saat hapus
            }

            let modal = new bootstrap.Modal(document.getElementById('modal-role'));
            modal.show();
        }

        // shortcut utk link
        function addRole(userId) {
            openRoleModal(userId, 'add');
        }

        function removeRole(userId) {
            openRoleModal(userId, 'remove');
        }




        function confirmVerifyMail(id, status) {
            let action = status === 'verified' ? 'unverify' : 'verify';
            Swal.fire({
                title: `Yakin ingin ${action} email user ini?`,
                text: `Email user ini akan diupdate menjadi ${action}ed.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Setuju!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('verified-email-form-' + id).submit();
                }
            });
        }


        function confirmVerified(id, status) {
            let action = status == 0 ? 'verify' : 'unverify';

            Swal.fire({
                title: `Yakin ingin ${action} user ini?`,
                text: `Status user akan diubah menjadi ${action}ed.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#e53935',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Setuju!'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('verified-form-' + id).submit();
                }
            });
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const emailCopies = document.querySelectorAll(".email-copy"); // semua elemen email
            const toastContainer = document.getElementById("toast-container");

            emailCopies.forEach(el => {
                el.addEventListener("click", function() {
                    const email = this.getAttribute("data-email");

                    // Fallback copy
                    const textarea = document.createElement("textarea");
                    textarea.value = email;
                    document.body.appendChild(textarea);
                    textarea.select();
                    try {
                        document.execCommand('copy');
                    } catch (err) {
                        console.error('Gagal copy', err);
                    }
                    document.body.removeChild(textarea);

                    // Buat toast
                    const toast = document.createElement("div");
                    toast.className = "toast show bg-light text-dark mb-2";
                    toast.style.minWidth = "200px";
                    toast.style.padding = "0.75rem 1rem";
                    toast.innerHTML = `
                        <div class="d-flex justify-content-between align-items-center">
                            <div> <svg class="me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                            </svg> copied </div>
                            <button type="button" class="btn-close btn-close-white" style="opacity:1;"></button>
                        </div>
                    `;

                    toastContainer.appendChild(toast);

                    toast.querySelector(".btn-close").addEventListener("click", () => {
                        toast.remove();
                    });

                    setTimeout(() => {
                        toast.remove();
                    }, 1000);
                });
            });
        });
    </script>
@endsection