@extends('layout.dashboard-app')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <style>
        body {
            background-color: #f7f6f6;
        }

        .card {
            border: none;
            box-shadow: 5px 6px 6px 2px #e9ecef;
            border-radius: 4px;
        }

        .user-img {
            margin-top: 4px;
        }

        .icons i {
            margin-left: 8px;
        }

        .reply small {
            color: #b7b4b4;
        }

        .reply small:hover {
            color: green;
            cursor: pointer;
        }
    </style>

    <div id="main-wrapper">
        <div class="page-wrapper customWrap">
            <div class="container-fluid">
                <div class="row pt-25">
                    <div class="col-md-12 col-lg-12 col-xlg-12 ftneshed">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            {{--                            <span>{{$categories->categories}}</span>--}}
                            <span>
                <a href="#" data-toggle="modal" data-target="#createPostModal" id="createPostBtn">+ Create Group</a>
            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-8 col-xlg-9">
                        @if(count($groups) != 0)
                            <div class="group-outer">
                                @foreach($groups as $group)
                                    <form action="{{route('open.group' , $group->id)}}" method="GET">
                                        @csrf
                                        <button type="submit" class="outer-box"
                                                style="background-image: url('{{ isset($group->group_image) ? asset('group_images/' . $group->group_image ) :  asset('icon/picture.png')}}')">
                                            <div class="inner-box">
                                                <h3 style="color: #fff">{{$group->name ?? ''}}</h3>
                                            </div>
                                        </button>
                                    </form>
                                @endforeach
                            </div>

                        @else
                            <h2>Sorry You Have No Groups Yet!!!</h2>
                    @endif
                    <!-- Begin : Card Post -->

                    </div>

                    <div class="col-lg-4 col-xlg-3">


                        <div class="card activityCard">
                            <div class="card-header">
                                <h4 class="cardHeading">Group Invites</h4>
                            </div>
                            @forelse($groupInvites as $invites)
                                <div class="activityMain">
                                    <div class="activitySub">
                                        <div>
                                            <img
                                                src="{{{ isset($invites->group->group_image) ? asset('group_images/'.$invites->group->group_image) : asset('images/users/activity1.png') }}}"
                                                style="width: 50px">
                                        </div>
                                        <div
                                            class="activityDetails d-flex justify-content-between align-items-center w-100">
                                            <a href="#">{{$invites->group->name ?? ''}}</a>

                                            <div class="d-flex">
                                                <button class="btn btn-success mr-2" style="border-radius: 50%"
                                                        onclick="joinGroup({{$invites}})"><i class="fas fa-check"></i>
                                                </button>
                                                <button class="btn btn-danger" style="border-radius: 50%"
                                                        onclick="cancelGroupRequest({{$invites}})"><span
                                                        class="close">X</span></button>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            @empty
                                <h5 class="mt-4">You have no invites yet!!!</h5>
                            @endforelse

                        </div>

                        <!-- Column -->
                    </div>


                    <!-- Column -->

                    <!-- Column -->
                </div>
                <!-- Row -->
            </div>
        </div>
    </div>
    <!-- Bootstrap Modal -->
    <div class="modal fade" id="createPostModal" tabindex="-1" role="dialog" aria-labelledby="createPostModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createPostModalLabel">Create Group</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{--                <form action="{{route('create.group')}}" method="post" enctype="multipart/form-data">--}}
                {{--                    @csrf--}}
                <input type="hidden" name="invitedFriendIds[]" value="">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="postContent">Group Name</label>
                        <input class="form-control" id="postContent" name="groupName" value="" required/>
                    </div>
                    <div class="form-group">
                        <label for="postImage">Group Image</label>
                        <input type="file" class="form-control-file" id="groupImage" name="postImage"
                               onchange="previewImage(event)">
                    </div>
                    <div id="imagePreview"></div>

                    <div class="form-group">
                        <label for="postImage">Invite Friends</label>
                        <div class="userContainer">
                            <div class="userCont">
                                @foreach( $friends as $friend)

                                    @php
                                        $imagePath = $friend->receiver_id == \Illuminate\Support\Facades\Auth::id() ? $friend->sender->profile_image : $friend->receiver->profile_image;
                                    @endphp

                                    <div class="user-box">
                                        <div class="profile-image">
                                            <img
                                                src="{{ isset($imagePath) ? asset('profile_image/' . $imagePath) :  asset('profile_image/user.png')  }}"
                                                alt="Profile Image">
                                        </div>
                                        <div
                                            class="user-name">{{ $friend->receiver_id == \Illuminate\Support\Facades\Auth::id() ? $friend->sender->name : $friend->receiver->name }}</div>
                                        <button class="invite-button"
                                                type="button"
                                                id="invite-btn-{{$friend->receiver_id == \Illuminate\Support\Facades\Auth::id() ? $friend->sender_id : $friend->receiver_id}}"
                                                onclick="groupInvitation({{ $friend->receiver_id == \Illuminate\Support\Facades\Auth::id() ? $friend->sender_id : $friend->receiver_id }})">
                                            Invite
                                        </button>
                                    </div>

                                @endforeach
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" onclick="createGroup()">Create</button>
                </div>
                {{--                </form>--}}
            </div>
        </div>
    </div>
    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>

        let invitedFriends = [];

        document.getElementById('createPostBtn').addEventListener('click', function () {
            $('#createPostModal').modal('show');
        });

        function createGroup() {
            console.log("Invited Friends:", invitedFriends);

            let groupName = $('input[name="groupName"]').val();
            let groupImage = $('input[name="postImage"]').prop('files')[0];

            let formData = new FormData();
            formData.append('groupName', groupName);
            formData.append('groupImage', groupImage);
            formData.append('invitedFriendIds', invitedFriends);

            $.ajax({
                method: "POST",
                url: "{{ route('create.group') }}",
                dataType: "json",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    console.log("Success:", res);

                    if (res.status == 200) {
                        location.reload();
                        toastr.success(res.message);
                    }

                },
                error: function (xhr, status, error) {
                    console.log("Error:", status, error);
                }
            });


        }

        function groupInvitation(friend_id) {

            console.log("friend_id", friend_id);

            let invitationBtn = $('#invite-btn-' + friend_id)

            invitationBtn.text("Sended");
            invitationBtn.css('background-color', 'green');

            invitedFriends.push(friend_id); // Push the friend_id into the array
            console.log("Invited Friends:", invitedFriends);
        }


        function previewImage(event) {
            var input = event.target;
            var imagePreview = document.getElementById('imagePreview');

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    var imgElement = document.createElement('img');
                    imgElement.setAttribute('src', e.target.result);
                    imgElement.setAttribute('class', 'img-fluid');
                    imgElement.style.width = '30%'; // Set the width to 80%
                    imagePreview.innerHTML = '';
                    imagePreview.appendChild(imgElement);
                };

                reader.readAsDataURL(input.files[0]);
            } else {
                imagePreview.innerHTML = '';
            }
        }

        function joinGroup(item) {

            $.ajax({
                method: "POST",
                url: "{{ route('join.group') }}",
                dataType: "json",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {
                    group_user_id: item.id,
                },
                success: function (res) {
                    console.log("Success:", res);

                    if (res.status == 200) {
                        location.reload();
                        toastr.success(res.message);
                    }

                },
                error: function (xhr, status, error) {
                    console.log("Error:", status, error);
                }
            });

        }

        function cancelGroupRequest(item) {

            $.ajax({
                method: "POST",
                url: "{{ route('cancel.group.request') }}",
                dataType: "json",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data: {
                    group_user_id: item.id,
                },
                success: function (res) {
                    console.log("Success:", res);

                    if (res.status == 200) {
                        location.reload();
                        toastr.success(res.message);
                    }

                },
                error: function (xhr, status, error) {
                    console.log("Error:", status, error);
                }
            });

        }


    </script>


@endsection