{% extends 'frontend/layouts/index.html.twig' %}

{% block title %}Dashboard | {{ app_name }}{% endblock %}
{% set active = "app_front_team_feedback" %}
{% set breadcrumbs = [
    {
        'link': path('app_front_account'), 'title': 'Home',
    },
    {
        'title': 'Feedback System',
    },
    {
        'title': 'Team Feedback'
    }
] %}
{% block stylesheets %}
	<style>
		.navigation {
			margin: 0 0 15px 20px;
		}

		.clear-rating {
			display: none !important;
		}

		.rating-container {
			margin-bottom: -20px !important;
		}

		.grid-container {
			display: flex;
			justify-content: center;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}

		.grid-item {
			padding: 10px;
			border: 1px solid #ccc;
			text-align: center;
		}

		.pagination {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}
	</style>
{% endblock %}
{% block content %}
   <div class="card mb-4">
		<div class="card-body" style="hight:100%;">
			<div class="row mb-3">
				<h2>Your Team Feedback Review <span data-bs-popup="tooltip" data-bs-original-title="4 Layers">(4 Layers)<span></h2>
				<hr>
				<div class="col-lg-12">
					{% for item in itemsWithPaginatedFeedback %}
						<div class="col-lg-6" style="float:left">
							<table>
								<tbody>
									<tr>
										<td><h6>Affiliate</h6></td>
										<td  class="font-weight-bold" style="line-height: 48.41px;"><h6>{{item['name']}}</h6></td>
									</tr>
									<tr>
										<td>Communication</td>
										<td></td>
										<td><input type="text" class="rating" name="communication" value="{{ item['communication'] }}" data-size="xs" readonly></td>
									</tr>
									<tr>
										<td>Teamwork</td>
										<td></td>
										<td><input type="text" class="rating" name="teamwork" value="{{ item['teamwork'] }}" data-size="xs" readonly></td>
									</tr>
									<tr>
										<td>Support</td>
										<td></td>
										<td><input type="text" class="rating" name="support" value="{{ item['support'] }}" data-size="xs" readonly></td>
									</tr>
									<tr>
										<td>Issue Resolution</td>
										<td></td>
										<td><input type="text" class="rating" name="issue_resolution" value="{{ item['issue_resolution'] }}" data-size="xs" readonly></td>
									</tr>
									<tr>
										<td>Suggestions</td>
										<td></td>
										<td><input type="text" class="rating" name="suggestions" value="{{ item['suggestions'] }}" data-size="xs" readonly></td>
									</tr>
									<tr>
										<td>Improvements</td>
										<td></td>
										<td><input type="text" class="rating" name="improvements" value="{{ item['improvements'] }}" data-size="xs" readonly></td>
									</tr>
								</tbody>
							</table>
							<div class="mt-3">
								<p>Summary ({{ item['summaryText']}})</p>
								<p><input type="text" class="rating" value="{{item['summary']}}" data-size="xs" disabled></p>
							</div>
						</div>

						<!-- Child Pagination for sender feedback (paginated feedback for each affiliate) -->
						<div class="col-lg-6" style="float:left">
							<div class="child-feedback-pagination">
								{% for feedback in item.sender_feedback_paginated.items %}
									<table>
										<tr>
											<td><h6>Feedback</h6></td>
											{# <td></td> #}
											<td class="font-weight-bold" style="line-height: 48.41px;"><h6>From: {{feedback.name}}</h6></td>
										</tr>
										<tr>
											<td>Communication</td>
											<td><input type="text" class="rating" name="communication" value="{{ feedback.communication }}" data-size="xs" readonly></td>
										</tr>
										<tr>
											<td>Teamwork</td>
											<td><input type="text" class="rating" name="teamwork" value="{{ feedback.teamwork }}" data-size="xs" readonly></td>
										</tr>
										<tr>
											<td>Support</td>
											<td><input type="text" class="rating" name="support" value="{{ feedback.support }}" data-size="xs" readonly></td>
										</tr>
										<tr>
											<td>Issue Resolution</td>
											<td><input type="text" class="rating" name="issue_resolution" value="{{ feedback.issue_resolution }}" data-size="xs" readonly></td>
										</tr>
										<tr>
											<td>Suggestions</td>
											<td><input type="text" class="rating" name="suggestions" value="{{ feedback.suggestions }}" data-size="xs" readonly></td>
										</tr>
										<tr>
											<td>Improvements</td>
											<td><input type="text" class="rating" name="improvements" value="{{ feedback.improvements }}" data-size="xs" readonly></td>
										</tr>
									</table>
									<div class="mt-3">
										<p>Summary ({{ feedback.summaryText }})</p>
										<p><input type="text" class="rating" value="{{feedback.summary}}" data-size="xs" disabled></p>
									</div>
								{% endfor %}
								<!-- Child Pagination Controls -->
								{% if item.sender_feedback_paginated.pageCount > 1 %}
									<div class="pagination">
										{% if item.sender_feedback_paginated.currentPageNumber > 1 %}
											<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'feedback_page': item.sender_feedback_paginated.currentPageNumber - 1})) }}" data-bs-popup="tooltip" data-bs-original-title="Privious"><i class="fa fa-fast-backward" aria-hidden="true"></i></a>
										{% endif %}
										<span>Page {{ item.sender_feedback_paginated.currentPageNumber }} of {{ item.sender_feedback_paginated.pageCount }}</span>
										{% if item.sender_feedback_paginated.currentPageNumber < item.sender_feedback_paginated.pageCount %}
											<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'feedback_page': item.sender_feedback_paginated.currentPageNumber + 1})) }}" data-bs-popup="tooltip" data-bs-original-title="Next"><i class="fa fa-fast-forward" aria-hidden="true"></i></a>
										{% endif %}
									</div>
								{% endif %}
						</div>
					{% endfor %}
				</div>
			</div>
			<!-- Main Pagination Controls -->
			{% if pagination.pageCount > 1 %}
				<div class="pagination col-lg-12 mt-3" style="margin-top 20px;">
					{% if pagination.currentPageNumber > 1 %}
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': pagination.currentPageNumber - 1})) }}" class="list-icons-item" data-bs-popup="tooltip" data-bs-original-title="Privious">
							<i class="fa fa-fast-backward" aria-hidden="true"></i>
						</a>
					{% endif %}
					<span>Page {{ pagination.currentPageNumber }} of {{ pagination.pageCount }}</span>

					{% if pagination.currentPageNumber < pagination.pageCount %}
						<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'page': pagination.currentPageNumber + 1})) }}" class="list-icons-item" data-bs-popup="tooltip" data-bs-original-title="Next">
							<i class="fa fa-fast-forward" aria-hidden="true"></i>
						</a>
					{% endif %}
				</div>
			{% endif %}
		</div>
	</div>
{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function () {
            $(".rating").rating(); // Initialize the star ratings
        });
    </script>
{% endblock %}