@include('includes.app')
@include('includes.sidebar')
@include('includes.header')
@include('includes.toster')
<style>
	.filter-transition {
		overflow: hidden;
		transition: all 0.4s ease;
		transform-origin: top;
		max-height: 1000px;
		transform: scaleY(1);
		opacity: 1;
	}
	.filter-transition.hidden {
		max-height: 0;
		transform: scaleY(0);
		opacity: 0;
		padding: 0 !important;
		margin: 0 !important;
	}
	.page-content {
		min-height: 100vh;
		padding: calc(70px + 1.5rem) calc(1.5rem * .5) 60px calc(1.5rem * .5);
	}
	.custom-dropdown {
		min-width: 100px;
		padding: 4px 0;
		font-size: 13px;
		text-align: center;
	}
	.custom-dropdown .dropdown-item {
		padding: 4px 8px;
	}
	.offcanvas-body .card {
		background-color: white;
		border: none;
		margin-bottom: 1rem;
	}
	.offcanvas-body .card-header {
		font-weight: bold;
		font-size: 16px;
	}
	.offcanvas-body p {
		margin: 0 0 5px;
		font-size: 14px;
	}
	.is-valid {
		border-color: #28a745 !important;
	}
	.invalid-feedback {
		display: none;
		color: #dc3545;
		font-size: 14px;
	}
	.is-invalid ~ .invalid-feedback {
		display: block;
	}
	th {
		white-space: nowrap;
	}
	th, td {
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
	}
</style>
<div class="page-content">
	<div class="container-fluid media-containerfluid" style="background-color: #F6F7F9; padding-left: 45px;">
		<div class="row mt-4">
			@include('includes.under-master-sidebar')
			<div class="col-md-10">
				<div class="d-flex justify-content-end mb-3">
					<a class="btn btn-primary" style="background: #05BCF6;" onclick="showEquipment()">+ Add Custom Broker</a>
				</div>
				<div class="card mb-4 responsive-card">
					<!--<div id="filterForm" class="card-body filter-transition">-->
					<!--	<form class="row g-3">-->
					<!--		<div class="col-md-4">-->
					<!--			<label class="form-label">User Name</label>-->
					<!--			<select class="form-select"><option>Select User</option></select>-->
					<!--		</div>-->
					<!--		<div class="col-md-4">-->
					<!--			<label class="form-label">Status</label>-->
					<!--			<select class="form-select"><option>Select Status</option></select>-->
					<!--		</div>-->
					<!--		<div class="col-md-4">-->
					<!--			<label class="form-label">Date Range</label>-->
					<!--			<select class="form-select"><option>Last Week</option></select>-->
					<!--		</div>-->
					<!--		<div class="col-12 text-end">-->
					<!--			<button class="btn btn-primary mt-2" style="background-color: #16ACF2; border-color: #16ACF2;">Apply</button>-->
					<!--			<button class="btn btn-primary mt-2" style="background-color: #E33C5A; border-color: #E33C5A;">Clear</button>-->
					<!--		</div>-->
					<!--	</form>-->
					<!--</div>-->
					<!--<hr style="border: 1px solid #0D0D0D;">-->
					<div class="d-flex justify-content-between align-items-center p-2 rounded">
						<div class="d-flex gap-2">
							
						</div>
						<div class="text-center">
							<h6 class="mt-3" style="font-size: 20px; font-weight: 600;">All Custom Broker List</h6>
						</div>
						<div>
							<!--<button onclick="toggleFilter()" class="btn btn-light btn-sm border" style="width: 70px; height:30px; background: #DFEAFC; border-color: #DFEAFC;">-->
							<!--	Filter <i id="chevronIcon" class="bi bi-chevron-up"></i>-->
							<!--</button>-->
						</div>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table id="ordersTable" class="table table-bordered" style="background-color: white; color: black;">
								<thead style="background: #05BCF6; color: white;">
									<tr>
										<!--<th><input type="checkbox" id="select-all" /></th>-->
										<th>Sr. No.</th>
										<th>Name</th>
										<th>Email</th>
										<th>Secondary Email</th>
										<th>Phone No.</th>
										<th>Address</th>
										<th>Joining Date</th>
										<!--<th>Profile Image</th>-->
										<th>Status</th>
										<th>Edit</th>
										<th>Delete</th>
									</tr>
								</thead>
								<tbody style="background-color: white; color: black;">
									@foreach ($states as $index => $state)
									<tr>
										<!--<td><input type="checkbox" class="select-row" /></td>-->
										<td>{{ $index + 1 }}</td>
										<td>{{ $state->name }}</td>
										<td>{{ $state->email }}</td>
										<td>{{ $state->secondary_email }}</td>
										<td>{{ $state->phone }}</td>
										<td>{{ $state->address }}</td>
										<td>{{ $state->Joining_Date }}</td>
										<!--<td>{{ $state->profile }}</td>-->
										<td>{{ $state->status }}</td>
										<td>
											<button class="btn btn-sm btn-success" onclick="showStateModal({{ $state->id }})">
												<i class="bi bi-pencil-square me-2"></i>Edit
											</button>
										</td>
										<td>
											<button type="button" class="btn btn-sm btn-danger deleteBtn" data-bas-toggle="modala" data-bs-target="#deleteConfirmModal" data-id="{{ $state->id }}" data-url="{{ url('/CustomBroker/' . $state->id. '/delete') }}">
												<i class="bi bi-trash me-2"></i>Delete
											</button>
										</td>
									</tr>
									<!-- Edit Modal -->
									<div class="modal fade" id="editStateModal{{ $state->id }}" tabindex="-1" aria-labelledby="editStateLabel{{ $state->id }}" aria-hidden="true">
										<div class="modal-dialog modal-dialog-centered modal-lg">
											<div class="modal-content rounded-4">
												<form method="POST" action="{{ url('/CustomBroker/' . $state->id . '/update') }}" id="editCustomBrokerForm{{ $state->id }}" enctype="multipart/form-data">
													@csrf
												
													<input type="hidden" name="modal_id" value="editStateModal{{ $state->id }}">
													<div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
														<h5 class="modal-title" id="editStateLabel{{ $state->id }}">Edit Custom Broker</h5>
														<button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
													</div>
													<div class="modal-body">
														<div class="row">
															<div class="mb-3 col-4">
																<label class="form-label">Name:<span class="text-danger">*</span></label>
																<input name="name" id="editName{{ $state->id }}" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $state->name) }}"  required>
																<div class="invalid-feedback" id="editNameError{{ $state->id }}">
																	@error('name') {{ $message }} @enderror
																</div>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Email:<span class="text-danger"></span></label>
																<input name="email" type="email" id="editEmail{{ $state->id }}" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $state->email) }}" placeholder="Enter Email"  data-id="{{ $state->id }}">
																<div class="invalid-feedback" id="editEmailError{{ $state->id }}">
																	@error('email') {{ $message }} @enderror
																</div>
															</div>
															
															
															<div class="mb-3 col-4">
																<label class="form-label">Secondary Email:<span class="text-danger"></span></label>
																<input name="secondary_email" type="secondary_email" id="secondary_email{{ $state->id }}" class="form-control @error('secondary_email') is-invalid @enderror" value="{{ old('secondary_email', $state->secondary_email) }}" placeholder="Enter Email"  data-id="{{ $state->id }}">
																
															</div>
															
															<div class="mb-3 col-4">
																<label class="form-label">Phone Number:<span class="text-danger"></span></label>
																<input name="phone" type="number" id="editPhone{{ $state->id }}" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $state->phone) }}" placeholder="Enter Phone Number"  data-id="{{ $state->id }}">
																<div class="invalid-feedback" id="editPhoneError{{ $state->id }}">
																	@error('phone') {{ $message }} @enderror
																</div>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Status:</label>
																<select name="status" class="form-select">
																	<option value="Active" {{ old('status', $state->status) == 'Active' ? 'selected' : '' }}>Active</option>
																	<option value="Inactive" {{ old('status', $state->status) == 'Inactive' ? 'selected' : '' }}>Inactive</option>
																</select>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Country:</label>
																<select name="country" class="form-select country-select" data-block="edit_{{ $state->id }}" >
																	<option value="">Select Country</option>
																	@foreach($countries as $country)
																		<option value="{{ $country->id }}" {{ $state->country == $country->id ? 'selected' : '' }}>
																			{{ $country->name }}
																		</option>
																	@endforeach
																</select>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">State:</label>
																<select name="state" class="form-select state-select" data-block="edit_{{ $state->id }}" data-selected="{{ old('state', $state->state) }}">
																	<option value="">Select State</option>
																</select>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">City:</label>
																<select name="city" class="form-select city-select" data-block="edit_{{ $state->id }}" data-selected="{{ old('city', $state->city) }}">
																	<option value="">Select City</option>
																</select>
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Address</label>
																<input type="text" name="address" class="form-control" value="{{ old('address', $state->address) }}">
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Postal Code:</label>
																<input type="text" name="postal_code" class="form-control" value="{{ old('postal_code', $state->postal_code) }}">
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Joining Date:</label>
																<input type="date" name="Joining_Date" class="form-control" value="{{ old('Joining_Date', $state->Joining_Date) }}">
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Upload Document:</label>
																<input type="file" name="document" class="form-control">
															</div>
															<div class="mb-3 col-4">
																<label class="form-label">Upload Tax ID:</label>
																<input type="file" name="pancard" class="form-control">
															</div>
															<!--<div class="mb-3 col-4">-->
															<!--	<label class="form-label">Upload Profile Image:</label>-->
															<!--	<input type="file" name="profile" class="form-control">-->
															<!--</div>-->
															<!--<div class="mb-3 col-4">-->
															<!--		<label class="form-label">Password:<span class="text-danger"></span></label>-->
															<!--	<div class="position-relative">-->
															<!--		<input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="editPassword{{ $state->id }}" placeholder="Enter Password">-->
															<!--		<span class="toggle-password" onclick="togglePassword(this, 'editPassword{{ $state->id }}')" style="position: absolute; top: 10px; right: 17px; cursor: pointer; color: #333; font-size: 13px;"><i class="fa fa-eye"></i></span>-->
															<!--		<div class="invalid-feedback" id="editPasswordError{{ $state->id }}">-->
															<!--			@error('password') {{ $message }} @enderror-->
															<!--		</div>-->
															<!--	</div>-->
															<!--</div>-->
															<!--<div class="mb-3 col-4">-->
															<!--	<label class="form-label">Confirm Password:<span class="text-danger"></span></label>-->
															<!--	<div class="position-relative">-->
															<!--		<input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" id="editConfirmPassword{{ $state->id }}" placeholder="Confirm Password">-->
															<!--		<span class="toggle-password" onclick="togglePassword(this, 'editConfirmPassword{{ $state->id }}')" style="position: absolute; top: 10px; right: 17px; cursor: pointer; color: #333; font-size: 13px;"><i class="fa fa-eye"></i></span>-->
															<!--		<div class="invalid-feedback" id="editConfirmPasswordError{{ $state->id }}">-->
															<!--			@error('password_confirmation') {{ $message }} @enderror-->
															<!--		</div>-->
															<!--	</div>-->
															<!--</div>-->
														</div>
													</div>
													<div class="modal-footer justify-content-center">
														<button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Update</button>
													</div>
												</form>
											</div>
										</div>
									</div>
									@endforeach
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addEquipment" tabindex="-1" aria-labelledby="addEquipmentLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-lg">
			<div class="modal-content rounded-4">
				<div class="modal-header text-white rounded-top-4" style="background-color: #05BCF6;">
					<h5 class="modal-title" id="addEquipmentLabel">Add Custom Broker</h5>
					<button type="button" class="btn-close text-white" style="filter: invert(1);" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<form method="POST" action="{{ url('CustomBroker') }}" id="addCustomBrokerForm" enctype="multipart/form-data">
					@csrf
					<input type="hidden" name="modal_id" value="addEquipment">
					<div class="modal-body">
						<div class="row">
							<div class="mb-3 col-4">
								<label class="form-label">Name:<span class="text-danger">*</span></label>
								<input name="name" id="addName" class="form-control @error('name') is-invalid @enderror" placeholder="Enter Name" value="{{ old('name') }}" required>
								<div class="invalid-feedback" id="addNameError">
									@error('name') {{ $message }} @enderror
								</div>
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Email:<span class="text-danger"></span></label>
								<input name="email" type="email" id="addEmail" class="form-control @error('email') is-invalid @enderror" placeholder="Enter Email" value="{{ old('email') }}" >
								<div class="invalid-feedback" id="addEmailError">
									@error('email') {{ $message }} @enderror
								</div>
							</div>
							
							<div class="mb-3 col-4">
								<label class="form-label">Secondary Email:<span class="text-danger"></span></label>
								<input name="secondary_email" type="secondary_email"  class="form-control @error('secondary_email') is-invalid @enderror" placeholder="Enter Email" value="{{ old('secondary_email') }}" >
							</div>
							
							<div class="mb-3 col-4">
								<label class="form-label">Phone Number:<span class="text-danger"></span></label>
								<input name="phone" type="number" id="addPhone" class="form-control @error('phone') is-invalid @enderror" placeholder="Enter Phone Number" value="{{ old('phone') }}" >
								<div class="invalid-feedback" id="addPhoneError">
									@error('phone') {{ $message }} @enderror
								</div>
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Status:</label>
								<select name="status" class="form-select">
									<option value="Active" {{ old('status') == 'Active' ? 'selected' : '' }}>Active</option>
									<option value="Inactive" {{ old('status') == 'Inactive' ? 'selected' : '' }}>Inactive</option>
								</select>
							</div>
					   <div class="mb-3 col-4">
                                    <label class="form-label">Country:</label>
                                    <select name="country" class="form-select country-select" data-block="add" >
                                        <option value="">Select Country</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}" {{ old('country') ? 'selected' : ($country?->pivot->is_default ? 'selected' : '') }}>
											{{ $country->name }}
										</option>
                                        @endforeach
                                    </select>
                                    
                                    
                                    
                                </div>
                                <div class="mb-3 col-4">
                                    <label class="form-label">State:</label>
                                    <select name="state" id="state" class="form-select state-select" data-block="add" data-selected="{{ old('state') }}">
                                        <option value="">Select State</option>
                                    </select>
                                </div>
                                <div class="mb-3 col-4">
                                    <label class="form-label">City:</label>
                                    <select name="city" id="city" class="form-select city-select" data-block="add" data-selected="{{ old('city') }}">
                                        <option value="">Select City</option>
                                    </select>
                                </div>
							<div class="mb-3 col-4">
								<label class="form-label">Address</label>
								<input type="text" name="address" class="form-control" placeholder="Enter Address" value="{{ old('address') }}">
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Postal Code:</label>
								<input type="text" name="postal_code" class="form-control" placeholder="Enter Postal Code" value="{{ old('postal_code') }}">
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Joining Date:</label>
								<input type="date" name="Joining_Date" class="form-control" placeholder="Enter Joining Date" value="{{ old('Joining_Date') }}">
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Upload Document:</label>
								<input type="file" name="document" class="form-control" placeholder="Upload Document">
							</div>
							<div class="mb-3 col-4">
								<label class="form-label">Upload Tax ID:</label>
								<input type="file" name="pancard" class="form-control" placeholder="Upload Tax ID">
							</div>
							<!--<div class="mb-3 col-4">-->
							<!--	<label class="form-label">Upload Profile Image:</label>-->
							<!--	<input type="file" name="profile" class="form-control" placeholder="Upload Profile Image">-->
							<!--</div>-->
							<!--<div class="mb-3 col-4">-->
							<!--	<label class="form-label">Password:<span class="text-danger"></span></label>-->
							<!--	<div class="position-relative">-->
							<!--		<input type="password" name="password" class="form-control @error('password') is-invalid @enderror" id="addPassword" placeholder="Enter Password" >-->
							<!--		<span class="toggle-password" onclick="togglePassword(this, 'addPassword')" style="position: absolute; top: 10px; right: 17px; cursor: pointer; color: #333; font-size: 13px;"><i class="fa fa-eye"></i></span>-->
							<!--		<div class="invalid-feedback" id="addPasswordError">-->
							<!--			@error('password') {{ $message }} @enderror-->
							<!--		</div>-->
							<!--	</div>-->
							<!--</div>-->
							<!--<div class="mb-3 col-4">-->
							<!--	<label class="form-label">Confirm Password:<span class="text-danger"></span></label>-->
							<!--	<div class="position-relative">-->
							<!--		<input type="password" name="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" id="addConfirmPassword" placeholder="Confirm Password" >-->
							<!--		<span class="toggle-password" onclick="togglePassword(this, 'addConfirmPassword')" style="position: absolute; top: 10px; right: 17px; cursor: pointer; color: #333; font-size: 13px;"><i class="fa fa-eye"></i></span>-->
							<!--		<div class="invalid-feedback" id="addConfirmPasswordError">-->
							<!--			@error('password_confirmation') {{ $message }} @enderror-->
							<!--		</div>-->
							<!--	</div>-->
							<!--</div>-->
						</div>
					</div>
					<div class="modal-footer justify-content-center" style="border-top: none;">
						<button type="submit" class="btn btn-sm text-white" style="background-color: #05BCF6;">Create</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<!-- Delete Confirmation Modal -->
	<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true" data-bs-backdrop="false">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content rounded-4">
				<div class="modal-header bg-danger text-white rounded-top-4">
					<h5 class="modal-title" id="deleteConfirmModalLabel">
						<i class="bi bi-exclamation-triangle me-2"></i>Confirm Deletion
					</h5>
					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body text-center">
					<p class="mb-2">Are you sure you want to delete this data?</p>
					<p class="text-muted small">This action cannot be undone.</p>
				</div>
				<div class="modal-footer justify-content-center">
					
					<form id="deleteForm" method="POST">
					    <input id="deleteId" hidden>
						@csrf
						@method('DELETE')
						<button type="submit" class="btn btn-sm btn-danger">Yes, Delete</button>
					</form>
					<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancel</button>
				</div>
			</div>
		</div>
	</div>

	<script>
		function toggleFilter() {
			const filterForm = document.getElementById("filterForm");
			const icon = document.getElementById("chevronIcon");
			filterForm.classList.toggle("hidden");
			if (filterForm.classList.contains("hidden")) {
				icon.classList.remove("bi-chevron-up");
				icon.classList.add("bi-chevron-down");
			} else {
				icon.classList.remove("bi-chevron-down");
				icon.classList.add("bi-chevron-up");
			}
		}
		document.addEventListener("DOMContentLoaded", function() {
			document.getElementById("filterForm").classList.remove("hidden");
		});
	</script>
	
	<script>
  function togglePassword(elem, inputId) {
    const input = document.getElementById(inputId);
    const icon = elem.querySelector('i');
    
    if (input.type === "password") {
      input.type = "text";
      icon.classList.remove('fa-eye');
      icon.classList.add('fa-eye-slash');
    } else {
      input.type = "password";
      icon.classList.remove('fa-eye-slash');
      icon.classList.add('fa-eye');
    }
  }
</script>

	<script>
		function togglePassword(icon, inputId) {
			const input = document.getElementById(inputId);
			const isPassword = input.type === 'password';
			input.type = isPassword ? 'text' : 'password';
			icon.querySelector('i').classList.toggle('fa-eye', isPassword);
			icon.querySelector('i').classList.toggle('fa-eye-slash', !isPassword);
		}
	</script>

	<script>

	
		document.addEventListener('DOMContentLoaded', function () {
			const deleteModal = document.getElementById('deleteConfirmModal');
			deleteModal.addEventListener('show.bs.modal', function (event) {
				
			});
			
			
			
			

			// Validation patterns
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			const phoneRegex = /^\d{10}$/;
			const passwordRegex = /^.{6,}$/;

			// Reset form errors
			function resetFormErrors(form) {
				const inputs = form.querySelectorAll('.form-control');
				const errors = form.querySelectorAll('.invalid-feedback');
				inputs.forEach(input => {
					input.classList.remove('is-invalid', 'is-valid');
					input.style.borderColor = '';
				});
				errors.forEach(error => error.textContent = '');
			}

			// Debounce function to limit validation calls
			function debounce(func, wait) {
				let timeout;
				return function executedFunction(...args) {
					const later = () => {
						clearTimeout(timeout);
						func(...args);
					};
					clearTimeout(timeout);
					timeout = setTimeout(later, wait);
				};
			}

			// Validate input and update UI
			function validateInput(input, errorElement, validationFn, errorMessage) {
				const value = input.value.trim();
				input.classList.remove('is-invalid', 'is-valid');
				errorElement.textContent = '';

				if (!value && input.hasAttribute('required')) {
					input.classList.add('is-invalid');
					errorElement.textContent = `The ${input.name} field is required.`;
					return false;
				}

				if (value && !validationFn(value)) {
					input.classList.add('is-invalid');
					errorElement.textContent = errorMessage;
					return false;
				}

				input.classList.add('is-valid');
				return true;
			}

			// Validate confirm password
			function validateConfirmPassword(passwordInput, confirmInput, errorElement) {
				const password = passwordInput.value.trim();
				const confirmPassword = confirmInput.value.trim();
				confirmInput.classList.remove('is-invalid', 'is-valid');
				errorElement.textContent = '';

				if (!confirmPassword && confirmInput.hasAttribute('required')) {
					confirmInput.classList.add('is-invalid');
					errorElement.textContent = 'The confirm password field is required.';
					return false;
				}

				if (confirmPassword && confirmPassword !== password) {
					confirmInput.classList.add('is-invalid');
					errorElement.textContent = 'Passwords do not match.';
					return false;
				}

				confirmInput.classList.add('is-valid');
				return true;
			}

			// Check uniqueness via AJAX
			function checkUniqueness(input, errorElement, field, id = null) {
				const value = input.value.trim();
				if (!value) return;

				$.ajax({
					url: '{{ url('/check-unique1') }}',
					method: 'POST',
					data: {
						_token: '{{ csrf_token() }}',
						field: field,
						value: value,
						id: id
					},
					success: function(response) {
						if (response.exists) {
							input.classList.add('is-invalid');
							input.classList.remove('is-valid');
							errorElement.textContent = `The ${field} has already been taken.`;
						} else {
							input.classList.add('is-valid');
							input.classList.remove('is-invalid');
							errorElement.textContent = '';
						}
					},
					error: function() {
						input.classList.add('is-invalid');
						errorElement.textContent = 'Error checking uniqueness.';
					}
				});
			}

			// Add Custom Broker Form Validation
			const addCustomBrokerForm = document.getElementById('addCustomBrokerForm');
			if (addCustomBrokerForm) {
				const addModal = document.getElementById('addEquipment');
				const nameInput = document.getElementById('addName');
				const emailInput = document.getElementById('addEmail');
				const phoneInput = document.getElementById('addPhone');
				const passwordInput = document.getElementById('addPassword');
				const confirmPasswordInput = document.getElementById('addConfirmPassword');
				const nameError = document.getElementById('addNameError');
				const emailError = document.getElementById('addEmailError');
				const phoneError = document.getElementById('addPhoneError');
				const passwordError = document.getElementById('addPasswordError');
				const confirmPasswordError = document.getElementById('addConfirmPasswordError');

				addModal.addEventListener('show.bs.modal', function () {
					resetFormErrors(addCustomBrokerForm);
					@error('name')
						nameInput.classList.add('is-invalid');
						nameError.textContent = '{{ $message }}';
					@enderror
					@error('email')
						emailInput.classList.add('is-invalid');
						emailError.textContent = '{{ $message }}';
					@enderror
					@error('phone')
						phoneInput.classList.add('is-invalid');
						phoneError.textContent = '{{ $message }}';
					@enderror
					@error('password')
						passwordInput.classList.add('is-invalid');
						passwordError.textContent = '{{ $message }}';
					@enderror
					@error('password_confirmation')
						confirmPasswordInput.classList.add('is-invalid');
						confirmPasswordError.textContent = '{{ $message }}';
					@enderror
				});

				const debouncedValidateName = debounce(() => validateInput(
					nameInput, nameError,
					value => value.length > 0,
					'The name field is required.'
				), 300);

				const debouncedValidateEmail = debounce(() => {
					if (validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.')) {
						checkUniqueness(emailInput, emailError, 'email');
					}
				}, 300);

				const debouncedValidatePhone = debounce(() => {
					if (validateInput(phoneInput, phoneError, value => phoneRegex.test(value), 'Phone number must be exactly 10 digits.')) {
						checkUniqueness(phoneInput, phoneError, 'phone');
					}
				}, 300);

				const debouncedValidatePassword = debounce(() => validateInput(
					passwordInput, passwordError,
					value => passwordRegex.test(value),
					'Password must be at least 6 characters long.'
				), 300);

				const debouncedValidateConfirmPassword = debounce(() => validateConfirmPassword(
					passwordInput, confirmPasswordInput, confirmPasswordError
				), 300);

				nameInput.addEventListener('input', debouncedValidateName);
				emailInput.addEventListener('input', debouncedValidateEmail);
				phoneInput.addEventListener('input', debouncedValidatePhone);
				passwordInput.addEventListener('input', debouncedValidatePassword);
				confirmPasswordInput.addEventListener('input', debouncedValidateConfirmPassword);

				addCustomBrokerForm.addEventListener('submit', function (event) {
					const isNameValid = validateInput(nameInput, nameError, value => value.length > 0, 'The name field is required.');
					const isEmailValid = validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.');
					const isPhoneValid = validateInput(phoneInput, phoneError, value => phoneRegex.test(value), 'Phone number must be exactly 10 digits.');
					const isPasswordValid = validateInput(passwordInput, passwordError, value => passwordRegex.test(value), 'Password must be at least 6 characters long.');
					const isConfirmPasswordValid = validateConfirmPassword(passwordInput, confirmPasswordInput, confirmPasswordError);

					if (!isNameValid || !isEmailValid || !isPhoneValid || !isPasswordValid || !isConfirmPasswordValid) {
						event.preventDefault();
					}
				});
			}

			// Edit Custom Broker Form Validation
			document.querySelectorAll('[id^="editCustomBrokerForm"]').forEach(form => {
				const id = form.id.replace('editCustomBrokerForm', '');
				const modalElement = document.getElementById('editStateModal' + id);
				const nameInput = document.getElementById('editName' + id);
				const emailInput = document.getElementById('editEmail' + id);
				const emailInput = document.getElementById('secondary_email' + id);
				const phoneInput = document.getElementById('editPhone' + id);
				const passwordInput = document.getElementById('editPassword' + id);
				const confirmPasswordInput = document.getElementById('editConfirmPassword' + id);
				const nameError = document.getElementById('editNameError' + id);
				const emailError = document.getElementById('editEmailError' + id);
				const phoneError = document.getElementById('editPhoneError' + id);
				const passwordError = document.getElementById('editPasswordError' + id);
				const confirmPasswordError = document.getElementById('editConfirmPasswordError' + id);

				modalElement.addEventListener('show.bs.modal', function () {
					resetFormErrors(form);
					@error('name')
						if (modalElement.id === '{{ old('modal_id') }}') {
							nameInput.classList.add('is-invalid');
							nameError.textContent = '{{ $message }}';
						}
					@enderror
					@error('email')
						if (modalElement.id === '{{ old('modal_id') }}') {
							emailInput.classList.add('is-invalid');
							emailError.textContent = '{{ $message }}';
						}
					@enderror
					@error('phone')
						if (modalElement.id === '{{ old('modal_id') }}') {
							phoneInput.classList.add('is-invalid');
							phoneError.textContent = '{{ $message }}';
						}
					@enderror
					@error('password')
						if (modalElement.id === '{{ old('modal_id') }}') {
							passwordInput.classList.add('is-invalid');
							passwordError.textContent = '{{ $message }}';
						}
					@enderror
					@error('password_confirmation')
						if (modalElement.id === '{{ old('modal_id') }}') {
							confirmPasswordInput.classList.add('is-invalid');
							confirmPasswordError.textContent = '{{ $message }}';
						}
					@enderror
				});

				const debouncedValidateName = debounce(() => validateInput(
					nameInput, nameError,
					value => value.length > 0,
					'The name field is required.'
				), 300);

				const debouncedValidateEmail = debounce(() => {
					if (validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.')) {
						checkUniqueness(emailInput, emailError, 'email', emailInput.dataset.id);
					}
				}, 300);

				const debouncedValidatePhone = debounce(() => {
					if (validateInput(phoneInput, phoneError, value => phoneRegex.test(value), 'Phone number must be exactly 10 digits.')) {
						checkUniqueness(phoneInput, phoneError, 'phone', phoneInput.dataset.id);
					}
				}, 300);

				const debouncedValidatePassword = debounce(() => {
					const value = passwordInput.value.trim();
					if (!value) return true; // Password is optional for edit
					return validateInput(passwordInput, passwordError, value => passwordRegex.test(value), 'Password must be at least 6 characters long.');
				}, 300);

				const debouncedValidateConfirmPassword = debounce(() => {
					const password = passwordInput.value.trim();
					if (!password) return true; // Skip if no password
					return validateConfirmPassword(passwordInput, confirmPasswordInput, confirmPasswordError);
				}, 300);

				nameInput.addEventListener('input', debouncedValidateName);
				emailInput.addEventListener('input', debouncedValidateEmail);
				phoneInput.addEventListener('input', debouncedValidatePhone);
				passwordInput.addEventListener('input', debouncedValidatePassword);
				confirmPasswordInput.addEventListener('input', debouncedValidateConfirmPassword);

				form.addEventListener('submit', function (event) {
					const isNameValid = validateInput(nameInput, nameError, value => value.length > 0, 'The name field is required.');
					const isEmailValid = validateInput(emailInput, emailError, value => emailRegex.test(value), 'Please enter a valid email address.');
					const isPhoneValid = validateInput(phoneInput, phoneError, value => phoneRegex.test(value), 'Phone number must be exactly 10 digits.');
					const isPasswordValid = passwordInput.value.trim() ? validateInput(passwordInput, passwordError, value => passwordRegex.test(value), 'Password must be at least 6 characters long.') : true;
					const isConfirmPasswordValid = passwordInput.value.trim() ? validateConfirmPassword(passwordInput, confirmPasswordInput, confirmPasswordError) : true;

					if (!isNameValid || !isEmailValid || !isPhoneValid || !isPasswordValid || !isConfirmPasswordValid) {
						event.preventDefault();
					}
				});
			});

			// Show modal only if there are server-side errors
			@if ($errors->any())
				const modalId = '{{ old('modal_id', 'addEquipment') }}';
				const modalElement = document.getElementById(modalId);
				if (modalElement) {
					const modal = new bootstrap.Modal(modalElement, { backdrop: 'static', keyboard: false });
					modal.show();
				}
			@endif
		});
	</script>

	<script>
		function showEquipment() {
			const modal = new bootstrap.Modal(document.getElementById('addEquipment'), { backdrop: 'static', keyboard: false });
			modal.show();
		}

		function showStateModal(id) {
			const modalElement = document.getElementById('editStateModal' + id);
			const modal = new bootstrap.Modal(modalElement, { backdrop: 'static', keyboard: false });
			modal.show();
			const countryDropdown = $(`select.country-select[data-block="edit_${id}"]`);
			const stateDropdown = $(`select.state-select[data-block="edit_${id}"]`);
			const cityDropdown = $(`select.city-select[data-block="edit_${id}"]`);
			const countryID = countryDropdown.val();
			const selectedState = stateDropdown.data('selected');
			const selectedCity = cityDropdown.data('selected');
			if (countryID) {
				loadStates(countryID, stateDropdown, selectedState, selectedCity);
			}
		}
	</script>

	<script>
		document.getElementById('select-all')?.addEventListener('change', function () {
			const isChecked = this.checked;
			document.querySelectorAll('.select-row').forEach(cb => {
				cb.checked = isChecked;
			});
		});
	</script>

	<script src="../assets/libs/jquery/dist/jquery.min.js"></script>
	<script src="../assets/js/sidebarmenu.js"></script>
	<script src="../assets/js/app.min.js"></script>
	<script src="../assets/libs/apexcharts/dist/apexcharts.min.js"></script>
	<script src="../assets/libs/simplebar/dist/simplebar.js"></script>
	<script src="../assets/js/dashboard.js"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

	<script>
		$(document).ready(function () {
			$('#ordersTable').DataTable({
				responsive: true
			});
		});
	</script>

	<script>
		function toggleSidebar() {
			const sidebar = document.getElementById("sidebarWrapper");
			sidebar.classList.toggle("active");
		}
	</script>

	<script>
		$(document).ready(function () {
		function loadStates(countryID, stateDropdown, selectedState = null, selectedCity = null) {
				if (!countryID) return;
				$(stateDropdown).html('<option>Loading...</option>');
				$.get(`/get-states/${countryID}`, function (res) {
					let options = '<option value="">Select State</option>';
					$.each(res, function (key, value) {
						const isSelected = (value.id == selectedState) || (value.id == $(stateDropdown).data('selected'));
						options += `<option value="${value.id}" ${isSelected ? 'selected' : ''}>${value.name} (${value.state_code})</option>`;
					});
					$(stateDropdown).html(options);
					const stateToLoad = selectedState || $(stateDropdown).data('selected');
					if (stateToLoad) {
						const block = $(stateDropdown).data('block');
						const cityDropdown = $(`select.city-select[data-block="${block}"]`);
						loadCities(stateToLoad, cityDropdown, selectedCity);
					}
				}).fail(function() {
					$(stateDropdown).html('<option value="">Error loading states</option>');
				});
			}

			function loadCities(stateID, cityDropdown, selectedCity = null) {
				if (!stateID) return;
				$(cityDropdown).html('<option>Loading...</option>');
				$.get(`/get-cities/${stateID}`, function (res) {
					let options = '<option value="">Select City</option>';
					$.each(res, function (key, value) {
						const isSelected = (key == selectedCity) || (key == $(cityDropdown).data('selected'));
						options += `<option value="${key}" ${isSelected ? 'selected' : ''}>${value}</option>`;
					});
					$(cityDropdown).html(options);
				}).fail(function() {
					$(cityDropdown).html('<option value="">Error loading cities</option>');
				});
			}

			$('.country-select').each(function () {
				const block = $(this).data('block');
				const countryID = $(this).val();
				const stateDropdown = $(`select.state-select[data-block="${block}"]`);
				const cityDropdown = $(`select.city-select[data-block="${block}"]`);
				const selectedState = stateDropdown.data('selected') || $(`[name="addresses[${block === 'primary' ? 0 : 1}][state]"]`).val();
				const selectedCity = cityDropdown.data('selected') || $(`[name="addresses[${block === 'primary' ? 0 : 1}][city]"]`).val();
				loadStates(countryID, stateDropdown, selectedState, selectedCity);
			});

			$('.country-select').on('change', function () {
				const block = $(this).data('block');
				const countryID = $(this).val();
				const stateDropdown = $(`select.state-select[data-block="${block}"]`);
				const cityDropdown = $(`select.city-select[data-block="${block}"]`);
				stateDropdown.html('<option value="">Select State</option>');
				cityDropdown.html('<option value="">Select City</option>');
				if (countryID) {
					loadStates(countryID, stateDropdown);
				}
			});

			$('.state-select').on('change', function () {
				const block = $(this).data('block');
				const stateID = $(this).val();
				const cityDropdown = $(`select.city-select[data-block="${block}"]`);
				if (stateID) {
					loadCities(stateID, cityDropdown);
				} else {
					cityDropdown.html('<option value="">Select City</option>');
				}
			});
		});
		
			$(document).on('click', '.deleteBtn', function (e) {
	    console.log(e);
		const url = this.getAttribute('data-url');
		const form = document.querySelector('#deleteForm');
		form.setAttribute('action', url);
		
		$('#deleteConfirmModal').modal('show');
    });
	</script>

	@include('includes.footer')
</div>
</body>
</html>