@extends('hr-management.layouts.master')
@section('title')
    Members
@endSection
@section('main-data')
    <section id="data-list-view" class="data-list-view-header">
        <a href="javascript:void(0)" class="btn btn-primary float-right" id="addMemberBtn">Add Member</a>
        <div class="table-responsive">
            {{-- <table class="table table-hover-animation" id="dataTable"> --}}
            <table class="table table-hover-animation mb-0 mt-1">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>NAME</th>
                        <th>EMAIL</th>
                        <th>ROLE</th>
                        @if (auth()->user()->hasRole('Admin'))
                            <th>NOTIFICATIONS</th>
                        @endif
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($members as $member)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td class="product-name">{{ $member->name }}</td>
                            <td>{{ $member->email }}</td>
                            <td class="product-category">
                                {{ $member->getRoleNames()->implode(', ') ?: 'No roles assigned' }}
                            </td>
                            @if (auth()->user()->hasRole('Admin'))
                                <td>
                                    @if (isset($notificationData[$member->id]))
                                        @php
                                            $unreadCount = $notificationData[$member->id]['unread_count'];
                                        @endphp
                                        @if ($unreadCount > 0)
                                            <span class="badge badge-danger cursor-pointer"
                                                onclick="showNotificationsModal({{ $member->id }}, '{{ $member->name }}')"
                                                title="Click to view notifications">
                                                {{ $unreadCount }} unread
                                            </span>
                                        @else
                                            <span class="text-muted">No unread notifications</span>
                                        @endif
                                    @else
                                        <span class="text-muted">No notifications</span>
                                    @endif
                                </td>
                            @endif
                            <td>
                                <div class="chip {{ $member->status == 'active' ? 'chip-success' : 'chip-danger' }}">
                                    <div class="chip-body">
                                        <div class="chip-text">{{ Str::ucfirst($member->status) }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="product-action">
                                <span class="member-edit text-warning cursor-pointer" data-id="{{ $member->id }}"
                                    data-name="{{ $member->name }}" data-email="{{ $member->email }}"
                                    data-role="{{ $member->getRoleNames()->first() }}"
                                    data-status="{{ $member->status }}">
                                    <i class="feather icon-edit"></i>
                                </span>
                                @if (auth()->id() !== $member->id)
                                    <span class="action-delete text-danger cursor-pointer">
                                        <i class="feather icon-trash" onclick="deleteMember({{ $member->id }})"></i>
                                    </span>
                                @else
                                    <span class="text-muted cursor-not-allowed" title="You cannot delete yourself">
                                        <i class="feather icon-trash"></i>
                                    </span>
                                @endif
                            </td>
                            <form id="delete-form-{{ $member->id }}"
                                action="{{ route('member.destroy', ['user' => $member->id]) }}" method="POST">
                                @csrf
                                @method('DELETE')
                            </form>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="modal fade" id="addMemberModal" tabindex="-1" aria-labelledby="addMemberModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addMemberModalLabel">Add New Member</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="addMemberForm" action="{{ route('member.add') }}" method="POST">
                            @csrf
                            <div class="mb-1">
                                <label for="memberName" class="form-label">Name</label>
                                <input type="text" class="form-control" placeholder="Name" id="memberName" name="name"
                                    required>
                            </div>
                            <div class="mb-1">
                                <label for="memberEmail" class="form-label">Email</label>
                                <input type="email" class="form-control" placeholder="Email" id="memberEmail"
                                    name="email" required>
                            </div>
                            <div class="mb-1">
                                <label for="memberPassword" class="form-label">Password</label>
                                <input type="password" class="form-control" placeholder="Password" id="memberPassword"
                                    name="password" required>
                            </div>
                            <div class="mb-1">
                                <label for="memberRole" class="form-label">Role</label>
                                <select class="form-control" id="memberRole" name="role" required>
                                    <option selected disabled>Select Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-1">
                                <label for="memberStatus" class="form-label">Status</label>
                                <select class="form-control" id="memberStatus" name="status" required>
                                    <option selected disabled>Select Status</option>
                                    <option value="active">Active</option>
                                    <option value="In-active">In-active</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary text-center btn-text">Add Member</button>
                        </form>

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

        <!-- Edit Member Modal -->
        <div class="modal fade" id="editMemberModal" tabindex="-1" aria-labelledby="editMemberModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <form id="editMemberForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editMemberModalLabel">Edit Member</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-1">
                                <label for="editMemberName" class="form-label">Name</label>
                                <input type="text" class="form-control" id="editMemberName" name="name" required>
                            </div>
                            <div class="mb-1">
                                <label for="editMemberEmail" class="form-label">Email</label>
                                <input type="email" class="form-control" id="editMemberEmail" name="email" required>
                            </div>
                            <div class="mb-1">
                                <label for="editMemberPassword" class="form-label">Password</label>
                                <input type="password" class="form-control" id="editMemberPassword" name="password"
                                    placeholder="Leave blank to keep current password">
                            </div>
                            <div class="mb-1">
                                <label for="editMemberRole" class="form-label">Role</label>
                                <select class="form-control" id="editMemberRole" name="role" required>
                                    <option selected disabled>Select Role</option>
                                    @foreach ($roles as $role)
                                        <option value="{{ $role->name }}">{{ $role->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="mb-1">
                                <label for="editMemberStatus" class="form-label">Status</label>
                                <select class="form-control" id="editMemberStatus" name="status" required>
                                    <option value="active">Active</option>
                                    <option value="In-active">In-active</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">Update Member</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Notifications Modal -->
        <div class="modal fade" id="notificationsModal" tabindex="-1" aria-labelledby="notificationsModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content shadow-lg border-0">
                    <div class="modal-header text-white border-0 py-2" style="background-color: #e67817;">
                        <div class="d-flex align-items-center flex-grow-1">
                            <i class="feather icon-bell mr-2" style="font-size: 1.2rem;"></i>
                            <div class="flex-grow-1">
                                <h6 class="mb-0 d-flex align-items-center justify-content-between">
                                    <span class="text-white">Notifications for <strong id="notificationMemberName" class="text-info"></strong></span>
                                    <small class="text-white ml-2" id="notificationCount" style="font-size: 0.75rem;"></small>
                                </h6>
                            </div>
                        </div>
                        <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true"">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-0">
                        <div id="notificationsList" class="p-2" style="max-height: 550px; overflow-y: auto;">
                            <!-- Notifications will be loaded here -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // Store notification data for JavaScript access
        const notificationData = @json($notificationData ?? []);
        let currentFilter = 'unread';

        function showNotificationsModal(memberId, memberName) {
            document.getElementById('notificationMemberName').textContent = memberName;

            currentNotifications = notificationData[memberId]?.notifications || [];
            const unreadCount = notificationData[memberId]?.unread_count || 0;

            // Update notification count in header
            document.getElementById('notificationCount').textContent =
                `${unreadCount} unread notification`;

            renderNotifications();
            setupFilterButtons();

            // Show the modal
            const modal = new bootstrap.Modal(document.getElementById('notificationsModal'));
            modal.show();
        }

        function renderNotifications() {
            const notificationsList = document.getElementById('notificationsList');

            if (currentNotifications.length === 0) {
                notificationsList.innerHTML = `
                    <div class="text-center py-5">
                        <div class="mb-3">
                            <i class="feather icon-bell-off text-muted" style="font-size: 3rem;"></i>
                        </div>
                        <h5 class="text-muted">No notifications found</h5>
                        <p class="text-muted">This member doesn't have any notifications yet.</p>
                    </div>
                `;
                return;
            }

            let filteredNotifications = currentNotifications;
            if (currentFilter === 'unread') {
                filteredNotifications = currentNotifications.filter(n => n.read_at === null);
            } else if (currentFilter === 'read') {
                filteredNotifications = currentNotifications.filter(n => n.read_at !== null);
            }

            if (filteredNotifications.length === 0) {
                notificationsList.innerHTML = `
                    <div class="text-center py-4">
                        <i class="feather icon-filter text-muted" style="font-size: 2rem;"></i>
                        <p class="text-muted mt-2">No ${currentFilter} notifications found</p>
                    </div>
                `;
                return;
            }

            let html = '';
            filteredNotifications.forEach((notification, index) => {
                const isRead = notification.read_at !== null;
                const readStatus = isRead ? 'Read' : 'Unread';
                const readIcon = isRead ? 'check-circle' : 'clock';
                const notificationType = getNotificationType(notification.data);
                const timeAgo = getTimeAgo(notification.created_at);
                const boardInfo = notification.data.board_name || notification.data.board_id;
                const cardInfo = notification.data.card_title || notification.data.card_id;

                html += `
                    <div class="notification-item mb-1 p-2 border rounded ${isRead ? 'bg-white border-light' : 'bg-warning-light border-warning'} notification-card" data-read="${isRead}">
                        <div class="d-flex align-items-start">
                            <div class="notification-icon mr-2 flex-shrink-0">
                                <div class="avatar ${isRead ? 'bg-success' : 'bg-danger'} text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 24px; height: 24px;">
                                    <i class="feather icon-${getNotificationIcon(notification.data)}" style="font-size: 0.65rem;"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1" style="min-width: 0;">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <h6 class="mb-0 font-weight-bold text-dark" style="font-size: 0.8rem; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${notification.data.title || notificationType}</h6>
                                    <span class="badge ${isRead ? 'badge-success' : 'badge-danger'} ml-2" style="font-size: 0.6rem; padding: 0.15rem 0.4rem; white-space: nowrap;">
                                        <i class="feather icon-${readIcon}" style="font-size: 0.55rem;"></i> Unread
                                    </span>
                                </div>
                                
                                <p class="mb-1 text-dark" style="font-size: 0.75rem; line-height: 1.2;">${notification.data.message || notification.data.body || 'No message available'}</p>
                                
                                <div class="d-flex flex-wrap align-items-center" style="gap: 0.5rem; font-size: 0.65rem;">
                                    <span class="text-muted">
                                        <i class="feather icon-clock mr-1" style="font-size: 0.65rem;"></i>${timeAgo}
                                    </span>
                                    ${boardInfo ? `
                                        <span class="text-info">
                                            <i class="feather icon-layers mr-1" style="font-size: 0.65rem;"></i>${boardInfo}
                                        </span>
                                    ` : ''}
                                    ${cardInfo ? `
                                        <span class="text-primary">
                                            <i class="feather icon-file-text mr-1" style="font-size: 0.65rem;"></i>${cardInfo}
                                        </span>
                                    ` : ''}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            });

            notificationsList.innerHTML = html;
        }

        function setupFilterButtons() {
            const filterButtons = ['filterAll', 'filterUnread', 'filterRead'];
            const filterValues = ['all', 'unread', 'read'];

            filterButtons.forEach((buttonId, index) => {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.onclick = () => {
                        // Update active button
                        filterButtons.forEach(btnId => {
                            const btn = document.getElementById(btnId);
                            btn.classList.remove('active');
                        });
                        button.classList.add('active');

                        // Update filter and re-render
                        currentFilter = filterValues[index];
                        renderNotifications();
                    };
                }
            });
        }

        function getNotificationType(data) {
            if (data.title) return data.title;
            if (data.type) return data.type;
            if (data.message) return 'General Notification';
            return 'Notification';
        }

        function getNotificationIcon(data) {
            if (data.title && data.title.toLowerCase().includes('card')) return 'file-text';
            if (data.title && data.title.toLowerCase().includes('board')) return 'layers';
            if (data.title && data.title.toLowerCase().includes('activity')) return 'activity';
            return 'bell';
        }

        function getTimeAgo(dateString) {
            const now = new Date();
            const notificationDate = new Date(dateString);
            const diffInSeconds = Math.floor((now - notificationDate) / 1000);

            if (diffInSeconds < 60) return 'Just now';
            if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
            if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
            if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;

            return notificationDate.toLocaleDateString();
        }
    </script>

    <style>
        .notification-card {
            transition: all 0.15s ease;
            cursor: pointer;
        }

        .notification-card:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .bg-warning-light {
            background-color: #fff9e6 !important;
        }

        .avatar {
            font-size: 0.65rem;
        }

        .modal-lg {
            max-width: 650px;
        }

        .notification-item {
            border-left: 2px solid transparent;
        }

        .notification-item[data-read="false"] {
            border-left-color: #ff9800;
        }

        .notification-item[data-read="true"] {
            border-left-color: #28a745;
            opacity: 0.9;
        }

        .modal-dialog-centered {
            display: flex;
            align-items: center;
            min-height: calc(100% - 1rem);
        }

        @media (min-width: 576px) {
            .modal-dialog-centered {
                min-height: calc(100% - 3.5rem);
            }
        }

        #notificationsList::-webkit-scrollbar {
            width: 6px;
        }

        #notificationsList::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }

        #notificationsList::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        #notificationsList::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
@endSection