@extends('layouts.page') <!-- Extend your layout here -->
<link rel="stylesheet" href="{{ asset('asset/css/style.css') }}">
@section('title', 'Users') <!-- Set the page title dynamically -->

@section('content')
    @php
        $pageName = 'Users'; // Set the dynamic page name
        $roleLabels = [
                'admin' => 'Admin',
                'super_admin' => 'Super Admin',
                'support_software' => 'Support Software',
                'support_tech' => 'Support Technical',
                'support_hardware' => 'Support Hardware',
                'company_admin' => 'Company Admin',
                'user' => 'User',
        ];
    @endphp
    @include('session-message')

    <!-- Stats Banner (mirrors the dashboard / Issues page banner) -->
    <div class="page-banner">
        <div>
            <h2>Everyone with access to the platform.</h2>
        </div>
        <div class="page-stat-group">
            <div class="page-stat-pill">
                <i class="bi bi-people"></i>
                <span>
                    <span class="stat-value">{{ $users->total() }}</span>
                    <span class="stat-label">Total</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Page Heading -->
    <div class="form-section">
        <div class="mb-3">
            <div class="page-toolbar justify-content-between">
                <!-- Search Form -->
                <form action="{{ route('user.index') }}" method="GET"
                      class="d-flex flex-grow-1 flex-wrap align-items-center gap-3">
                    <div class="input-group" style="max-width: 340px;">
                        @if(Auth::user()->hasRole('admin') || Auth::user()->hasRole('super_admin'))
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                                   placeholder="Search by Name, Organization & Role">
                        @endif
                        @if(Auth::user()->hasRole('company_admin'))
                            <input type="text" name="search" value="{{ request('search') }}" class="form-control"
                                   placeholder="Search by Name and Role">
                        @endif
                        <button type="submit" class="btn btn-outline-secondary"><i class="bi bi-search"></i></button>
                    </div>

                    <!-- Status Filter -->
                    <div class="filter-pills">
                        <div class="filter-pill">
                            <input type="radio" name="status" value="" id="filter-status-all"
                                   onchange="this.form.submit()" {{ request('status', '') === '' ? 'checked' : '' }}>
                            <label for="filter-status-all">All</label>
                        </div>
                        <div class="filter-pill">
                            <input type="radio" name="status" value="active" id="filter-status-active"
                                   onchange="this.form.submit()" {{ request('status') === 'active' ? 'checked' : '' }}>
                            <label for="filter-status-active">Active</label>
                        </div>
                        <div class="filter-pill">
                            <input type="radio" name="status" value="inactive" id="filter-status-inactive"
                                   onchange="this.form.submit()" {{ request('status') === 'inactive' ? 'checked' : '' }}>
                            <label for="filter-status-inactive">Inactive</label>
                        </div>
                    </div>
                </form>
                @if(Auth::user()->hasRole('admin') || Auth::user()->hasRole('super_admin'))
                    <!-- Add user Button -->
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal"
                            data-bs-target="#addUserModal">
                        <i class="bi bi-person-plus me-2"></i>Add User
                    </button>
                    @include('user.adminRegistrationModal')
                @endif
                @if(Auth::user()->hasRole('company_admin'))
                    <!-- Add user Button -->
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal"
                            data-bs-target="#addOrganizationUserModal">
                        <i class="bi bi-person-plus me-2"></i>Add User
                    </button>
                    @include('user.userRegistrationModal')
                @endif
            </div>
        </div>


        <!-- Table to Display Users -->
        @if($users->isEmpty())
            <div class="d-flex flex-column justify-content-center align-items-center py-5">
                <i class="bi bi-people" style="font-size: 48px; color: var(--ink-soft, #5c7a6f);"></i>
                <p class="fs-5 text-secondary mt-3">No users found.</p>
            </div>
        @else
            <div class="table-card mt-4">
                <div class="responsive-table">
                    <table class="custom-table">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>E-mail</th>
                            @if(!Auth::user()->hasRole('company_admin'))
                                <th>Organization</th>
                            @endif
                            <th>Role</th>
                            <th>Status</th>
                            <th>Action</th>
                            {{--                        <th>Action</th>--}}
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($users as $user)
                            <tr style="cursor: pointer;" onclick="window.location='{{ route('profile.show', $user->id) }}'"
                                title="Go Profile">
                                <td>{{ $user->name ?? 'No Name'}}</td>
                                <td>{{ $user->email ?? 'No email'}}</td>
                                @if(!Auth::user()->hasRole('company_admin'))
                                    <td>{{ $user->organization->name ?? 'No organization'}}</td>
                                @endif
                                <td>
                                    {{
                                        $user->roles
                                            ->pluck('name')
                                            ->map(fn ($name) => $roleLabels[$name] ?? ucfirst($name))
                                            ->join(', ')
                                            ?: 'No Role'
                                    }}
                                </td>
                                <td>
                                    <div>
                                        @if($user->id === Auth::user()->id)
                                            <button type="button" class="icon-action-btn">
                                                <span class="status active">Active</span>
                                            </button>
                                        @else
                                            <button id="statusChange-{{ $user->id }}" type="button" class="icon-action-btn"
                                                    title="Change Status"
                                                    onclick="showStatusChangeModal({{ $user->id }}, '{{ $user->status === 'active' ? 'inactive' : 'active' }}')">
                                            <span class="status {{ $user->status ? 'active' : 'inactive' }}">
                                                {{ $user->status ? 'Active' : 'Inactive' }}
                                            </span>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                                <td>
                                    @if(
                                        !$user->hasRole('admin') &&
                                        !$user->hasRole('super_admin') &&
                                        !$user->hasRole('company_admin')
                                        || !$user->registration_status
                                    )
                                        <!-- Show Delete Button -->
                                        <button id="userDelete-{{ $user->id }}" type="button" class="icon-action-btn" title="Delete"
                                                onclick="showDeleteModal({{ $user->id }})">
                                            <i class="bi bi-trash3 me-1"></i>
                                        </button>
                                    @endif

                                    @if(!$user->registration_status)
                                        <button id="resendLink-{{ $user->id }}" type="button" class="icon-action-btn accent" title="Resend"
                                                onclick="showResendLinkModal({{ $user->id }})">
                                            <i class="bi bi-send me-1"></i>
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- Pagination -->
            <div class="pagination-container mt-4 d-flex justify-content-center">
                {{ $users->links('pagination::bootstrap-4') }}
            </div>
        @endif
    </div>
@endsection

<div id="warningAlert" class="alert alert-warning alert-dismissible fade" role="alert"
     style=" position: fixed; top: 50%; left: 53%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; z-index: 1050; background-color: rgba(239,219,169,0.91)">
    <strong id="modalTitle">Warning!</strong>
    <p id="modalMessage">Are you sure you want to delete this user?</p>
    <div class="d-flex justify-content-end mt-3">
        <button id="confirmAction" class="custom-delete-btn" style="border: none; background: transparent;">
            <i class="bi bi-check-lg me-1" style="font-size: 24px"></i>
        </button>
        <button id="cancelAlert" class="custom-close-btn">
            <i class="bi bi-x-lg me-1"></i>

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

<!-- Form for Deletion -->
<form id="deleteForm" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
    <input type="hidden" id="deleteUserId" name="id" value="">
</form>

<!-- Form for Status Change -->
<form id="statusChangeForm" action="" method="POST" style="display: none;">
    @csrf
    @method('PATCH')
    <input type="hidden" id="statusUserId" name="id" value="">
    <input type="hidden" id="newStatus" name="status" value="">
</form>
<form id="resendLinkForm" action="" method="POST" style="display: none;">
    @csrf
    @method('PATCH')
    <input type="hidden" id="resendLinkId" name="id" value="">
</form>

@push('scripts')
    <script>
        function showDeleteModal(userId) {
            event.stopPropagation();
            document.getElementById('deleteUserId').value = userId;

            // Set the action for delete form
            const deleteUrl = "{{ route('user.destroy') }}";
            document.getElementById('deleteForm').action = deleteUrl;

            // Update modal content
            document.getElementById('modalTitle').innerText = "Warning!";
            document.getElementById('modalMessage').innerText = "Are you sure you want to delete this user?";

            // Set the confirmAction button to submit the deleteForm
            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('deleteForm').submit();
            };

            const alert = document.getElementById('warningAlert');
            alert.classList.add('show');
        }


        function showResendLinkModal(userId) {
            event.stopPropagation();
            document.getElementById('resendLinkId').value = userId;

            // Set the action for resendLinkForm
            const resendLinkUrl = "{{ route('user.resendLink', ':id') }}".replace(':id', userId);
            document.getElementById('resendLinkForm').action = resendLinkUrl;

            // Update modal content
            document.getElementById('modalTitle').innerText = "Warning!";
            document.getElementById('modalMessage').innerText = "Are you sure you want to resend the registration link to this user?";

            // Set the confirmAction button to submit the resendLinkForm
            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('resendLinkForm').submit();
            };

            const alert = document.getElementById('warningAlert');
            alert.classList.add('show');
        }


        function showStatusChangeModal(userId, newStatus) {
            event.stopPropagation();

            // Set hidden input values
            document.getElementById('statusUserId').value = userId;
            document.getElementById('newStatus').value = newStatus;

            // Set the action for the status change form
            const statusChangeUrl = "{{ route('user.toggle-status', ':id') }}".replace(':id', userId);
            document.getElementById('statusChangeForm').action = statusChangeUrl;

            // Update modal message
            document.getElementById('modalMessage').innerText = "Are you sure you want to change the status?";

            // Bind the confirm button to submit the status change form
            document.getElementById('confirmAction').onclick = function () {
                document.getElementById('statusChangeForm').submit();
            };

            // Show the modal
            const alert = document.getElementById('warningAlert');
            alert.classList.add('show');
        }

        // Cancel alert functionality
        document.getElementById('cancelAlert').addEventListener('click', function () {
            const alert = document.getElementById('warningAlert');
            alert.classList.remove('show');
        });

        document.addEventListener("DOMContentLoaded", function () {
            var warningAlert = document.getElementById("warningAlert");
            var confirmAction = document.getElementById("confirmAction");
            var cancelAlert = document.getElementById("cancelAlert");

            function showWarningAlert() {
                warningAlert.classList.add("show");
            }

            function hideWarningAlert() {
                warningAlert.classList.remove("show");
            }

            // Attach event listeners
            cancelAlert.addEventListener("click", hideWarningAlert);

            // Example function to trigger modal (call this when you want to show it)
            window.triggerWarning = function () {
                showWarningAlert();
            };
        });

    </script>
@endpush