{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
    <div class="content">
        <div class="row text-center align-items-center">
            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">
                <div class="dash-widget" style="border-radius: 15px;">
                    <span class="dash-widget-bg1"><i class="fa fa-stethoscope" aria-hidden="true"></i></span>
                    <div class="dash-widget-info text-right">
                        <h3 style="margin-right: 60px">{{ number_of_patients }}</h3>
                        <span class="widget-title1">{% trans "کاربران مربوطه " %}<i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="full-width-container">
            <div class="row">
                <div class="col-md-6">
                    <h3 class="titles text-center">{% trans "ارسال پیام به همراه نوتیفیکیشن" %}</h3>
                    <hr>
                    <div class="card-box mb-0" style="border-radius: 20px;">
                        <div class="card-box">
                            <div id="send_to_all_div" class="form-group row text-center align-items-center">
                                <div class="col-md-12">
                                    <textarea rows="3" id="send_to_all_text" placeholder="{% trans "پیام جدید ..." %}"
                                              class="form-control text-right"
                                              style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;"></textarea>
                                </div>
                            </div>
                            <div class="text-center">
<!--                                <input type="file" name="file" id="send_attachment" hidden>-->
<!--                                <label for="send_attachment"><i class="fa fa-paperclip fa-2x" style="color: #101ea0" aria-hidden="true"></i></label>-->
                                <!-- Add a spinner inside the button -->
                            <button id="send_to_all_btn" class="btn btn-primary btn-chat" style="border-radius: 8px;">
                                <span id="send_to_all_text">ارسال</span>
                                <span id="send_loader" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                            </button>

                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="card-box mb-0" style="border-radius: 20px;">
                        <div class="card-box">
                            <div class="table-responsive">
                                <table class="table table-border table-striped custom-table datatable mb-0 text-center"
                                       id="message_table">
                                    <thead>
                                    <tr style="background-color: #009A6E40">
                                        <th>{% trans "نام" %}</th>
                                        <th>{% trans "آی دی گروه" %}</th>
                                        <th>{% trans "عمومی بودن" %}</th>
                                        <th>{% trans "لینک گروه" %}</th>
                                        <th>{% trans "افراد داخل گروه" %}</th>
                                        <th>{% trans "شرکت" %}</th>
                                        <th>{% trans "مدت زمان پیوستن" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for g in groups %}
                                    <tr>
                                        <td style="background-color: rgba(0,154,110,0.8)">
                                            <label class="checkbox-container" style="font-size: 16px">{{ g }}
                                                <input type="checkbox" name="checked_items" value="group-{{ g.group_id }}" id="group_message_{{ forloop.counter }}" class="select-item">
<!--                                                <span class="checkmark" style="font-size: 12px"><br>{{ g.group_id }}</span>-->
                                            </label>
                                        </td>
                                        <td>{{ g.group_id }}</td>
                                        {% if g.is_public %}
                                            <td>{% trans "عمومی" %}</td>
                                        {% else %}
                                            <td>{% trans "شخصی" %}</td>
                                        {% endif %}
                                        <td>{{ g.link }}</td>
                                        <td>{{ g.members_number }}</td>
                                        {% if g.is_company %}
                                            <td>{% trans "است" %}</td>
                                        {% else %}
                                            <td>{% trans "نیست" %}</td>
                                        {% endif %}
                                        <td></td>
                                    </tr>
                                    {% endfor %}
                                    {% for user, d in out_groups %}
                                    <tr>
                                        <td style="background-color: rgba(209,255,205,0.8)">
                                            <label class="checkbox-container" style="font-size: 14px">{{ user.profile.first_name }} {{ user.profile.last_name }}
                                                <input type="checkbox" name="checked_items" value="user-{{ user.django_user.id }}" id="user_{{ forloop.counter }}" class="select-item" >
                                            </label>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ d }}</td>
                                    </tr>
                                    {% endfor %}
                                    {% for user, g, d in in_groups %}
                                    <tr>
                                        <td style="background-color: rgba(255,153,0,0.69)">
                                            <label class="checkbox-container" style="font-size: 14px">{{ user.profile.first_name }} {{ user.profile.last_name }}
                                                <input type="checkbox" name="checked_items" value="user-{{ user.django_user.id }}" id="user_{{ forloop.counter }}" class="select-item" >
                                            </label>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ g }}</td>
                                        <td>{{ d }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <h3 class="titles text-center">{% trans "ارسال نوتیفیکیشن" %}</h3>
                    <hr>
                    <div class="card-box mb-0" style="border-radius: 20px;">
                        <div class="card-box">
                            <div id="send_to_all_div_notif" class="form-group row text-center align-items-center">
                                <div class="col-md-12">
                                    <textarea rows="3" id="send_to_all_text_notif" placeholder="{% trans "نوتیفیکیشن جدید ..." %}"
                                              class="form-control text-right"
                                              style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;"></textarea>
                                </div>
                            </div>
                            <div class="text-center">
                                <!-- Add a spinner inside the notification send button -->
                                <button id="send_to_all_btn_notif" class="btn btn-primary btn-chat" style="border-radius: 8px;">
                                    <span id="send_to_all_text_notif">{% trans "ارسال" %}</span>
                                    <span id="send_loader_notif" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="card-box mb-0" style="border-radius: 20px;">
                        <div class="card-box">
                            <div class="table-responsive">
                                <table class="table table-border table-striped custom-table datatable mb-0 text-center"
                                       id="notif_table">
                                    <thead>
                                    <tr style="background-color: #009A6E40">
                                        <th>{% trans "نام" %}</th>
                                        <th>{% trans "آی دی گروه" %}</th>
                                        <th>{% trans "عمومی بودن" %}</th>
                                        <th>{% trans "لینک گروه" %}</th>
                                        <th>{% trans "افراد داخل گروه" %}</th>
                                        <th>{% trans "شرکت" %}</th>
                                        <th>{% trans "مدت زمان پیوستن" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for g in groups %}
                                    <tr>
                                        <td style="background-color: rgba(0,154,110,0.8)">
                                            <label class="checkbox-container" style="font-size: 16px">{{ g }}
                                                <input type="checkbox" name="checked_items_notif" value="group-{{ g.group_id }}" id="group_notif_{{ forloop.counter }}" class="select-item-notif">
                                            </label>
                                        </td>
                                        <td>{{ g.group_id }}</td>
                                        {% if g.is_public %}
                                            <td>{% trans "عمومی" %}</td>
                                        {% else %}
                                            <td>{% trans "شخصی" %}</td>
                                        {% endif %}
                                        <td>{{ g.link }}</td>
                                        <td>{{ g.members_number }}</td>
                                        {% if g.is_company %}
                                            <td>{% trans "است" %}</td>
                                        {% else %}
                                            <td>{% trans "نیست" %}</td>
                                        {% endif %}
                                        <td></td>
                                    </tr>
                                    {% endfor %}
                                    {% for user, d in out_groups_2 %}
                                    <tr>
                                        <td style="background-color: rgba(209,255,205,0.8)">
                                            <label class="checkbox-container" style="font-size: 14px">{{ user.profile.first_name }} {{ user.profile.last_name }}
                                                <input type="checkbox" name="checked_items_notif" value="user-{{ user.django_user.id }}" id="user_notif_{{ forloop.counter }}" class="select-item-notif" >
                                            </label>
                                        </td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td>{{ d }}</td>
                                    </tr>
                                    {% endfor %}
                                    {% for user, g, d in in_groups_2 %}
                                        <tr>
                                            <td style="background-color: rgba(255,153,0,0.69)">
                                                <label class="checkbox-container" style="font-size: 14px">{{ user.profile.first_name }} {{ user.profile.last_name }}
                                                    <input type="checkbox" name="checked_items_notif" value="user-{{ user.django_user.id }}" id="user_notif_{{ forloop.counter }}" class="select-item-notif" >
                                                </label>
                                            </td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>{{ g }}</td>
                                            <td>{{ d }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<style>

        #send_loader {
            margin-left: 10px;
        }

      .titles{
        text-align: right;
        font-size: 24px;
        margin-bottom: 10px;
        color: #009A6E;
      }

      .btn-chat {
            background-color: #009A6E; /* Blue color, you can customize */
            border-color: #009A6E;
            color: #fff; /* Text color */
            padding: 10px 20px; /* Adjust padding for better spacing */
            border-radius: 10px; /* Rounded corners */
            text-decoration: none; /* Remove underline from link */
            transition: background-color 0.3s ease; /* Smooth transition on hover */
            display: inline-flex; /* Align icon and text horizontally */
            align-items: center; /* Center alignment for icon and text */
        }
        .btn-chat:hover {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }

        .btn-chat:focus {
            background-color: #009A6Eda; /* Darker shade of blue */
            color: #fff; /* Text color on hover */
        }

        body{
            background-color: #e3e4e7;
          }

        .text-center {
            text-align: center;
        }
        .align-items-center {
            display: flex;
            align-items: center;
            justify-content: center;
        }
</style>
{% endblock %}

{% block script %}
    <script>
    window.CSRF_TOKEN = "{{ csrf_token }}";
    </script>
    <script src="{% static 'panel/assistant' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/assistant' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/assistant' %}/js/bootstrap-datetimepicker.min.js"></script>
    <!-- Add these in the <head> section or before the closing </body> tag -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>

    <script src="{% static 'panel/assistant/js/app.js' %}"></script>
    <script src="{% static 'panel/assistant/js/dashboard.js' %}"></script>
    <script>
        $(document).ready(function () {
            var table = $('#message_table').DataTable({
                paging: true,
                searching: true,
                info: true,
                lengthChange: true,
                pageLength: 10,
                language: {
                    search: "جستجو:",
                    paginate: {
                        next: "بعدی",
                        previous: "قبلی",
                    },
                    info: "نمایش _START_ تا _END_ از _TOTAL_ ورودی",
                    lengthMenu: "نمایش _MENU_ ورودی در هر صفحه",
                    emptyTable: "هیچ داده‌ای موجود نیست",
                },
                columnDefs: [
                    { targets: '_all', searchable: true }, // Ensure all columns are searchable
                ],
                // This ensures the table is properly initialized after it is fully loaded
                drawCallback: function(settings) {
                    // When table is redrawn, ensure search works properly
                    table.columns.adjust();
                }
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $('#notif_table').DataTable({
                paging: true,
                searching: true,
                info: true,
                lengthChange: true,
                pageLength: 10,
                language: {
                    search: "جستجو:",
                    paginate: {
                        next: "بعدی",
                        previous: "قبلی",
                    },
                    info: "نمایش _START_ تا _END_ از _TOTAL_ ورودی",
                    lengthMenu: "نمایش _MENU_ ورودی در هر صفحه",
                    emptyTable: "هیچ داده‌ای موجود نیست",
                },
                columnDefs: [
                    { targets: '_all', searchable: true }, // Ensure all columns are searchable
                ],
            });
        });

    </script>

    <script type="text/javascript">

$(document).ready(function(){


    // sending the file with the ajax
    $('input[Id="send_attachment"]').change(function(){
		let form_data = new FormData();
		let file = $('#send_attachment')[0].files[0];
		form_data.append('file', file);
		form_data.append('csrfmiddlewaretoken', window.CSRF_TOKEN)

		$.ajax({
            url: "/panel/assistant/send/file/to/" + patient_id + "/",
            type: 'post',
            data: form_data,
            contentType: false,
            processData: false,
            success: function (data) {
                //upload successful
				console.log("upload successful!");
				//console.log(data);
				if (first_load === true){
				    let chat_line = '<div class="chat-line">\n' +
                                    '    <span class="chat-date">' + new Date().toDateString() + '</span>\n' +
                                    '</div>';
				    $("#chats").append(chat_line);
				    first_load = false;
                }

				let url_uploaded = data["data"][0]["url_uploaded"];
				let content_type = data["data"][0]["content_type"];
				let name = data["data"][0]["name"];
				let time = data["data"][0]["time"];
				let size = data["data"][0]["size"];
				let message = "";
				if (content_type=='jpeg' || content_type=='jpg' || content_type=='png' ){
				    message = '<div class="chat chat-right">\n' +
                                '    <div class="chat-body">\n' +
                                '        <div class="chat-bubble">\n' +
                                '            <div class="chat-content img-content">\n' +
                                '                <div class="chat-img-group clearfix">\n' +
                                '                    <p></p>\n' +
                                '                    <a class="chat-img-attach" target="_blank" href="' + url_uploaded + '">\n' +
                                '                        <img width="182" height="137" alt="" src="' + url_uploaded + '">\n' +
                                '                        <div class="chat-placeholder">\n' +
                                '                            <div class="chat-img-name">' + name + '</div>\n' +
                                '                            <div class="chat-file-desc">' + size + '</div>\n' +
                                '                        </div>\n' +
                                '                    </a>\n' +
                                '                </div>\n' +
                                '                <span class="chat-time">' + time + '</span>\n' +
                                '            </div>\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '</div>';
                }
                else {
				    message = '<div class="chat chat-right">\n' +
                            '     <div class="chat-body">\n' +
                            '         <div class="chat-bubble">\n' +
                            '             <div class="chat-content">\n' +
                            '                 <p></p>\n' +
                            '                 <ul class="attach-list">\n' +
                            '                     <li><i class="fa fa-file"></i> <a href="' + url_uploaded + '" target="_blank">' + name + '</a></li>\n' +
                            '                     <li><span>' + size + '</span></li>\n' +
                            '                 </ul>\n' +
                            '                 <span class="chat-time">' + time + '</span>\n' +
                            '             </div>\n' +
                            '         </div>\n' +
                            '     </div>\n' +
                            ' </div>';
                }


				$("#chats").append(message);
                $("#chat-list").animate({ scrollTop: $("#chat-list")[0].scrollHeight}, 2000);
                $('#send_attachment').val(null);
            },
            beforeSend: function () {

            },
            error: function (){
                console.log("error on file upload!");
                $('#send_attachment').val(null);
            }
        });
	});


    // audio sending ...
    let constraintObj = {
        audio: {
            sampleSize: 8,
            echoCancellation: true
        }
        /* video: {
            facingMode: "user",
            width: { min: 640, ideal: 1280, max: 1920 },
            height: { min: 480, ideal: 720, max: 1080 }
        } */
    };
    let start_audio = new Audio("{% static 'panel/doctor/sounds/start.mp3' %}");
    let end_audio = new Audio("{% static 'panel/doctor/sounds/end.mp3' %}");


    //handle older browsers that might implement getUserMedia in some way
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
        navigator.mediaDevices.getUserMedia = function(constraintObj) {
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, constraintObj, resolve, reject);
            });
        }
    }else{
        navigator.mediaDevices.enumerateDevices()
        .then(devices => {
            devices.forEach(device=>{
                console.log(device.kind.toUpperCase(), device.label);
                //, device.deviceId
            })
        })
        .catch(err=>{
            console.log(err.name, err.message);
        })
    }

    navigator.mediaDevices.getUserMedia(constraintObj)
    .then(function(mediaStreamObj) {
        //add listeners for saving video/audio
        let start = document.getElementById('recordVoice');
        let recording = false;
        let mediaRecorder = new MediaRecorder(mediaStreamObj);
        let chunks = [];


        start.addEventListener('click', (ev)=>{
            if (recording == false){
                recording = true;
                $("#voice-recording-icon").css("color", "#05A5E8FF");
                start_audio.play();
                mediaRecorder.start();
                console.log(mediaRecorder.state);
            }else {
                recording = false;
                $("#voice-recording-icon").css("color", "#242424");
                mediaRecorder.stop();
                end_audio.play();
                console.log(mediaRecorder.state);
            }


        })

        mediaRecorder.ondataavailable = function(ev) {
            chunks.push(ev.data);
        }
        mediaRecorder.onstop = (ev)=>{
            let blob = new Blob(chunks, { 'type' : 'audio/mp3' });

            let form_data = new FormData();
            form_data.append('file', blob);
            form_data.append('csrfmiddlewaretoken', window.CSRF_TOKEN)

            $.ajax({
                url: "/panel/assistant/send/file/to/" + patient_id + "/",
                type: 'post',
                data: form_data,
                contentType: false,
                processData: false,
                success: function (data) {
                    //upload successful
                    console.log("upload successful!");
                    //console.log(data);
                    if (first_load === true){
                        let chat_line = '<div class="chat-line">\n' +
                                        '    <span class="chat-date">' + new Date().toDateString() + '</span>\n' +
                                        '</div>';
                        $("#chats").append(chat_line);
                        first_load = false;
                    }

                    let url_uploaded = data["data"][0]["url_uploaded"];
                    let content_type = data["data"][0]["content_type"];
                    console.log("ct");
                    console.log(content_type);
                    let name = data["data"][0]["name"];
                    let time = data["data"][0]["time"];
                    let size = data["data"][0]["size"];
                    let message = "";
                    if (content_type=='jpeg' || content_type=='jpg' || content_type=='png' ){
                        message = '<div class="chat chat-right">\n' +
                                    '    <div class="chat-body">\n' +
                                    '        <div class="chat-bubble">\n' +
                                    '            <div class="chat-content img-content">\n' +
                                    '                <div class="chat-img-group clearfix">\n' +
                                    '                    <p></p>\n' +
                                    '                    <a class="chat-img-attach" target="_blank" href="' + url_uploaded + '">\n' +
                                    '                        <img width="182" height="137" alt="" src="' + url_uploaded + '">\n' +
                                    '                        <div class="chat-placeholder">\n' +
                                    '                            <div class="chat-img-name">' + name + '</div>\n' +
                                    '                            <div class="chat-file-desc">' + size + '</div>\n' +
                                    '                        </div>\n' +
                                    '                    </a>\n' +
                                    '                </div>\n' +
                                    '                <span class="chat-time">' + time + '</span>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </div>\n' +
                                    '</div>';
                    }
                    else if(content_type == "mp3"){
                        message = '<div class="chat chat-right">\n' +
                                '     <div class="chat-body">\n' +
                                '         <div class="chat-bubble">\n' +
                                '             <div class="chat-content">\n' +
                                '                 <audio controls>\n' +
                                '                      <source src="' + url_uploaded + '" type="audio/mp3">\n' +
                                '                 </audio>\n' +
                                '                 <span class="chat-time">' + time + '</span>\n' +
                                '             </div>\n' +
                                '         </div>\n' +
                                '     </div>\n' +
                                ' </div>';
                    }
                    else {
                        message = '<div class="chat chat-right">\n' +
                                '     <div class="chat-body">\n' +
                                '         <div class="chat-bubble">\n' +
                                '             <div class="chat-content">\n' +
                                '                 <p></p>\n' +
                                '                 <ul class="attach-list">\n' +
                                '                     <li><i class="fa fa-file"></i> <a href="' + url_uploaded + '" target="_blank">' + name + '</a></li>\n' +
                                '                     <li><span>' + size + '</span></li>\n' +
                                '                 </ul>\n' +
                                '                 <span class="chat-time">' + time + '</span>\n' +
                                '             </div>\n' +
                                '         </div>\n' +
                                '     </div>\n' +
                                ' </div>';
                    }


                    $("#chats").append(message);
                    $("#chat-list").animate({ scrollTop: $("#chat-list")[0].scrollHeight}, 2000);

                },
                beforeSend: function () {

                },
                error: function (){
                    console.log("error on file upload!");
                }
            });


            // saveBlob(blob, "sound.mp3");
            chunks = [];

        }
    })
    .catch(function(err) {
        console.log(err.name, err.message);
    });

    /*********************************
    getUserMedia returns a Promise
    resolve - returns a MediaStream Object
    reject returns one of the following errors
    AbortError - generic unknown cause
    NotAllowedError (SecurityError) - user rejected permissions
    NotFoundError - missing media track
    NotReadableError - user permissions given but hardware/OS error
    OverconstrainedError - constraint video settings preventing
    TypeError - audio: false, video: false
    *********************************/

});

</script>
{% endblock %}