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

{% block title %}Dashboard | {{ app_name }}
{% endblock %}
{% set active = "app_front_my_feedback" %}
{% set breadcrumbs = [
    {
        'link': path('app_front_account'), 'title': 'Home',
    },
    {
        'title': 'Feedback System',
    },
    {
        'title': 'My 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">
				<h2>My Affiliate Feedback Review</h2>
				<hr>
				<div class="col-lg-6">
					<table>
						<tr>
							<td colspan="3" class="font-weight-bold" style="line-height: 48.41px;"><h6>YOUR RANKING</h6></td>
						</tr>
						<tr>
							<td>Communication</td>
							<td></td>
							<td><input type="text" class="rating" name="communication" value="{{communication}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Teamwork</td>
							<td></td>
							<td><input type="text" class="rating" name="teamwork" value="{{teamwork}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Support</td>
							<td></td>
							<td><input type="text" class="rating" name="support" value="{{support}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Issue Resolution</td>
							<td></td>
							<td><input type="text" class="rating" name="issue_resolution" value="{{issue_resolution}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Suggestions</td>
							<td></td>
							<td><input type="text" class="rating" name="suggestions" value="{{suggestions}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Improvements</td>
							<td></td>
							<td><input type="text" class="rating" name="improvements" value="{{improvements}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
					<div class="mt-3">
						<p>Summary ({{affiliateSummaryText}})</p>
						<p><input type="text" class="rating" value="{{affiliateSummary}}" data-size="xs" disabled></p>
					</div>
				</div>
				<div class="col-lg-6">
					{% for item in paginationAffiliate.items %}
						<table>
							<tr>
								<td><h6>TEAM RANKING</h6></td>
								{# <td></td> #}
								<td></td>
								<td  class="font-weight-bold" style="line-height: 48.41px;"><h6>From: {{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>
						</table>
						<div class="mt-3">
						<p>Summary ({{item['summary_text']}})</p>
						<p><input type="text" class="rating" value="{{item['summary']}}" data-size="xs" disabled></p>
					</div>
					{% endfor %}
					{% if paginationAffiliate.pageCount > 1 %}
						<div class="pagination">
							{% if paginationAffiliate.currentPageNumber > 1 %}
								<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'affiliatePage': paginationAffiliate.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 {{ paginationAffiliate.currentPageNumber }} of {{ paginationAffiliate.pageCount }}</span>

							{% if paginationAffiliate.currentPageNumber < paginationAffiliate.pageCount %}
								<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'affiliatePage': paginationAffiliate.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>
		</div>
	</div>

	<div class="card mb-4 mt-3">
		<div class="card-body" style="hight:100%;">
			<div class="row">
				<h2>My Customers Feedback Review</h2>
				<hr>
				<div class="col-lg-6">
					<table>
						<tr>
							<td colspan="3" class="font-weight-bold" style="line-height: 48.41px;"><h6>YOUR RANKING</h6></td>
						</tr>
						<tr>
							<td>Overall Satisfaction</td>
							<td></td>
							<td><input type="text" class="rating" name="overall_satisfaction" value="{{overall_satisfaction}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Recommendation Likelihood</td>
							<td></td>
							<td><input type="text" class="rating" name="recommendation_likelihood" value="{{teamwork}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Service Quality</td>
							<td></td>
							<td><input type="text" class="rating" name="service_quality" value="{{support}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Customer Support</td>
							<td></td>
							<td><input type="text" class="rating" name="customer_support" value="{{issue_resolution}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td>Value for Money</td>
							<td></td>
							<td><input type="text" class="rating" name="value_for_money" value="{{suggestions}}" data-size="xs" disabled></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</table>
					<div class="mt-3">
						<p>Summary ({{customerSummaryText}})</p>
						<p><input type="text" class="rating" value="{{customer_summary}}" data-size="xs" disabled></p>
					</div>
				</div>
				<div class="col-lg-6">
					{% for item in paginationCustomer.items %}
						<table>
							<tr>
								<td><h6>Customer RANKING</h6></td>
								{# <td></td> #}
								<td></td>
								<td  class="font-weight-bold" style="line-height: 48.41px;"><h6>From: {{item['name']}}</h6></td>
							</tr>
							<tr>
								<td>Overall Satisfaction</td>
								<td></td>
								<td><input type="text" class="rating" name="overall_satisfaction" value="{{item['overall_satisfaction']}}" data-size="xs" readonly></td>
							</tr>
							<tr>
								<td>Recommendation Likelihood</td>
								<td></td>
								<td><input type="text" class="rating" name="recommendation_likelihood" value="{{item['recommendation_likelihood']}}" data-size="xs" readonly></td>
							</tr>
							<tr>
								<td>Service Quality</td>
								<td></td>
								<td><input type="text" class="rating" name="service_quality" value="{{item['service_quality']}}" data-size="xs" readonly></td>
							</tr>
							<tr>
								<td>Customer Support</td>
								<td></td>
								<td><input type="text" class="rating" name="customer_support" value="{{item['customer_support']}}" data-size="xs" readonly></td>
							</tr>
							<tr>
								<td>Value for Money</td>
								<td></td>
								<td><input type="text" class="rating" name="value_for_money" value="{{item['value_for_money']}}" data-size="xs" readonly></td>
							</tr>
						</table>
						<div class="mt-3">
						<p>Summary ({{item['summary_text']}})</p>
						<p><input type="text" class="rating" value="{{item['summary']}}" data-size="xs" disabled></p>
					</div>
					{% endfor %}
					{% if paginationCustomer.pageCount > 1 %}
						<div class="pagination">
							{% if paginationCustomer.currentPageNumber > 1 %}
								<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'customerPage': paginationCustomer.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 {{ paginationCustomer.currentPageNumber }} of {{ paginationCustomer.pageCount }}</span>

							{% if paginationCustomer.currentPageNumber < paginationCustomer.pageCount %}
								<a href="{{ path(app.request.attributes.get('_route'), app.request.query.all|merge({'customerPage': paginationCustomer.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>
		</div>
	</div>
{% endblock %}
{% block javascripts %}
<script>
	$('#input-id').rating();
</script>{% endblock %}