@php($disableTailwind = true)
@extends('admin.layout.master')
@section('title')
    {{ __('dashboard.admins') }}
@endsection
@section('styles')
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        .container {
            max-width: 800px;
            margin: 50px auto;
        }

        .chat-box {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
        }

        .chat-header {
            background-color: #007bff;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        .chat-body {
            height: 400px;
            overflow-y: auto;
            padding: 10px;
        }

        .message {
            margin-bottom: 15px;
        }

        .user-message {
            background-color: #007bff;
            color: #fff;
            border-radius: 8px;
            padding: 8px 12px;
            max-width: 70%;
        }

        .partner-message {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 8px 12px;
            max-width: 70%;
        }

        .input-group {
            margin-top: 15px;
        }
    </style>
@endsection
@section('content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-home"></i>
                </span> {{ __('dashboard.chat_with') }} {{ $user->name }} - {{ $user->email }}
            </h3>
            <nav aria-label="breadcrumb">
                <ul class="breadcrumb">

                </ul>
            </nav>
        </div>
        <div class="row">
            <div class="container">
                <div class="chat-box">
                    <div class="chat-header">
                        <h4>Live Chat</h4>
                    </div>
                    <div class="chat-body" id="chatBody">
                        @foreach ($oldMessages as $oldMessage)
                            <div class="message {{ $oldMessage->sender == 'user' ? 'partner' : 'user' }}-message">
                                {{ $oldMessage->message }}</div>
                        @endforeach
                    </div>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Type your message...">
                        <div class="input-group-append">
                            <button id="submitButton" class="btn btn-primary">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <script>
        let chatBody = document.getElementById("chatBody");
        chatBody.scrollTop = chatBody.scrollHeight;
        Pusher.logToConsole = false;

        var pusher = new Pusher('{{ config('broadcasting.connections.pusher.key') }}', {
            cluster: '{{ config('broadcasting.connections.pusher.options.cluster') }}',
            encrypted: true
        });

        var channel = pusher.subscribe('chat-channel-{{ $user->id }}');
        channel.bind('chat-event', function(data) {
            if (data.message.sender != 'admin')
                appendMessage(data.message.message);
        });

        function appendMessage(message, sender = 'partner') {
            var messages = document.getElementById('chatBody');
            var messageElement = '<div class="message ' + sender + '-message">' + message + '</div>';
            messages.innerHTML += messageElement;
            chatBody.scrollTop = chatBody.scrollHeight;
        }

        $(document).ready(function() {

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

            $('#submitButton').click(function() {
                var message = $('.form-control').val();
                if (message == '') {
                    return false;
                }
                $.ajax({
                    url: '{{ route('admin.chat.send', $user->id) }}',
                    type: 'POST',
                    data: {
                        message: message
                    },
                    dataType: 'json',
                    success: function(response) {
                        $('.form-control').val('');
                        appendMessage(message, 'user')
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
@endsection