{% extends 'base/base.html' %}
{% block title %} Patient Files{% endblock %}
{% block stylesheets %}
{% endblock stylesheets %}
{% block content %}



<div class="overlay"></div>

<div id="wrapper">

    <div id="main-content">
        
            <br>
           
        {% if messages %}
{% for message in messages %}
        <div class="alert {% if message.tags == 'error' %}alert-danger{% else %}alert-success{% endif %} alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <i class="fa fa-check-circle"></i> {{ message }}
        </div>
        {% endfor %}
        {% endif %}

        <div class="container-fluid">
            
            
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header" style="background-color: white;">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="{% url 'addClient' %}" type="button" class="btn btn-info" >Back</a>
                            </div>
                            <div class="col-md-4">
                                <h5><strong>Add Patient Files</strong></h5>
                            </div>
                            <div class="col-md-4">
                            </div>
                        </div>
                    </div>

                    <div class="body">

                       
                        <form method="post" action="{% url 'addClientFiles' clientData.id %}" enctype="multipart/form-data">
                            {% csrf_token %}
                            

                            <br>
                            <div class="row">
                            
                                <div class="col-md-4">
                                    <h6><strong><u>Files:</u></strong></h6>
                                </div>
                                
                            </div>
                                <br>

                                <div id="documentsContainer">
                                 
                                    <div class="documents-plan">

                                <div class="row">

                                    <div class="col-md-3">
                                        <!-- <label for="documentType" class="form-label">File Type</label> -->
                                        <select class="form-control" id="documentType" name="documentType" style="margin-top: 30px;" aria-label="Default select example" >
                                            <!-- <option value=" ">Select Document Type</option> -->
                                            <option value="Image" selected>Image</option>
                                            <option value="PDF">PDF</option>
                                            <option value="Word Document">Word Document</option>
                                            <option value="Excel Spreadsheet">Excel Spreadsheet</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div> 
                                    <div class="col-md-3" id="selectedField" style="display: block;">
                                        <label for="patientFile" class="form-label">Upload File</label>
                                        <input type="file" id="patientFile" name="patientFile" class="form-control">
                                    </div>
                                    <!-- <div style="padding-top: 25px; margin: 0px 20px; display: none;" class="ImageChoice" id="orLabel">
                                        <label for="patientFile" class="form-label">Or</label>
                                    </div>
                                    <div class="col-md-3" style="padding-top: 25px; display: none;" class="ImageChoice" id="takePhotoButton">
                                        <button type="button" class="btn btn-info">Take a Photo</button>
                                    </div> -->

                                </div>

                               
                            </div>
                        </div>
                                <br>

                               
                                <div class="row">
                                    <div class="col-md-3">
                                    <button type="button" class="btn btn-info" onclick="addDocumentsPlan()">Add File</button>
                                </div>
                                    </div>

<br><br>

                                <div class="row">
                                <div class="col-md-10"></div>
                                <div class="col-md-2">
                                <button type="button" class="btn btn-danger">Cancel</button>
                                <button type="submit" class="btn btn-info">Save</button>
                                </div>
                                </div>



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


{% block javascripts %}

<script>

   

function addDocumentsPlan() {
    const documentsContainer = document.getElementById('documentsContainer');
    const newDocumentsPlan = document.createElement('div');
    newDocumentsPlan.classList.add('documents-plan');
    newDocumentsPlan.innerHTML = `
    <br>
        <div class="row">
            <div class="col-md-3">
                 <label for="documentType" class="form-label">Select File Type</label>
                                        <select class="form-control" id="documentType" name="documentType" aria-label="Default select example">
                                            <option value="Image">Image</option>
                                            <option value="PDF">PDF</option>
                                            <option value="Word Document">Word Document</option>
                                            <option value="Excel Spreadsheet">Excel Spreadsheet</option>
                                            <option value="Other">Other</option>
                                        </select>
            </div>
            <div class="col-md-3" >
                                        <label for="patientFile" class="form-label">Upload File</label>
                                        <input type="file" id="patientFile" name="patientFile" class="form-control" >
                                    </div>
            <div class="col-md-3" style="padding-top: 25px;">
                <button type="btn btn-sm" class="btn btn-danger removeDocumentPlan" onclick="removeDocumentPlan(this)">Remove</button>
            </div>
        </div>

        
    `;

    documentsContainer.appendChild(newDocumentsPlan);
}
function removeDocumentPlan(button) {
    const documentPlan = button.closest('.documents-plan');
    documentPlan.remove();
}

function handleDocumentTypeChange(selectElement) {
    const documentPlan = selectElement.closest('.documents-plan');
    const selectedField = documentPlan.querySelector('#selectedField');
    const orLabel = documentPlan.querySelector('#orLabel');
    const takePhotoButton = documentPlan.querySelector('#takePhotoButton');
    
    // Reset all dynamic fields
    selectedField.style.display = 'none';
    orLabel.style.display = 'none';
    takePhotoButton.style.display = 'none';

    // Show relevant fields based on the selected type
    const selectedValue = selectElement.value;
    if (selectedValue === 'Image') {
        selectedField.style.display = 'block';
        orLabel.style.display = 'block';
        takePhotoButton.style.display = 'block';
    } else if (selectedValue === 'PDF' || selectedValue === 'Word Document' || selectedValue === 'Excel Spreadsheet' || selectedValue === 'Other') {
        selectedField.style.display = 'block';
    }
}

    </script>
   <script>
    // JavaScript function to show/hide elements based on selected value
    document.getElementById("documentType").addEventListener("change", function () {
        const selectedValue = this.value; // Get the selected value
        const selectedField = document.getElementById("selectedField"); // Get the file input element
        const orLabel = document.getElementById("orLabel"); // "Or" label
        const takePhotoButton = document.getElementById("takePhotoButton"); // "Take a Photo" button

        if (selectedValue === "Image") {
            // Show the "Or" label and "Take a Photo" button when "Image" is selected
            selectedField.style.display = "block";
            orLabel.style.display = "block";
            takePhotoButton.style.display = "block";
        } else if (
            selectedValue === "PDF" || 
            selectedValue === "Word Document" || 
            selectedValue === "Excel Spreadsheet" || 
            selectedValue === "Other"
        ) {
            // Show the file input field and hide "Or" label and "Take a Photo" button for other types
            selectedField.style.display = "block";
            orLabel.style.display = "none";
            takePhotoButton.style.display = "none";
        } else {
            // Hide all elements if no matching value
            selectedField.style.display = "none";
            orLabel.style.display = "none";
            takePhotoButton.style.display = "none";
        }
    });

    // Trigger the change event on page load to set initial visibility
    document.getElementById("documentType").dispatchEvent(new Event("change"));
</script>




<!-- function addDocumentsPlan() {
    const documentsContainer = document.getElementById('documentsContainer');
    const newDocumentsPlan = document.createElement('div');
    newDocumentsPlan.classList.add('documents-plan');
    newDocumentsPlan.innerHTML = `
        <br>
        <div class="row">
            <div class="col-md-3">
                <select class="form-control documentType" name="documentType" style="margin-top: 30px;" onchange="handleDocumentTypeChange(this)">
                    <option value="">Select Document Type</option>
                    <option value="Image">Image</option>
                    <option value="PDF">PDF</option>
                    <option value="Word Document">Word Document</option>
                    <option value="Excel Spreadsheet">Excel Spreadsheet</option>
                    <option value="Other">Other</option>
                </select>
            </div> 
            <div class="col-md-3" id="selectedField" style="display: none;">
                <label for="patientFile" class="form-label">Upload File</label>
                <input type="file" id="patientFile" name="patientFile" class="form-control">
            </div>
            <div style="padding-top: 25px; margin: 0px 20px; display: none;" class="ImageChoice" id="orLabel">
                <label for="patientFile" class="form-label">Or</label>
            </div>
            <div class="col-md-3" style="padding-top: 25px; display: none;" class="ImageChoice" id="takePhotoButton">
                <button type="button" class="btn btn-info">Take a Photo</button>
            </div>
            <div style="padding-top: 25px;">
                <button type="button" class="btn btn-danger removeDocumentPlan" onclick="removeDocumentPlan(this)">Remove</button>
            </div>
        </div>
    `;

    documentsContainer.appendChild(newDocumentsPlan);
} -->
    

{% endblock javascripts %}
{% endblock content %}