@extends('home_layout.master_sidebar')

@section('page_styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <!-- Include Bootstrap CSS if not already included -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        /* Include all the CSS styles provided */
        .groups-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        .groups-header h3 {
            font-weight: bold;
        }
        .btn-new-group {
            font-size: 1em;
            color: #fff;
            background-color: #007bff;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
        }
        .groups-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        .group-card {
            position: relative;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }
        .group-card h5 {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .group-card small {
            display: block;
            color: #6c757d;
        }
        .status-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 3px 8px;
            border-radius: 15px;
            font-size: 0.8em;
            font-weight: bold;
        }
        .status-active {
            background-color: #e8f5e9;
            color: #388e3c;
        }
        .status-inactive {
            background-color: #fbe9e7;
            color: #d32f2f;
        }
        .members-list {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        .member-avatar {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            border: 1px solid #ffffff;
            margin-left: -8px;
        }
        .more-members {
            font-size: 0.8em;
            color: #007bff;
            margin-left: 8px;
        }
        .action-menu {
            position: absolute;
            top: 15px;
            left: 15px;
            display: inline-block;
            cursor: pointer;
        }
        .action-menu-items {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            overflow: hidden;
            z-index: 10;
        }
        .action-menu-items a {
            display: block;
            padding: 10px 15px;
            font-size: 0.9em;
            color: #333;
            text-decoration: none;
            white-space: nowrap;
        }
        .action-menu-items a:hover {
            background-color: #f8f9fa;
        }
    </style>
@stop

@section('breadcrumbs')
    @include('home_layout.breadcrumb', [
       'title' => 'Groups',
       'breadcrumbs' => [
           ['title' => 'Home', 'link' => route('home.index')],
           ['title' => 'Groups', 'link' => route('groups.index')]
       ]
   ])
@stop

@section('content')
    <div class="container-fluid">
        <!-- Header -->
        <div class="groups-header">
            <h3>Groups <span class="text-muted">({{ $groups->count() }})</span></h3>
            <button class="btn-new-group" data-bs-toggle="modal" data-bs-target="#groupModal" data-action="create">+ Add New Group</button>
        </div>

        <!-- Groups Grid -->
        <div class="groups-container">
            @foreach($groups as $group)
                <div class="group-card">
                    <div class="status-badge {{ $group->status ? 'status-active' : 'status-inactive' }}">{{ $group->status ? 'Active' : 'Inactive' }}</div>
                    <h5>{{ $group->name }}</h5>
                    <small>{{ $group->description }}</small>
                    <small>Region: {{ $group->region }}</small>
                    <small>Sub Region: {{ $group->sub_region }}</small>

                    <div class="members-list">
                        @php
                            $users = $group->users;
                            $userCount = $users->count();
                            $maxAvatars = 4;
                            $shownUsers = $users->take($maxAvatars);
                        @endphp
                        @foreach($shownUsers as $user)
                            <img src="{{ $user->profile_photo_url ?? generatePlaceholderImage(25,25) }}" class="member-avatar" alt="{{ $user->name }}">
                        @endforeach
                        @if($userCount > $maxAvatars)
                            <span class="more-members">+{{ $userCount - $maxAvatars }}</span>
                        @endif
                    </div>

                    <div class="action-menu" onclick="toggleMenu(this)">
                        <i class="fas fa-ellipsis-v"></i>
                        <div class="action-menu-items">
                            <!-- View action could link to a group detail page -->
                            <a href="#">View</a>
                            <!-- Edit action opens the modal -->
                            <a href="#" data-bs-toggle="modal" data-bs-target="#groupModal" data-action="edit" data-group-id="{{ $group->id }}">Edit</a>
                            <!-- Delete action -->
                            <a href="#" onclick="deleteGroup({{ $group->id }})">Delete</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@stop

@section('page_modals')
    <!-- Include the modal -->
    <div class="modal fade" id="groupModal" tabindex="-1" aria-labelledby="groupModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg"> <!-- Added modal-lg for larger modal -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Group</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div id="groupModal-body" class="modal-body">
                    <!-- The form content will be loaded here via AJAX -->
                </div>
            </div>
        </div>
    </div>
@stop

@section('page_scripts')
    <!-- Include necessary scripts -->
    <!-- Include Bootstrap JS if not already included -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include FontAwesome -->
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script>
        function toggleMenu(element) {
            const menu = element.querySelector('.action-menu-items');
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
        }

        // Close action menu if clicked outside
        document.addEventListener('click', function(e) {
            document.querySelectorAll('.action-menu-items').forEach(menu => {
                if (!menu.contains(e.target) && !menu.parentNode.contains(e.target)) {
                    menu.style.display = 'none';
                }
            });
        });

        function deleteGroup(groupId) {
            if (confirm('Are you sure you want to delete this group?')) {
                $.ajax({
                    url: '{{ url('/groups') }}/' + groupId,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            location.reload();
                        } else {
                            alert('Error deleting group.');
                        }
                    }
                });
            }
        }

        // Handle opening the modal for create and edit
        $('#groupModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var action = button.data('action'); // Extract info from data-* attributes
            var modal = $(this);
            var groupId = button.data('group-id') || '';
            var url = '';
            if (action === 'create') {
                modal.find('.modal-title').text('Add New Group');
                url = route('groups.createForm');
            } else if (action === 'edit') {
                modal.find('.modal-title').text('Edit Group');
                url = '{{ url('/groups') }}/' + groupId + '/editForm';
            }
            // Load the form via AJAX
            $.ajax({
                url: url,
                success: function(data) {
                    modal.find('#groupModal-body').html(data);
                },
                error: function() {
                    modal.find('#groupModal-body').html('<p>Error loading form.</p>');
                }
            });
        });

        // Handle form submission via AJAX
        $(document).on('submit', '#groupForm', function(e) {
            e.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            var method = form.attr('method');
            var data = form.serialize();

            $.ajax({
                url: url,
                type: method,
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#groupModal').modal('hide');
                        location.reload(); // Reload the page to show updated groups
                    } else {
                        alert('Error saving group.');
                    }
                },
                error: function(xhr) {
                    var errors = xhr.responseJSON.errors;
                    var errorHtml = '<div class="alert alert-danger"><ul>';
                    $.each(errors, function(key, value) {
                        errorHtml += '<li>' + value[0] + '</li>';
                    });
                    errorHtml += '</ul></div>';
                    $('#groupModal-body').find('.alert-danger').remove();
                    $('#groupModal-body').prepend(errorHtml);
                }
            });
        });
    </script>
@stop