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





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



<div id="wrapper">

    
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Type</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="{% url 'add_types' %}">
                       
                        {% csrf_token %}

                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="testType" class="form-label">Type</label>
                                <input type="text" id="testType" name="testType"
                                       class="form-control" placeholder="Enter Type" required/>
                            </div>


                        </div>
                        
                        <div class="row g-2">
                            <div class="col mb-3">
                                <label for="Date" class="form-label">Date</label>
                                <input type="date" id="Date" name="Date"
                                       class="form-control" value="{{current_date|date:'Y-m-d' }}" required>
                            </div>
                        </div>
                       
                    </div>

           
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-info">Save</button>
                </div>
            </form>
            </div>
        </div>
    </div>





    {% for item in types %}
    <div class="modal fade" id="deleteModal-{{forloop.counter}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Type</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this record?</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <a href="{% url 'deleteType' item.id %}" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
{% endfor %}





    <div id="main-content">
        <br>
        <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="header">
                           
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">Add Type</button>

                            
                        </div>
                        <div class="body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped table-hover dataTable js-exportable" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Sr.No</th>
                                            <th>Type Name</th>  
                                            <th>Date</th>                                     
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0">
                                        {% if request.user.userRole != 'Receptionist' %}
                                        {% for item in types  %}
                                        <tr>
                                           
                                           
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{item.testType}}</td>
                                            <td>{{item.Date}}</td>
                                           
                         
                                        <td > 
                                        <!-- <button type="button" class="btn btn-success" title="View Patients" data-toggle="modal" data-target="#viewClientsModal-{{ item.panel.id }}"><i class="fa fa-eye"></i></button>  -->
                                        <!-- <button type="button" class="btn btn-info" title="Edit"  data-toggle="modal" data-target="#editUserModal-{{forloop.counter}}"><i class="fa fa-edit"></i></button> -->
                                        <button type="button" class="btn btn-danger" title="Delete" data-toggle="modal" data-target="#deleteModal-{{forloop.counter}}"><i class="fa fa-trash"></i></button>
                                        
                                    
                                        </td>
                                        
                                    </tr>
                                    {% endfor %}
                                    {% endif %}
                                        
                                    </tbody>
                                </table>

                               

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

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






{% block javascripts %}

<script>

    // Get the checkbox and the contact input field
    const checkbox = document.getElementById('unitChoice');
    const contactField = document.getElementById('Units');

    // Add event listener to toggle visibility based on checkbox state
    checkbox.addEventListener('change', function() {
        if (this.checked) {
            contactField.style.display = 'block'; // Show the contact input
        } else {
            contactField.style.display = 'none'; // Hide the contact input
        }
    });

    const testTypeDropdown = document.getElementById('testType');
    const optionField = document.getElementById('optionField');
    const textField = document.getElementById('textField');

    // Add an event listener to the dropdown
    testTypeDropdown.addEventListener('change', function() {
        // Hide both fields initially
        optionField.style.display = 'none';
        textField.style.display = 'none';
        
        // Display the appropriate field based on the selected value
        if (this.value === 'options') {
            optionField.style.display = 'flex'; 
        } else if (this.value === 'text') {
            textField.style.display = 'block'; // Show text field
        }
    });
// Function to add a new option row
// Function to add a new option row
function addOption() {
    // Create a unique ID for the new row
    const rowId = `optionRow${Date.now()}`;

    // Append the new row to the Container
    const container = document.getElementById('Container');
    container.insertAdjacentHTML('beforeend', `
        <div class="row g-2 mb-3" id="${rowId}">
            <div class="col mb-3">
                <ul>
                    <li><input type="text" name="optionAdd[]" class="form-control" placeholder="Enter Option" /></li>
                </ul>
            </div>
            <div class="col mb-3">
                <button type="button" class="btn btn-info add-option" onclick="addOption()"> + </button>
                <button type="button" class="btn btn-secondary remove-option" onclick="removeOption('${rowId}')"> - </button>
            </div>
        </div>
    `);
}

// Function to remove a specific option row
function removeOption(rowId) {
    const row = document.getElementById(rowId);
    row.remove();
}

// Event listener for the initial add button
document.querySelector('.add-option').addEventListener('click', addOption);



</script>

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