@extends('website.layout.master')

@section('title')

    Community Discussion

@endsection

@section('content')

    <!-- char-area -->
    <section class="message-area pd-bottom-60" style="padding-top:30px">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="chat-area">
                        <!-- chatbox -->
                        <div class="chatbox">
                            <div class="modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="msg-head">
                                        <div class="row">
                                            <div class="col-8">
                                                <div class="d-flex align-items-center">
                                                    <span class="chat-icon"><img class="img-fluid"
                                                                                 src="{{ URL::asset('website/images/course/0.png')}}"
                                                                                 alt="image title"></span>
                                                    <div class="flex-shrink-0">
                                                        <img class="img-fluid"
                                                             src="{{ URL::asset('website/images/course/0.png')}}"
                                                             alt="user img">
                                                    </div>
                                                    <div class="flex-grow-1 ms-3">
                                                        <h3>Community Discussion</h3>
                                                        <p>Join the Conversation and Share Insights</p>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                    <div class="modal-body"
                                         style="background-image: url(website/images/bg/chatbg.png);">
                                        <div class="msg-body">
                                            <ul id="chatContainer">
                                            </ul>
                                        </div>
                                    </div>


                                    <div class="send-box">
                                        <form id="MyChatForm">
                                            <input type="text" class="form-control" aria-label="message…"
                                                   placeholder="Write message . . . . " name="chat_message"
                                                   id="chat_message"
                                                   required>

                                            <button type="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i>
                                                Send
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- chatbox -->

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- char-area -->

    <audio id="messageSound" autoplay="false">
        <source src="{{ URL::asset('admin/assets/uploads/beep.mp3') }}" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

@endsection

@section('script')
    {{--    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>--}}
    <link rel="stylesheet" href="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.css') }}">
    <script src="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ URL::asset('admin/assets/js/sweet-alert.js') }}"></script>

    <script>

        jQuery(document).ready(function () {

            $(".chat-list a").click(function () {
                $(".chatbox").addClass('showbox');
                return false;
            });

            $(".chat-icon").click(function () {
                $(".chatbox").removeClass('showbox');
            });


        });
    </script>

    <script>
        $(document).ready(function () {

            $('#MyChatForm').submit(function (e) {
                e.preventDefault(); // Prevent default form submission

                var mymessage = $('#chat_message').val();

                if (mymessage == "") {
                    ChatErrorMessage("Message Required.");
                    return false;
                }

                // Collect form data
                var formData = {
                    'chat_message': mymessage
                };

                // Retrieve CSRF token value from meta tag
                var csrfToken = $('meta[name="csrf-token"]').attr('content');

                // Include CSRF token in AJAX request headers
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }
                });

                // Send AJAX request
                $.ajax({
                    type: 'POST',
                    url: '{{ route("save_chat_message") }}', // Replace 'your_route_name' with your actual route name
                    data: formData,
                    dataType: 'json',
                    encode: true
                })
                    .done(function (data) {
                        // Handle success response
                        console.log(data);
                        PusherCode();
                    })
                    .fail(function (data) {
                        // Handle error response
                        console.error(data);
                    });
                $('#chat_message').val("");
            });

            bingChannel();
            PusherCode();
            // LoadChat();

        });

        function LoadChat() {
            $.ajax({
                type: 'get',
                url: '{{ route("load_community_chat") }}',
                dataType: 'json',
                encode: true
            })
                .done(function (data) {
                    // Update HTML with fetched chat messages
                    var messagesHtml = '';
                    $.each(data, function (index, message) {
                        var sender_name = message.userdata ? message.userdata.name : 'Unknown User';
                        var time = formatDate(message.created_at);
                        if (message.send_by == {{ Auth::guard('web')->user()->id }}) {
                            messagesHtml += `<li class="repaly">
                                                    <p>` + message.message + `</p>
                                                    <span class="time"><strong
                                                            style="margin-right:1%;color:rgb(28, 123, 236);">` + sender_name + `:</strong>` + time + `</span>
                                                </li>`;
                        } else {
                            messagesHtml += `<li class="sender">
                                                    <p>` + message.message + `</p>
                                                    <span class="time"><strong
                                                            style="margin-right:1%;color:rgb(28, 123, 236);">` + sender_name + `:</strong>` + time + `</span>
                                                </li>`;
                        }
                    });
                    $('.msg-body ul').html(messagesHtml);
                })
                .fail(function (data) {
                    // Handle error response
                    console.error(data);
                });
        }

        function formatDate(date) {
            var d = new Date(date);

            // Get day, month, year, hours, and minutes
            var day = d.getDate();
            var month = d.toLocaleString('default', {month: 'short'}); // Get abbreviated month name
            var year = d.getFullYear();
            var hours = d.getHours();
            var minutes = d.getMinutes();

            // Convert hours to 12-hour format
            var ampm = hours >= 12 ? 'pm' : 'am';
            hours = hours % 12;
            hours = hours ? hours : 12; // Handle midnight (12:00 am)

            // Add leading zeros to minutes if needed
            minutes = minutes < 10 ? '0' + minutes : minutes;

            // Construct formatted string
            var formattedDate = day + ' ' + month + ' ' + year + ' ' + hours + ':' + minutes + ' ' + ampm;

            return formattedDate;
        }

        function ChatErrorMessage(message) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true,
            });

            Toast.fire({
                icon: 'error',
                title: message
            })
        }

        function ChatSuccessMessage(message) {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: true,
            });

            Toast.fire({
                icon: 'success',
                title: message
            })
        }

        function bingChannel() {
            $.ajax({
                type: 'get',
                url: '{{ route("bind_channel") }}',
                dataType: 'json',
                encode: true
            })
                .done(function (data) {
                    // Update HTML with fetched chat messages
                    console.log("bind successffully");
                })
                .fail(function (data) {
                    // Handle error response
                    console.error(data);
                });
        }

    </script>

    <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
    <script>

        var count = 1;

        function PusherCode() {
            // Enable pusher logging - don't include this in production
            Pusher.logToConsole = true;

            var pusher = new Pusher('78bc1b3213201e2b2f50', {
                cluster: 'ap2'
            });

            var channel = pusher.subscribe('notify-channel');

            channel.bind('form-submit', function (data) {

                if (count > 1) {
                    playMessageSound();
                }
                LoadChat();
                count++;

            });
        }

        function playMessageSound() {
            var audio = document.getElementById("messageSound");
            audio.play();
        }

        function scrollToBottom() {
            var chatContainer = document.getElementById("chatContainer");
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }


    </script>

@endsection