<% include _header %> 

<h1>Clinic Admin Chat Dashboard</h1>

<div class="row">

    <div class="col-sm-6">

        <h2>Chat with patients and doctors</h2>

        <br /><br />

        <h3>Chat History with <b>Patients</b></h3>
        <p><div class="overflow-auto chat-history-div card rounded"><span id="msgHistoryPatients"></span></div></p>

        <br /><br />

        <h3>Chat History with <b>Doctors</b></h3>
        <p><div class="overflow-auto chat-history-div card rounded"><span id="msgHistoryDoctors"></span></div></p>

        <br /><br />

        <h3 style="color:tomato;">Live 1-to-1 Chat Feed</h3>
        <p><div class="overflow-auto chat-history-div card rounded"><span id="serverMsg"></span></div></p>

        <br />

        <h3>Send new message</h3>
        <ul id="messages">
            <form id="form" action="">
                <input id="toUsername" name="toUsername" type="text"
                    placeholder="username" />
                <input id="input" autocomplete="off" /><input type="submit" value="send" />    
            </form>
        </ul>

    </div>

    <div class="col-sm-3">
        <div class="chat-senders-div card rounded">
            <h3>Live Senders List</h3>
            <h3><b>Patients</b></h3>
            <p><span id="patientSendersList"></span></p>

            <h3><b>Doctors</b></h3>
            <p><span id="doctorSendersList"></span></p>
        </div>

    </div>

    <div class="col-sm-3">
        <nav class="nav flex-column">
            <a class="nav-link menu" href="/clinic-admin-profile">Clinic Profile</a>
            <a class="nav-link menu" href="#">Manage Queue</a>
            <a class="nav-link menu" href="#">Link</a>
            <a class="nav-link menu" href="#">Link</a>
            <a class="nav-link menu disabled" href="#">Disabled</a>
        </nav>
    </div>
    

    

</div>


<script src="/socket.io/socket.io.js"></script>
<% include chatHelpers %> 
<script>
    const socket                =   io();
    var form                    =   document.getElementById('form');  
    var input                   =   document.getElementById('input');
    var toUsername              =   document.getElementById('toUsername');
    var serverMsgSpan           =   document.getElementById('serverMsg');
    var msgHistoryDoctorsSpan   =   document.getElementById('msgHistoryDoctors');
    var msgHistoryPatientsSpan  =   document.getElementById('msgHistoryPatients');
    var patientSendersListSpan  =   document.getElementById('patientSendersList');
    var doctorSendersListSpan   =   document.getElementById('doctorSendersList');

    socket.on('connect', () => {
        //socketIdSpan.innerText = socket.id;

        socket.emit('whoami', (username) => {
            console.log('client: username is ' + username);

            form.addEventListener('submit', function(e) {    
                e.preventDefault();    
                if (input.value) {      
                    socket.emit('from message', 
                                    {
                                        socketId: socket.id,
                                        fromUsername: username,
                                        content: input.value,
                                        toUsername: toUsername.value
                                    }
                                );   
                    //reset input field   
                    input.value = '';    
                }  
            });            
        });
    });

    socket.on('to message', (data) => {
        socket.emit('whoami', (username) => {
            if (username === data.toUsername || username === data.fromUsername) {
                displayMessageString(null, false, data, serverMsgSpan);

            }
        });
    });

    socket.on("load doctor messages", (data) => {
        data.forEach(message => {
            displayMessageString(message.createdAt, true, message, msgHistoryDoctorsSpan);
        });
    });

    socket.on("load patient messages", (data) => {
        data.forEach(message => {
            displayMessageString(message.createdAt, true, message, msgHistoryPatientsSpan);
        });
    });

    socket.on("patients to me", (data) => {
        patientSendersListSpan.innerHTML = ``;
        data.forEach(senderUsername => {
            patientSendersListSpan.innerHTML += `<a href="/chat/${senderUsername}">${senderUsername}</a> <br />`;
        });
    });

    socket.on("doctors to me", (data) => {
        doctorSendersListSpan.innerHTML = ``;
        data.forEach(senderUsername => {
            doctorSendersListSpan.innerHTML += `<a href="/chat/${senderUsername}">${senderUsername}</a> <br />`;
        });
    });

</script>

<% include _footer %> 