@extends('admin.layout.master')

@section('styles')
<link rel="stylesheet" href="{{ asset('admin/assets/vendor/css/pages/app-chat.css') }}">
<style>
/* مظهر الوقت تحت الرسالة وحجمه صغير */
.chat-meta {
    margin-top: 6px;
    font-size: 11px;
    color: #6c757d;
}

/* ضبط حجم ومساحة صندوق الرسائل */
.chat-history-body {
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    padding: 1rem;
    background: #fff;
}
.form-send-message {
    margin-top: 15px;      /* ينزل الفورم تحت شوية */
    padding: 15px;         /* مساحة داخلية أوسع */
    background: #f9f9f9;   /* فصل خفيف عن الرسائل */
    border-top: 1px solid #ddd;
}
.form-send-message input[name="message"] {
    padding: 12px;
    border-radius: 8px;
}
/* مركز تحميل الرسائل */
#chat-loading {
    padding: 2.2rem 0;
}

/* مؤشر قابلية الضغط في لستة اليوزرات */
.chat-contact-list .chat-contact-list-item { cursor: pointer; }

/* تمييز اليوزر المختار */
.chat-contact-list .chat-contact-list-item.active {
    background-color: #f8f9fa;
    font-weight: 600;
}
</style>
@endsection

@section('content')
<div class="app-chat card overflow-hidden">
    <div class="row g-0">
        <!-- Sidebar -->
        <div class="col-3 border-end">
            <ul class="list-unstyled chat-contact-list" id="chat-list">
                @foreach($users as $user)
                <li>
                    <a href="javascript:void(0);" 
                       class="chat-contact-list-item d-block py-2 px-3" 
                       data-user-id="{{ $user->id }}">
                        {{ is_null($user->name) ? $user->phone : $user->name }}
                        @if(isset($user->unread_count) && $user->unread_count > 0)
                            <span class="badge bg-danger float-end">{{ $user->unread_count }}</span>
                        @endif
                    </a>
                </li>
                @endforeach
            </ul>
        </div>

        <!-- Chat Area -->
        <div class="col-9 app-chat-history bg-body">
            <div class="chat-history-wrapper">
                <div class="chat-history-body">
                    <!-- مؤشر التحميل يظهر فوراً عند الضغط -->
                    <div id="chat-loading" class="text-center d-none">
                        <div class="spinner-border" role="status" aria-hidden="true"></div>
                        <div class="small text-muted mt-2">جاري تحميل الرسائل...</div>
                    </div>

                    <ul class="list-unstyled chat-history" id="chat-box"></ul>
                </div>

                <form class="form-send-message d-flex align-items-center p-2 border-top" id="send-message-form">
                    @csrf
                    <input type="hidden" name="user_id" id="chat-user-id">
                    <input type="text" name="message" class="form-control me-2" placeholder="اكتب رسالتك..." required>
                    <button type="submit" class="btn btn-primary">إرسال</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function() {
    // دالة تهرب النص لـ HTML آمن
    function escapeHtml(text) {
        return $('<div>').text(text).html();
    }

    function setActiveUserElement(userId) {
        $('.chat-contact-list-item').removeClass('active');
        $(`.chat-contact-list-item[data-user-id="${userId}"]`).addClass('active');
    }

    // فتح محادثة مع يوزر: نظهر مؤشر التحميل فوراً
    $(document).on('click', '.chat-contact-list-item', function() {
        let $el = $(this);
        let userId = $el.data('user-id');

        // ضع userId في الفورم
        $('#chat-user-id').val(userId);

        // واجهة مستخدم: تمييز المختار، تفريغ صندوق الشات، إظهار Loading، تعطيل الفورم
        setActiveUserElement(userId);
        $('#chat-box').empty();
        $('#chat-loading').removeClass('d-none');
        $('#send-message-form :input').prop('disabled', true);

        // استدعاء الـ AJAX لجلب الرسائل
        $.get(`/dashboard/support/${userId}`)
            .done(function(messages) {
                let chatBox = $("#chat-box");
                chatBox.html('');

                messages.forEach(function(msg) {
                    let side = msg.type === 'admin' ? 'chat-message-right' : 'chat-message-left';
                    let align = msg.type === 'admin' ? 'text-end' : 'text-start';

                    let html = `
                        <li class="chat-message ${side}">
                            <div class="chat-message-text">
                                <p>${escapeHtml(msg.message)}</p>
                            </div>
                            <div class="chat-meta ${align}">
                                <small class="text-muted">${escapeHtml(msg.created_at)}</small>
                            </div>
                        </li>`;
                    chatBox.append(html);
                });

                // بعد التحميل: اخفاء Loading، تفعيل الفورم، تركيز على حقل الرسالة، وتمرير لأسفل
                $('#chat-loading').addClass('d-none');
                $('#send-message-form :input').prop('disabled', false);
                $('#send-message-form input[name="message"]').focus();
                $('.chat-history-body').scrollTop($('.chat-history-body')[0].scrollHeight);

                // ازالة بادج الإشعارات من اليوزر المفتوح
                $(`.chat-contact-list-item[data-user-id="${userId}"] .badge`).remove();
            })
            .fail(function() {
                $('#chat-loading').addClass('d-none');
                $('#send-message-form :input').prop('disabled', false);
                alert('فشل تحميل الرسائل، حاول مرة أخرى.');
            });
    });

    // إرسال رسالة
    $('#send-message-form').submit(function(e) {
        e.preventDefault();
        let userId = $('#chat-user-id').val();
        if (!userId) {
            alert("من فضلك اختر مستخدم أولاً");
            return;
        }

        let $form = $(this);
        let formData = $form.serialize();

        // منع الإرسال المتكرر
        $form.find('button[type="submit"]').prop('disabled', true);

        $.post(`/dashboard/support/${userId}`, formData)
            .done(function(response) {
                if (response.success) {
                    let html = `
                        <li class="chat-message chat-message-right">
                            <div class="chat-message-text">
                                <p>${escapeHtml(response.data.message)}</p>
                            </div>
                            <div class="chat-meta text-end">
                                <small class="text-muted">${escapeHtml(response.data.created)}</small>
                            </div>
                        </li>`;
                    $("#chat-box").append(html);
                    $('.chat-history-body').scrollTop($('.chat-history-body')[0].scrollHeight);
                }
            })
            .fail(function() {
                alert('فشل إرسال الرسالة، حاول مرة أخرى.');
            })
            .always(function() {
                $form.find('button[type="submit"]').prop('disabled', false);
                $form[0].reset();
                $form.find('input[name="message"]').focus();
            });
    });
});
</script>
@endsection