@extends('layouts.auth')
@section('title')
    Group
@endsection

@section('content')
    <style>
        #ourtime {
            display: block;
        }

        @media screen and (max-width:992px) {
            #ourtime {
                display: none;
            }
        }
    </style>
    <!-- start chat-leftsidebar -->
    <div id="ourtime"
        style="height: 100vh;overflow-y: scroll !important"
        class="chat-leftsidebar lg:w-[380px] group-data-[theme-color=violet]:bg-slate-50 group-data-[theme-color=green]:bg-green-50/20 group-data-[theme-color=red]:bg-red-50/20 shadow overflow-y-hidden mb-[80px] lg:mb-0 group-data-[theme-color=violet]:dark:bg-zinc-700 group-data-[theme-color=green]:dark:bg-zinc-700 group-data-[theme-color=red]:dark:bg-zinc-700">
        <div>
            <div>
                <x-sidebar.tab-group />
            </div>

        </div>
    </div>
    <!-- end chat-leftsidebar -->

    <!-- Start User chat -->
    <div class="w-full overflow-hidden transition-all duration-150 bg-white user-chat  dark:bg-zinc-800"
        style="height: 100vh">
        <div class="lg:flex">
            <!-- start chat conversation section -->

            <div class="relative w-full overflow-hidden ">
                <div class="p-4 border-b border-gray-100 lg:p-6 dark:border-zinc-600">
                    <div class="grid items-center grid-cols-12">
                        <div class="col-span-8 sm:col-span-8">
                            <div class="flex items-center">
                                <div class="block ltr:mr-2 rtl:ml-2 lg:hidden">
                                    <a href="{{ route('user.group') }}"
                                        class="p-2 text-gray-500 user-chat-remove text-16"><i
                                            class="ri-arrow-left-s-line"></i></a>
                                </div>
                                <div class="rtl:ml-3 ltr:mr-3">
                                    <img src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
                                        class="rounded-full h-9 w-9" alt="">
                                </div>
                                <div class="flex-grow overflow-hidden">
                                    <h5 class="mb-0 truncate text-16 ltr:block rtl:hidden"><a href="#"
                                            class="text-gray-800 dark:text-gray-50">
                                            @if ($group)
                                                {{ $group->name }}
                                            @endif
                                        </a> <i
                                            class="text-green-500 ltr:ml-1 rtl:mr-1 ri-record-circle-fill text-10 hidden"></i>
                                        <i
                                            class="text-green-500 ltr:ml-1 rtl:mr-1 ri-record-circle-fill text-10 hidden"></i>
                                    </h5>
                                    @if ($group)
                                        <div class="flex space-x-2">
                                            @foreach ($group->members as $member)
                                                @if (auth()->id() == $member->user_id)
                                                    <p>{{ 'You' }}</p>,
                                                @else
                                                    {{ Illuminate\Support\Str::limit($member->user->username, 2, '..') }}
                                                @endif
                                            @endforeach
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-span-4 sm:col-span-4">
                            <ul class="flex items-center justify-end lg:gap-4">
                                {{-- <li class="px-3">
                                    <div class="relative dropstart">
                                        <button
                                            class="p-0 text-xl text-gray-500 border-0 btn dropdown-toggle dark:text-gray-300"
                                            type="button" data-bs-toggle="dropdown" id="dropdownMenuButton10"
                                            data-tw-auto-close="outside">
                                            <i class="ri-search-line"></i>
                                        </button>
                                        <ul class="absolute z-50 hidden mt-2 text-left list-none bg-white border rounded-lg shadow-lg w-fit border-gray-50 dropdown-menu top-8 dark:bg-zinc-700 bg-clip-padding dark:border-gray-700"
                                            aria-labelledby="dropdownMenuButton10">
                                            <li class="p-2">
                                                <input type="text"
                                                    class="text-gray-500 border-0 rounded bg-gray-50 placeholder:text-14 text-14 dark:bg-zinc-600 dark:text-gray-300 placeholder:dark:text-gray-300 focus:ring-0"
                                                    placeholder="Search..">
                                            </li>
                                        </ul>
                                    </div>
                                </li>

                                <li class="px-3" id="addMoreMemberButton">
                                    <a href="#" title="Add Memeber"
                                        class="hidden text-gray-500 dark:text-gray-300 lg:block profileTab">
                                        <i class="text-xl ri-group-line"></i>
                                    </a>
                                </li> --}}

                                <dev class="relative z-50 hidden" id="addMoreMemberModal">
                                    <div class="fixed inset-0 z-50 overflow-hidden">
                                        <div
                                            class="absolute inset-0 transition-opacity bg-black bg-opacity-50 modal-overlay">
                                        </div>
                                        <div
                                            class="flex items-center justify-center max-w-lg min-h-screen p-4 mx-auto text-center animate-translate">
                                            <div
                                                class="relative w-full max-w-lg my-8 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl -top-10 dark:bg-zinc-700">
                                                <form id="addMoreMemberForm"
                                                    data-url="{{ route('user.add.more.member.group') }}"
                                                    class="group-data-[theme-color=violet]:bg-violet-800/10 group-data-[theme-color=green]:bg-green-800/10 group-data-[theme-color=red]:bg-red-800/10 group-data-[theme-color=violet]:dark:bg-zinc-700 group-data-[theme-color=red]:dark:bg-zinc-700 group-data-[theme-color=green]:dark:bg-zinc-700">
                                                    <input type="hidden" name="group_id" value="{{ request()->uuid }}">
                                                    <div
                                                        class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-zinc-500">
                                                        <h5 class="mb-0 text-gray-800 text-16 dark:text-gray-50"
                                                            id="addgroup-exampleModalLabel">Add More Member</h5>
                                                        <button type="button"
                                                            class="absolute top-3 ltr:right-2.5 rtl:left-2.5 text-gray-400 border-transparent hover:bg-gray-50/50/50 hover:text-gray-900 rounded-lg text-sm px-2 py-1 ml-auto inline-flex items-center dark:hover:bg-zinc-600 dark:text-gray-100"
                                                            id="hideMoreMemberButton">
                                                            <i
                                                                class="text-xl text-gray-500 mdi mdi-close dark:text-zinc-100/60"></i>
                                                        </button>
                                                    </div>
                                                    <div class="p-4">
                                                        <div>
                                                            @csrf
                                                            <div class="mb-8 ltr:text-left rtl:text-right">
                                                                <label class="dark:text-gray-300 ">Group Members</label>
                                                                <div class="mt-2 mb-3">
                                                                    <button
                                                                        class="group-data-[theme-color=violet]:bg-slate-200 group-data-[theme-color=green]:bg-white group-data-[theme-color=red]:bg-white border-0 btn group-data-[theme-color=violet]:dark:bg-zinc-600 group-data-[theme-color=green]:dark:bg-zinc-600 group-data-[theme-color=red]:dark:bg-zinc-600 dark:text-gray-50"
                                                                        type="button" id="memberNotAdd"
                                                                        data-url="{{ route('user.get.show.not.add.member', ['uuid' => request()->uuid]) }}">
                                                                        Select Members
                                                                    </button>
                                                                </div>

                                                                <div class="hidden" id="notAddmemebersCollapse">
                                                                    <div
                                                                        class="border border-gray-100 rounded dark:border-zinc-500">
                                                                        <div
                                                                            class="px-3 py-2 rounded bg-gray-100/50 dark:bg-zinc-600">
                                                                            <h5
                                                                                class="mb-0 text-base text-gray-800 dark:text-gray-50">
                                                                                Contacts
                                                                            </h5>
                                                                        </div>
                                                                        <div class="p-2 bg-white dark:bg-zinc-800">
                                                                            <div data-simplebar class="h-[150px]">
                                                                                <div id="getAllgroupMemberWhichNotAdd">
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div
                                                        class="flex p-4 border-t border-gray-100 ltr:justify-end dark:border-zinc-500 rtl:justify-start">
                                                        <div>
                                                            <button type="button"
                                                                class="border-0 btn hover:underline group-data-[theme-color=violet]:text-violet-500 group-data-[theme-color=green]:text-green-500 group-data-[theme-color=red]:text-red-500"
                                                                id="hideMoreMemberButton2">Close</button>
                                                            <button type="submit"
                                                                class="text-white border-transparent btn group-data-[theme-color=violet]:bg-violet-500 group-data-[theme-color=violet]:hover:bg-violet-600 group-data-[theme-color=green]:bg-green-500 group-data-[theme-color=green]:hover:bg-green-600 group-data-[theme-color=red]:bg-red-500 group-data-[theme-color=red]:hover:bg-red-600">Add
                                                                Members</button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </dev>


                                <li class="px-3">
                                    <div class="relative ">
                                        <button
                                            class="p-0 text-xl text-gray-500 border-0 btn dropdown-toggle dark:text-gray-300"
                                            type="button" id="dropdownMenuButtonChatMenuTop">
                                            <i class="ri-more-fill"></i>
                                        </button>
                                        <ul class="absolute z-50 hidden w-40 py-2 mx-4 mt-2 text-left list-none bg-white border rounded shadow-lg ltr:-right-4 border-gray-50  top-8 dark:bg-zinc-600 bg-clip-padding dark:border-gray-600/50 rtl:-left-5"
                                            id="dropdownMenuButtonChatMenuTopDropdown">
                                            {{-- <li class="block lg:hidden">
                                                <a class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent profileTab dropdown-item whitespace-nowrap hover:bg-gray-100/30 dark:text-gray-100 dark:hover:bg-zinc-700 ltr:text-left rtl:text-right"
                                                    href="#">View profile <i
                                                        class="text-gray-500 rtl:float-left ltr:float-right dark:text-gray-300 ri-user-2-line text-16"></i></a>
                                            </li>
                                            <li class="block lg:hidden"><a
                                                    class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap hover:bg-gray-100/30 dark:text-gray-100 dark:hover:bg-zinc-700 ltr:text-left rtl:text-right"
                                                    href="#" data-tw-toggle="modal"
                                                    data-tw-target="#audiCallModal">Block User <i
                                                        class="text-gray-500 rtl:float-left ltr:float-right dark:text-gray-300 ri-delete-bini-line text-16"></i></a>
                                            </li> --}}
                                            {{-- <li><a class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap hover:bg-gray-100/30 dark:text-gray-100 dark:hover:bg-zinc-700 ltr:text-left rtl:text-right"
                                                    href="#">Archive <i
                                                        class="text-gray-500 rtl:float-left ltr:float-right dark:text-gray-300 ri-archive-line text-16"></i></a>
                                            </li>
                                            <li><a class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap hover:bg-gray-100/30 dark:text-gray-100 dark:hover:bg-zinc-700 ltr:text-left rtl:text-right"
                                                    href="#">Muted <i
                                                        class="text-gray-500 rtl:float-left ltr:float-right dark:text-gray-300 ri-volume-mute-line text-16"></i></a>
                                            </li> --}}
                                            {{-- <li>
                                                @if ($users)
                                                <a class="block w-full px-4 py-2 text-sm font-normal text-gray-700 bg-transparent dropdown-item whitespace-nowrap hover:bg-gray-100/30 dark:text-gray-100 dark:hover:bg-zinc-700 ltr:text-left rtl:text-right"
                                                href="#" id="blockUser" data-block-user-url="{{route('user.chat.block')}}" data-block-user-uuid="{{$users->uuid}}">Block User <i
                                                    class="text-gray-500 rtl:float-left ltr:float-right dark:text-gray-300 ri-delete-bin-line text-16"></i></a>
                                                    @endif
                                        </li> --}}
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end chat user head -->
                <!-- start chat conversation -->
                <div class="p-4 lg:p-6"
                    style="overflow-y: scroll; background-image: url('{{ asset('assets/images/users/' . Auth::user()->chat_background_image) }}');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    height:calc(100vh - 32vh)"
                    id="chat-container">
                    <ul class="mb-0" id="appended">
                        <x-chats.main-chat :chats="$chats" />
                    </ul>
                    <ul class="mb-0" id="appended2">
                    </ul>
                </div>

                <!-- start chat input section -->
                <x-group.send-chat-input-group />
                <!-- end chat input section -->
            </div>
            <!-- end chat conversation section -->


            <!-- start User profile detail sidebar -->
            <!-- Start profile content -->
            <div class="user-profile-sidebar h-[100vh] bg-white shadow overflow-y-hidden mb-[85px] lg:mb-0 group-data-[theme-color=violet]:dark:bg-zinc-800 border-l-4 border-gray-50 dark:border-zinc-600 group-data-[theme-color=green]:dark:bg-zinc-700 group-data-[theme-color=red]:dark:bg-zinc-700 absolute xl:relative top-0 bottom-0"
                style="display: none;">

                <div class="px-6 pt-6">
                    <div class="text-end">
                        <button type="button" class="text-2xl text-gray-500 border-0 btn dark:text-gray-200"
                            id="user-profile-hide">
                            <i class="ri-close-line"></i>
                        </button>
                    </div>
                </div>

                <x-profile.profile-desc />
            </div>
            <!-- end User profile detail sidebar -->
        </div>
    </div>
@endsection
@section('script')
    <script>
        let mediaRecorder;
        let audioChunks = [];
        let waveSurfer = WaveSurfer.create({
            container: "#waveform",
            waveColor: "violet",
            progressColor: "purple",
        });

        let stream;

        document
            .getElementById("recordButton")
            .addEventListener("click", async () => {
                try {
                    stream = await navigator.mediaDevices.getUserMedia({
                        audio: true,
                    });
                    mediaRecorder = new MediaRecorder(stream);

                    audioChunks = []; // Initialize audioChunks when starting the recording

                    mediaRecorder.ondataavailable = (event) => {
                        audioChunks.push(event.data);
                    };

                    mediaRecorder.onstop = () => {
                        const audioBlob = new Blob(audioChunks, {
                            type: "audio/wav",
                        });
                        const audioUrl = URL.createObjectURL(audioBlob);
                        waveSurfer.load(audioUrl);

                        const audio = document.getElementById("audioPlayback");
                        audio.src = audioUrl;

                        const fileInput = document.getElementById("audioFile");

                        // Create a DataTransfer object
                        const dataTransfer = new DataTransfer();
                        dataTransfer.items.add(
                            new File([audioBlob], "recording.wav", {
                                type: "audio/wav",
                            })
                        );

                        // Assign the DataTransfer's files to the input element
                        fileInput.files = dataTransfer.files;

                        // Stop all tracks to release the microphone
                        stream.getTracks().forEach((track) => track.stop());
                    };

                    mediaRecorder.start();
                    document.getElementById("recordButton").disabled = true;
                    document.getElementById("recordButton").classList.add("hidden");
                    document.getElementById("stopButton").disabled = false;
                    $("#messageText").addClass("block").removeClass("hidden");
                    document.getElementById("messageText").innerText =
                        "Recording...";
                    document.getElementById("stopButton").disabled = false;
                    document.getElementById("stopButton").classList.remove("hidden");
                    document.getElementById("stopButton").classList.add("block");

                    document.getElementById("messageArea").classList.add("hidden");
                    document
                        .getElementById("messageArea")
                        .classList.remove("block");
                } catch (err) {
                    console.error("Microphone access denied or not available", err);
                    document.getElementById("messageText").textContent =
                        "Please connect a microphone.";
                }
            });

        document.getElementById("stopButton").addEventListener("click", () => {
            mediaRecorder.stop();
            document.getElementById("recordButton").disabled = false;
            document.getElementById("stopButton").disabled = true;
            document.getElementById("stopButton").classList.add("hidden");
            document.getElementById("stopButton").classList.remove("block");
            document.getElementById("recordButton").classList.add("block");
            document.getElementById("recordButton").classList.remove("hidden");
            document.getElementById("messageArea").classList.add("block");
            document.getElementById("messageArea").classList.remove("hidden");
            document.getElementById("messageText").classList.remove("block");
            document.getElementById("messageText").classList.add("hidden");
        });
    </script>
@endsection