{% extends 'doctor/base.html' %}
{% load static %}

{% 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-user-o" 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">کاربران مربوطه <i class="fa fa-check" aria-hidden="true"></i></span>
                    </div>
                </div>
            </div>
{#            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">#}
{#                <div class="dash-widget">#}
{#                    <span class="dash-widget-bg2"><i class="fa fa-user-o"></i></span>#}
{#                    <div class="dash-widget-info text-right">#}
{#                        <h3>1072</h3>#}
{#                        <span class="widget-title2">Patients <i class="fa fa-check" aria-hidden="true"></i></span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">#}
{#                <div class="dash-widget">#}
{#                    <span class="dash-widget-bg3"><i class="fa fa-user-md" aria-hidden="true"></i></span>#}
{#                    <div class="dash-widget-info text-right">#}
{#                        <h3>72</h3>#}
{#                        <span class="widget-title3">Attend <i class="fa fa-check" aria-hidden="true"></i></span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-3">#}
{#                <div class="dash-widget">#}
{#                    <span class="dash-widget-bg4"><i class="fa fa-heartbeat" aria-hidden="true"></i></span>#}
{#                    <div class="dash-widget-info text-right">#}
{#                        <h3>618</h3>#}
{#                        <span class="widget-title4">Pending <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">ارسال پیام به همراه نوتیفیکیشن برای همه</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="پیام جدید ..." 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>-->
                                    <button id="send_to_all_btn" class="btn btn-primary btn-chat" style="border-radius: 8px;">
                                        <span>ارسال</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="col-md-6">
                    <h3 class="titles text-center">ارسال نوتیفیکیشن برای همه</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="نوتیفیکیشن جدید ..." class="form-control text-right" style="direction: rtl; font-size: 16px; background-color: #cfd8e6; border-radius: 10px;" maxlength="178"></textarea>
                                </div>
                            </div>
                            <div class="text-center">
                                <button id="send_to_all_btn_notif" class="btn btn-primary btn-chat" style="border-radius: 8px;">
                                    <span>ارسال</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="card" style="border-radius: 20px">
                        <div class="card-header text-right">
                            <h4 class="card-title d-inline-block titles">کاربران جدید</h4> <a href="patients/" class="btn btn-primary float-left" style="border-radius: 15px">مشاهده همه</a>
                        </div>
                        <div class="card-block scrollable">
                            <div class="table-responsive">
                                <table class="table mb-0 new-patient-table">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>نام</th>
                                            <th>سن</th>
                                            <th>جنسیت</th>
                                            <th>تحت نظر (پزشک / دستیار پزشک)</th>
<!--?                                            <th>بیماری ها</th>-->
                                            <th class="text-right" style="padding-right: 40px">پرونده</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    {% for patient, new in patients_list %}
                                    {% if new %}
                                        <tr>
                                            <td>
                                                <img width="28" height="28" src="{% static 'panel/doctor' %}/img/user.jpg" class="rounded-circle m-r-5" alt="">
                                                {% if number != 0 %}
                                                    <span class="badge badge-pill bg-success float-left">{{ number }}</span>
                                                {% endif %}

                                            </td>
                                            <td>
<!--?                                                <img width="28" height="28" class="rounded-circle" src="{{ patient.image.url }}" alt="">-->
                                                {{ patient.profile.first_name }} {{ patient.profile.last_name }}
                                            </td>
                                            <td>{{ patient.profile.age }}</td>
                                            {% if patient.profile.gender %}
                                                <td>زن</td>
                                            {% elif patient.profile.gender == False %}
                                                <td>مرد</td>
                                            {% endif %}
                                            <td>{{ patient.profile.therapist.first_name }} {{ patient.profile.therapist.last_name }}</td>
<!--?                                            <td>{{ patient.profile.diseases }}</td>-->
                                            <td>
                                                <a href="{% url 'panel-doctor' %}show/patient/{{ patient.id }}/">
                                                    <button class="btn btn-primary btn-primary-two float-right">مشاهده</button>
                                                </a>
                                            </td>
                                        </tr>
                                    {% endif %}
                                    {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 col-xl-6">
                    <div class="card" style="border-radius: 15px; padding: 15px;">
                        <div class="hospital-barchart titles text-right">
                            <h4 class="card-title d-inline-block" style="color: #009A6E">نمودار سلامتی کاربران</h4>
                        </div>
                        <div class="bar-chart">
                            <canvas id="diseaseChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div>
{#            <div class="col-12 col-md-6 col-lg-6 col-xl-6">#}
{#                <div class="card">#}
{#                    <div class="card-body">#}
{#                        <div class="chart-title">#}
{#                            <h4>Patients In</h4>#}
{#                            <div class="float-right">#}
{#                                <ul class="chat-user-total">#}
{#                                    <li><i class="fa fa-circle current-users" aria-hidden="true"></i>ICU</li>#}
{#                                    <li><i class="fa fa-circle old-users" aria-hidden="true"></i> OPD</li>#}
{#                                </ul>#}
{#                            </div>#}
{#                        </div>#}
{#                        <canvas id="bargraph"></canvas>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
        </div>
{#        <div class="row">#}
{#            <div class="col-12 col-md-6 col-lg-8 col-xl-8">#}
{#                <div class="card">#}
{#                    <div class="card-header">#}
{#                        <h4 class="card-title d-inline-block">Upcoming Appointments</h4> <a href="#" class="btn btn-primary float-right">View all</a>#}
{#                    </div>#}
{#                    <div class="card-body p-0">#}
{#                        <div class="table-responsive">#}
{#                            <table class="table mb-0">#}
{#                                <thead class="d-none">#}
{#                                    <tr>#}
{#                                        <th>Patient Name</th>#}
{#                                        <th>Doctor Name</th>#}
{#                                        <th>Timing</th>#}
{#                                        <th class="text-right">Status</th>#}
{#                                    </tr>#}
{#                                </thead>#}
{#                                <tbody>#}
{#                                    <tr>#}
{#                                        <td style="min-width: 200px;">#}
{#                                            <a class="avatar" href="#">B</a>#}
{#                                            <h2><a href="#">Bernardo Galaviz <span>New York, USA</span></a></h2>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Appointment With</h5>#}
{#                                            <p>Dr. Cristina Groves</p>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Timing</h5>#}
{#                                            <p>7.00 PM</p>#}
{#                                        </td>#}
{#                                        <td class="text-right">#}
{#                                            <a href="#" class="btn btn-outline-primary take-btn">Take up</a>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td style="min-width: 200px;">#}
{#                                            <a class="avatar" href="#">B</a>#}
{#                                            <h2><a href="#">Bernardo Galaviz <span>New York, USA</span></a></h2>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Appointment With</h5>#}
{#                                            <p>Dr. Cristina Groves</p>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Timing</h5>#}
{#                                            <p>7.00 PM</p>#}
{#                                        </td>#}
{#                                        <td class="text-right">#}
{#                                            <a href="#" class="btn btn-outline-primary take-btn">Take up</a>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td style="min-width: 200px;">#}
{#                                            <a class="avatar" href="#">B</a>#}
{#                                            <h2><a href="#">Bernardo Galaviz <span>New York, USA</span></a></h2>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Appointment With</h5>#}
{#                                            <p>Dr. Cristina Groves</p>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Timing</h5>#}
{#                                            <p>7.00 PM</p>#}
{#                                        </td>#}
{#                                        <td class="text-right">#}
{#                                            <a href="#" class="btn btn-outline-primary take-btn">Take up</a>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td style="min-width: 200px;">#}
{#                                            <a class="avatar" href="#">B</a>#}
{#                                            <h2><a href="#">Bernardo Galaviz <span>New York, USA</span></a></h2>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Appointment With</h5>#}
{#                                            <p>Dr. Cristina Groves</p>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Timing</h5>#}
{#                                            <p>7.00 PM</p>#}
{#                                        </td>#}
{#                                        <td class="text-right">#}
{#                                            <a href="#" class="btn btn-outline-primary take-btn">Take up</a>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td style="min-width: 200px;">#}
{#                                            <a class="avatar" href="#">B</a>#}
{#                                            <h2><a href="#">Bernardo Galaviz <span>New York, USA</span></a></h2>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Appointment With</h5>#}
{#                                            <p>Dr. Cristina Groves</p>#}
{#                                        </td>#}
{#                                        <td>#}
{#                                            <h5 class="time-title p-0">Timing</h5>#}
{#                                            <p>7.00 PM</p>#}
{#                                        </td>#}
{#                                        <td class="text-right">#}
{#                                            <a href="#" class="btn btn-outline-primary take-btn">Take up</a>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                </tbody>#}
{#                            </table>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-12 col-md-6 col-lg-4 col-xl-4">#}
{#                <div class="card member-panel">#}
{#                    <div class="card-header bg-white">#}
{#                        <h4 class="card-title mb-0">Doctors</h4>#}
{#                    </div>#}
{#                    <div class="card-body">#}
{#                        <ul class="contact-list">#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="John Doe"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status online"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">John Doe</span>#}
{#                                        <span class="contact-date">MBBS, MD</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="Richard Miles"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status offline"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">Richard Miles</span>#}
{#                                        <span class="contact-date">MD</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="John Doe"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status away"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">John Doe</span>#}
{#                                        <span class="contact-date">BMBS</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="Richard Miles"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status online"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">Richard Miles</span>#}
{#                                        <span class="contact-date">MS, MD</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="John Doe"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status offline"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">John Doe</span>#}
{#                                        <span class="contact-date">MBBS</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="contact-cont">#}
{#                                    <div class="float-left user-img m-r-10">#}
{#                                        <a href="#" title="Richard Miles"><img src="{% static 'panel/doctor' %}/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status away"></span></a>#}
{#                                    </div>#}
{#                                    <div class="contact-info">#}
{#                                        <span class="contact-name text-ellipsis">Richard Miles</span>#}
{#                                        <span class="contact-date">MBBS, MD</span>#}
{#                                    </div>#}
{#                                </div>#}
{#                            </li>#}
{#                        </ul>#}
{#                    </div>#}
{#                    <div class="card-footer text-center bg-white">#}
{#                        <a href="#" class="text-muted">View all Doctors</a>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#        <div class="row">#}
{#            <div class="col-12 col-md-6 col-lg-8 col-xl-8">#}
{#                <div class="card">#}
{#                    <div class="card-header">#}
{#                        <h4 class="card-title d-inline-block">New Patients </h4> <a href="#" class="btn btn-primary float-right">View all</a>#}
{#                    </div>#}
{#                    <div class="card-block">#}
{#                        <div class="table-responsive">#}
{#                            <table class="table mb-0 new-patient-table">#}
{#                                <tbody>#}
{#                                    <tr>#}
{#                                        <td>#}
{#                                            <img width="28" height="28" class="rounded-circle" src="{% static 'panel/doctor' %}/img/user.jpg" alt="">#}
{#                                            <h2>John Doe</h2>#}
{#                                        </td>#}
{#                                        <td>Johndoe21@gmail.com</td>#}
{#                                        <td>+1-202-555-0125</td>#}
{#                                        <td><button class="btn btn-primary btn-primary-one float-right">Fever</button></td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td>#}
{#                                            <img width="28" height="28" class="rounded-circle" src="{% static 'panel/doctor' %}/img/user.jpg" alt="">#}
{#                                            <h2>Richard</h2>#}
{#                                        </td>#}
{#                                        <td>Richard123@yahoo.com</td>#}
{#                                        <td>202-555-0127</td>#}
{#                                        <td><button class="btn btn-primary btn-primary-two float-right">Cancer</button></td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td>#}
{#                                            <img width="28" height="28" class="rounded-circle" src="{% static 'panel/doctor' %}/img/user.jpg" alt="">#}
{#                                            <h2>Villiam</h2>#}
{#                                        </td>#}
{#                                        <td>Richard123@yahoo.com</td>#}
{#                                        <td>+1-202-555-0106</td>#}
{#                                        <td><button class="btn btn-primary btn-primary-three float-right">Eye</button></td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td>#}
{#                                            <img width="28" height="28" class="rounded-circle" src="{% static 'panel/doctor' %}/img/user.jpg" alt="">#}
{#                                            <h2>Martin</h2>#}
{#                                        </td>#}
{#                                        <td>Richard123@yahoo.com</td>#}
{#                                        <td>776-2323 89562015</td>#}
{#                                        <td><button class="btn btn-primary btn-primary-four float-right">Fever</button></td>#}
{#                                    </tr>#}
{#                                </tbody>#}
{#                            </table>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-12 col-md-6 col-lg-4 col-xl-4">#}
{#                <div class="hospital-barchart">#}
{#                    <h4 class="card-title d-inline-block">Hospital Management</h4>#}
{#                </div>#}
{#                <div class="bar-chart">#}
{#                    <div class="legend">#}
{#                        <div class="item">#}
{#                            <h4>Level1</h4>#}
{#                        </div>#}
{##}
{#                        <div class="item">#}
{#                            <h4>Level2</h4>#}
{#                        </div>#}
{#                        <div class="item text-right">#}
{#                            <h4>Level3</h4>#}
{#                        </div>#}
{#                        <div class="item text-right">#}
{#                            <h4>Level4</h4>#}
{#                        </div>#}
{#                    </div>#}
{#                    <div class="chart clearfix">#}
{#                        <div class="item">#}
{#                            <div class="bar">#}
{#                                <span class="percent">16%</span>#}
{#                                <div class="item-progress" data-percent="16">#}
{#                                    <span class="title">OPD Patient</span>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="item">#}
{#                            <div class="bar">#}
{#                                <span class="percent">71%</span>#}
{#                                <div class="item-progress" data-percent="71">#}
{#                                    <span class="title">New Patient</span>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="item">#}
{#                            <div class="bar">#}
{#                                <span class="percent">82%</span>#}
{#                                <div class="item-progress" data-percent="82">#}
{#                                    <span class="title">Laboratory Test</span>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="item">#}
{#                            <div class="bar">#}
{#                                <span class="percent">67%</span>#}
{#                                <div class="item-progress" data-percent="67">#}
{#                                    <span class="title">Treatment</span>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                        <div class="item">#}
{#                            <div class="bar">#}
{#                                <span class="percent">30%</span>#}
{#                                <div class="item-progress" data-percent="30">#}
{#                                    <span class="title">Discharge</span>#}
{#                                </div>#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#             </div>#}
{#        </div>#}
    </div>

<style>
      .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;
        }
        .scrollable {
            height: 410px; /* Set the height according to your needs */
            overflow-y: auto;
            overflow-x: hidden; /* Prevent horizontal scroll if needed */
        }
</style>

{% endblock %}

{% block script %}
    <script>
    window.CSRF_TOKEN = "{{ csrf_token }}";
    </script>
    <script src="{% static 'panel/doctor' %}/js/jquery-3.2.1.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/popper.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/select2.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.dataTables.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/dataTables.bootstrap4.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/moment.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{% static 'panel/doctor' %}/js/jquery.slimscroll.js"></script>
    <script src="{% static 'panel/doctor' %}/js/Chart.bundle.js"></script>
    <script src="{% static 'panel/doctor' %}/js/chart.js"></script>
    <script src="{% static 'panel/doctor/js/app.js' %}"></script>
    <script src="{% static 'panel/doctor/js/dashboard.js' %}"></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/doctor/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/doctor/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>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var diseaseData = {{ disease_percentages|safe }};

            var labels = Object.keys(diseaseData);
            var data = Object.values(diseaseData);

            var diseaseCtx = document.getElementById('diseaseChart').getContext('2d');

            var diseaseChart = new Chart(diseaseCtx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'درصد بیماری ها',
                        data: data,
                        backgroundColor: '#009A6E50', // Bar color
                        borderColor: '#009A6E',        // Bar border color
                        borderWidth: 1,
                        hoverBackgroundColor: '#FF9900',  // Bar hover color
                        hoverBorderColor: '#009A6E50'
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
    </script>

{% endblock %}