{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | View Client</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-12">
                <h2 class="f-22 mb-0 bold">Client Details</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>

        </div>
        <!-- client details-->
        <div class="trainer-details-rw row mt-4">
            <div class="col-12 col-md-4">
                <div class="details-left-block">
                    <div class="card px-4 py-3 text-center">
                        <img class="trainer-view-icn" src="{% if user_obj.image %}{{ user_obj.image }}{% else %}/static/admin/images/user-default.png{% endif %}" alt="user" />
                        <h4 class="f-18 mb-0">{{user_obj.full_name}}</h4>
                        <h4 class="f-18 mb-0">{{user_obj.email}}</h4>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-8">
                <div class="details-right-block">
                    <div class="card px-4 py-4">
                       <div class="row">
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Name</h4>
                                <p class="f-13 mb-0"> {{user_obj.full_name}}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Gender</h4>
                                <p class="f-13 mb-0">{% if user_obj.gender %} {{user_obj.gender}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Age</h4>
                                <p class="f-13 mb-0">{% if user_obj.age %} {{user_obj.age}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Weight</h4>
                                <p class="f-13 mb-0">{% if user_obj.current_weight %} {{user_obj.current_weight}} {{user_obj.weight_unit}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Height</h4>
                                <p class="f-13 mb-0">{% if user_obj.current_height %} {{user_obj.current_height}} {{user_obj.height_unit}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Focus Area</h4>
                                <p class="f-13 mb-0">{% if user_obj.focus_area %} {{user_obj.focus_area}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Main goal</h4>
                                <p class="f-13 mb-0">{% if user_obj.main_goal %} {{user_obj.main_goal}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Gender</h4>
                                <p class="f-13 mb-0">{% if user_obj.gender %} {{user_obj.gender}} {% else %} N/A {% endif %}</p>
                            </div>
                        </div>
                        <!-- <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Clients</h4>
                                <p class="f-13 mb-0"> 200+ Clients</p>
                            </div>
                        </div> -->
                        <div class="col-12 col-md-4 mb-4">
                            <div class="trainer-data">
                                <h4 class="f-16 mb-0">Status</h4>
                                <p class="f-13 mb-0"> <span class="status-complete realtive">{% if user_obj.status %} Active {%else%} Inactive {% endif %}</span></p>
                            </div>
                        </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="row mt-4">
			<div class="col-12 col-md-12 col-lg-12">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Calories burned, estimated</strong></p>
							<p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
						<select class="chart-select">
							<option>Weekly</option>
							<option>Monthly</option>
						</select>
					</div>
					
					<figure class="highcharts-figure">
						<div id="caloriesChart"></div>
					</figure>
				</div>
			</div>
		</div> -->
        <!-- <div class="col-12 col-md-6 col-lg-6">
            <div class="card dashboard-card"> -->
                <!-- <div class="row mt-4">
                    <div class="col-12 col-md-6 col-lg-6">
                        <div class="card dashboard-card">
                            <div class="top-card d-flex justify-content-between mb-3">
                                <div class="book-card">
                                    <p class="bold mb-0"><strong>Lose Weight</strong></p>
                                    <p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                                </div>
                                <select class="chart-select">
                                    <option>Weekly</option>
                                    <option>Monthly</option>
                                </select>
                            </div>
                            
                            <figure class="highcharts-figure">
                                <div id="loseChart"></div>
                            </figure>
                        </div>
                    </div>
                    <div class="top-card d-flex justify-content-between mb-3">
                        <div class="book-card">
                            <p class="bold mb-0"><strong>Duration</strong></p>
                            <p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                        <select class="chart-select">
                            <option>Weekly</option>
                            <option>Monthly</option>
                        </select>
                    </div> -->
					
					<!-- <figure class="highcharts-figure">
						<div id="durationChart"></div>
					</figure>
				</div>
			</div>
		</div> -->
        {% comment %} <div class="row mt-4">
            <div class="col-12 col-md-6 col-lg-7">
				<div class="card dashboard-card">
					<div class="top-card d-flex justify-content-between mb-3">
						<div class="book-card">
							<p class="bold mb-0"><strong>Top 5 Exercises</strong></p>
							<p class="f-13 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
						<select class="chart-select">
							<option>Weekly</option>
							<option>Monthly</option>
						</select>
					</div>
					
					<figure class="highcharts-figure">
						<div id="exerciseChart"></div>
					</figure>
				</div>
			</div>
		</div> {% endcomment %}
	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
    Highcharts.chart('caloriesChart', {
    chart: {
        type: 'column'
    },
    title: {
        text: '',
        align: 'left'
    },
   
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul' , 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true,
        accessibility: {
            description: 'Countries'
        }
    },
    colors: ['#1733C1', '#F9714A'],
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    tooltip: {
        valueSuffix: ' (1000 MT)'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [
        {
            name: 'Recent',
            data: [406292, 260000, 107000, 68300, 27500, 14500, 51086, 136000, 5500, 141000, 107180, 77000]
        },
        {
            name: 'Previous',
            data: [51086, 136000, 5500, 141000, 107180, 77000, 406292, 260000, 107000, 68300, 27500, 14500]
        }
    ]
});

</script>

<!-- time chart-->
<script>
	// Data retrieved from https://www.vikjavev.no/ver/#2020-04-15,2020-04-16

Highcharts.chart('loseChart', {
    chart: {
        type: 'spline',
        scrollablePlotArea: {
            minWidth: 600,
            scrollPositionX: 1
        }
    },
    title: {
        text: '',
        align: 'left'
    },
   
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
	colors: ['#DF4272', '#1733C1'],
    yAxis: {
        title: {
            text: ''
        },
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [{ // Light air
            from: 0.3,
            to: 1.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Light breeze
            from: 1.5,
            to: 3.3,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Gentle breeze
            from: 3.3,
            to: 5.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Moderate breeze
            from: 5.5,
            to: 8,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Fresh breeze
            from: 8,
            to: 11,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Strong breeze
            from: 11,
            to: 14,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Near Gale
            from: 14,
            to: 17,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Fresh Gale
            from: 17,
            to: 20.5,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }, { // Strong Gale
            from: 20.5,
            to: 24,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '',
                style: {
                    color: '#606060'
                }
            }
        }]
    },
    tooltip: {
        valueSuffix: ' m/s'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2020, 3, 15, 0, 0, 0)
        }
    },
    series: [{
        name: 'Recent',
        data: [5.4, 5.2, 5.7, 6.3, 5.2, 5.6, 6.1,
            5.6, 5.9, 7.1, 8.6, 7.8, 8.6,
            8.0, 9.7, 11.2, 12.5, 13.1, 10.6,
            10.9, 8.9, 9.5, 7.5, 3.5, 4.2]

    }, {
        name: 'Previous',
        data: [0.2, 0.1, 0.1, 0.5, 0.3, 0.2, 0.1,
            0.1, 0.1, 0.1, 0.2, 1.1, 1.3,
            2.0, 1.5, 1.5, 1.5, 1.4, 1.7,
            2.0, 2.9, 2.1, 2.1, 3.5, 2.9]
    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});

</script>

<!-- duration chart-->
<script>
    Highcharts.chart('durationChart', {
    chart: {
        type: 'column'
    },
    title: {
        text: '',
        align: 'left'
    },
   
    xAxis: {
        categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S' ],
        crosshair: true,
        accessibility: {
            description: 'Countries'
        }
    },
    colors: ['#1733C1', '#F9714A'],
    yAxis: {
        min: 0,
        title: {
            text: ''
        }
    },
    tooltip: {
        valueSuffix: ' (1000 MT)'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [
        {
            name: 'Recent',
            data: [406292, 260000, 107000, 68300, 27500, 14500, 51086]
        },
        {
            name: 'Previous',
            data: [51086, 136000, 5500, 141000, 107180, 77000, 406292]
        }
    ]
});
</script>

<!--- exercise chart-->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Replace this with your actual JSON data passed from Django
        const exerciseNames = JSON.parse('{{ exercise_names_json|escapejs }}');
        const exerciseCounts =  JSON.parse('{{ exercise_counts_json|escapejs }}');

        // Create a series array for Highcharts
        const seriesData = exerciseNames.map((name, index) => ({
            name: name,
            y: exerciseCounts[index]
        }));

        // Initialize Highcharts chart
        Highcharts.chart('exerciseChart', {
            chart: {
                type: 'column',
                backgroundColor: '#ffffff', // Set chart background color
                height: 400, // Set chart height
                spacingBottom: 30 // Increase bottom spacing for better readability
            },
            title: {
                text: 'Top 5 Exercises',
                style: {
                    fontSize: '18px',
                    fontWeight: 'bold',
                    color: '#333333'
                }
            },
            xAxis: {
                type: 'category',
                title: {
                    text: 'Exercise Name',
                    style: {
                        fontSize: '14px',
                        fontWeight: 'bold',
                        color: '#333333'
                    }
                },
                labels: {
                    rotation: -45,
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Count',
                    style: {
                        fontSize: '14px',
                        fontWeight: 'bold',
                        color: '#333333'
                    }
                },
                min: 0,
                labels: {
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                headerFormat: '<span style="font-size: 12px">{point.key}</span><br/>',
                pointFormat: '<b>{point.y}</b>',
                style: {
                    fontSize: '12px'
                }
            },
            series: [{
                name: 'Count',
                data: seriesData,
                color: '#007bff' // Set column color
            }],
            plotOptions: {
                column: {
                    borderWidth: 0,
                    borderRadius: 4, // Rounded corners for columns
                    dataLabels: {
                        enabled: true,
                        format: '{point.y}', // Display count on top of each column
                        style: {
                            fontSize: '12px',
                            color: '#333333'
                        }
                    }
                }
            },
            credits: {
                enabled: false // Remove Highcharts credits
            }
        });
    });
</script>


{% endblock %}