{% extends 'leads/base.html' %}
{% load custom_filters %}

{% block title %}IDS Data{% endblock %}

{% block content %}
<style>
    .dropdown-menu {
        --bs-dropdown-padding-x: 5;
    }
</style>
    <h2 class="mb-4">IDS Data</h2>
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    <div class="mb-3">
        <div class="d-flex justify-content-between mb-3">
            <div>
                <a href="{% url 'ids_data_import' %}" class="btn btn-primary">Import CSV</a>
                <a href="{% url 'ids_data_delete_all' %}" class="btn btn-danger">Delete All</a>
                <div class="dropdown d-inline-block">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="columnDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        Visible Columns
                    </button>
                    <div class="dropdown-menu pb-4" aria-labelledby="columnDropdown" style="max-height: 400px; width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                        <form id="columnForm">
                            <div class="px-4 py-2">
                                <input type="text" class="form-control" id="columnSearch" placeholder="Search columns..." oninput="filterColumns()">
                            </div>
                            <div style="max-height: 300px; overflow-y: auto; padding: 0 1rem;" id="columnList">
                                {% for column in columns %}
                                    <div class="form-check mb-1">
                                        <input class="form-check-input" type="checkbox" name="column" value="{{ column.name }}" id="column-{{ forloop.counter }}" {% if column.name in selected_columns %}checked{% endif %} style="transform: scale(1.5); margin-right: 10px;" onclick="event.stopPropagation();">
                                        <label class="form-check-label fs-5" for="column-{{ forloop.counter }}" onclick="event.stopPropagation();">{{ column.verbose_name }}</label>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="d-grid mt-2 mb-3 px-4">
                                <button type="submit" class="btn btn-primary">Apply</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-wrap">
            <a href="{% url 'ids_data' %}" class="btn btn-secondary me-2 mb-2">Reset Filters</a>
            <div class="dropdown d-inline-block me-2 mb-2">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="businessUUIDDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Business UUID
                </button>
                <div class="dropdown-menu pb-4" aria-labelledby="businessUUIDDropdown" style="width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                    <form method="get">
                        <div class="px-4 py-2">
                            <input type="text" class="form-control business-uuid-input" name="business_uuid" placeholder="Enter Business UUID">
                        </div>
                        <div class="business-uuid-fields"></div>
                        <div class="d-grid mt-2">
                            <button type="button" class="btn btn-secondary add-business-uuid">Add Entry</button>
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="d-grid mt-2 mb-3 px-4">
                            <button type="submit" class="btn btn-primary">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="dropdown d-inline-block me-2 mb-2">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="locationUUIDDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Location UUID
                </button>
                <div class="dropdown-menu pb-4" aria-labelledby="locationUUIDDropdown" style="width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                    <form method="get">
                        <div class="px-4 py-2">
                            <input type="text" class="form-control location-uuid-input" name="location_uuid" placeholder="Enter Location UUID">
                        </div>
                        <div class="location-uuid-fields"></div>
                        <div class="d-grid mt-2">
                            <button type="button" class="btn btn-secondary add-location-uuid">Add Entry</button>
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="d-grid mt-2 mb-3 px-4">
                            <button type="submit" class="btn btn-primary">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="dropdown d-inline-block me-2 mb-2">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="categoryDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Categories
                </button>
                <div class="dropdown-menu pb-4" aria-labelledby="categoryDropdown" style="max-height: 400px; width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                    <form method="get">
                        <div class="px-4 py-2">
                            <input type="text" class="form-control" id="categorySearch" placeholder="Search categories..." oninput="filterCategories()">
                        </div>
                        <div style="max-height: 300px; overflow-y: auto; padding: 0 1rem;" id="categoryList">
                            {% for category in categories %}
                                <div class="form-check mb-1">
                                    <input class="form-check-input" type="checkbox" name="category" value="{{ category }}" id="category-{{ forloop.counter }}" {% if category in selected_categories %}checked{% endif %} style="transform: scale(1.5); margin-right: 10px;" onclick="event.stopPropagation();">
                                    <label class="form-check-label fs-5" for="category-{{ forloop.counter }}" onclick="event.stopPropagation();">{{ category }}</label>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="d-grid mt-2 mb-3 px-4">
                            <button type="submit" class="btn btn-primary">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="dropdown d-inline-block me-2 mb-2">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="municipalityDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Municipalities  
                </button>
                <div class="dropdown-menu pb-4" aria-labelledby="municipalityDropdown" style="max-height: 400px; width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                    <form method="get">
                        <div class="px-4 py-2">
                            <input type="text" class="form-control" id="municipalitySearch" placeholder="Search municipalities..." oninput="filterMunicipalities()">
                        </div>
                        <div style="max-height: 300px; overflow-y: auto; padding: 0 1rem;" id="municipalityList">
                            {% for municipality in municipalities %}
                                <div class="form-check mb-1">
                                    <input class="form-check-input" type="checkbox" name="municipality" value="{{ municipality }}" id="municipality-{{ forloop.counter }}" {% if municipality in selected_municipalities %}checked{% endif %} style="transform: scale(1.5); margin-right: 10px;" onclick="event.stopPropagation();">
                                    <label class="form-check-label fs-5" for="municipality-{{ forloop.counter }}" onclick="event.stopPropagation();">{{ municipality }}</label>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="d-grid mt-2 mb-3 px-4">
                            <button type="submit" class="btn btn-primary">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="dropdown d-inline-block me-2 mb-2">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="stateDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    States
                </button>
                <div class="dropdown-menu pb-4" aria-labelledby="stateDropdown" style="max-height: 400px; width: 300px; padding-left: 5px; padding-right: 5px;" onclick="event.stopPropagation();">
                    <form method="get">
                        <div class="px-4 py-2">
                            <input type="text" class="form-control" id="stateSearch" placeholder="Search states..." oninput="filterStates()">
                        </div>
                        <div style="max-height: 300px; overflow-y: auto; padding: 0 1rem;" id="stateList">
                            {% for state in states %}
                                <div class="form-check mb-1">
                                    <input class="form-check-input" type="checkbox" name="state" value="{{ state }}" id="state-{{ forloop.counter }}" {% if state in selected_states %}checked{% endif %} style="transform: scale(1.5); margin-right: 10px;" onclick="event.stopPropagation();">
                                    <label class="form-check-label fs-5" for="state-{{ forloop.counter }}" onclick="event.stopPropagation();">{{ state }}</label>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="dropdown-divider"></div>
                        <div class="d-grid mt-2 mb-3 px-4">
                            <button type="submit" class="btn btn-primary">Apply</button>
                        </div>
                    </form>
                </div>
            </div>
            <a href="?duplicate_business_name=true" class="btn btn-secondary me-2 mb-2">Duplicate Business Name</a>
            <a href="?duplicate_location_uuid=true" class="btn btn-secondary me-2 mb-2">Duplicate Location UUID</a>
            <a href="?duplicate_phone=true" class="btn btn-secondary me-2 mb-2">Duplicate Phone</a>
            <a href="?single_loc_businesses=true" class="btn btn-secondary me-2 mb-2">Single Loc Businesses</a>
            <a href="?duplicate_business_uuid=true" class="btn btn-secondary me-2 mb-2">Multi Loc Businesses</a>
            <a href="?multi_locs_unmatched_biz_names=true" class="btn btn-secondary me-2 mb-2">Multi Locs With Unmatched Biz Names</a>
        </div>
    </div>
    <form id="bulk-action-form" method="post">
        {% csrf_token %}
        <div class="mb-3">
            <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deletionConfirmationModal">Delete Selected</button>
            <button type="button" class="btn btn-secondary" id="clear-selected">Clear Selected</button>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all-checkbox"></th>
                    <th><a href="?sort=business_name{% if sort == 'business_name' %}&direction={% if direction == 'asc' %}desc{% else %}asc{% endif %}{% endif %}">Business Name</a></th>
                {% for column in selected_columns %}
                    <th><a href="?sort={{ column.name }}{% if sort == column.name %}&direction={% if direction == 'asc' %}desc{% else %}asc{% endif %}{% endif %}">{{ column.verbose_name }}</a></th>
                {% endfor %}
                <th>Actions</th>
            </tr>
        </thead>
            <tbody>
                {% for data in page_obj %}
                    <tr>
                        <td><input type="checkbox" name="selected_ids" value="{{ data.id }}" class="row-checkbox"></td>
                        <td>{{ data.business_name }}</td>
                    {% for column in selected_columns %}
                        <td>{{ data|get_item:column.name }}</td>
                    {% endfor %}
                    <td>
                        <a href="{% url 'ids_data_detail' data.pk %}" class="btn btn-sm btn-outline-primary">View</a>
                        <form method="post" action="{% url 'ids_data_delete' data.pk %}" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this entry?')">Delete</button>
                        </form>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="{{ selected_columns|length|add:2 }}">No IDS data available. Use the Import button to add data.</td>
                </tr>
            {% endfor %}
        </tbody>
        </table>
    </form>
    
    <!-- Deletion Confirmation Modal -->
    <div class="modal fade" id="deletionConfirmationModal" tabindex="-1" aria-labelledby="deletionConfirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletionConfirmationModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the selected records?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-btn">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Get the selected IDs from local storage or initialize an empty array
        let selectedIds = JSON.parse(localStorage.getItem('selectedIds')) || [];

        // Update the checkboxes based on the selected IDs
        updateCheckboxes();

        document.getElementById('select-all-checkbox').addEventListener('change', function() {
            var checkboxes = document.getElementsByClassName('row-checkbox');
            for (var i = 0; i < checkboxes.length; i++) {
                checkboxes[i].checked = this.checked;
                updateSelectedIds(checkboxes[i]);
            }
        });

        document.getElementById('confirm-delete-btn').addEventListener('click', function() {
            document.getElementById('bulk-action-form').submit();
        });

        document.getElementById('clear-selected').addEventListener('click', function() {
            selectedIds = [];
            localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
            updateCheckboxes();
        });


        // Update the selected IDs whenever a checkbox is changed
        document.querySelectorAll('.row-checkbox').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                updateSelectedIds(this);
            });
        });

        function updateSelectedIds(checkbox) {
            var id = checkbox.value;
            if (checkbox.checked) {
                if (!selectedIds.includes(id)) {
                    selectedIds.push(id);
                }
            } else {
                var index = selectedIds.indexOf(id);
                if (index > -1) {
                    selectedIds.splice(index, 1);
                }
            }
            localStorage.setItem('selectedIds', JSON.stringify(selectedIds));
        }

        function updateCheckboxes() {
            document.querySelectorAll('.row-checkbox').forEach(function(checkbox) {
                checkbox.checked = selectedIds.includes(checkbox.value);
            });
        }

        // Modify the checkbox behavior
        // Update the selected IDs in the session whenever a checkbox is changed
        document.querySelectorAll('input[name="selected_ids"]').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                var selectedIds = Array.from(document.querySelectorAll('input[name="selected_ids"]:checked')).map(function(checkbox) {
                    return checkbox.value;
                });
                
                fetch('{% url "update_selected_ids" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({ selected_ids: selectedIds })
                });
            });
        });
    </script>
    
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?{% url_replace request 'page' 1 %}">&laquo; First</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% url_replace request 'page' page_obj.previous_page_number %}">Previous</a>
                </li>
            {% endif %}

            <li class="page-item disabled">
                <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
            </li>

            {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?{% url_replace request 'page' page_obj.next_page_number %}">Next</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?{% url_replace request 'page' page_obj.paginator.num_pages %}">Last &raquo;</a>
                </li>
            {% endif %}
        </ul>
    </nav>
    <script>
    function filterCategories() {
        var input = document.getElementById('categorySearch');
        var filter = input.value.toUpperCase();
        var categoryList = document.getElementById('categoryList');
        var categories = categoryList.getElementsByClassName('form-check');

        for (var i = 0; i < categories.length; i++) {
            var categoryLabel = categories[i].getElementsByTagName('label')[0];
            var categoryName = categoryLabel.textContent || categoryLabel.innerText;
            if (categoryName.toUpperCase().indexOf(filter) > -1) {
                categories[i].style.display = '';
            } else {
                categories[i].style.display = 'none';
            }
        }
    }

    function filterMunicipalities() {
        var input = document.getElementById('municipalitySearch');
        var filter = input.value.toUpperCase();
        var municipalityList = document.getElementById('municipalityList');
        var municipalities = municipalityList.getElementsByClassName('form-check');

        for (var i = 0; i < municipalities.length; i++) {
            var municipalityLabel = municipalities[i].getElementsByTagName('label')[0];
            var municipalityName = municipalityLabel.textContent || municipalityLabel.innerText;
            if (municipalityName.toUpperCase().indexOf(filter) > -1) {
                municipalities[i].style.display = '';
            } else {
                municipalities[i].style.display = 'none';
            }
        }
    }

    function filterStates() {
        var input = document.getElementById('stateSearch');
        var filter = input.value.toUpperCase();
        var stateList = document.getElementById('stateList');
        var states = stateList.getElementsByClassName('form-check');

        for (var i = 0; i < states.length; i++) {
            var stateLabel = states[i].getElementsByTagName('label')[0];
            var stateName = stateLabel.textContent || stateLabel.innerText;
            if (stateName.toUpperCase().indexOf(filter) > -1) {
                states[i].style.display = '';
            } else {
                states[i].style.display = 'none';
            }
        }
    }
    

    function filterColumns() {
        var input = document.getElementById('columnSearch');
        var filter = input.value.toUpperCase();
        var columnList = document.getElementById('columnList');
        var columns = columnList.getElementsByClassName('form-check');

        for (var i = 0; i < columns.length; i++) {
            var columnLabel = columns[i].getElementsByTagName('label')[0];
            var columnName = columnLabel.textContent || columnLabel.innerText;
            if (columnName.toUpperCase().indexOf(filter) > -1) {
                columns[i].style.display = '';
            } else {
                columns[i].style.display = 'none';
            }
        }
    }

    document.getElementById('columnForm').addEventListener('submit', function(event) {
        event.preventDefault();
        var form = event.target;
        var selectedColumns = Array.from(form.elements['column'])
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.value);
        var url = new URL(window.location.href);
        url.searchParams.set('columns', selectedColumns.join(','));
        window.location.href = url.toString();
    });
    </script>
    <script>
        document.querySelector('.add-business-uuid').addEventListener('click', function() {
            var businessUUIDFields = document.querySelector('.business-uuid-fields');
            var newField = document.createElement('div');
            newField.classList.add('px-4', 'py-2');
            newField.innerHTML = '<input type="text" class="form-control business-uuid-input" name="business_uuid" placeholder="Enter Business UUID">';
            businessUUIDFields.appendChild(newField);
        });

        document.querySelector('.add-location-uuid').addEventListener('click', function() {
            var locationUUIDFields = document.querySelector('.location-uuid-fields');
            var newField = document.createElement('div');
            newField.classList.add('px-4', 'py-2');
            newField.innerHTML = '<input type="text" class="form-control location-uuid-input" name="location_uuid" placeholder="Enter Location UUID">';
            locationUUIDFields.appendChild(newField);
        });
    </script>
{% endblock %}