@extends('admin.layout')

@section('content')

<h5>💬 Chat dengan {{ $chat->ortu->nama }}</h5>

<div class="card-box">

    <div class="chat-box mb-3">

        @foreach($messages as $m)

        <div id="msg-{{ $m->id }}" class="chat {{ $m->sender == 'admin' ? 'chat-right' : 'chat-left' }}">

            <div class="bubble {{ $m->sender == 'admin' ? 'bubble-primary' : 'bubble-grey' }}">

                {{-- 🔥 REPLY --}}
                @if($m->reply)
                <div onclick="scrollToMessage({{ $m->reply->id }})"
                    style="cursor:pointer; font-size:12px; background:#eef2ff; padding:6px; border-left:4px solid #4e73df; margin-bottom:5px;">
                    ↩ {{ $m->reply->message }}
                </div>
                @endif

                {{ $m->message }}

                {{-- 🔥 BUTTON REPLY --}}
                <div>
                    <button onclick="setReply({{ $m->id }}, '{{ $m->message }}')" class="btn btn-sm btn-light mt-1">
                        Reply
                    </button>
                </div>

            </div>

        </div>

        @endforeach

    </div>

    {{-- FORM --}}
    <form method="POST" action="/admin/chat/balas">
        @csrf

        <input type="hidden" name="chat_id" value="{{ $chat->id }}">
        <input type="hidden" name="reply_to" id="reply_to">

        {{-- PREVIEW REPLY --}}
        <div id="reply_box"
            style="display:none; font-size:12px; background:#eef2ff; padding:6px; border-left:4px solid #4e73df; margin-bottom:5px;">
            <span id="reply_text"></span>
            <button type="button" onclick="cancelReply()" style="float:right;">❌</button>
        </div>

        <div class="d-flex gap-2">
            <input type="text" name="message" class="form-control" placeholder="Balas pesan..." required>
            <button class="btn btn-custom">Kirim</button>
        </div>

    </form>

</div>

{{-- 🔥 SCRIPT --}}
<script>
function setReply(id, message) {
    document.getElementById('reply_to').value = id;
    document.getElementById('reply_text').innerText = message;
    document.getElementById('reply_box').style.display = 'block';
}

function cancelReply() {
    document.getElementById('reply_to').value = '';
    document.getElementById('reply_text').innerText = '';
    document.getElementById('reply_box').style.display = 'none';
}

// 🔥 scroll ke pesan
function scrollToMessage(id) {
    let el = document.getElementById('msg-' + id);

    if (el) {
        el.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
        });

        el.style.background = '#fff3cd';
        setTimeout(() => {
            el.style.background = 'transparent';
        }, 1500);
    }
}
</script>

@endsection