@extends('layouts.app')

@section('content')
<div class="chat-layout has-chat group-chat-layout" id="group-chat-layout">

    <div class="sidebar" id="group-sidebar">
        <div class="sidebar-header">
            <a href="{{ route('gc.dashboard') }}" class="back-link" title="Back to chats"><i class="fa-solid fa-arrow-left"></i></a>
            <div class="profile-info">
                <h3>Groups</h3>
            </div>
        </div>
        <div class="user-list">
            <a href="{{ route('gc.groups.index') }}" class="user-item">
                <div class="avatar-wrap group-avatar"><i class="fa-solid fa-users"></i></div>
                <div class="user-content"><h4>All groups</h4><p>Manage groups</p></div>
            </a>
            @foreach($group->members as $m)
                @if($m->user)
                <div class="user-item group-member-item">
                    <div class="avatar-wrap">
                        <img src="{{ $m->user->avatarUrl() }}" alt="">
                    </div>
                    <div class="user-content">
                        <h4>{{ $m->user->name }}</h4>
                        <p>{{ ucfirst($m->role) }}</p>
                    </div>
                </div>
                @endif
            @endforeach
        </div>
    </div>

    <div class="chat-area" id="group-chat-area">
        <div class="chat-header">
            <button type="button" class="back-btn" id="group-mobile-back" aria-label="Back">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
            <div class="chat-user">
                <div class="avatar-wrap group-avatar">{{ strtoupper(substr($group->name, 0, 2)) }}</div>
                <div>
                    <h3>{{ $group->name }}</h3>
                    <span>{{ $group->members->count() }} members</span>
                </div>
            </div>
            <div class="chat-actions">
                <button type="button" class="call-btn" data-call="audio" data-group-id="{{ $group->id }}" data-user-name="{{ $group->name }}" title="Group voice call">
                    <i class="fa-solid fa-phone"></i>
                </button>
                <button type="button" class="call-btn" data-call="video" data-group-id="{{ $group->id }}" data-user-name="{{ $group->name }}" title="Group video call">
                    <i class="fa-solid fa-video"></i>
                </button>
            </div>
        </div>

        @if (session('status'))
            <div class="flash-toast" data-flash>{{ session('status') }}</div>
        @endif

        <div class="messages-container" id="group-messages-container">
            <div id="group-messages-load-older" class="load-older-wrap" hidden>
                <button type="button" id="group-load-older-btn" class="load-older-btn">Load older messages</button>
            </div>
            @foreach($messages as $message)
                @include('groups.partials.message', ['message' => $message])
            @endforeach
        </div>

        <form action="{{ route('gc.groups.messages.send', $group) }}" method="POST" class="message-input" enctype="multipart/form-data" id="group-message-form">
            @csrf
            <label class="attach-btn" title="Attach file">
                <i class="fa-solid fa-paperclip"></i>
                <input type="file" name="file" id="group-file-input" hidden accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.zip,.rar">
            </label>
            <textarea id="group-message-input" name="body" rows="1" placeholder="Type a group message" autocomplete="off"></textarea>
            <button type="submit" class="send-btn" title="Send">
                <i class="fa-solid fa-paper-plane"></i>
            </button>
        </form>
    </div>
</div>

<script>
    window.authId = {{ auth()->id() }};
    window.groupId = {{ $group->id }};
    window.groupName = @json($group->name);
    window.csrfToken = @json(csrf_token());
    window.groupOldestId = {{ $messages->first()?->id ?? 0 }};
    window.groupCanPost = @json(!($group->only_admins_can_post && !$member->isAdmin()));
</script>
@endsection