@include('new_layouts.header')

<audio id="notification-sound" src="{{ asset('sounds/notification.mp3') }}" preload="auto"></audio>
<style>
    .merge_action {
        display: flex;
        gap: 10px;
    }

    .chat-input-container {
        position: sticky;
        bottom: 0;
        z-index: 1050;
    }

    .icon-button {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f1f3f5 !important;
        border-radius: 8px;
        cursor: pointer;
    }
</style>
<div class="page-wrapper">
    @include('construction_project.side-menu')
    <div class="container-fluid" id="taskboard_view">
        <div class="p-4">
            <div class="card">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h1 class="mb-0">{{ __('Chat') }}</h1>
                            <div class="card-actions d-flex align-items-center">
                                <div style="width: 20px; background-color: red; height: 100%;"></div>
                                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary"
                                    data-bs-toggle="tooltip" title="{{ __('Go Back') }}">
                                    <i class="fa fa-arrow-left me-1"></i> {{ __('Back') }}
                                </a>
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="page-body">
                                <div class="flex-fill d-flex flex-column">
                                    <div class="card flex-fill">
                                        <form id="chat-form" enctype="multipart/form-data">
                                            @csrf
                                            <div class="row g-0 flex-fill">
                                                <div class="col-12 col-lg-5 col-xl-3 border-end d-flex flex-column">
                                                    <div class="card-body p-0 scrollable flex-fill">
                                                        <div class="nav flex-column nav-pills" role="tablist">
                                                            <a href="#chat-1" class="nav-link text-start mw-100 p-3" id="chat-1-tab" data-bs-toggle="pill" role="tab" aria-selected="false" tabindex="-1">
                                                                <div class="row align-items-center flex-fill">
                                                                    <div class="col-auto"><span class="avatar avatar-1" style="background-image: url(./static/avatars/063m.jpg)"> </span></div>
                                                                    <div class="col text-body">
                                                                        <div>{{$query->query}}</div>
                                                                        <div class="text-secondary text-truncate w-100">
                                                                            {{$query->item_name}}
                                                                        </div>
                                                                        <div id="typing-indicator" class="text-muted mt-2"></div>
                                                                    </div>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-12 col-lg-7 col-xl-9 d-flex flex-column">
                                                    <div class="card-body scrollable">
                                                        <div class="chat">
                                                            <div class="chat-bubbles">
                                                                <div class="text-center mb-3">
                                                                    @if($checkLoadMore->isNotEmpty())
                                                                        <button type="button" id="load-more" class="btn btn-outline-primary btn-sm">Load Older Messages</button>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @if($query->status !== "withdrawn" && $query->status !== "closed")
                                                        <div class="chat-input-container p-2 border-top bg-white">
                                                            <div class="d-flex align-items-center gap-2">
                                                                <input type="text" id="send_message" name="send_message" class="form-control flex-grow-1" placeholder="Type a message..." autocomplete="off" style="height: 42px;">
                                                                <label class="icon-button" for="fileUpload" style="cursor: pointer;">
                                                                    <i class="fa fa-paperclip"></i>
                                                                </label>
                                                                
                                                                <input type="file" id="fileUpload" class="d-none" />
                                                                <button type="submit" class="icon-button btn p-0 border-0 bg-transparent" id="sendBtn">
                                                                    <i class="fa fa-paper-plane"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('new_layouts.footer')

<script>
    let currentPage = 0;
    let lastId    = {{ $messages->first()?->id ?? 0 }};
    let lastestId = {{ $messages->last()?->id ?? 0 }};
    let groupId   = {{ $query_id }};
    let schedule_id = {{ $schedule_id }};
    let userId    = {{ auth()->id() }};
    let polling   = setInterval(fetchNewMessages, 3000);

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    function fetchNewMessages() {
        $.get('{{ route("microprogram_chat_poll") }}', { group_id: groupId, last_id: lastId }, function (data) {
            data.forEach(msg => {
                appendMessage(msg);
                lastId = msg.id;
                if (msg.user.id !== userId) {
                    // $('#notification-sound')[0].play();
                    // if (navigator.vibrate) navigator.vibrate(200);
                }
            });
        });
    }

    function appendMessage(msg, toTop = false) {
        let id = msg.id;
        let group_id = msg.group_id;
        
        let self = msg.user.id === userId;
        let time = new Date(msg.created_at).toLocaleTimeString();
        let html = `<div class="chat-item" style="margin-bottom: 4%;">
            <div class="row align-items-end ${self ? 'justify-content-end' : ''}">
                ${!self ? `<div class="col-auto"><span class="avatar avatar-1">👤</span></div>` : ''}
                <div class="col col-lg-6">
                    <div class="chat-bubble ${self ? 'chat-bubble-me' : ''}">
                        <div class="chat-bubble-title">
                            <div class="row">
                                <div class="col-auto ${self ? 'chat-bubble-date ms-auto' : 'chat-bubble-author'}">
                                    ${self ? `<span>${time}</span> You` : `${msg.user.name} <span>${time}</span>`}
                                </div>
                            </div>
                        </div>
                        <div class="chat-bubble-title">
                            <div class="row">
                                <div class="col-auto chat-message ${self ? 'ms-auto' : ''}">
                                    ${msg.file_type === 1 ? `<span style="color:#1a569d; cursor:pointer;" onclick="downloadFile(${group_id}, ${id})" download>${msg.file_name}</span>` : msg.message}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                ${self ? `<div class="col-auto"><span class="avatar avatar-1">👤</span></div>` : ''}
            </div>
        </div>`;

        if (toTop) {
            $('.chat-bubbles').find('#load-more').parent().after(html);
        } else {
            $('.chat-bubbles').append(html);
        }
    }

    $('#fileUpload').on('change', function () {
        $('#chat-form').submit(); // Auto-submit on file select
    });

    $('#chat-form').on('submit', function(e) {
        e.preventDefault();
        const file = $('#fileUpload')[0].files[0];
        const formData = new FormData(this);
        formData.append('schedule_id', schedule_id);
        formData.append('group_id', groupId);
        formData.append('file', file);

        
        console.log("Selected File:", file);

        $.ajax({
            url: '{{ route("microprogram_chat_send") }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success(res) {
                $('#fileUpload').val('');
                $('#send_message').val('');
                // appendMessage(res.message);
                lastId = res.message.id - 1;
            }
        });
    });

    $('#load-more').on('click', function () {
        currentPage++;

        $.get('{{ route("microprogram_chat_loadmore") }}', { group_id: groupId, page: currentPage }, function (data) {
            Object.values(data).forEach(msg => {
                appendMessage(msg, true);
            });
        });
    });

    function downloadFile(query_id, id){
        let url = '{{ route("microprogram_chat_file_download") }}' + '?query_id=' + query_id + '&id=' + id;
        window.location.href = url;
    }
    

    let typingTimeoutLook; // Use let if not declared anywhere else
    $('#send_message').on('input', function () {
        clearTimeout(typingTimeoutLook);
        typingTimeoutLook = setTimeout(() => {
            $.post('{{ route("microprogram_chat_typing") }}', { group_id: groupId });
        }, 300);
    });

    setInterval(() => {
        $.get('{{ route("microprogram_chat_typing_users") }}', { group_id: groupId }, function (data) {
            const typingUsers = data.users.filter(name => name !== '{{ auth()->user()->name }}');
            $('#typing-indicator').text(
                typingUsers.length > 0 ? typingUsers.join(', ') + ' is typing...' : ''
            );
        });
    }, 3000);
</script>