{% extends 'base_structure/layout/base_template.html' %}
{% load static %}
{% block stylesheet %}
    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_css.html" %}
    {% include "cdn_through_html/animate_cdn_css.html" %}
    {% include "cdn_through_html/modal_cdn_css.html" %}
    {% include "cdn_through_html/tabs_cdn_css.html" %}
    {% include "cdn_through_html/switches_cdn_css.html" %}
    {% include "cdn_through_html/sweetalert2_cdn_css.html" %}

    <style>
        .food-column {
            background-color: #e0eff9;
            height: 100%;
            border-radius: 5px;
        }
    </style>
{% endblock %}

{% block content %}

<div class="row layout-top-spacing">
    <div class="col-lg-12">
        <div class="row mb-2">
            <div class="col">
                <a href="{% url 'module_auth:users'%}" style="height: fit-content;width: fit-content;display: inline-block;">
                <h3 class="card-title m-2 d-flex align-items-center gap-2" style="width: fit-content;"><span class="fw-bold material-symbols-outlined">
                    arrow_back
                    </span><span>User Details -- {{obj.id}} -- {{obj.first_name}}</span></h3>
                </a>
            </div>
        </div>

        <div class="row">
            <div id="tabsSimple" class="col-xl-12 col-12 layout-spacing">
                <div class="statbox widget box box-shadow">
                    <div class="widget-content widget-content-area p-3">
                        <div class="simple-pill">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="false">User</button>
                                </li>
                                {% comment %} <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="true">Activity</button>
                                </li> {% endcomment %}
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="true">Report</button>
                                </li>
                            </ul>
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade active show" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab" tabindex="0">
                                    <div class="row mt-5">
                                        <div class="col-md-6">
                                            <table class="w-100">
                                                <tbody class="d-flex">
                                                    <tr class="w-25 d-flex flex-column">
                                                        <td><p>Name :</p></td>
                                                        <td><p>Email ID :</p></td>
                                                        <td><p>Gender :</p></td>
                                                        <td><p>DOB :</p></td>
                                                        
                                                    </tr>
                                                    <tr class=" d-flex flex-column">
                                                        <td><p>{{obj.first_name}}</p></td>
                                                        <td><p>{{obj.email}}</p></td>
                                                        <td><p>{{obj.gender}}</p></td>
                                                        <td><p>{{obj.date_of_birth}}</p></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-md-6 mb-10">
                                            <table class="w-100">
                                                <tbody class="d-flex">
                                                    <tr class="w-25 d-flex flex-column">
                                                        
                                                        <td><p>Weigth:</p></td>
                                                        <td><p>Ethnicity:</p></td>
                                                        <td><p>Height:</p></td>
                                                    </tr>
                                                    <tr class=" d-flex flex-column">
                                                        <td><p>{{obj.health_data_principal.weight}} kg</p></td>
                                                        <td><p>{{obj.health_data_principal.ethenicity}}</p></td>
                                                        <td><p>{{obj.health_data_principal.height}} cm</p></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <hr class="bdr-line">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <p>How frequently do you eat in a day? </p>
                                            <span>-->  {{obj.health_data_principal.eat_frequency}}</span>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <p>How do you rate your overall gastrointestinal functions?</p>
                                            <span>-->  {{obj.health_data_principal.gastrointestinal_health}}</span>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <p>How much sleep do you take daily?</p>
                                            <span>-->  {{obj.health_data_principal.sleep_duration}}</span>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <p>How frequently do you engage in physical activities?</p>
                                            <span>-->  {{obj.health_data_principal.exercise_frequency}}</span>
                                        </div>
                                    </div>
                                    <hr class="bdr-line">
                                    <div class="row mb-3">
                        
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <p>User Intolerances?</p>
                                                    <span >{{ obj.intolerance_data.0.name }}</span>
                                                    <p>For how long have you been experiencing this intolerance?</p>
                                                    <span>{{ obj.intolerance_data.0.duration }}</span>
                                                    <a class="view-more-link position-absolute top-0 end-0 m-2" href="{% url 'module_activity:intolerance' principal_id=obj.id %}">View more</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <p>User Symptoms?</p>
                                                    <span>{{ obj.symptoms_data.0.name }}</span>
                                                    <p>For how long have you been experiencing these symptoms?</p>
                                                    <span>{{ obj.symptoms_data.0.duration }}</span>
                                                    <a class="view-more-link position-absolute top-0 end-0 m-2" href="{% url 'module_activity:symptoms' principal_id=obj.id %}">View more</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                        
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <p>User Past Treatment Name?</p>
                                                    <span>{{ obj.pasttreatment_data.0.name }}</span>
                                                    <p>When did you undergo this treatment?</p>
                                                    <span>{{ obj.pasttreatment_data.0.duration }}</span>
                                                    <a class="view-more-link position-absolute top-0 end-0 m-2" href="{% url 'module_activity:past_treatment' principal_id=obj.id %}">View more</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <p>User Chronic conditions/diseases Name?</p>
                                                    <span>{{ obj.chronic_data.0 }}</span>
                                                    <p>For how long have you been experiencing this diseases?</p>
                                                    <span>{{ obj.chronic_data.0 }}</span>
                                                    <a class="view-more-link position-absolute top-0 end-0 m-2" href="{% url 'module_activity:chronic_condition' principal_id=obj.id %}">View more</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <hr class="bdr-line">
                                    <div class="row mb-3">
                        
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5>Recent Meal Record</h5>
                                                        <a href="{% url 'module_activity:meal_view' principal_id=obj.id %}">View More</a>
                                                    </div>
                                                    <table id="meal-table" class="table dt-table-hover" style="width:100%">
                                                        <thead class="text-center">
                                                            <tr><th class="text-start">Sr no</th>
                                                            <th class="text-start">Date</th>
                                                            <th class="text-start">Time</th>
                                                            <th class="text-start">Meal Type</th>
                                                        </tr></thead>
                                                        <tbody class="text-center">
                                                            {% if not recent_meal %}
                                                                <tr>
                                                                    <td class="text-center" colspan="4"><h3>No meal has been added.</h3></td>
                                                                </tr>
                                                            {% else %}
                                                                {% for record in recent_meal %}
                                                                    <tr>
                                                                        <td class="text-start">{{ forloop.counter }}</td>
                                                                        <td class="text-start">{{ record.date }}</td>
                                                                        <td class="text-start">{{ record.time }}</td>
                                                                        <td class="text-start">{{ record.meal_type }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5>Recent Medication Record</h5>
                                                        <a href="{% url 'module_activity:medication_view' principal_id=obj.id %}">View More</a>
                                                    </div>
                                                    <table id="medication-table" class="table dt-table-hover" style="width:100%">
                                                        <thead class="text-center">
                                                            <tr><th class="text-start">Sr no</th>
                                                            <th class="text-start">Date</th>
                                                            <th class="text-start">Time</th>
                                                        </tr></thead>
                                                        <tbody class="text-center">
                                                            {% if not recent_medication %}
                                                                <tr>
                                                                    <td class="text-center" colspan="4"><h3>No medication has been added.</h3></td>
                                                                </tr>
                                                            {% else %}
                                                                {% for record in recent_medication %}
                                                                    <tr>
                                                                        <td class="text-start">{{ forloop.counter }}</td>
                                                                        <td class="text-start">{{ record.date }}</td>
                                                                        <td class="text-start">{{ record.time }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mb-3">
                        
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5>Recent Bowel Record</h5>
                                                        <a href="{% url 'module_activity:bowel_view' principal_id=obj.id %}">View More</a>
                                                    </div>
                                                    <table id="bowel-table" class="table dt-table-hover" style="width:100%">
                                                        <thead class="text-center">
                                                            <tr><th class="text-start">Sr no</th>
                                                            <th class="text-start">Date</th>
                                                            <th class="text-start">Time</th>
                                                            <th class="text-start">Stool Type</th>
                                                        </tr></thead>
                                                        <tbody class="text-center">
                                                            {% if not recent_bowel %}
                                                                <tr>
                                                                    <td class="text-center" colspan="4"><h3>No bowel has been added.</h3></td>
                                                                </tr>
                                                            {% else %}
                                                                {% for record in recent_bowel %}
                                                                    <tr>
                                                                        <td class="text-start">{{ forloop.counter }}</td>
                                                                        <td class="text-start">{{ record.date }}</td>
                                                                        <td class="text-start">{{ record.time }}</td>
                                                                        <td class="text-start">{{ record.stool_type }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5>Recent Symptoms Record</h5>
                                                        <a href="{% url 'module_activity:meal_symptoms_view' principal_id=obj.id %}">View More</a>
                                                    </div>
                                                    <table id="symptoms-table" class="table dt-table-hover" style="width:100%">
                                                        <thead class="text-center">
                                                            <tr><th class="text-start">Sr no</th>
                                                            <th class="text-start">Date</th>
                                                            <th class="text-start">Time</th>
                                                        </tr></thead>
                                                        <tbody class="text-center">
                                                            {% if not recent_meal_symptom %}
                                                                <tr>
                                                                    <td class="text-center" colspan="4"><h3>No symptoms has been added.</h3></td>
                                                                </tr>
                                                            {% else %}
                                                                {% for record in recent_meal_symptom %}
                                                                    <tr>
                                                                        <td class="text-start">{{ forloop.counter }}</td>
                                                                        <td class="text-start">{{ record.date }}</td>
                                                                        <td class="text-start">{{ record.time }}</td>
                                                                    </tr>
                                                                {% endfor %}
                                                            {% endif %}
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% comment %} <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab" tabindex="1">
                                    <div class="row layout-spacing">
                                        <div class="col-lg-12">
                                            <div class="statbox widget box box-shadow">
                                                <div class="widget-content widget-content-area">
                                                    <div id="table_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                                                        
                                                        <div class="table-responsive">
                                                            <table id="table" class="table style-3 dt-table-hover dataTable" role="grid"
                                                                aria-describedby="style-3_info">
                                                                
                                                                <thead>
                                                                    <tr role="row">
                                                                        <th class="sorting_asc text-center" tabindex="0"
                                                                            aria-controls="style-3" aria-sort="ascending"
                                                                            style="width: 50.2656px;">#</th>
                                                                        <th class="sorting text-center" tabindex="1" aria-controls="style-3"
                                                                            colspan="1"
                                                                            style="width: 44.2344px;">Time</th>
                                                                        <th class="sorting text-center" tabindex="2" aria-controls="style-3"
                                                                            colspan="1"
                                                                            style="width: 44.2344px;">Meal</th>
                                                                        <th class="sorting text-center" tabindex="3" aria-controls="style-3"
                                                                            style="width: 79.7969px;">Medication</th>
                                                                        <th class="sorting text-center" tabindex="4" aria-controls="style-3"
                                                                            style="width: 79.7969px;">Bowel Movement</th>
                                                                        <th class="sorting text-center" tabindex="5" aria-controls="style-3"
                                                                            style="width: 79.7969px;">Symptoms</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div> {% endcomment %}
                                <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab" tabindex="2">
                                    <div class="d-flex justify-content-sm-end justify-content-center mb-3">
                                        <div class="dropdown">
                                            <a class="dropdown-toggle btn btn-primary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Filter
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
                                                <a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(7)">Last 7 days</a>
                                                <a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(20)">Last 20 days</a>
                                                <a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(40)">Last 40 days</a>
                                                <a class="dropdown-item" href="javascript:void(0)" onclick="getReportData(60)">Last 60 days</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-content" id="pills-tab3Content">
                                    </div>
                                    
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



{% endblock content %}

{% block javascript %}

    <!-- include required css cdn link through html here -->

    {% include "cdn_through_html/datatable_cdn_js.html" %}
    {% include "cdn_through_html/datatable_button_cdn_js.html" %}
    {% include "cdn_through_html/sweetalert2_cdn_js.html" %}
    
    <script>
    
// Define DataTable instance
var activityMainUrl = "{% url 'module_activity:activity_list' principal_id=obj.id %}?date_range=40";
var mealUrl = "{% url 'module_activity:meal_detail' pk=0 %}"
var medicationUrl = "{% url 'module_activity:medication_detail' pk=0 %}"
var bowelUrl = "{% url 'module_activity:bowel_detail' pk=0 %}"
var symptomUrl = "{% url 'module_activity:meal_symptom_detail' pk=0 %}"
var reportUrl = "{% url 'module_activity:report_data' principal_id=obj.id %}?date_range=7"

// Entry point
$(document).ready(function() {
    tableName = $('#table');
    //dataTableInstance = initializeDataTable(tableName, activityMainUrl);
    getReportData();
});

// Function to initialize DataTable
/* function initializeDataTable(tableName, activityMainUrl) {
    return  tableName.DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: activityMainUrl,
            type: "GET",
        },
        columns: [
            { 
                data: null, 
                className: "text-center",
                render: function(data, type, row, meta) {
                    // Calculate sequence number based on page, page length, and index
                    var sequenceNumber = meta.row + meta.settings._iDisplayStart + 1;
                    return sequenceNumber;
                }
            },
            { data: "time", className: "text-center" },
            { 
                data: "type", 
                className: "text-center",
                render: function(data, type, row){
                    if (data ==="Meal"){
                        return '<a href="' + mealUrl.replace('0', row.id) +'" class="view-more">View More</a>';
                    }else{
                        return "--"
                    }
                } 
            },
            { 
                data: "type", 
                className: "text-center",
                render: function(data, type, row){
                    if (data ==="Medication"){
                        return '<a href="' + medicationUrl.replace('0', row.id) +'" class="view-more">View More</a>';
                    }else{
                        return "--"
                    }
                } 
            },
            { 
                data: "type", 
                className: "text-center",
                render: function(data, type, row){
                    if (data ==="Bowel"){
                        return '<a href="' + bowelUrl.replace('0', row.id) + '" class="view-more">View More</a>';
                    }else{
                        return "--"
                    }
                } 
            },
            { 
                data: "type", 
                className: "text-center",
                render: function(data, type, row){
                    if (data ==="Symptom"){
                        return '<a href="' + symptomUrl.replace('0', row.id) + '" class="view-more">View More</a>';
                    }else{
                        return "--"
                    }
                } 
            },
        ],
        dom: "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'B>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        buttons: [
        ],
        oLanguage: {
            oPaginate: { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
            sInfo: "Showing page _PAGE_ of _PAGES_",
            sSearch: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            sSearchPlaceholder: "Search...",
            sLengthMenu: " _MENU_",
        },
        stripeClasses: [],
        lengthMenu: [5, 10, 20, 50],
        pageLength: 10,
        initComplete: function() {
            $(`<div class="dropdown">
                <a class="dropdown-toggle btn btn-primary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
                    Filter
                </a>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
                    <a class="dropdown-item" href="javascript:void(0)" onclick="filterActivityData(7)">Last 7 days</a>
                    <a class="dropdown-item" href="javascript:void(0)" onclick="filterActivityData(20)">Last 20 days</a>
                    <a class="dropdown-item" href="javascript:void(0)" onclick="filterActivityData(40)">Last 40 days</a>
                    <a class="dropdown-item" href="javascript:void(0)" onclick="filterActivityData(60)">Last 60 days</a>
                </div>
            </div>`).appendTo('.dt--top-section .col-12:last');
        }
    });
}

// Function to reload the DataTable
function reloadDataTable() {
    dataTableInstance.ajax.reload();
}

function filterActivityData(dateRange){
    var url = dateRange ? activityMainUrl.replace("1", dateRange) : activityMainUrl;
    $.ajax({
        url: url,
        type: 'GET',
        success: function(response) {
            // Assuming response.data contains the filtered records
            var filteredData = response.data;

            tableName.clear().rows.add(filteredData).draw();
            console.log("Filtered data loaded successfully:", filteredData);
        },
        error: function(response) {
            console.error("Error occurred while fetching filtered data:", response);
        }
    });
}
*/


function getReportData(timeRange){
    var url = timeRange ? reportUrl.replace("7", timeRange) : reportUrl
    $('#pills-tab3Content').empty()
    $.ajax({
        url: url,
        type: 'GET',
        success: function(response) {
            console.log("reposne is ", response);
            if  (response.status == 200){
                setReportContent(response.data)
            }
            if  (response.status == 202){
                const errorCard = $('<div class="card card-danger text-center mt-3 p-4 tab-pane-content"></div>');
                const title = $('<h4 class="mb-3"></h4>').text('Not Enough Records');
                const message = $('<h5></h5>').text(response.message);

                errorCard.append(title);
                errorCard.append(message);

                $('#pills-tab3Content').append(errorCard);
                
                }
        },
        error: function(response) {
            
        }
    });
}

function setReportContent(data) {
    // Clear previous content
    $('#pills-tab3Content').empty();

    // Foods to Avoid and Bowel Report
    if (data.food_avoid || data.highest_stool) {
        const section = $('<div class="row tab-pane-content d-flex justify-content-center gap-5 mb-5"></div>');

        if (data.food_avoid) {
            createFoodToAvoid(section, data.food_avoid);
        }

        if (data.highest_stool) {
            createBowelReport(section, data.highest_stool);
        }

        $('#pills-tab3Content').append(section);
    }

    const tableSection = $('<div class="row tab-pane-content"></div>');
    // Same Foods to Avoid
    if (data.same_food_avoid) {
        createTable('Same Foods to Avoid', tableSection, data.same_food_avoid.food);
    }

    // Meal Symptoms Recorded
    if (data.symptoms_frequency) {
        createTable('Meal Symptoms Recorded', tableSection,  data.symptoms_frequency);
    }

    // Recorded Stool Type
    if (data.stool_type) {
        createTable('Recorded Stool Type', tableSection, data.stool_type);
    }
    $('#pills-tab3Content').append(tableSection);
}

function createFoodToAvoid(parent, content) {
    const col = $('<div class="col-md-3 tab-pane-content food-column text-center card d-flex flex-column justify-content-center align-items-center gap-4 py-4"><div class="h-100"></div></div>');
    const title = $('<h5></h5>').text('Foods to Avoid');
    const img = $('<img height="100" width="100">').attr('src', "{% static 'img/foods.png' %}");
    const h4 = $('<h3></h4>').text(content);
    const h6 = $('<h6></h6>').html(
        'Based on the Symptoms added within the last 7 days, <b>' + content + '</b> should be avoided.'
    );

    col.append(title);
    col.append(img);
    col.append(h4);
    col.append(h6);

    parent.append(col);
}

function createBowelReport(parent, content) {
    const col = $('<div class="col-md-3 tab-pane-content food-column text-center card d-flex flex-column justify-content-center align-items-center gap-4 py-4"><div class="h-100"></div></div>');
    const title = $('<h5></h5>').text('Bowel Report');
    const img = $('<img height="100" width="100">').attr('src', "{% static 'img/bowel.png' %}");
    const h4 = $('<h3></h4>').text(content);
    const h6 = $('<h6></h6>').text('Your most recorded stool type is ' + content);

    col.append(title);
    col.append(img);
    col.append(h4);
    col.append(h6);

    parent.append(col);
}

function createTable(title, parent, data) {
    const col = $('<div class="col-md-4 tab-pane-content"></div>');
    const table = $('<table class="table table-sm tab-pane-content mb-3"></table>');
    const thead = $('<thead></thead>');
    const tbody = $('<tbody></tbody>');
    const headerRow = $('<tr></tr>');
    const titleTh = $('<th colspan="2"></th>').text(title);

    headerRow.append(titleTh);
    thead.append(headerRow);

    for (const [key, value] of Object.entries(data)) {
        const row = $('<tr></tr>');
        const keyTd = $('<td></td>').text(key);
        const valueTd = $('<td></td>').text(value);

        row.append(keyTd);
        row.append(valueTd);

        tbody.append(row);
    }
    col.append(table)
    table.append(thead);
    table.append(tbody);

    parent.append(col)
}


</script>
{% endblock %}