@include('layouts.header')
		<!-- /Header -->
		@include('layouts.sidebar')

		<div class="page-wrapper">
			<div class="content">
				<div class="page-header">
					<div class="add-item d-flex">
						<div class="page-title">
							<h4>Add Staff</h4>
							<h6>Create new staff</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="{{ route('staff')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Staff</a>
							</div>
						</li>
						<li>
							<a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
						</li>
					</ul>
					
				</div>
				<!-- /add -->
				<form action="{{ route('save_staff')}}" method="post" id="myForm">
					@csrf
					<div class="card">
						<div class="card-body add-product pb-0">
							<div class="accordion-card-one accordion" id="accordionExample">
								<div class="accordion-item">
									<div class="accordion-header" id="headingOne">
										<div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne"  aria-controls="collapseOne">
											<div class="addproduct-icon">
												<h5><i data-feather="info" class="add-info"></i><span>Staff Information</span></h5>
												<a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
											</div>
										</div>
									</div>
									<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
									<div class="accordion-body">
										
										<div class="row">
										<div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Staff ID </label>
													<input type="text" name="staff_id" id="staff_id" class="form-control" value="{{$newStaffId}}" readonly>
												</div>
											</div>
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<div class="add-newplus">
														<label class="form-label">Staff</label>
														<a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#add-units-brand"><i data-feather="plus-circle" class="plus-down-add"></i><span>Add New</span></a>
													</div>
													<select name="user_id" class="form-control"  required>
                                                        <option value="">Select</option>
														@foreach($users as $row)
														<option value="{{ $row->id}}">{{ $row->full_name}}</option>
														@endforeach
													</select>
												</div>
											</div>
										
											
											
											
											
										</div>

										<div class="row">
											
											
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Payment</label>
													<input type="text" name="payment" class="form-control" placeholder="Enter Payment" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
												</div>
											</div>
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label class="form-label">Payment Date</label>
													<input type="date" name="payment_date" class="form-control list" placeholder="Enter Payment Date" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</div>
											</div>
											
										</div>


                                        <div class="row">
											
											
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">Phone1</label>
													<input type="text" name="phone1" class="form-control" placeholder="Enter Phone1" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
												</div>
											</div>
											<div class="col-lg-6 col-sm-6 col-12">
												<div class="input-blocks add-product list">
													<label class="form-label">Phone2</label>
													<input type="text" name="phone2" class="form-control list" placeholder="Enter Phone2" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
													
												</div>
											</div>
											
										</div>
											<!-- Editor -->
											<div class="col-lg-12">
												<div class="input-blocks summer-description-box transfer mb-3">
													<label>Address</label>
													<textarea class="form-control h-100" rows="5" required name="address" placeholder="Enter Address"></textarea>
													<p class="mt-1">Maximum 60 Characters</p>
												</div>
											</div>
											<!-- /Editor -->
										<div class="row">
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">City</label>
													<input type="text" name="city" class="form-control" placeholder="Enter City">
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">State</label>
													<input type="text" name="state" class="form-control" placeholder="Enter State">
												</div>
											</div>
											<div class="col-lg-4 col-sm-6 col-12">
												<div class="mb-3 add-product">
													<label class="form-label">PIN Code</label>
													<input type="text" name="pincode" class="form-control" placeholder="Enter PIN Code" onkeypress="return event.charCode >= 48 && event.charCode <= 57">
												</div>
											</div>
										</div>
										<div class="row mb-3">
                                        <div class="col-12">
                                          <h5>Staff Charges</h5><br>
                                            <div class="table-responsive">
                                             <table class="table table-bordered" id="order-items">
												<thead>
													<tr>
														<th>Action</th>
														<th>Product Name</th>
														<th>Variant Name</th>
														<th>Rate/SqFt</th>
													</tr>
												</thead>
												<tbody>
													<tr class="order-row">
														<td>
															<a href="#" class="btn btn-danger remove-item" style="color:white;background:red">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
																	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
																	class="feather feather-minus-circle minus">
																	<circle cx="12" cy="12" r="10"></circle>
																	<line x1="8" y1="12" x2="16" y2="12"></line>
																</svg>
															</a>
														</td>
														<td>
															<select name="product_id[]" class="form-control product-select" required>
																<option value="">Select Product</option>
																@foreach($products as $row)
																	<option value="{{ $row->id }}">{{ $row->product_name }}</option>
																@endforeach
															</select>
														</td>
														<td>
															<select name="product_variant_id[]" class="form-control product-variant-select" required>
																<option value="">Select variant</option>
															</select>
														</td>
														<td>
															<input type="text" name="rate[]" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
																pattern="^\d*\.?\d*$" class="form-control rate">
														</td>
													</tr>
													<tr>
														<td>
															<a href="#" class="btn btn-success add-item" style="color:white;background:green">
																<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
																	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
																	class="feather feather-plus-circle plus">
																	<circle cx="12" cy="12" r="10"></circle>
																	<line x1="12" y1="8" x2="12" y2="16"></line>
																	<line x1="8" y1="12" x2="16" y2="12"></line>
																</svg>
															</a>
														</td>
													</tr>
												</tbody>
											</table>

                                            </div>
                                        </div>
                                    </div>
										
									
									</div>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<a href="{{ url('staff') }}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" id="submitBtn" class="btn btn-submit">Save Staff</button>
						</div>
					</div>
				</form>
			<!-- /add -->

		</div>
	</div>
	</div>

	<div class="modal fade" id="add-units-brand">
		<div class="modal-dialog modal-dialog-centered custom-modal-two">
			<div class="modal-content">
				<div class="page-wrapper-new p-0">
					<div class="content">
						<div class="modal-header border-0 custom-modal-header">
							<div class="page-title">
								<h4>Add New Staff</h4>
							</div>
							<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body custom-modal-body">
							<form id="addStaffForm">
							@csrf
							<div class="mb-3">
								<label class="form-label">Staff</label>
								<input type="text" name="staff" id="staff_name" class="form-control" required> <small id="staff-error" style="color: red; display: none;">This staff  is already added!</small>
							</div>
							<div class="mb-3">
								<label class="form-label">Email</label>
								<input type="email" name="email" id="email" class="form-control" required> 
							</div>
							<div class="mb-3">
								<label class="form-label">Password</label>
								<input type="password" name="password" id="password" class="form-control" required> 
							</div>
							<div class="modal-footer-btn">
								<a href="javascript:void(0);" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</a>
								<input type="submit" class="btn btn-submit" id="submitstfBtn" name="submit" value="Submit"><p id="message" style="color: red;">
							</div>
						</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- /Main Wrapper -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	$('#addStaffForm').submit(function(e) {
			e.preventDefault(); // Prevent the default form submission

			// Get the brand name value
			var staffName = $('#staff_name').val();
			var email = $('#email').val();
			var password = $('#password').val();
			
			

			// Make the AJAX request to add the brand
			$.ajax({
				url: "{{ route('add_staff_dynamic') }}", // Your route for adding the brand
				method: 'POST',
				data: {
					_token: '{{ csrf_token() }}', // Add CSRF token
					name: staffName,
					email: email,
					password: password,
				},
				success: function(response) {
					
					if (response.success) {
						
						$('#add-units-brand').modal('hide');

						
						$('#addStaffForm')[0].reset();

					
						$('select[name="user_id"]').append('<option value="' + response.staff.id + '" selected>' + response.staff.full_name + '</option>');

					
					
					} else {
						
					}
				},
				error: function() {
					alert('An error occurred while adding the staff.');
				}
			});
		});
		
		document.getElementById("myForm").addEventListener("submit", function(event) {
        let submitBtn = document.getElementById("submitBtn");
        
        if (submitBtn.disabled) {
            event.preventDefault(); // Prevent form resubmission
            alert("Please wait, your info is submitted.");
        } else {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
    
    document.getElementById("addStaffForm").addEventListener("submit", function(event) {
        let submitBtn = document.getElementById("submitstfBtn");
        
        if (submitBtn.disabled) {
            event.preventDefault(); // Prevent form resubmission
            alert("Please wait, your info is submitted.");
        } else {
            submitBtn.disabled = true;
            submitBtn.innerText = "Submitting...";
        }
    });
    
    $("#staff_name").on("keyup blur", function (e) { 
        let staff = $(this).val();
       
            $.ajax({
                url: "{{ route('check_staff_exists') }}",
                type: "POST",
                data: {
                    staff: staff,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response.exists) {
                        $("#staff-error").show(); 
                        $("#staff_name").addClass("error-field"); 
                        $("#staff_name").focus(); 
                         $("#submitstfBtn").prop("disabled", true);
                        $("#message")
            .text("This staff  name is already used, try another.")
            .css({ "color": "red", "font-weight": "bold", "display": "block", "visibility": "visible" })
            .show();
                    } else {
                        $("#staff-error").hide(); 
                        $("#staff_name").removeClass("error-field"); 
                    }
                }
            });
            $("#submitstfBtn").prop("disabled", false);
         $("#message").hide();
        
    });
    
    $("#staff_name").on("keydown", function (e) {
        if (e.key === "Tab" && $("#staff-error").is(":visible")) {
            e.preventDefault(); 
        }
    });


	$(document).ready(function () {
		$('#myForm').on('submit', function(e) {
			e.preventDefault();
			let form = this;
			let formData = new FormData(form); 
			$('#global-loader').show();
			$.ajax({
				url: form.action,
				method: form.method,
				data: formData,
				processData: false,
				contentType: false,
				success: function(response) {
					$('#global-loader').hide();
					successMessage("Staff Created Successfully.","{{ route('staff') }}");
				},
				error: function(xhr) {
					$('#global-loader').hide();
					errorMessage();
				}
			});
		});
		// Function to update disabled options
		function updateProductOptions() {
			var selectedProducts = [];

			// Collect all selected products
			$('.product-select').each(function () {
				var val = $(this).val();
				if (val) {
					selectedProducts.push(val);
				}
			});

			// Enable all options first
			$('.product-select option').prop('disabled', false);

			// Disable selected options in other selects
			$('.product-select').each(function () {
				var currentSelect = $(this);
				selectedProducts.forEach(function (prod) {
					if (currentSelect.val() != prod) {
						currentSelect.find('option[value="' + prod + '"]').prop('disabled', true);
					}
				});
			});
		}

		// Add new row
		$(document).on('click', '.add-item', function (e) {
			e.preventDefault();
			var newRow = `<tr class="order-row">
				<td>
					<a href="#" class="btn btn-danger remove-item" style="color:white;background:red">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="feather feather-minus-circle minus">
							<circle cx="12" cy="12" r="10"></circle>
							<line x1="8" y1="12" x2="16" y2="12"></line>
						</svg>
					</a>
				</td>
				<td>
					<select name="product_id[]" class="form-control product-select" required>
						<option value="">Select Product</option>
						@foreach($products as $row)
							<option value="{{ $row->id }}">{{ $row->product_name }}</option>
						@endforeach
					</select>
				</td>
				<td>
					<select name="product_variant_id[]" class="form-control product-variant-select" required>
						<option value="">Select variant</option>
					</select>
				</td>
				<td><input type="text" name="rate[]" oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
					pattern="^\\d*\\.?\\d*$" class="form-control rate"></td>
			</tr>`;
			$('#order-items tbody tr:last').before(newRow);
			updateProductOptions();
		});

		// Remove row
		$(document).on('click', '.remove-item', function (e) {
			e.preventDefault();
			$(this).closest('tr').remove();
			updateProductOptions();
		});

		// When product changes
		//Getting Product Variant 
		$(document).on('change', '.product-select', function () {
			updateProductOptions();
			const productId     = $(this).val();
			const currentRow    = $(this).closest('tr');
			if(productId){
				$.ajax({
					url: '/get-product-varient/' + productId,
					type: 'GET',
					success: function(data) {
						 // Find select inside current row
						const variantSelect = currentRow.find('.product-variant-select');
						// Clear old options
						variantSelect.empty();
						// Add default option
						variantSelect.append('<option value="">Select Variant</option>');
						// Append new options
						$.each(data, function(key, value) {
							variantSelect.append('<option value="'+ value.id +'">'+ value.varient_name +'</option>');
						});
					},
					error: function(xhr, status, error) {
						console.log(xhr.responseText);
					}
				});
			}
		});
	});

    
    
</script>	
	
	@include('layouts.footer')