@extends('layout')

@section('content')
    <link href="{{ asset('backAssets/assets/chat/css/style.css') }}" class="cp-pen-styles" rel="stylesheet"
          type="text/css">
    <div id="frame">
        <div id="sidepanel">
            <div id="profile">
                <div class="wrap d-flex justify-content-between align-items-center">
                    <div class="profile-info d-flex align-items-center">
                        <img id="profile-img"
                             src="{{ asset('backAssets/global_assets/images/placeholders/placeholder.jpg') }}"
                             class="online" alt=""/>
                        <p class="ml-1">{{ Auth::user()->name }}</p>
                    </div>
                    <button id="add-group-btn" class="btn btn-primary ml-1">
                        <i class="icon-users"></i> Ajouter un groupe
                    </button>
                </div>
            </div>
            <div id="search">
                <label for="contact-search"><i class="fa fa-search" aria-hidden="true"></i></label>
                <input type="text" id="contact-search" placeholder="Recherche de contact..."/>
            </div>
            <div id="contacts">
                <ul>
                    @foreach ($items as $item)
                        @if ($item->type == 'contact')
                            <li class="contact contact-item" data-contact-id="{{ $item->id }}">
                                <div class="wrap">
                                    <img src="{{ asset('backAssets/global_assets/images/placeholders/user.png') }}"
                                         alt=""/>
                                    <div class="meta">
                                        <p class="name">
                                            {{ $item->name }} {{ $item->last_name }}
                                        </p>
                                        <span
                                            class="badge badge-pill bg-blue ml-auto">{{ $item->last_message_duration }}</span>
                                    </div>
                                </div>
                            </li>
                        @elseif ($item->type == 'group')
                            <li class="contact contact-group-item" data-group-id="{{ $item->id }}">
                                <div class="wrap">
                                    <img src="{{ asset('backAssets/global_assets/images/placeholders/user.png') }}"
                                         alt=""/>
                                    <div class="meta">
                                        <p class="name">
                                            @foreach ($item->getUsers() as $user)
                                                {{ $user->name }} {{ $user->last_name }},
                                            @endforeach
                                            {{ $item->creator->name }} {{ $item->creator->last_name }}
                                        </p>
                                        <span
                                            class="badge badge-pill bg-blue ml-auto">{{ $item->last_message_duration }}</span>
                                    </div>
                                </div>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        </div>
        <div class="content"></div>
    </div>

    <!-- Modal for adding users to group -->
    @include('messaging.modal.add-group')

    <script>
        $(document).ready(function () {
            function loadConversation(contactId, isGroup = false) {
                const url = isGroup ? '/messaging/group-conversation/' + contactId : '/messaging/conversation/' + contactId;
                $.ajax({
                    url: url,
                    method: 'GET',
                    success: function (response) {
                        var conversationContainer = $('.content');
                        conversationContainer.html(response.html);
                    }
                });
            }

            function setActiveContact(contactItem) {
                $('.contact-item').removeClass('active');
                $('.contact-group-item').removeClass('active');
                contactItem.addClass('active');
            }

            // Load the first contact or group conversation on page load
            var firstContact = $('.contact').first();
            if (!firstContact.length) {
                firstContact = $('.contact-item').first();
            }
            if (firstContact.length) {
                setActiveContact(firstContact);
                loadConversation(firstContact.data('contact-id') || firstContact.data('group-id'), firstContact.hasClass('contact-group-item'));
            }

            // Load conversation on click for contacts
            $('.contact-item').on('click', function () {
                var contactId = $(this).data('contact-id');
                setActiveContact($(this));
                loadConversation(contactId);
            });

            // Load conversation on click for groups
            $('.contact-group-item').on('click', function () {
                var groupId = $(this).data('group-id');
                setActiveContact($(this));
                loadConversation(groupId, true);
            });

            // Filter contacts and groups
            $('#contact-search').on('input', function () {
                var searchTerm = $(this).val().toLowerCase();
                $('.contact-item .name, .contact-group-item .name').each(function () {
                    var contactName = $(this).text().toLowerCase();
                    if (contactName.includes(searchTerm)) {
                        $(this).closest('.contact-item, .contact-group-item').show();
                    } else {
                        $(this).closest('.contact-item, .contact-group-item').hide();
                    }
                });
            });

            // Show add group modal
            $('#add-group-btn').on('click', function () {
                $.ajax({
                    url: '{{ route('users.list') }}',
                    method: 'GET',
                    success: function (response) {
                        var usersList = $('#users-list');
                        usersList.empty();
                        response.users.forEach(function (user) {
                            usersList.append('<div class="form-check"><input class="form-check-input" type="checkbox" value="' + user.id + '" id="user-' + user.id + '"><label class="form-check-label" for="user-' + user.id + '">' + user.name + '</label></div>');
                        });
                        $('#addGroupModal').modal('show');
                    }
                });
            });

            // Handle add users form submission
            $('#add-users-form').on('submit', function (e) {
                e.preventDefault();
                var userIds = [];
                $('#users-list input:checked').each(function () {
                    userIds.push($(this).val());
                });

                $.ajax({
                    url: '{{ route('groups.store') }}',
                    method: 'POST',
                    data: {_token: '{{ csrf_token() }}', users: userIds},
                    success: function (response) {
                        if (response.success) {
                            $('#addGroupModal').modal('hide');
                            location.reload(); // Reload to update the group list
                        } else {
                            alert('Erreur lors de la création du groupe');
                        }
                    }
                });
            });

        });
    </script>
@endsection