@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
	.form-control:disabled,
	.form-control[readonly] {
		background-color: #f1f1f1 !important;
	}
</style>
<!-- Start Page Title Area -->
<div class="page-title-area">
	<div class="container">
		<div class="page-title-content">
			<h2>Customer Complain</h2>
			<ul>
				<li><a href="{{ route('home.page') }}">Home</a></li>
				<li class="active">Customer Complaints</li>
			</ul>
		</div>
	</div>

	<img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04" data-revert="true">
	<img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2" data-speed="0.04" data-revert="true">
</div>
<!-- End Page Title Area -->

<!-- Start Contact Area -->
<section class="contact-area pt-70 pb-70">
	<div class="container">
		<div class="section-title">

			<h4>Have a any Complaints about Us ?</h4>
			<h4>Welcome Your's Complaints with respect</h4>
		</div>
		<div class="contact-form">
			<form id="customerComplain">
				@csrf
				<div class="row">
					<div class="col-lg-6 col-sm-6">
						<div class="form-group">
							<label for="agent_code" class="form-label">Please Enter Agent Client No. Or Mobile No.*</label>
							<input type="text" name="agent_code" id="agent_code" class="form-control" required data-error="Please enter Agent Client No. Or Mobile No." placeholder="Agent Client No. Or Mobile No.">
							<div class="help-block with-errors"></div>
							<input type="hidden" id="agent_id" name='agent_id' />
						</div>
					</div>
					<div class="col-lg-6 col-sm-6">
						<div class="form-group">
							<label for="date" class="form-label">Date</label>
							<input type="date" name="date" id="date" value="2025-12-10" required data-error="Please enter your date" class="form-control">
							<div class="help-block with-errors"></div>
						</div>
					</div>
					<div class="col-lg-6 col-sm-6">
						<div class="form-group">
							<label for="complain_name" class="form-label">Firm Name</label>
							<input type="text" disabled name="complain_name" id="complain_name" class="form-control" required data-error="Please enter your name">
							<div class="help-block with-errors"></div>
						</div>
					</div>
					<div class="col-lg-6 col-sm-6">
						<div class="form-group">
							<label for="complain_email" class="form-label"> Email</label>
							<input type="text" disabled name="complain_email" id="complain_email" required data-error="Please enter your E-mail" class="form-control">
							<div class="help-block with-errors"></div>
						</div>
					</div>
					<h5 class="text-center">Please proceed for your Complaint as below details</h5>
					<h5 class="text-center">FeedBack of your for Us</h5>

					<div class="col-lg-12 col-sm-12">
						<div class="form-group">
							<label for="complain_regarding" class="form-label">Select Complain Regarding*</label> <br>
							<select name="complain_regarding" id="complain_regarding" required data-error="Please  Select Complain Regarding* " placeholder="Select Complain Regarding*" class="form-control">
								<option selected="" disabled="" value=""> Complain Regarding Choose...</option>
								@foreach ($data['CustomerFeedbackTopicsList'] as $key => $value)
								<option value="{{ $value['id'] }}">{{ $value['feedback_regarding_name'] }} </option>
								@endforeach
							</select>
							<div class="help-block with-errors"></div>
						</div>
					</div>
					<div class="col-lg-12">
						<div class="form-group">
							<label for="description" class="form-label">Description</label>
							<textarea name="description" class="form-control" id="description" maxlength="350" cols="30" rows="6" required data-error="Write your Complain  Please *" placeholder="Write your Complain  Please *"></textarea>
							<div class="help-block with-errors"></div>
						</div>
					</div>
					<div class="col-lg-12 text-center">
						<button id="complainSubmitBtn" type="submit" class="default-btn">

							<i class="ri-arrow-right-s-line"></i>
							Submit
						</button>
						<div id="msgSubmit" class="h3 text-center hidden"></div>
						<div class="clearfix"></div>
					</div>
				</div>
			</form>
		</div>
	</div>
</section>
<script type="text/javascript">
	var ajaxRegistationURL = "{{route('customer.complain.search')}}";
	var ajaxcustomerComplain = "{{route('customer.complain.save')}}";
</script>
<!-- Links of JS File -->
<script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
<script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('rassets/js/meanmenu.min.js') }}"></script>
<script src="{{ asset('rassets/js/owl.carousel.min.js') }}"></script>
<script src="{{ asset('rassets/js/carousel-thumbs.min.js') }}"></script>
<script src="{{ asset('rassets/js/aos.min.js') }}"></script>
<script src="{{ asset('rassets/js/appear.min.js') }}"></script>
<script src="{{ asset('rassets/js/odometer.min.js') }}"></script>
<script src="{{ asset('rassets/js/magnific-popup.min.js') }}"></script>
<script src="{{ asset('rassets/js/tween-max.min.js') }}"></script>
<script src="{{ asset('rassets/js/form-validator.min.js') }}"></script>
<script src="{{ asset('rassets/js/complain-script.js') }}"></script>
<script src="{{ asset('rassets/js/ajaxchimp.min.js') }}"></script>
<script src="{{ asset('rassets/js/custom.js') }}"></script>
<script>
	$(document).ready(function($) {
		// append value to input on change of the dropdown
		$(document).on('change', '#agent_code', function() {
			// Get selected value
			var csrfToken = $("[name=_token]").val();
			var agent_code = $(this).val();
			$.ajax({
				type: "POST", // Set ajax call type
				url: ajaxRegistationURL, // Set url
				data: {
					"agent_code": agent_code,
					"_token": csrfToken,
				}, // Set an array of data
				dataType: 'json', // Set the data type
				success: function(response) {

					if (response['status'] == 1) {
						$("#complainSubmitBtn").prop("disabled", false);
						$("#complain_name").val(response['data']['firm_name']);
						$("#complain_email").val(response['data']['email']);
						$("#agent_id").val(response['data']['id']);
					} else {
						$("#complainSubmitBtn").prop("disabled", true);
					}
				}
			});
		});
	});

	$(document).ready(function() {
		$("#agent_code").on("keyup", function() {
			$("#complain_email").val('');
			$("#complain_name").val('');
		});
	});
</script>


<!-- End Contact Area -->
@endsection