@include('layouts.header')
		<!-- /Header -->
			
			@include('layouts.sidebar')
<style>
	.inputError{
		color:red;
	}
	</style>
			<div class="page-wrapper">
				<div class="content">
					<div class="page-header">
						<div class="add-item d-flex">
							<div class="page-title">
								<h4>Banks</h4>
								<h6>Manage your banks</h6>
							</div>
						</div>
						@if(hasPermission('bank', 'add'))

						<div class="page-btn">
							<a href="#" class="btn btn-added" data-bs-toggle="modal" data-bs-target="#add-Unit"><i data-feather="plus-circle" class="me-2"></i>Add Bank</a>
						</div>
						@endif

					</div>
					<!-- /product list -->
					<div class="card table-list-card">
						<div class="card-body">
							<div class="table-top">
								<div class="search-set">
									<div class="search-input">
										<a href="" class="btn btn-searchset"><i data-feather="search" class="feather-search"></i></a>
									</div>
								</div>
								<!--<div class="search-path">
									<a class="btn btn-filter" id="filter_search">
										<i data-feather="filter" class="filter-icon"></i>
										<span><img src="assets/img/icons/closes.svg" alt="img"></span>
									</a>
								</div>
								<div class="form-sort">
									<i data-feather="sliders" class="info-img"></i>
									<select class="select">
										<option>Sort by Date</option>
										<option>Newest</option>
										<option>Oldest</option>
									</select>
								</div>-->
							</div>
							<!-- /Filter -->
							<div class="card" id="filter_inputs">
								<div class="card-body pb-0">
									<div class="row">
										<div class="col-lg-3 col-sm-6 col-12">
											<div class="input-blocks">
												<i data-feather="zap" class="info-img"></i>
												<select class="select">
													<option>Choose Unit</option>
													<option>Lenevo</option>
													<option>Boat</option>
													<option>Nike</option>
												</select>
											</div>
										</div>
										<div class="col-lg-3 col-sm-6 col-12">
											<div class="input-blocks">
												<i data-feather="calendar" class="info-img"></i>
												<div class="input-groupicon">
													<input type="text" class="datetimepicker" placeholder="Choose Date" >
												</div>
											</div>
										</div>
										<div class="col-lg-3 col-sm-6 col-12">
											<div class="input-blocks">
												<i data-feather="stop-circle" class="info-img"></i>
												<select class="select">
													<option>Choose Status</option>
													<option>Active</option>
													<option>Inactive</option>
												</select>
											</div>
										</div>
										<div class="col-lg-3 col-sm-6 col-12 ms-auto">
											<div class="input-blocks">
												<a class="btn btn-filters ms-auto"> <i data-feather="search" class="feather-search"></i> Search </a>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /Filter -->
							<div class="table-responsive">
								<table class="table  datanew">
									<thead>
										<tr>
											 @if(hasPermission('bank', 'update') || hasPermission('bank', 'delete'))

											<th class="no-sort">Action</th>
											@endif
											<th>Bank</th>
											 @if(hasPermission('bank', 'status'))

											<th>Status</th>
											@endif
										  
										</tr>
									</thead>
									<tbody>
										@foreach($banks as $row)
										<tr>
											@if(hasPermission('bank', 'update') || hasPermission('bank', 'delete'))
											<td class="action-table-data">
												<div class="edit-delete-action">
													<a class="me-2 p-2" href="#" data-bs-toggle="modal" data-bs-target="#edit-Unit" onclick="editUnit({{ $row->id }}, '{{ $row->bank_name }}','{{ $row->account_number }}','{{ $row->ifsc_code }}', '{{ $row->status }}')">
														<i data-feather="edit" class="feather-edit"></i>
													</a>
													<a class="confirm-text p-2 delete-action" data-id="{{ $row->id}}" href="javascript:void(0);">
														<i data-feather="trash-2" class="feather-trash-2"></i>
													</a>
												</div>
												
											</td>
											@endif
											<td>{{ $row->bank_name}}</td>
											 @if(hasPermission('bank', 'status'))

											<td>@if($row->status==1)<a href="{{ url('inactive_bank/'.$row->id)}}"><span class="badge badge-linesuccess">Active</span></a>@else
                                                <a href="{{ url('active_bank/'.$row->id)}}"><span class="badge badge-linedanger">Inactive</span></a>
                                            @endif</td>
											@endif
											
										</tr>
										@endforeach
										
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- /product list -->
				</div>
			</div>
			</div>
			<!-- /Main Wrapper -->

			<!-- Add Unit -->
			<div class="modal fade" id="add-Unit">
				<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 Bank</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 new-employee-field">
									<form action="{{ route('add_bank')}}" method="post" id="addBank">
										@csrf
										<div class="mb-3">
											<label class="form-label">Bank</label>
											<input type="text" name="name" class="form-control" id="add_bank_name">
										</div>
										<div class="mb-3">
											<label class="form-label">Account Number</label>
											<input type="text" name="account_number" id="account_number" class="form-control" maxlength="20" oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
											<small class="inputError" id="add-account-error"></small>
										</div>
										<div class="mb-3">
											<label class="form-label">IFSC Code</label>
											<input type="text" name="ifsc_code" id="ifsc_code" class="form-control" maxlength="11" style="text-transform: uppercase;" oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9]/g,'')" required>
											<small class="inputError" id="add-ifsc-error"></small>
										</div>
										<div class="mb-3">
											<label class="form-label">Status</label>
										<select class="select" name="status" required>
											<option value="">Choose</option>
											<option value="1">Active</option>
											<option value="0">Inactive</option>
										</select>
									</div>
										
										<div class="modal-footer-btn">
											<button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
											<button type="submit" class="btn btn-submit">Submit</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Add Unit -->

			<!-- Edit Unit -->
			<div class="modal fade" id="edit-Unit">
				<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>Edit Bank</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 new-employee-field">
									<form action="{{ route('edit_bank')}}" method="post" id="EditBankForm">
										@csrf
										<input type="hidden" id="edit-id" name="id">
										<div class="mb-3">
											<label class="form-label">Bank</label>
											<input type="text" name="bank_name" id="edit_name" class="form-control" value="Boat" required>
										</div>
										<div class="mb-3">
											<label class="form-label">Account Number</label>
											<input type="text" name="edit_account_number" id="edit_account_number" class="form-control" maxlength="20" oninput="this.value=this.value.replace(/[^0-9]/g,'')" required>
											<small class="inputError" id="edit-account-error"></small>
										</div>
										<div class="mb-3">
											<label class="form-label">IFSC Code</label>
											<input type="text" name="edit_ifsc_code" id="edit_ifsc_code" class="form-control" maxlength="11" style="text-transform: uppercase;" oninput="this.value=this.value.toUpperCase().replace(/[^A-Z0-9]/g,'')" required>
											<small class="inputError" id="edit-ifsc-error"></small>
										</div>
										<div class="mb-3">
											<label class="form-label">Status</label>
										<select class="form-control" id="edit-status" name="status" required>
											<option value="">Choose</option>
											<option value="1">Active</option>
											<option value="0">Inactive</option>
										</select>
									</div>
										
										<div class="modal-footer-btn">
											<button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
											<button type="submit" class="btn btn-submit">Update</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
		
        <script>
	$('#addBank').on('submit', function(e) {
        e.preventDefault(); // Stop form submission
        let account = $('#account_number').val().trim();
        let ifsc    = $('#ifsc_code').val().trim().toUpperCase();
        let isValid = true;
        if (!/^\d{9,20}$/.test(account)) {
            isValid = false;
			$("#add-account-error").text("Account Number must be 9 to 20 digits only.");
        }
        // IFSC validation
        if (!/^[A-Z]{4}0[A-Z0-9]{6}$/.test(ifsc)) {
            isValid = false;
			$("#add-ifsc-error").text("Enter a valid IFSC Code (Example: SBIN0001234).");
        }
        if (!isValid) {
            return false;
        }

        // If everything valid → Submit form
		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("Bank Created Successfully.","");	
			},
			error: function(xhr) {
				$('#global-loader').hide();
				errorMessage();
			}
		});
    });
	$('#EditBankForm').on('submit', function(e) {
        e.preventDefault(); // Stop form submission
        let account = $('#edit_account_number').val().trim();
        let ifsc    = $('#edit_ifsc_code').val().trim().toUpperCase();
        let isValid = true;
        // Account number validation
        if (!/^\d{9,20}$/.test(account)) {
            isValid = false;
			$("#edit-account-error").text("Account Number must be 9 to 20 digits only.");
        }
        // IFSC validation
        if (!/^[A-Z]{4}0[A-Z0-9]{6}$/.test(ifsc)) {
            isValid = false;
			$("#edit-ifsc-error").text("Enter a valid IFSC Code (Example: SBIN0001234).");
        }
        if (!isValid) {
            return false;
        }
        // If everything valid → Submit form
		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("Bank Updated Successfully.","");	
			},
			error: function(xhr) {
				$('#global-loader').hide();
				errorMessage();
			}
		});
        
    });
            function editUnit(id, name, account_number, ifsc_code, status) {
                // Set the values in the modal form
                document.getElementById('edit-id').value = id;
                document.getElementById('edit_name').value = name;
                document.getElementById('edit_account_number').value = account_number;
                document.getElementById('edit_ifsc_code').value = ifsc_code;
                
                console.log("Editing User Type:", { id, name, status });  // Debugging line
        
                // Set the selected status
                var statusSelect = document.getElementById('edit-status');
                statusSelect.value = status; 
                
                // Debugging: Log selected value
                console.log("Status Select Value:", statusSelect.value);  // Debugging line
                
                // Ensure that the correct option is selected
                Array.from(statusSelect.options).forEach(function(option) {
                    console.log("Option Value:", option.value);  // Debugging line
                    if (option.value == status) {
                        option.selected = true;
                    }
                });
            }
        



	$(document).ready(function () {
		$.ajaxSetup({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			}
        });

		$(document).on('click', '.delete-action', function (e) {
			
            e.preventDefault();
            var userId = $(this).data('id');
			
            var deleteUrl = "{{ url('delete-bank') }}/" + userId;

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({

						
                        url: deleteUrl,
                        method: 'DELETE',
                        success: function (response) {
                            Swal.fire(
                                'Deleted!',
                                'Bank has been deleted.',
                                'success'
                            ).then(() => {
                                location.reload();
                            });
                        },
                        error: function (xhr, status, error) {
                            Swal.fire(
                                'Error!',
                                'There was a problem deleting the user.',
                                'error'
                            );
                        }
                    });
                }
            });
        });

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