{% load static %}
{% load custom_tags_and_filters %}
{% load billing_tags %}
<!DOCTYPE html>
<html lang="en">
    <head>
        {# This meta-tag forcefully disables 'compatibility mode' in Internet Explorer because it causes rendering problems. #}
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        {# jQuery #}
        <script type="text/javascript" src="{% static "jquery.min.js" %}"></script>
        {# Bootstrap #}
        <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>
        <link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap.min.css" %}" />
        <link rel="stylesheet" type="text/css" href="{% static "bootstrap/css/bootstrap-theme.min.css" %}" />
        {# NEMO #}
        <link rel="shortcut icon" type="image/x-icon" href="{% static 'favicon.ico' %}" />
        <script type="text/javascript" src="{% static "nemo.js" %}"></script>
        <link rel="stylesheet" type="text/css" href="{% static "nemo.css" %}" />
        <style>
		.primary-rate {
			font-weight:700
		}
		/* Default: hide mobile, show desktop */
		.mobile-accordion {
			display: none;
		}
		.desktop-table {
			display: block;
		}
		/* Mobile accordion styles */
		@media screen and (max-width: 768px) {
			.mobile-accordion {
				display: block !important;
			}
			.desktop-table {
				display: none !important;
			}
			.accordion-item {
				border: 1px solid #ddd;
				margin-bottom: 5px;
				border-radius: 4px;
			}
			.accordion-header {
				padding: 12px;
				background-color: #f5f5f5;
				cursor: pointer;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.accordion-header:active {
				background-color: #e0e0e0;
			}
			.accordion-body {
				padding: 12px;
				display: none;
				border-top: 1px solid #ddd;
				background-color: white;
			}
			.accordion-body.show {
				display: block;
			}
			.accordion-detail-row {
				display: flex;
				justify-content: space-between;
				padding: 6px 0;
				border-bottom: 1px solid #eee;
			}
			.accordion-detail-row:last-child {
				border-bottom: none;
			}
			.accordion-detail-label {
				font-weight: 600;
				color: #666;
			}
			.accordion-detail-value {
				text-align: right;
			}
			.accordion-chevron {
				transition: transform 0.2s;
			}
			.accordion-chevron.open {
				transform: rotate(90deg);
			}
		}
		@media screen and (min-width: 769px) {
			.mobile-accordion {
				display: none !important;
			}
			.desktop-table {
				display: block !important;
			}
		}
        </style>
        <title>Rate List</title>
    </head>
    <body>
        <div class="body-container">
            <div class="container"
                 {% if mobile_device %} style="width: 100%; max-width: none; margin: 0; padding: 10px;"{% endif %}>
                <div class="row">
                    <div class="col-xs-12">
                        <h1>{{ facility_name }} Rate List</h1>
                    </div>
                </div>
                <div class="row" style="margin-bottom: 40px">
                    <div class="col-sm-4 col-xs-12">
                        <label for="search" class="sr-only">Search for a rate</label>
                        <input id="search" type="text" placeholder="Search for a rate" class="form-control" autofocus>
                    </div>
                </div>
                <div class="pull-left">
                    <ul class="nav nav-pills nav-pills-spacer" id="tabs" style="border-bottom: none;">
                        {% if show_tools_type %}
                            <li {% if rate_type|lower == 'tool' %}class="active"{% endif %}>
                                <a href="{% url 'rate_list' 'Tool' %}">Tools</a>
                            </li>
                        {% endif %}
                        {% if show_areas_type %}
                            <li {% if rate_type|lower == 'area' %}class="active"{% endif %}>
                                <a href="{% url 'rate_list' 'Area' %}">Areas</a>
                            </li>
                        {% endif %}
                        {% if show_supplies_type %}
                            <li {% if rate_type|lower == 'consumable' %}class="active"{% endif %}>
                                <a href="{% url 'rate_list' 'CONSUMABLE' %}">Supplies</a>
                            </li>
                        {% endif %}
                        {% if show_other_type %}
                            <li {% if rate_type|lower == 'other' %}class="active"{% endif %}>
                                <a href="{% url 'rate_list' 'other' %}">Other</a>
                            </li>
                        {% endif %}
                        {% if show_caps %}
                            <li {% if rate_type|lower == 'caps' %}class="active"{% endif %}>
                                <a href="{% url 'rate_list' 'caps' %}">CAPS</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
                {% if rate_type|lower == 'caps' %}
                    {% include 'rates/rate_list_caps.html' %}
                {% else %}
                    {% regroup formatted_rates by facility as facility_list %}
                    {% for facility in facility_list %}
                        <div class="facility-group">
                            <div class="row">
                                <div class="col-xs-12">
                                    {% if facility.grouper %}
                                        <h2>{{ facility.grouper }}</h2>
                                    {% else %}
                                        <br />
                                    {% endif %}
                                </div>
                            </div>
                            <!-- Mobile Accordion View -->
                            <div class="mobile-accordion">
                                {% regroup facility.list by item as item_groups %}
                                {% for item_group in item_groups %}
                                    <div class="accordion-item">
                                        <div class="accordion-header" onclick="toggleAccordion(this)">
                                            <span>{{ item_group.grouper|default_if_none:"" }}</span>
                                            <span class="accordion-chevron">▶</span>
                                        </div>
                                        <div class="accordion-body">
                                            {% for item_rate_type in item_group.list %}
                                                {% if has_multiple_rate_types %}
                                                    <div style="margin-bottom: 15px;">
                                                        <div style="font-weight: bold; color: #333; margin-bottom: 8px;">{{ item_rate_type.rate_type }}</div>
                                                    {% endif %}
                                                    {% if rate_categories %}
                                                        {% for rate, category in item_rate_type.rates|zip_lists:rate_categories %}
                                                            {% if rate %}
                                                                <div class="accordion-detail-row">
                                                                    <span class="accordion-detail-label">{{ category }}:</span>
                                                                    <span class="accordion-detail-value">{{ rate|safe }}</span>
                                                                </div>
                                                            {% endif %}
                                                        {% endfor %}
                                                    {% else %}
                                                        {% if item_rate_type.rates.0 %}
                                                            <div class="accordion-detail-row">
                                                                <span class="accordion-detail-label">Price:</span>
                                                                <span class="accordion-detail-value">{{ item_rate_type.rates.0|safe }}</span>
                                                            </div>
                                                        {% endif %}
                                                    {% endif %}
                                                    {% if has_multiple_rate_types %}</div>{% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <!-- Desktop Table View -->
                            <div class="table-responsive desktop-table">
                                <table class="table table-align-middle table-bordered table-condensed table-hover thead-light">
                                    <thead>
                                        <tr>
                                            <th class="text-center col-md-4">{{ item_label }}</th>
                                            {% if has_multiple_rate_types %}<th class="text-center col-md-2">Type</th>{% endif %}
                                            {% if has_empty_category %}<th class="col-md-2"></th>{% endif %}
                                            {% for category in rate_categories %}<th class="text-center">{{ category }}</th>{% endfor %}
                                        </tr>
                                    </thead>
                                    <tbody class="table-to-filter">
                                        {% for item_rate_type in facility.list %}
                                            <tr {% if item_rate_type.is_first %}class="primary-rate"{% else %}class="collapse {{ item_rate_type.item_index }}_details"{% endif %}>
                                                <td>
                                                    {% if item_rate_type.is_first and item_rate_type.has_children %}
                                                        <a onclick="toggle_rates(this)"
                                                           class="pointer collapsed"
                                                           data-toggle="collapse"
                                                           data-target=".{{ item_rate_type.item_index }}_details"><span class="glyphicon pull-left chevron glyphicon-chevron-right"></span></a>
                                                    {% endif %}
                                                    {% if item_rate_type.is_first %}
                                                        {{ item_rate_type.item|default_if_none:"" }}
                                                    {% else %}
                                                        <span style="display:none">{{ item_rate_type.item|default_if_none:"" }}</span>
                                                    {% endif %}
                                                </td>
                                                {% if has_multiple_rate_types %}<td>{{ item_rate_type.rate_type }}</td>{% endif %}
                                                {% for rate in item_rate_type.rates %}<td>{{ rate|safe }}</td>{% endfor %}
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <script>
		$("#search").keyup(function ()
        {
            let searchValue = this.value.toLowerCase();
            let rows = $(".table-to-filter").find("tr");

            if (searchValue.length)
            {
                rows.hide();
                let data = searchValue.split(" ");

                // Search desktop table rows
                $.each(data, function (i, v)
                {
                    $.each(rows, function(i, row)
                    {
                       let $row = $(row);
                       if ($row.find("td:first").filter(function() { return $(this).css('display') !== 'none'; }).filter(":icontains('" + v + "')").length !== 0)
                       {
							if ($row.hasClass("in") || $row.hasClass("primary-rate"))
							{
								$row.show();
							}
                       }
                    });
                });

                // Search mobile accordion items
                $(".accordion-item").each(function() {
                    let $item = $(this);
                    let itemText = $item.text().toLowerCase();
                    let matches = data.every(function(term) {
                        return itemText.indexOf(term) !== -1;
                    });
                    $item.toggle(matches);
                });
            }
            else
            {
                rows.filter(function() { return $(this).hasClass('primary-rate') || $(this).hasClass('in'); }).show();
                $(".accordion-item").show();
            }

            // Always check and update facility group visibility based on visible rows
            // Show all groups first, then hide empty ones
            $(".facility-group").show().each(function()
			{
                let visibleRows = $(this).find(".table-to-filter tr:visible").length;
                let visibleAccordion = $(this).find(".accordion-item:visible").length;
                if (visibleRows === 0 && visibleAccordion === 0)
                {
                    $(this).hide();
                }
             });
        });

		function toggle_rates(rateElement)
		{
			let toggleTarget = $(rateElement).data("target");

			// remove display none inline style from search, conflicts with collapse UI
			let rateRows = $(".table-to-filter").find(toggleTarget).css("display", "");

			toggle_details(rateElement);
		}

		function toggleAccordion(header)
		{
			let body = header.nextElementSibling;
			let chevron = header.querySelector('.accordion-chevron');

			body.classList.toggle('show');
			chevron.classList.toggle('open');
		}

		// Debug screen size
		function updateScreenSize()
		{
			document.getElementById('screen-size-debug').innerText = 'Screen width: ' + window.innerWidth + 'px';
		}
		updateScreenSize();
		window.addEventListener('resize', updateScreenSize);

        </script>
    </body>
</html>
