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

<!-- Main Content -->
<div id="content">
    <!-- Begin Page Content -->
    <div class="container-fluid">
        
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h4 mb-0 text-gray-800">Train a Model</h1> <!-- Softer, smaller font for title -->
        </div>

                <!-- Display Selected Dataset -->
        {% if df_name %}
            <div class="alert alert-info py-3" role="alert">
                <strong>Selected Dataset: </strong> {{df_name}}
            </div>
        {% endif %}
    
        
        <div class="row">
            {% if df_name %}
                <div class="col-xl-12 col-lg-12">
                    <div class="card shadow-sm mb-4 border-0  animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex flex-row align-items-center justify-content-between"> <!-- Softer background and font color -->
                            <h6 class="m-0">DataFrame Summary Information</h6> <!-- Reduced emphasis -->
                        </div>

                        <div class="d-flex table-responsive table table-bordered">
                            {{ fig|safe }}
                        </div>
                        
                        <div class="card-body">
                            <div class="row">
                                <div class="col-xl-3 col-lg-3">
                                    <div class="py-3 d-flex flex-row align-items-center justify-content-between">
                                        <h6 class="m-0 text-muted">Classifier</h6> <!-- Text-muted for subtlety -->
                                    </div>
                                    <select id="classifier" class="form-control selectpicker">
                                        <option value="" disabled selected hidden>Select your model/classifier</option>
                                        {% for classifier_value, classifier_text in classifiers_info %}
                                            <option type="submit" value="{{classifier_value}}">{{classifier_text}}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="col-xl-6 col-lg-6" id="preprocessing" {% if dataset_type == "timeseries" %} style="display:none;" {% endif %}>
                                    <div class="py-3 d-flex flex-row align-items-center justify-content-between">
                                        <h6 class="m-0 text-muted">Preprocessing</h6> <!-- Muted for less intensity -->
                                    </div>
                                    <form id="preprocessing">
                                        {% for preprocessing_value, preprocessing_text in preprocessing_info %}
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="checkbox" value="{{preprocessing_value}}" name="boxes">
                                                <label class="form-check-label">{{preprocessing_text}}</label>
                                            </div>
                                        {% endfor %}
                                    </form>
                                </div>
                            </div>

                            <!-- Test set ratio slider -->
                            <div class="row" style="padding-top:20px;">
                                <div class="col-xl-4 col-lg-4" id="ratio" {% if dataset_type == "timeseries" %} style="display:none;" {% endif %}>
                                    <div class="py-3 d-flex flex-row align-items-center justify-content-between">
                                        <h6 class="m-0 text-muted">Test Set Ratio</h6>
                                    </div>
                                    <input name="train_set_ratio" id="slider" type="range" min="0" max="1" step="0.1" class="w-100"/> <!-- Full width for better spacing -->
                                    <output id="value"></output>
                                </div>
                                {% if dataset_type == "tabular" %}
                                    <div class="col-xl-4 col-lg-4" id="class_label">
                                        <div class="py-3 d-flex flex-row align-items-center justify-content-between">
                                            <h6 class="m-0 text-muted">Class Label</h6>
                                        </div>
                                        <select id="class_label_train" class="form-control selectpicker">
                                            {% for class_label in labels %}
                                                <option type="submit" value="{{class_label}}">{{class_label}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                {% elif dataset_type == "timeseries" %}
                                    <div class="col-xl-3 col-lg-3" id="autoencoder_div" style="display:none;">
                                        <div class="py-3 d-flex flex-row align-items-center justify-content-between">
                                            <h6 class="m-0 text-muted">Autoencoder</h6>
                                        </div>
                                        <select id="autoencoder" class="form-control selectpicker">
                                            <option value="" disabled selected hidden>Select if you want to train an autoencoder</option>
                                            <option value="Yes">Yes</option>
                                            <option value="No">No</option>
                                        </select>
                                    </div>
                                {% endif %}
                            </div>
                            <!-- Action Button Section -->
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="col-xl-4 col-lg-4">
                    <div class="card shadow-sm mb-4 border-0 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex flex-row align-items-center justify-content-between">
                            <h6 class="m-0">Dataframe Summary</h6> <!-- Lighter background and reduced font size -->
                        </div>
                        <div class="card-body">
                            <p>You first need to <a href="/">pick or upload a dataset</a></p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
        <div class="d-flex justify-content-center mt-4">
            <div id="error_message_new_x_2" class="alert alert-danger alert-dismissible text-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
                <i class="fas fa-exclamation-triangle"></i> 
                <span id="error_message_text">Please correct errors before proceeding.</span>
                <button type="button" class="close" aria-label="Close" onclick="$('#error_message_new_x_2').hide();">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>

        <!-- Modal Window -->
        <div class="modal fade" id="modelAnalysisModal" tabindex="-1" aria-labelledby="modelAnalysisModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header bg-light text-dark">
                        <h5 class="modal-title" id="modelAnalysisModalLabel">Model Analysis and Decision</h5>
                    </div>
                    <!-- Modal Body -->
                    <div class="modal-body">
                        <!-- Prompt Message -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle mr-2"></i>
                            After training your model/classifier, you should now decide whether to <strong>keep</strong> it or <strong>discard</strong> it based on its performance metrics and visualizations below.
                        </div>
                        
                        <!-- Tabs Navigation -->
                        <ul class="nav nav-tabs" id="analysisTabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link" id="classification-tab" data-toggle="tab" href="#classification" role="tab" aria-controls="classification" aria-selected="false">
                                    <i class="fas fa-chart-line mr-2"></i>Classification Report
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="details-tab" data-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">
                                    <i class="fas fa-info-circle mr-2"></i>Classifier Details
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" id="pca-tab" data-toggle="tab" href="#pca" role="tab" aria-controls="pca" aria-selected="true">
                                    <i class="fas fa-project-diagram mr-2"></i>PCA
                                </a>
                            </li>
                            <li class="nav-item" id="feature-tab-nav" style="display: none;">
                                <a class="nav-link" id="fi-tab" data-toggle="tab" href="#feature" role="tab" aria-controls="feature" aria-selected="false">
                                    <i class="fas fa-th mr-2"></i>Feature Importance
                                </a>
                            </li>
                            <li class="nav-item" id="tsne-tab-nav" style="display: none;">
                                <a class="nav-link" id="tsne-tab" data-toggle="tab" href="#tsne" role="tab" aria-controls="tsne" aria-selected="true">
                                    <i class="fas fa-clone mr-2"></i>TSNE
                                </a>
                            </li>
                        </ul>
                        
                        <!-- Tabs Content -->
                        <div class="tab-content mt-3" id="analysisTabsContent">
                            <!-- Classification Report Tab -->
                            <div class="tab-pane fade" id="classification" role="tabpanel" aria-labelledby="classification-tab">
                                <div id="classification_report" class="p-3"></div>
                            </div>
                            
                            <!-- Classifier Details Tab -->
                            <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">
                                <div id="details_content" class="p-3 overflow-auto"></div>
                            </div>
                            
                            <!-- PCA Tab -->
                            <div class="tab-pane fade show active" id="pca" role="tabpanel" aria-labelledby="pca-tab">
                                <div id="pca_container" class="p-3"></div>
                            </div>
                            
                            <!-- Feature Importance Tab -->
                            <div class="tab-pane fade" id="feature" role="tabpanel" aria-labelledby="fi-tab">
                                <div id="fi_container" class="p-3"></div>
                            </div>
                            
                            <!-- TSNE Tab -->
                            <div class="tab-pane fade" id="tsne" role="tabpanel" aria-labelledby="tsne-tab">
                                <div id="tsne_container" class="p-3"></div>
                            </div>
                        </div>
                    </div>
        
                    {% csrf_token %}
                    
                    <!-- Modal Footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" id="save-model">
                            <i class="fas fa-save mr-2"></i>Save Model
                        </button>
                        <button type="button" class="btn btn-danger" id="discard-model">
                            <i class="fas fa-trash-alt mr-2"></i>Discard Model
                        </button>
                    </div>
                </div>
            </div>
        </div>        

        <div class="row justify-content-center align-items-center my-4">
            <!-- CSRF Token -->
            {% csrf_token %}
        
            <!-- Button -->
            <div class="col-auto" id="train_test_btn">
                <button class="btn btn-primary train_test align-items-center px-4 py-2 shadow-sm">
                    <i class="fas fa-play mr-2"></i>
                    Start Training
                </button>
            </div>
        
            <!-- Loader -->
            <div id="loader_train" class="col-auto d-none">
                <div class="d-flex align-items-center text-muted">
                    <div class="spinner-border spinner-border-sm text-primary mr-2" role="status"></div>
                    <span>Processing...</span>
                </div>
            </div>
        </div>

        <div class="row mt-3" id="new_or_load">
            <div class="col d-flex justify-content-center">
                <div class="text-center mt-4 d-flex justify-content-center">
                    <!-- Back to Dataset Selection Button -->
                    <button id="backToDatasetButton" class="btn btn-view-models mr-3">
                        <i class="fas fa-arrow-left mr-2"></i> Back to Dataset Selection
                    </button>
                    
                    <!-- View Counterfactuals Button -->
                    <button id="viewPreTrainedButton" class="btn btn-view-models">
                        View Pre-Trained Models <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="{% static 'js/slider.js' %}"></script>
<script type="module" src="{% static 'js/train.js' %}"></script>

{% endblock content %}