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

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

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

		.rating-container {
			margin-bottom: -20px !important;
		}
		
	</style>
{% endblock %}
{% block content %}
	<div class="card mb-4">
		<div class="card-body">
			<div class="row mb-3">
				{% if is_granted('ROLE_AFFILIATE') %}
					<h2>Give Affiliate Feedback</h2>
				{% else %}
					<h2>Give Feedback</h2>
				{% endif %}
				<hr>
				<div class="col-lg-6">
					<form id="commission-form" method="post" action="{{ path('app_front_give_feedback') }}">
						<input type="hidden" name="sender" value="{{fromUser.id}}">
						<input type="hidden" name="receiver" value="{{toUser.id}}">
						<h5>From:- {{fromUser.firstName ~ ' ' ~ fromUser.LastName}} To:- {{toUser.firstName ~ ' ' ~ toUser.LastName}}</h5>

						{% if is_granted('ROLE_AFFILIATE') %}
							<table>
								<tr>
									<td colspan="3" class="font-weight-bold" style="line-height: 48.41px;"><h6>Give RANKING</h6></td>
								</tr>
								<tr>
									<td>Communication</td>
									<td></td>
									<td><input type="text" class="rating" name="communication" data-size="xs" required></td>
								</tr>
								<tr>
									<td>Teamwork</td>
									<td></td>
									<td><input type="text" class="rating" name="teamwork" data-size="xs" required></td>
								</tr>
								<tr>
									<td>Support</td>
									<td></td>
									<td><input type="text" class="rating" name="support" data-size="xs" required></td>
								</tr>
								<tr>
									<td>Issue Resolution</td>
									<td></td>
									<td><input type="text" class="rating" name="issue_resolution" data-size="xs" required></td>
								</tr>
								<tr>
									<td>Suggestions</td>
									<td></td>
									<td><input type="text" class="rating" name="suggestions" data-size="xs" required></td>
								</tr>
								<tr>
									<td>Improvements</td>
									<td></td>
									<td><input type="text" class="rating" name="improvements" data-size="xs" required></td>
								</tr>
							</table>
						{% elseif is_granted('ROLE_CUSTOMER') %}
							<ul style="list-style-type: num;">
								<li>
									<strong>Overall Satisfaction</strong><br>
									How satisfied are you with our service? 
									<input type="text" class="rating" name="overall_satisfaction" data-size="xs" required>
								</li>
								<li class="mt-3">
									<strong>Recommendation Likelihood</strong><br>
									How likely are you to recommend us? 
									<input type="text" class="rating" name="recommendation_likelihood" data-size="xs" required>
								</li>
								<li class="mt-3">
									<strong>Service Quality</strong><br>
									How would you rate the quality of our service? 
									<input type="text" class="rating" name="service_quality" data-size="xs" required>
								</li>
								<li class="mt-3">
									<strong>Customer Support</strong><br>
									How satisfied are you with the support you received? 
									<input type="text" class="rating" name="customer_support" data-size="xs" required>
								</li>
								<li class="mt-3">
									<strong>Value for Money</strong><br>
									How would you rate the value for the cost? 
									<input type="text" class="rating" name="value_for_money" data-size="xs" required>
								</li>
							</ul>
						{% endif %}
						
						<div class="col-lg-1 mt-3">
							<button type="submit" class="btn btn-primary">Save</button>
						</div>
					</form>

				</div>

				{# <div class="col-lg-4">
				
						</div>
				
						<div class="col-lg-4">
						
						</div> #}
			</div>
		</div>
	</div>
	

{% endblock %}
{% block javascripts %}
	<script>
		$(document).ready(function() {
			// Common form validation options
			var formValidationOptions = {
				ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
				errorClass: 'validation-invalid-label',
				successClass: 'validation-valid-label',
				validClass: 'validation-valid-label',
				highlight: function(element, errorClass) {
					$(element).removeClass(errorClass);
				},
				unhighlight: function(element, errorClass) {
					$(element).removeClass(errorClass);
				},
				success: function(label) {
					label.addClass('validation-valid-label').text('Success.');
				},
				errorPlacement: function(error, element) {
					if (element.hasClass('multiselect')) {
						error.appendTo(element.parent().parent());
					} else if (element.parents().hasClass('form-control-feedback') || element.parents().hasClass('form-check') || element.parents().hasClass('input-group')) {
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			};

			// Role-based validation rules and messages
			var validationRules = {
				'ROLE_AFFILIATE': {
					rules: {
						"communication": { required: true },
						"teamwork": { required: true },
						"support": { required: true },
						"issue_resolution": { required: true },
						"suggestions": { required: true },
						"improvements": { required: true }
					},
					messages: {
						"communication": { required: "Communication is required." },
						"teamwork": { required: "Teamwork is required." },
						"support": { required: "Support is required." },
						"issue_resolution": { required: "Issue Resolution is required." },
						"suggestions": { required: "Suggestions are required." },
						"improvements": { required: "Improvements are required." }
					}
				},
				'ROLE_CUSTOMER': {
					rules: {
						"overall_satisfaction": { required: true },
						"recommendation_likelihood": { required: true },
						"service_quality": { required: true },
						"issue_resolution": { required: true },
						"value_for_money": { required: true }
					},
					messages: {
						"overall_satisfaction": { required: "Overall Satisfaction is required." },
						"recommendation_likelihood": { required: "Recommendation Likelihood is required." },
						"service_quality": { required: "Service Quality is required." },
						"issue_resolution": { required: "Issue Resolution is required." },
						"value_for_money": { required: "Value For Money is required." }
					}
				}
			};

			// Check user roles and apply appropriate validation rules
			{% if is_granted('ROLE_AFFILIATE') %}
				var roleConfig = validationRules['ROLE_AFFILIATE'];
			{% elseif is_granted('ROLE_CUSTOMER') %}
				var roleConfig = validationRules['ROLE_CUSTOMER'];
			{% endif %}

			// Initialize the validation with the merged options
			if (roleConfig) {
				$('#commission-form').validate($.extend(formValidationOptions, roleConfig));
			}
		});
		
		$('#commission-form').on('submit', function(e) {
			if ($(this).valid()) {
				Swal.fire({
					title: 'Processing...',
					allowOutsideClick: false,
					didOpen: () => {
						Swal.showLoading();
					}
				});
				this.submit();
			}
		});
		
		$("#input-id").rating();
	</script>
{% endblock %}