{% extends 'main.html' %}
{% block content %} 
{% load static %}

<!-- Page Heading -->
<!-- Combined Heading and Button Group for Dataset Selection -->
<!-- Combined Heading and Button Group for Dataset Selection -->

<div class="text-center mb-4">
    <h2 class="h4 mb-3 text-gray-800">Choose a Dataset</h2>

    <!-- Dataset Selection Button Group -->
    <div class="row justify-content-center">
        {% csrf_token %}
        
        <!-- Breast Cancer Dataset -->
        <div class="col-auto">
            <button type="button" class="btn btn-dataset px-4 py-2 mb-2 {% if df_name == 'breast-cancer' %}active{% endif %}" id="breast-cancer">
                <i class="fas fa-dna"></i> Breast Cancer
            </button>
        </div>

        <!-- Stroke Dataset -->
        <div class="col-auto">
            <button type="button" class="btn btn-dataset px-4 py-2 mb-2 {% if df_name == 'stroke' %}active{% endif %}" id="stroke">
                <i class="fas fa-heartbeat"></i> Stroke
            </button>
        </div>

        <!-- Timeseries Dataset -->
        <div class="col-auto">
            <button type="button" class="btn btn-dataset px-4 py-2 mb-2 {% if dataset_type == 'timeseries' %}active{% endif %}" id="timeseries">
                <i class="fas fa-chart-line"></i> Timeseries
            </button>
        </div>

        <!-- Upload Dataset -->
        <div class="col-auto">
            <button type="button" class="btn btn-dataset px-4 py-2 mb-2 {% if upload %}active{% endif %}" id="upload">
                <i class="fas fa-upload"></i> Upload
            </button>
        </div>
    </div>
</div>

<!-- Upload Form Section -->
<div class="row justify-content-center">
    <div class="col-xl-5 col-lg-5" id="upload_col" {% if upload %} style="display: block;" {% else %} style="display: none;" {% endif %}>
        <div class="card shadow-sm mb-4 border-0">
            <div class="card-body">
                <div class="row">
                    <!-- Left Column: Form Section -->
                    <div class="col-md-6">
                        <form id="csv_form" method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            <fieldset class="form-group mb-3">
                                <legend class="col-form-label small text-secondary font-weight-semibold">Data Type</legend>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="dataset_type" id="tabular" value="tabular" required>
                                    <label class="form-check-label" for="tabular">Tabular</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="dataset_type" id="timeseries" value="timeseries" required>
                                    <label class="form-check-label" for="timeseries">Timeseries</label>
                                </div>
                            </fieldset>

                            <div class="form-group">
                                <label class="small text-secondary font-weight-semibold" for="doc">Upload File</label>
                                <input class="form-control-file" type="file" id="doc" name="excel_file" required>
                            </div>

                            <div class="form-group">
                                <input class="btn btn-primary btn-sm mt-2" type="submit" value="Upload" id="upload_btn">
                            </div>
                        </form>
                    </div>

                    <!-- Right Column: Uploaded Files Section -->
                    <div class="col-md-6" id="uploaded_file">
                        <fieldset class="form-group mb-3">
                            <legend class="col-form-label small text-secondary font-weight-semibold">Uploaded Files</legend>
                            {% if uploaded_files %}
                                <fieldset class="form-group">
                                    {% for uploaded_file in uploaded_files %}
                                        <div class="form-check mb-1">
                                            <input class="form-check-input" type="radio" name="uploaded_file" id="uploaded_file_{{ forloop.counter }}" value="{{ uploaded_file }}" required>
                                            <label class="form-check-label" for="uploaded_file_{{ forloop.counter }}">{{ uploaded_file }}</label>
                                        </div>
                                    {% endfor %}
                                </fieldset>
                            {% else %}
                                <p class="small text-muted">No files uploaded.</p>
                            {% endif %}
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Timeseries Dataset Selection -->
<div class="row justify-content-center">
    <div class="col-lg-5" {% if dataset_type != "timeseries" %} style="display:none;" {% endif %} id="timeseries-datasets">
        <div class="card border-0 shadow-sm mb-3"> 
            <div class="card-body">
                {% csrf_token %}
                <fieldset class="form-group">
                    <legend class="h6 mb-4 text-muted">Select a Timeseries Dataset</legend>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="two-lead-ecg" value="two-lead-ecg" {% if df_name == "two-lead-ecg" %} checked {% endif %}>
                        <label class="form-check-label" for="two-lead-ecg">Two lead ECG</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="gun-point" value="gun-point" {% if df_name == "gun-point" %} checked {% endif %}>
                        <label class="form-check-label" for="gun-point">Gun Point</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="ecg-five-days" value="ecg-five-days" {% if df_name == "ecg-five-days" %} checked {% endif %}>
                        <label class="form-check-label" for="ecg-five-days">ECG Five Days</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="italy-power-demand" value="italy-power-demand" {% if df_name == "italy-power-demand" %} checked {% endif %}>
                        <label class="form-check-label" for="italy-power-demand">Italy Power Demand</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="ford-a" value="ford-a" {% if df_name == "ford-a" %} checked {% endif %}>
                        <label class="form-check-label" for="ford-a">Ford-A</label>
                    </div>
                </fieldset>    
            </div>
        </div>
    </div>
</div>

<!-- Data and Stats Display -->
<div class="row">
    <!-- Data Section -->
    <div class="col-lg-7" id="df" style="display: none;">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light py-2">
                <h6 class="m-0 text-muted">Data</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <div class="scrollit" id="df_div"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="col-lg-5" id="df_stats" style="display: none;">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light py-2">
                <h6 class="m-0 text-muted">Stats</h6>
            </div>
            <div class="card-body" id="stats_div">
                <div class="d-flex justify-content-center mb-3" id="selection"></div>
                <div class="d-flex justify-content-center">
                    <span class="loader" id="loader_stats" style="display: none;"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeseries Confidence and Stats -->
    <div class="col-lg-6" id="ts_confidence" style="display: none;">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light py-2">
                <h6 class="m-0 text-muted">Confidence</h6>
            </div>
            <div class="card-body">
                <div id="ts_confidence_div"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-6" id="ts_stats" style="display: none;">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light py-2">
                <h6 class="m-0 text-muted">Stats</h6>
            </div>
            <div class="card-body" id="ts_stats_div">
                <div class="d-flex justify-content-center mb-3" id="selection"></div>
                <div class="d-flex justify-content-center">
                    <span class="loader" id="loader_stats" style="display: none;"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Cached Data and Stats for Tabular -->
{% if dataset_type == "tabular" and df_name and data_to_display %}
    <div class="row">
        <div class="col-lg-7" id="df_cached">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light py-2">
                    <h6 class="m-0 text-muted">Data</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <div class="scrollit table table-bordered" id="df_div">{{ data_to_display|safe }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-5" id="df_stats_cached">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light py-2">
                    <h6 class="m-0 text-muted">Stats</h6>
                </div>
                <div class="card-body" id="stats_div_cached">
                    <div class="d-flex justify-content-center mb-3" id="selection_cached">
                        <select class="col mr-2 form-control" id="feature1_cached">
                            {% for feature in features %}
                                <option value="{{ feature }}" {% if feature == feature1 %}selected{% endif %}>{{ feature }}</option>
                            {% endfor %}
                        </select>
                        <select class="col mr-2 form-control" id="feature2_cached">
                            {% for feature in features %}
                                <option value="{{ feature }}" {% if feature == feature2 %}selected{% endif %}>{{ feature }}</option>
                            {% endfor %}
                        </select>
                        <select class="col mr-2 form-control" id="label_cached">
                            {% for label in labels %}
                                <option value="{{ label }}" {% if label == curlabel %}selected{% endif %}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="plotly_fig" id="stats_container_cached">{{ fig|safe }}</div>
                    <div class="d-flex justify-content-center">
                        <span class="loader" id="loader_stats_cached" style="display: none;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% elif dataset_type == "timeseries" %}
    <!-- Timeseries Cached Data and Stats -->
    <div class="row">
        <div class="col-lg-6" id="ts_confidence_cached">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light py-2">
                    <h6 class="m-0 text-muted">Confidence Interval</h6>
                </div>
                <div class="card-body">
                    <div class="plotly_fig" id="ts_confidence_container_cached">{{ fig1|safe }}</div>
                </div>
            </div>
        </div>

        <div class="col-lg-6" id="ts_stats_cached">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light py-2">
                    <h6 class="m-0 text-muted">Samples</h6>
                </div>
                <div class="card-body">
                    <div class="plotly_fig" id="ts_stats_container_cached">{{ fig|safe }}</div>
                </div>
            </div>
        </div>
    </div>
{% endif %}

<!-- Loader -->
<div class="row">
    <div class="col d-flex justify-content-center">
        <span class="loader" id="loader" style="display: none;"></span>
    </div>
</div>

<!-- JavaScript -->
<script type="module" src="{% static 'js/radio_dataset.js' %}"></script>
<script type="module" src="{% static 'js/selection_change.js' %}"></script>
<script type="module" src="{% static 'js/radio_timeseries_dataset.js' %}"></script>
<script type="module" src="{% static 'js/radio_uploaded_dataset.js' %}"></script>

{% endblock content%}