@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 Accountant</h4>
							<h6>Create new accountant</h6>
						</div>
					</div>
					<ul class="table-top-head">
						<li>
							<div class="page-btn">
								<a href="" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back</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_accountant')}}" 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>Account 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">Accountant ID </label>
													<input type="text" name="accountant_id" id="accountant_id" class="form-control" value="{{$newAccountantId}}" 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">Accountant</label>
													</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">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>
									</div>
								</div>
							</div>
							
						</div>
					</div>
					<div class="col-lg-12">
						<div class="btn-addproduct mb-4">
							<a href="{{ url('accountants') }}" class="btn btn-cancel me-2">Cancel</a>
							<button type="submit" id="submitBtn" class="btn btn-submit">Save Accountant</button>
						</div>
					</div>
				</form>
			<!-- /add -->

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

	
	<!-- /Main Wrapper -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
	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).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("Accountant Created Successfully.","{{ url('accountants')}}");
				},
				error: function(xhr) {
					$('#global-loader').hide();
					errorMessage();
				}
			});
		});
	});
    
    
    
    
</script>	
	
	@include('layouts.footer')